Java を使用して、JHipster に基づいてフロントエンドとバックエンドの分離アプリケーションを開発する方法

Java を使用して、JHipster に基づいてフロントエンドとバックエンドの分離アプリケーションを開発する方法

前書き:
今日のソフトウェア開発では、フロントエンドとバックエンドの分離はますます一般的になってきており、開発者の間で人気があります。 JHipster は、Java を使用して最新の Web アプリケーションを構築するための強力なツールであり、Spring Boot や Angular などのテクノロジを組み合わせて、アプリケーションを迅速に開発する機能を提供します。この記事では、Java を使用して JHipster に基づいたフロントエンドとバックエンドの分離アプリケーションを開発する方法を紹介し、コード例を示します。

JHipster 概要:
JHipster は、最新の Web アプリケーションを生成するための開発プラットフォームです。 Spring Boot、Spring Security、Angular、React、Vue などのテクノロジーを組み合わせて、アプリケーション構築プロセスを簡素化します。 JHipster は、ユーザー管理、認証と認可、データベース アクセス、フロントエンド ページなど、すぐに使える多くの機能を提供します。 JHipster を使用することで、開発者は完全に機能し、効率的で信頼性の高いアプリケーションを迅速に構築できます。

フロントエンドとバックエンドの分離アーキテクチャ:
フロントエンドとバックエンドの分離アーキテクチャは、フロントエンドとバックエンドのコードを独立して開発、展開、保守します。フロントエンドは API を通じてバックエンドと通信し、データを取得してページをレンダリングします。このアーキテクチャの利点は、フロントエンドとバックエンドを並行して開発できるため、開発プロセス中の調整や依存関係の問題が軽減され、マルチプラットフォームおよびマルチターミナルのアプリケーション開発もサポートされることです。

ステップ 1: JHipster をインストールし、プロジェクトを作成します
開始する前に、Java、Node.js、Yarn がインストールされていることを確認してください。

1. コマンド ライン ツールを開き、JHipster をインストールします:

   npm install -g generator-jhipster

2. 新しい JHipster プロジェクトを作成します:

   jhipster

プロンプトに従って、使用するテクノロジー スタックとコンポーネントを選択します。

ステップ 2: フロントエンド アプリケーションを作成する

1. プロジェクトのルート ディレクトリに、「frontend」という名前のフォルダーを作成します:

   mkdir frontend

2. フロントエンド フォルダーに移動し、Angular CLI を使用して新しい Angular アプリケーションを作成します:

   cd frontend
   ng new myapp

3. myapp ディレクトリに移動して、開発サーバーを起動します:

   cd myapp
   ng serve

これで、ブラウザで http://localhost:4200 にアクセスして、Angular アプリケーションを表示できるようになります。

ステップ 3: バックエンドと通信する

1. src/main/java/com/mycompany/myapp/config/Constants.java ファイルを開き、フロントエンドを構成しますバックエンド通信 API パス:

   public static final String API_URL = "/api";

2. src/main/java/com/mycompany/myapp/config/SecurityConfiguration.java ファイルを開き、Cross Origin Resource Sharing (CORS) を許可します。

   @Configuration
   @EnableWebSecurity
   @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
   public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
   
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // ...
   
        http.cors()
            .and()
            .csrf()
            .disable()
            .headers()
            .frameOptions()
            .disable()
            .cacheControl()
            .disable();
    }
   }

3. src/main/java/com/mycompany/myapp/web/rest/UserResource.java ファイルを開き、ユーザー関連の API パスを /api/users に変更します。

   @RestController
   @RequestMapping("/api")
   public class UserResource {
   
    // ...
   
    @GetMapping("/users")
    public ResponseEntity<List<UserDTO>> getAllUsers(Pageable pageable) {
        Page<UserDTO> page = userService.getAllManagedUsers(pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(ServletUriComponentsBuilder.fromCurrentRequest(), page);
        return ResponseEntity.ok().headers(headers).body(page.getContent());
    }
   }

4. frontend/src/app/app.component.ts ファイルを開き、HttpClient を使用してバックエンド API データを取得します。上記のコード例では、フロントエンド アプリケーションはバックエンドから取得したユーザーのリストをページに表示します。

概要:

JHipster を使用すると、Java ベースのフロントエンドとバックエンドの分離アプリケーションを簡単に開発できます。上記の手順は、必要に応じて拡張および最適化できる基本的なフレームワークを提供します。この記事が、JHipster を使用してフロントエンドとバックエンドの分離アプリケーションの開発をすぐに始めるのに役立つことを願っています。コーディングを楽しんでください!

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