Java を使用して JHipster に基づいたフロントエンド開発アプリケーションを開発する方法

Java を使用して JHipster に基づいたフロントエンド開発アプリケーションを開発する方法

前書き:
フロントエンド開発の分野では、JHipster は非常に人気のあるオープンソース ツールで、開発者が最新の Web アプリケーションを迅速に構築できるようにします。 JHipster は、Java、Spring Boot、Angular、React など、一般的に使用される多くのフロントエンドおよびバックエンド テクノロジを統合し、開発者がフル機能の Web アプリケーションを迅速に構築できるようにします。この記事では、Java を使用して JHipster に基づいたフロントエンド開発アプリケーションを開発する方法を紹介し、具体的なコード例を示します。

1. JHipster のインストール
   まず、JHipster をインストールする必要があります。 JHipster は Yeoman ベースのコード ジェネレーターであり、npm を通じてインストールできます:

npm install -g generator-jhipster

インストールが完了したら、インストールが成功したかどうかを確認できます:

jhipster --version

2. 新しい JHipster プロジェクトを作成します。
   コマンド ラインでプロジェクトを作成するディレクトリに移動し、次のコマンドを実行します。

jhipster

JHipster では、いくつかのオプションを選択するよう求められます。フロントエンド テクノロジ (Angular または React)、データベース タイプなどの選択など、プロジェクトを構成します。ニーズに基づいて選択してください。

3. フロントエンド アプリケーションの開発
   JHipster は、すべてのフロントエンド コードとリソース ファイルを含むフロントエンド アプリケーション用の別のディレクトリを提供します。ここでは、フロントエンド フレームワークとして Angular を使用しますが、React などの他のフレームワークの使用を選択することもできます。

フロントエンド ディレクトリを入力します:

cd src/main/webapp

このディレクトリには、すべての Angular コードとリソース ファイルが含まれるアプリ フォルダーが表示されます。

アプリ ディレクトリを開くと、home という名前のサブディレクトリが見つかります。これは、アプリの開発を開始できるサンプル ページです。

4. フロントエンド コードの記述
   ホーム ディレクトリ内のファイルを開くと、home.component.ts という名前のファイルが見つかります。これは Angular コンポーネント定義ファイルであり、コンポーネントのロジックとビューが含まれています。

任意のテキスト エディタを使用してファイルを開いて、コードの記述を開始できます。簡単な例を次に示します。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  title = 'Hello, JHipster!';

  constructor() { }

  ngOnInit(): void {
  }
}

上記のコードは、title という名前のプロパティを持つ HomeComponent という名前の Angular コンポーネントを定義します。 HTML テンプレートでこの属性を使用してタイトルを表示できます。

5. フロントエンド テンプレートの作成
   ホーム ディレクトリには、home.component.html という名前のファイルもあります。これは、コンポーネントのビューを定義するコンポーネントの HTML テンプレート ファイルです。

home.component.html を開いて、次の内容を記述します。

<h1 id="title">{{ title }}</h1>

上記のコードは、コンポーネントのタイトルを表示するだけです。

6. アプリケーションを実行します
   プロジェクトのルート ディレクトリに戻り、次のコマンドを実行してアプリケーションを開始します。

./mvnw

正常に起動したら、ブラウザで http:// /localhost:8080/ にアクセスすると、「Hello, JHipster!」というページが表示されます。

7. 高度な機能と高度な開発
   上記の基本機能に加えて、JHipster はルーティング設定、認証と認可、API 呼び出しなど、その他の多くの高度な機能と高度な開発オプションも提供します。 。 JHipster のドキュメントとコミュニティ リソースを通じて詳細を学ぶことができます。

結論:
この記事では、Java を使用して JHipster に基づいたフロントエンド開発アプリケーションを開発する方法を紹介します。 JHipster を使用してフル機能の Web アプリケーションを迅速に構築し、基本的なフロントエンド開発プロセスを示し、具体的なコード例を提供しました。 JHipster を使用してフロントエンド アプリケーションを開発できるように、この記事が少しでも役立つことを願っています。

以上がJava を使用して JHipster に基づいたフロントエンド開発アプリケーションを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。