JHipsterで新しいAPIとビューを作成する

1. 前書き

このチュートリアルでは、https://www.baeldung.com/jhipster [JHipster]アプリケーション内に新しいAPIを作成する方法を説明します。 次に、そのAPIをフロントエンドディスプレイに統合します。

2. サンプルアプリケーション

このチュートリアルでは、簡単な書店アプリケーションを使用します。
本屋は一枚岩として建てられています。 フロントエンドにlink:/spring-boot-angular-web[Angular]を使用し、次のフィールドを持つ_book_という名前の単一のエンティティを持っています。
  • タイトル

  • 著者

  • 公開されたデータ

  • 価格

  • JHipsterは、ブックの簡単な操作を提供するAPIとフロントエンドビューを自動的に生成します*:表示、作成、編集、削除。

    このチュートリアルでは、*新しいAPIを呼び出すフロントエンドのボタンとともに、ユーザーが本を購入できるようにするAPI *を追加します。
    APIと購入のフロントエンドの側面にのみ焦点を当てます。 支払い処理は行わず、最小限の検証のみを行います。

3. スプリングブートの変更

JHipsterは、新しいlink:/spring-controllers[controllers]を作成するためのhttps://www.jhipster.tech/creating-a-spring-controller/[generator]を提供します。 ただし、このチュートリアルでは、* APIと関連コードを手動で作成します*。

3.1. リソースクラス

最初のステップは、生成された_BookResource_クラスを更新することです。 *フロントエンドコードが呼び出す新しいエンドポイントを追加します:
@GetMapping("/books/purchase/{id}")
public ResponseEntity<BookDTO> purchase(@PathVariable Long id) {
    Optional<BookDTO> bookDTO = bookService.purchase(id);
    return ResponseUtil.wrapOrNotFound(bookDTO);
}
これにより、_ / books / purchase / \ {id} _に新しいAPIエンドポイントが作成されます。 入力は書籍の_id_のみで、購入後の新しい在庫レベルを反映する_BookDTO_を返します。

3.2. サービスインターフェイスとクラス

ここで、新しい_purchase_メソッドを含めるために_BookService_インターフェースを更新する必要があります:*
Optional<BookDTO> purchase(Long id);
次に、_BookServiceImpl_クラスに新しいメソッドを実装する必要があります。
@Override
public Optional<BookDTO> purchase(Long id) {
    Optional<BookDTO> bookDTO = findOne(id);
    if (bookDTO.isPresent()) {
        int quantity = bookDTO.get().getQuantity();
        if (quantity > 0) {
            bookDTO.get().setQuantity(quantity - 1);
            Book book = bookMapper.toEntity(bookDTO.get());
            book = bookRepository.save(book);
            return bookDTO;
        }
        else {
            throw new BadRequestAlertException("Book is not in stock", "book", "notinstock");
        }
    }
    return Optional.empty();
}
このコードで何が起こっているのか見てみましょう。 *最初に、そのid_id_で本を検索し、存在を確認します。 そうでない場合は、空のlink:/java-optional[_Optional_].*を返します。
存在する場合は、ゼロよりも大きい在庫レベルがあることを確認します。 それ以外の場合は、_BadRequestAlertException._をスローします。この例外は通常、JHipsterのRESTレイヤーでのみ使用されますが、ここではフロントエンドに有用なエラーメッセージを返す方法を示すために使用します。
それ以外の場合、在庫がゼロより大きい場合は、在庫を1つ減らし、リポジトリに保存して、更新されたDTOを返します。

3.3. セキュリティ構成

必要な最後の変更は、_SecurityConfiguration_クラスにあります。
.antMatchers("/api/books/purchase/**").authenticated()
これにより、認証されたユーザーのみが新しいAPIの呼び出しを許可されます。

4. フロントエンドの変更

次に、フロントエンドの変更に焦点を当てましょう。 * JHipsterは、1冊の本を表示するためのビューを作成します。そこに新しい購入ボタンを追加します*。

4.1. サービスクラス

最初に、*既存の_book.service.ts_ファイルに新しいメソッドを追加する必要があります。*このファイルにはブックオブジェクトを操作するためのメソッドが既に含まれているため、新しいAPIのロジックを追加するのに適した場所です。
purchase(id: number): Observable<EntityResponseType> {
    return this.http
        .get<IBook>(`${this.resourceUrl}/purchase/${id}`, { observe: 'response' })
        .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}

4.2. 成分

次に、* _ book.component.ts _。*のコンポーネントコードを更新する必要があります。Angularブックサービスで新しいメソッドを呼び出し、サーバーからの応答をリッスンする関数を作成します。
purchase(id: number) {
    this.bookService.purchase(id).subscribe(
        (res: HttpResponse<IBook>) => {
            this.book = res.body;
        },
        (res: HttpErrorResponse) => console.log(res.message)
    );
}

4.3. View

最後に、コンポーネントの新しい購入方法を呼び出すボタンをブックビューに追加できます*。
<button type="button"
             class="btn btn-primary"
             (click)="purchase(book.id)">
    <span>Purchase</span>
</button>
以下の画像は、フロントエンドの更新されたビューを示しています。
link:/uploads/jhipster-custom-api-frontend-257x300.jpg []
新しい_Purchase_ボタンをクリックすると、新しいAPIが呼び出され、フロントエンドは新しい在庫ステータスで自動的に更新されます(または、何か問題が発生した場合はエラーを表示します)。

5. 結論

このチュートリアルでは、JHipsterでカスタムAPIを作成し、フロントエンドに統合する方法を見てきました。
APIとビジネスロジックをSpring Bootに追加することから始めました。 次に、フロントエンドコードを変更して、新しいAPIを利用し、結果を表示しました。 ほんの少しの努力で、JHipsterが自動的に生成する既存の_CRUD_操作の上に新しい機能を追加することができました。
そしていつものように、コードは利用可能ですhttps://github.com/eugenp/tutorials/tree/master/jhipster-5/bookstore-monolith[over on GitHub]。