JHIPSTER6.1.2
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[JHIPSTER一覧]]
*目次 [#zc4d56ef]
#contents
[[JHIPSTER JDL]]
* JHIPSTERとは、 [#v6981c80]
spring bootのscaffoldをするツールです。vueとはangularとか...
内部でyoemanをつかって、生成しているのですが、
その時に使うコマンドラインは、cmd.exeやgit for windowsや...
https://cmder.net/
をつかってください。(日本語のファイル名、表示できるけど、...
yoemanの公式ページで、しっかりと、指定されてました。
cmdは、yoemanのインタラクティブなやりとりで、文字化けや色...
git for windows や cygwinでは、矢印キーでの選択ができない...
というか、microsoftは、このcmderを、windowsのデフォルトの...
** 本家 [#na91159e]
https://www.jhipster.tech/
** 書籍 [#eed9fd46]
*** THE JHIPSTER MINI-BOOK [#aaa6aedc]
https://corneliu.cl/docs/jHipster-5.pdf
*** Full Stack Development with JHipster [#q3720804]
https://www.oreilly.com/library/view/full-stack-developme...
** JHIPSTERの目標 [#b59e03d0]
- 完全で最新のWebアプリケーションまたはマイクロサービスア...
- Spring Bootによるサーバーサイドの高性能で堅牢なJavaスタ...
- Angular、React、Bootstrapを搭載した、洗練されたモダンで...
- JHipster Registry、Netflix OSS、Elastic StackおよびDock...
- Yeoman、Webpack、Maven / Gradleを使ってアプリケーション...
** ためしてみる [#q8a2659e]
JHipster Quick Start の訳です。
*** 試してみた結果の結論 [#a5432428]
試してみた結果、2019/08/01の時点では、追加機能の面からい...
みるかぎり、JHIPSTER6よりも、JHIPSTER5のほうが、充実して...
https://www.jhipster.tech/modules/marketplace/#/list
ちょっと、枯れた技術のJHIPSTER5を選択するのが、いろいろ、...
JHIPSTER6からは、jhipster-moduleのかわりに、bule-printと...
以下は、そんなことも、しらずに、インストールしていったと...
*** JHipsterをインストールする [#ee94119c]
npm install -g generator-jhipster
バージョンを指定してインストールすることもできるから、も...
*** JHipsterをアップデートする [#x04a9249]
一旦削除して、インストールしたらいい。
npm uninstall -g generator-jhipster
npm install -g generator-jhipster
*** 新しいディレクトリを作成してそこに行く [#p919b41c]
mkdir myApp && cd myApp
*** JHipsterを実行して画面の指示に従います [#zb5a9989]
ここで、
https://cmder.net/
または、PowerShell
をつかわないと、windowsでは、正しくインタラクティブしてく...
jhipster
ここでwindows10ではエラーがでる。ps1ファイルが実行できな...
PowerShell Get-ExecutionPolicy
で確認
PowerShell Set-ExecutionPolicy RemoteSigned
すると、下記のような質問がでてくる。
? Which *type* of application would you like to create?
> Monolithic application (recommended for simple projects)
Microservice application
Microservice gateway
JHipster UAA server (for microservice OAuth2 authentic...
これは、yoemanを使っているためだ
(あと、だれか、このしょっぱなの、英語の質問メニュー、日...
成功すると、次のメッセージが表示されるだろう。
Server application generated successfully.
Run your Spring Boot application:
./mvnw (mvnw if using Windows Command Prompt)
Client application generated successfully.
Start your Webpack development server with:
npm start
> my-app@0.0.0 cleanup C:\jhip\myApp
> rimraf target/classes/static/ target/classes/aot
INFO! Congratulations, JHipster execution is complete!
しまった、デフォルト設定だと、gradleではなく、mavenをつか...
それに、vue.jsは、選択肢にはなかった。
もう一回、やってみる。次は、vue.jsはJHIPSTER5で登場したブ...
インストールされてなくてはならないので、次のコマンドで、...
npm i -g generator-jhipster-vuejs
そんでもって、下記のコマンドでためしてみる。
jhipster --blueprint vuejs
今度は、gradle使うようにした、フロントエンドは、vueしか選...
ここで、gitに登録しておこう。後で、エンティティにフィール...
いろいろ、こまごま変更しようとして、やらかしたときに、復...
git init
git add . --all
git commit -m 'first commit'
とかでいいだろうな。
さてと、ここで、サーバを
./gradlew
で起動させて、
フロントエンドを
npm start
で起動させると、ホーム画面が生成された。
すごい量のコードがビルドされていく、自前で、組んでいたら...
で、さっきのコマンドラインでの、インタラクティブな、英語...
.yo-rc.json
というファイルにまとめられているという。
これだけをコピーして、もう一回、myAppフォルダをごっそりし...
やってみたこと
.yo-rc.jsonをバックアップしておく
myAppフォルダを空っぽにする
.yo-rc.jsonファイルだけ戻す
jhipster --blueprint vuejs
さあ、これで、質問攻めにあわなくてすむだろう。。。。
*** JDL Studioを使用してエンティティをモデル化 [#te3b447b]
サンプルサイト
https://github.com/jhipster/jdl-samples
サンプルとして、下記のサイトのコードを
https://www.jhipster.tech/jdl-studio/
jhipster-jdl.jh
として、ダウンロードしてください。
*** であなたのエンティティを生成する [#u0525727]
jhipster import-jdl jhipster-jdl.jh
** 自動生成されたサンプル [#e9e2322b]
*** 自動生成されたAngularサンプル [#f7eb3204]
https://github.com/jhipster/jhipster-sample-app
*** 自動生成されたReactサンプル [#pc8c4f52]
https://github.com/jhipster/jhipster-sample-app-react
*** 自動生成されたVueサンプル [#r2a85d6d]
https://github.com/jhipster/jhipster-sample-app-vuejs
*** 自動生成されたKotlinサンプル [#ra738fee]
https://github.com/jhipster/jhipster-sample-app-kotlin
*** 自動生成された.NETサンプル [#k52f1bb7]
https://github.com/jhipster/jhipster-net-sample-app-templ...
** Windowsにいれるには [#m16edda8]
公式ドキュメントには、書いてないところを書き足してみます。
まあ、公式にWindowsでの、入れ方が書いてないということは、...
*** gradle つかいたいよね [#s607f8cf]
https://github.com/gradle/gradle-completion
*** sdkmanいるかわかんないけど、いれとく [#k68077f2]
https://sdkman.io/install
*** でもそのまえに、gowいれないと、zipコマンドとかつかえ...
https://github.com/bmatzelle/gow/releases
** ひさしぶりに、JHIPSTERやってみる。 [#hb550fd4]
VUEも対応するように、なってる。時代の波に乗っていこうとす...
気に入ったよ。おれも、ついていこう。
というわけで、インストールしてみる。ちなみに、いまこの記...
進化がはやい。
さて、どこから、手をつけよう。ちょっと、どんなさいとがあ...
* JHIPSTERから、VUEプロジェクトを生成する方法を紹介してい...
** ブラウザ上で使いながら、学べそうなサイト [#f95d742c]
https://www.jhipster.tech/using-vue/
** JHipster-vuejs [#e02fe8c4]
https://github.com/jhipster/jhipster-vuejs
簡単な手順が書いてある、概念的な説明は乏しい感じがする。
** Using Vue [#kff7387c]
本家サイトの紹介ページ
一番信頼できると思う。
** Creating a modern Web app using Vue.js and Spring Boot...
わかりやすそうな、サイト
https://blog.ippon.tech/creating-a-modern-web-app-using-v...
** generator-jhipster-vuejs [#ofa3f8d8]
npmのプロジェクト
https://www.npmjs.com/package/generator-jhipster-vuejs
** インド人が、英語でしゃべっている、解説動画 [#sda0c4d9]
https://www.youtube.com/watch?v=Cbtdvp6e36Q
ナマステ、よくわからないが、BGMがわりに、聞いておこう。
上記の、わかりやすそうな、解説サイトを、Googleで翻訳した...
* Vue.jsとSpring Bootを使用してJHipsterで最新のWebアプリ...
*** 訳者注 [#x15eab19]
以下の記事は、テオレブランさんが、 2019年2月21日 に、
https://blog.ippon.tech/creating-a-modern-web-app-using-v...
で紹介した記事の、英語が苦手な人が、翻訳してみたバージョ...
画像を張るのは、このブログの仕組みでは大変なため、、元の...
** 初めに [#rd0eb5d5]
Vue.jsはJavascriptフロントエンドの世界における新しいトレ...
Vue.jsアプリケーションの構造は、ページを構築するためにコ...
*** vue.js [#h2988cd2]
https://www.vuemastery.com/courses/intro-to-vue-js/vue-in...
は、特にAngularまたはReactを使用したことがない場合にVue.j...
これは現在人気のあるフレームワークのサイズ比較(縮小)で...
https://gist.github.com/Restuta/cda69e50a853aa64912d
| Name | Size |
| ------------------------ | ----- |
| Angular 2 | 566K |
| Ember 2.2.0 | 435K |
| React 0.14.5 + React DOM | 133K |
| React 16.2.0 + React DOM | 97K |
| Vue 2.4.2 | 58K |
| Inferno 1.2.2 | 48K |
| Preact 7.2.0 | 16K |
前にも述べたように、Vue.jsのシンプルさは非常に軽量で他の...
一方、Vue.jsは適切なツールを使用して堅牢なシングルページ...
** JHipster の チュートリアル動画 [#ecb98c3c]
JHipsterに慣れていないのであれば、このビデオ
https://www.youtube.com/watch?v=-VQ_SVkaXbs
を見て、JHipsterで何ができるか、英語ですが、インストール...
* JHipsterブループリントを使ったVue.js [#jec57dd3]
https://www.jhipster.tech/modules/creating-a-blueprint/
デフォルトでは、JHipsterはフロントエンドフレームワークに...
https://www.jhipster.tech/modules/creating-a-blueprint/
にあります。
** インストール [#dd84ee75]
フロントエンドの生成には、公式のVue.jsブループリントが使...
https://github.com/jhipster/jhipster-vuejs
のインストール手順に従うことができます。私がこのブログ記...
** アプリケーション生成 [#cd758235]
まず新しいフォルダを作成し、vuejsブループリントを付けてJH...
mkdir vuejs-app
cd vuejs-app
jhipster --blueprint vuejs
質問ごとにデフォルトの回答を選択できます。ブループリント...
Using blueprint generator-jhipster-vuejs for client subg...
? Which *Framework* would you like to use for the client...
> Vue.js
この.yo-rc.jsonは、この記事で参照したのと同じアプリケーシ...
** エンティティ生成 [#icd656d9]
アプリケーションを起動する前に、3つのエンティティを含む単...
./mvnwコマンドを実行してアプリケーションを起動し、http:/...
** Vue.js構造の詳細について [#p851f021]
Vue.jsアプリケーション全体を含むフォルダはsrc/main/webapp...
** 設定 [#sb54a3a7]
*** コア [#pace90cd]
Vueのインスタンスは、ファイル内に作成されたsrc/main/webap...
どちらのファイルも複数のものを構成します。
- 国際化
- ルーター
- Vuex(アプリケーションの状態を保存するために使用されま...
- サービス(カスタムサービスを追加する必要があります。そ...
** 国際化 [#fb266add]
Vue.jsアプリケーションはすでにさまざまな言語で動作するよ...
テンプレート内:
<h1 class="display-4" v-text="$t('home.title')">Welcome,...
コンポーネント内(名前パラメータを使用できます)
// "A Operation is updated with identifier {{ param }}"
const message = this.$t('blogpostApp.operation.updated',...
** ルート [#gbf04913]
Reactと同様に、すべてのルートは1つのファイルに集中化され...
カスタムルートはコメントの後に追加する必要が// jhipster-n...
このフィールドmetaはユーザーの権限をチェックするために使...
// This route will only allow users with the "ROLE_ADMIN...
{
path: '/admin/user-management',
name: 'JhiUser',
component: JhiUserManagementComponent,
meta: { authorities: ['ROLE_ADMIN'] }
}
** エンティティページ [#s8dddd30]
*** 構造 [#e13f35d4]
フォルダsrc/main/webapp/app/shared/modelにはAngularのモデ...
新しいページを作成するときはカスタムサービス/コンポーネン...
** 検証 [#x868a833]
検証はvuelidateライブラリを使って行われ、使い方は簡単です...
const validations: any = {
operation: {
date: {
required
},
description: {},
amount: {
required,
numeric
}
}
};
@Component({
validations
})
export default class OperationUpdate extends Vue {
...
}
このファイルoperation-update.vueは検証ルールを使用してカ...
<input type="number" class="form-control" name="amount" ...
:class="{'valid': !$v.operation.amount.$invalid, 'in...
<div v-if="$v.operation.amount.$anyDirty && $v.operation...
<small class="form-text text-danger" v-if="!$v.opera...
This field is required.
</small>
<small class="form-text text-danger" v-if="!$v.opera...
This field should be a number.
</small>
</div>
重要なオブジェクトは$ vです。これは検証されたフィールドの...
* 結論 [#k4f59b8b]
Vue.jsはスムーズな学習曲線を持ち、生産的になるのに必要な...
JHipsterは、最新のWebアプリケーションを完成させるために必...
終了行:
[[JHIPSTER一覧]]
*目次 [#zc4d56ef]
#contents
[[JHIPSTER JDL]]
* JHIPSTERとは、 [#v6981c80]
spring bootのscaffoldをするツールです。vueとはangularとか...
内部でyoemanをつかって、生成しているのですが、
その時に使うコマンドラインは、cmd.exeやgit for windowsや...
https://cmder.net/
をつかってください。(日本語のファイル名、表示できるけど、...
yoemanの公式ページで、しっかりと、指定されてました。
cmdは、yoemanのインタラクティブなやりとりで、文字化けや色...
git for windows や cygwinでは、矢印キーでの選択ができない...
というか、microsoftは、このcmderを、windowsのデフォルトの...
** 本家 [#na91159e]
https://www.jhipster.tech/
** 書籍 [#eed9fd46]
*** THE JHIPSTER MINI-BOOK [#aaa6aedc]
https://corneliu.cl/docs/jHipster-5.pdf
*** Full Stack Development with JHipster [#q3720804]
https://www.oreilly.com/library/view/full-stack-developme...
** JHIPSTERの目標 [#b59e03d0]
- 完全で最新のWebアプリケーションまたはマイクロサービスア...
- Spring Bootによるサーバーサイドの高性能で堅牢なJavaスタ...
- Angular、React、Bootstrapを搭載した、洗練されたモダンで...
- JHipster Registry、Netflix OSS、Elastic StackおよびDock...
- Yeoman、Webpack、Maven / Gradleを使ってアプリケーション...
** ためしてみる [#q8a2659e]
JHipster Quick Start の訳です。
*** 試してみた結果の結論 [#a5432428]
試してみた結果、2019/08/01の時点では、追加機能の面からい...
みるかぎり、JHIPSTER6よりも、JHIPSTER5のほうが、充実して...
https://www.jhipster.tech/modules/marketplace/#/list
ちょっと、枯れた技術のJHIPSTER5を選択するのが、いろいろ、...
JHIPSTER6からは、jhipster-moduleのかわりに、bule-printと...
以下は、そんなことも、しらずに、インストールしていったと...
*** JHipsterをインストールする [#ee94119c]
npm install -g generator-jhipster
バージョンを指定してインストールすることもできるから、も...
*** JHipsterをアップデートする [#x04a9249]
一旦削除して、インストールしたらいい。
npm uninstall -g generator-jhipster
npm install -g generator-jhipster
*** 新しいディレクトリを作成してそこに行く [#p919b41c]
mkdir myApp && cd myApp
*** JHipsterを実行して画面の指示に従います [#zb5a9989]
ここで、
https://cmder.net/
または、PowerShell
をつかわないと、windowsでは、正しくインタラクティブしてく...
jhipster
ここでwindows10ではエラーがでる。ps1ファイルが実行できな...
PowerShell Get-ExecutionPolicy
で確認
PowerShell Set-ExecutionPolicy RemoteSigned
すると、下記のような質問がでてくる。
? Which *type* of application would you like to create?
> Monolithic application (recommended for simple projects)
Microservice application
Microservice gateway
JHipster UAA server (for microservice OAuth2 authentic...
これは、yoemanを使っているためだ
(あと、だれか、このしょっぱなの、英語の質問メニュー、日...
成功すると、次のメッセージが表示されるだろう。
Server application generated successfully.
Run your Spring Boot application:
./mvnw (mvnw if using Windows Command Prompt)
Client application generated successfully.
Start your Webpack development server with:
npm start
> my-app@0.0.0 cleanup C:\jhip\myApp
> rimraf target/classes/static/ target/classes/aot
INFO! Congratulations, JHipster execution is complete!
しまった、デフォルト設定だと、gradleではなく、mavenをつか...
それに、vue.jsは、選択肢にはなかった。
もう一回、やってみる。次は、vue.jsはJHIPSTER5で登場したブ...
インストールされてなくてはならないので、次のコマンドで、...
npm i -g generator-jhipster-vuejs
そんでもって、下記のコマンドでためしてみる。
jhipster --blueprint vuejs
今度は、gradle使うようにした、フロントエンドは、vueしか選...
ここで、gitに登録しておこう。後で、エンティティにフィール...
いろいろ、こまごま変更しようとして、やらかしたときに、復...
git init
git add . --all
git commit -m 'first commit'
とかでいいだろうな。
さてと、ここで、サーバを
./gradlew
で起動させて、
フロントエンドを
npm start
で起動させると、ホーム画面が生成された。
すごい量のコードがビルドされていく、自前で、組んでいたら...
で、さっきのコマンドラインでの、インタラクティブな、英語...
.yo-rc.json
というファイルにまとめられているという。
これだけをコピーして、もう一回、myAppフォルダをごっそりし...
やってみたこと
.yo-rc.jsonをバックアップしておく
myAppフォルダを空っぽにする
.yo-rc.jsonファイルだけ戻す
jhipster --blueprint vuejs
さあ、これで、質問攻めにあわなくてすむだろう。。。。
*** JDL Studioを使用してエンティティをモデル化 [#te3b447b]
サンプルサイト
https://github.com/jhipster/jdl-samples
サンプルとして、下記のサイトのコードを
https://www.jhipster.tech/jdl-studio/
jhipster-jdl.jh
として、ダウンロードしてください。
*** であなたのエンティティを生成する [#u0525727]
jhipster import-jdl jhipster-jdl.jh
** 自動生成されたサンプル [#e9e2322b]
*** 自動生成されたAngularサンプル [#f7eb3204]
https://github.com/jhipster/jhipster-sample-app
*** 自動生成されたReactサンプル [#pc8c4f52]
https://github.com/jhipster/jhipster-sample-app-react
*** 自動生成されたVueサンプル [#r2a85d6d]
https://github.com/jhipster/jhipster-sample-app-vuejs
*** 自動生成されたKotlinサンプル [#ra738fee]
https://github.com/jhipster/jhipster-sample-app-kotlin
*** 自動生成された.NETサンプル [#k52f1bb7]
https://github.com/jhipster/jhipster-net-sample-app-templ...
** Windowsにいれるには [#m16edda8]
公式ドキュメントには、書いてないところを書き足してみます。
まあ、公式にWindowsでの、入れ方が書いてないということは、...
*** gradle つかいたいよね [#s607f8cf]
https://github.com/gradle/gradle-completion
*** sdkmanいるかわかんないけど、いれとく [#k68077f2]
https://sdkman.io/install
*** でもそのまえに、gowいれないと、zipコマンドとかつかえ...
https://github.com/bmatzelle/gow/releases
** ひさしぶりに、JHIPSTERやってみる。 [#hb550fd4]
VUEも対応するように、なってる。時代の波に乗っていこうとす...
気に入ったよ。おれも、ついていこう。
というわけで、インストールしてみる。ちなみに、いまこの記...
進化がはやい。
さて、どこから、手をつけよう。ちょっと、どんなさいとがあ...
* JHIPSTERから、VUEプロジェクトを生成する方法を紹介してい...
** ブラウザ上で使いながら、学べそうなサイト [#f95d742c]
https://www.jhipster.tech/using-vue/
** JHipster-vuejs [#e02fe8c4]
https://github.com/jhipster/jhipster-vuejs
簡単な手順が書いてある、概念的な説明は乏しい感じがする。
** Using Vue [#kff7387c]
本家サイトの紹介ページ
一番信頼できると思う。
** Creating a modern Web app using Vue.js and Spring Boot...
わかりやすそうな、サイト
https://blog.ippon.tech/creating-a-modern-web-app-using-v...
** generator-jhipster-vuejs [#ofa3f8d8]
npmのプロジェクト
https://www.npmjs.com/package/generator-jhipster-vuejs
** インド人が、英語でしゃべっている、解説動画 [#sda0c4d9]
https://www.youtube.com/watch?v=Cbtdvp6e36Q
ナマステ、よくわからないが、BGMがわりに、聞いておこう。
上記の、わかりやすそうな、解説サイトを、Googleで翻訳した...
* Vue.jsとSpring Bootを使用してJHipsterで最新のWebアプリ...
*** 訳者注 [#x15eab19]
以下の記事は、テオレブランさんが、 2019年2月21日 に、
https://blog.ippon.tech/creating-a-modern-web-app-using-v...
で紹介した記事の、英語が苦手な人が、翻訳してみたバージョ...
画像を張るのは、このブログの仕組みでは大変なため、、元の...
** 初めに [#rd0eb5d5]
Vue.jsはJavascriptフロントエンドの世界における新しいトレ...
Vue.jsアプリケーションの構造は、ページを構築するためにコ...
*** vue.js [#h2988cd2]
https://www.vuemastery.com/courses/intro-to-vue-js/vue-in...
は、特にAngularまたはReactを使用したことがない場合にVue.j...
これは現在人気のあるフレームワークのサイズ比較(縮小)で...
https://gist.github.com/Restuta/cda69e50a853aa64912d
| Name | Size |
| ------------------------ | ----- |
| Angular 2 | 566K |
| Ember 2.2.0 | 435K |
| React 0.14.5 + React DOM | 133K |
| React 16.2.0 + React DOM | 97K |
| Vue 2.4.2 | 58K |
| Inferno 1.2.2 | 48K |
| Preact 7.2.0 | 16K |
前にも述べたように、Vue.jsのシンプルさは非常に軽量で他の...
一方、Vue.jsは適切なツールを使用して堅牢なシングルページ...
** JHipster の チュートリアル動画 [#ecb98c3c]
JHipsterに慣れていないのであれば、このビデオ
https://www.youtube.com/watch?v=-VQ_SVkaXbs
を見て、JHipsterで何ができるか、英語ですが、インストール...
* JHipsterブループリントを使ったVue.js [#jec57dd3]
https://www.jhipster.tech/modules/creating-a-blueprint/
デフォルトでは、JHipsterはフロントエンドフレームワークに...
https://www.jhipster.tech/modules/creating-a-blueprint/
にあります。
** インストール [#dd84ee75]
フロントエンドの生成には、公式のVue.jsブループリントが使...
https://github.com/jhipster/jhipster-vuejs
のインストール手順に従うことができます。私がこのブログ記...
** アプリケーション生成 [#cd758235]
まず新しいフォルダを作成し、vuejsブループリントを付けてJH...
mkdir vuejs-app
cd vuejs-app
jhipster --blueprint vuejs
質問ごとにデフォルトの回答を選択できます。ブループリント...
Using blueprint generator-jhipster-vuejs for client subg...
? Which *Framework* would you like to use for the client...
> Vue.js
この.yo-rc.jsonは、この記事で参照したのと同じアプリケーシ...
** エンティティ生成 [#icd656d9]
アプリケーションを起動する前に、3つのエンティティを含む単...
./mvnwコマンドを実行してアプリケーションを起動し、http:/...
** Vue.js構造の詳細について [#p851f021]
Vue.jsアプリケーション全体を含むフォルダはsrc/main/webapp...
** 設定 [#sb54a3a7]
*** コア [#pace90cd]
Vueのインスタンスは、ファイル内に作成されたsrc/main/webap...
どちらのファイルも複数のものを構成します。
- 国際化
- ルーター
- Vuex(アプリケーションの状態を保存するために使用されま...
- サービス(カスタムサービスを追加する必要があります。そ...
** 国際化 [#fb266add]
Vue.jsアプリケーションはすでにさまざまな言語で動作するよ...
テンプレート内:
<h1 class="display-4" v-text="$t('home.title')">Welcome,...
コンポーネント内(名前パラメータを使用できます)
// "A Operation is updated with identifier {{ param }}"
const message = this.$t('blogpostApp.operation.updated',...
** ルート [#gbf04913]
Reactと同様に、すべてのルートは1つのファイルに集中化され...
カスタムルートはコメントの後に追加する必要が// jhipster-n...
このフィールドmetaはユーザーの権限をチェックするために使...
// This route will only allow users with the "ROLE_ADMIN...
{
path: '/admin/user-management',
name: 'JhiUser',
component: JhiUserManagementComponent,
meta: { authorities: ['ROLE_ADMIN'] }
}
** エンティティページ [#s8dddd30]
*** 構造 [#e13f35d4]
フォルダsrc/main/webapp/app/shared/modelにはAngularのモデ...
新しいページを作成するときはカスタムサービス/コンポーネン...
** 検証 [#x868a833]
検証はvuelidateライブラリを使って行われ、使い方は簡単です...
const validations: any = {
operation: {
date: {
required
},
description: {},
amount: {
required,
numeric
}
}
};
@Component({
validations
})
export default class OperationUpdate extends Vue {
...
}
このファイルoperation-update.vueは検証ルールを使用してカ...
<input type="number" class="form-control" name="amount" ...
:class="{'valid': !$v.operation.amount.$invalid, 'in...
<div v-if="$v.operation.amount.$anyDirty && $v.operation...
<small class="form-text text-danger" v-if="!$v.opera...
This field is required.
</small>
<small class="form-text text-danger" v-if="!$v.opera...
This field should be a number.
</small>
</div>
重要なオブジェクトは$ vです。これは検証されたフィールドの...
* 結論 [#k4f59b8b]
Vue.jsはスムーズな学習曲線を持ち、生産的になるのに必要な...
JHipsterは、最新のWebアプリケーションを完成させるために必...
ページ名: