JHIPSTER6.1.2 のバックアップ(No.8)

? 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 authentication)

これは、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ファイルだけあれば、復元できるか実験してみる。

やってみたこと

.yo-rc.jsonをバックアップしておく
myAppフォルダを空っぽにする
.yo-rc.jsonファイルだけ戻す
jhipster --blueprint vuejs

さあ、これで、質問攻めにあわなくてすむだろうか。。。。

↑

JDL Studioを使用してエンティティをモデル化 †

jhipster-jdl.jh

できた、上記のファイルをダウンロードしてください。

↑

であなたのエンティティを生成する †

jhipster import-jdl jhipster-jdl.jh

↑

Windowsにいれるには †

公式ドキュメントには、書いてないところを書き足してみます。

まあ、公式にWindowsでの、入れ方が書いてないということは、ねぇ。Macユーザがつくってるんでしょうね。

↑

gradle つかいたいよね †

https://github.com/gradle/gradle-completion

↑

sdkmanいるかわかんないけど、いれとく †

https://sdkman.io/install

↑

でもそのまえに、gowいれないと、zipコマンドとかつかえないよ。 †

https://github.com/bmatzelle/gow/releases

↑

ひさしぶりに、JHIPSTERやってみる。 †

VUEも対応するように、なってる。時代の波に乗っていこうとするツールの開発者が感じられる。

気に入ったよ。おれも、ついていこう。

というわけで、インストールしてみる。ちなみに、いまこの記事を書いているバージョンは、6.1.2が最新だ。

進化がはやい。

さて、どこから、手をつけよう。ちょっと、どんなさいとがあるのかしらべてみた。

↑

JHIPSTERから、VUEプロジェクトを生成する方法を紹介しているサイト †

↑

ブラウザ上で使いながら、学べそうなサイト †

https://www.jhipster.tech/using-vue/

↑

JHipster-vuejs †

https://github.com/jhipster/jhipster-vuejs

簡単な手順が書いてある、概念的な説明は乏しい感じがする。

↑

Using Vue †

本家サイトの紹介ページ

一番信頼できると思う。

↑

Creating a modern Web app using Vue.js and Spring Boot with JHipster †

わかりやすそうな、サイト

https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/

↑

generator-jhipster-vuejs †

npmのプロジェクト

https://www.npmjs.com/package/generator-jhipster-vuejs

↑

インド人が、英語でしゃべっている、解説動画 †

https://www.youtube.com/watch?v=Cbtdvp6e36Q

ナマステ、よくわからないが、BGMがわりに、聞いておこう。

上記の、わかりやすそうな、解説サイトを、Googleで翻訳したのを手直して貼ってみる。

↑

Vue.jsとSpring Bootを使用してJHipsterで最新のWebアプリケーションを作成する †

↑

訳者注 †

以下の記事は、テオレブランさんが、 2019年2月21日に、

https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/

で紹介した記事の、英語が苦手な人が、翻訳してみたバージョンです。

画像を張るのは、このブログの仕組みでは大変なため、、元の英語のほうの記事をみてくださいね。

↑

初めに †

Vue.jsはJavascriptフロントエンドの世界における新しいトレンドフレームワークであり、そのシンプルさによってWebアプリケーションをかなり速く構築することができます。

Vue.jsアプリケーションの構造は、ページを構築するためにコンポーネントとテンプレートを使用するという点でAngularアプリケーションと非常によく似ています。このビデオ

↑

vue.js †

https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/

は、特にAngularまたはReactを使用したことがない場合にVue.jsを使い始めるための優れた入門書です。

これは現在人気のあるフレームワークのサイズ比較（縮小）です（詳細はこちら）。

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はそれに最適です。

↑

JHipster の　チュートリアル動画 †

JHipsterに慣れていないのであれば、このビデオ

https://www.youtube.com/watch?v=-VQ_SVkaXbs

を見て、JHipsterで何ができるか、英語ですが、インストールから、わかりやすく解説されています。　（やはりmacユーザですね。）

↑

JHipsterブループリントを使ったVue.js †

https://www.jhipster.tech/modules/creating-a-blueprint/

デフォルトでは、JHipsterはフロントエンドフレームワークに対してAngularかReactのどちらかを選択するように求めます。青写真の概念はJHipsterバージョン5で導入されました、そして、目標はあなたがあなた自身のサブジェネレータを使わせることによってJHipsterの機能性を拡張することです。ブループリントを作成して使用する方法に関する詳細情報は、ドキュメント

https://www.jhipster.tech/modules/creating-a-blueprint/

にあります。

↑

インストール †

フロントエンドの生成には、公式のVue.jsブループリントが使用されています。ブループリントリポジトリ

https://github.com/jhipster/jhipster-vuejs

のインストール手順に従うことができます。私がこのブログ記事を書いた時点でブループリントはまだ開発中だったので、あなたはいくつかの問題に遭遇するかもしれません。あなたが部分が間違った方法でされたと思うならば、それらを報告して、プル要求を提出してください。

↑

アプリケーション生成 †

まず新しいフォルダを作成し、vuejsブループリントを付けてJHipsterを実行しましょう。

mkdir vuejs-app
cd vuejs-app
jhipster --blueprint vuejs

質問ごとにデフォルトの回答を選択できます。ブループリントが正しくインストールされていれば、次のメッセージが表示されます。

Using blueprint generator-jhipster-vuejs for client subgenerator
? Which *Framework* would you like to use for the client? (Use arrow keys)
> Vue.js

この.yo-rc.jsonは、この記事で参照したのと同じアプリケーションを生成したい場合に使用できます。ファイルはアプリケーションディレクトリに置かれ、それから実行jhipster -d --blueprint vuejsすることはどんな質問もせずにアプリケーションを生成するでしょう。

↑

エンティティ生成 †

アプリケーションを起動する前に、3つのエンティティを含む単純なJDLを使用していくつかのエンティティを生成しましょう。このコンテンツを含むentities.jdlアプリケーションのルートフォルダに名前の付いたファイルを作成するだけです。次に、Vue.jsブループリントを使用してコマンドを実行してエンティティを生成します。jhipster import-jdl entities.jdl

./mvnwコマンドを実行してアプリケーションを起動し、http：// localhost：8080 /＃/にアクセスして、すべてが正常に機能していることを確認できます。ログインすると、「エンティティ」メニューには以下の3つのエンティティが表示されます。

↑

Vue.js構造の詳細について †

Vue.jsアプリケーション全体を含むフォルダはsrc/main/webapp/appであり、構造はAngularと非常によく似ています。npm startコードを変更したときにライブコンパイル/リロードの利点を享受するために、端末でコマンドを実行することをお勧めします。AngularやReactと同様に、webpackはTypeScript?コードをJavaScript?にコンパイルしてアプリケーションをパッケージ化するために使用されます。

↑

設定 †

↑

コア †

Vueのインスタンスは、ファイル内に作成されたsrc/main/webapp/app/main.ts、と私は見てお勧めsrc/main/webapp/app/shared/config/config.tsにも。

どちらのファイルも複数のものを構成します。

国際化
ルーター
Vuex（アプリケーションの状態を保存するために使用されます）
サービス（カスタムサービスを追加する必要があります。それらを挿入することができます）

↑

国際化 †

Vue.jsアプリケーションはすでにさまざまな言語で動作するように設定されており、翻訳を含むフォルダはにありますsrc/main/webapp/i18n。この方法$t()は、ユーザーの言語に基づいてテキストを表示するために使用できます。

テンプレート内：

<h1 class="display-4" v-text="$t('home.title')">Welcome, Java Hipster!</h1>

コンポーネント内（名前パラメータを使用できます）

// "A Operation is updated with identifier {{ param }}"
const message = this.$t('blogpostApp.operation.updated', { param: param.id });

↑

ルート †

Reactと同様に、すべてのルートは1つのファイルに集中化されていますsrc/main/webapp/app/router/index.ts。JHipsterは自動的にエンティティのルートを生成します。

カスタムルートはコメントの後に追加する必要が// jhipster-needle-add-entity-to-router - JHipster will add entities to the router hereあります。これにより、他のエンティティが生成されたときに問題が発生しないようにします。

このフィールドmetaはユーザーの権限をチェックするために使用され、他の変数を渡すために使用することができます。

// This route will only allow users with the "ROLE_ADMIN" authority
{
  path: '/admin/user-management',
  name: 'JhiUser',
  component: JhiUserManagementComponent,
  meta: { authorities: ['ROLE_ADMIN'] }
}

↑

エンティティページ †

↑

構造 †

フォルダsrc/main/webapp/app/shared/modelにはAngularのモデルなどが含まれています。.vueアプリケーションの「ページ」ごとにテンプレートに関連付けられたコンポーネントがあります。

新しいページを作成するときはカスタムサービス/コンポーネント/テンプレートを作成することをお勧めします。そのため、エンティティを再生成するときに競合を解決する必要はありません。

↑

検証 †

検証はvuelidateライブラリを使って行われ、使い方は簡単です。エンティティOperationは、カスタム検証がvuelidateを使用してどのように行われるかを理解するための良い例です。OperationUpdate?あなたは以下を参照することができ、コンポーネントは検証オプションが含まれています。

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" id="operation-amount"
    :class="{'valid': !$v.operation.amount.$invalid, 'invalid': $v.operation.amount.$invalid }" v-model="$v.operation.amount.$model"  required/>
<div v-if="$v.operation.amount.$anyDirty && $v.operation.amount.$invalid">
    <small class="form-text text-danger" v-if="!$v.operation.amount.required" v-text="$t('entity.validation.required')">
        This field is required.
    </small>
    <small class="form-text text-danger" v-if="!$v.operation.amount.number" v-text="$t('entity.validation.number')">
       This field should be a number.
    </small>
</div>

重要なオブジェクトは$ vです。これは検証されたフィールドのステータスを取得するために使用できます。

↑

結論 †

Vue.jsはスムーズな学習曲線を持ち、生産的になるのに必要な時間は非常に短いです。それはAngular / Reactの優れた代替手段であり、それらのフレームワークの経験があると役立ちます。他のフレームワークページとの比較は、Vue.jsがアプリケーションに適しているかどうかを判断するのに役立ちます。

JHipsterは、最新のWebアプリケーションを完成させるために必要なものすべてを提供し、ごく短時間で運用に移すことができます。それに加えて、バックエンドはSpring Bootによる高性能で堅牢なJavaスタックとして構築されています。

JHIPSTER6.1.2 のバックアップ(No.8)

目次 †

JHIPSTERとは、 †

本家 †

書籍 †

JHIPSTERの目標 †

ためしてみる †

JHipsterをインストールする †

新しいディレクトリを作成してそこに行く †

JHipsterを実行して画面の指示に従います †