1. 引言
在本教程中，我們將學習如何在 JHipster 應用中創建新的 API。然後，我們將集成該 API 到前端顯示中。
2. 示例應用程序
對於本教程，我們將使用一個簡單的書店應用程序。
該書店構建為單體應用。它使用 Angular 作為前端，並具有一個名為 book 的單實體，包含以下字段：
- 標題
- 作者
- 出版數據
- 價格
- 數量
JHipster 自動生成 API 和前端視圖，為書店提供簡單的操作：查看、創建、編輯和刪除。
對於本教程，我們將添加一個 API，允許用户購買書籍，以及前端上調用新 API 的按鈕。
我們將專注於 API 和前端購買的方面。我們不會進行任何支付處理，並且只進行最小的驗證。
3. Spring Boot 變更
JHipster 提供了一個 生成器，用於創建新的控制器。但是，對於本教程，我們將手動創建 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);
}這會創建一個新的API端點，位於 /books/purchase/{id}。唯一的輸入是書籍的 id，並且我們會返回一個 BookDTO，它將反映購買後的新庫存水平。
3.2. 服務接口和類
現在，我們需要更新 BookService 接口，以包含一個新的 purchase 方法：
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 來確認它是否存在。如果不存在，則返回一個空 Optional。
如果它確實存在，則確保其庫存水平大於零。否則，拋出一個 BadRequestAlertException。雖然這個異常通常僅用於 JHipster 的 REST 層，但我們在這裏使用它來演示如何向前端返回有用的錯誤消息。
否則，如果庫存大於零，則將其減少一個，保存到存儲庫，並返回更新後的 DTO。
3.3. 安全配置
以下更改最終需要在 SecurityConfiguration 類中進行：
.antMatchers("/api/books/purchase/**").authenticated()這確保了對我們新 API 的調用僅限於經過身份驗證的用户。
4. 前端修改
現在，讓我們重點關注前端修改。 JHipster 創建了一個用於顯示單個書籍的視圖，並且我們將在此處添加我們的新購買按鈕。
4.1. 服務類
首先，我們需要向現有的 <em >book.service.ts</em > 文件中添加一個新的方法。該文件已經包含用於操作圖書對象的各種方法，因此它是一個添加我們新 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. 組件
然後，我們需要更新組件代碼，位於 <em >book.component.ts</em> 中。 我們將創建一個調用 Angular 書籍服務中新方法的函數，並監聽從服務器返回的響應：
purchase(id: number) {
this.bookService.purchase(id).subscribe(
(res: HttpResponse<IBook>) => {
this.book = res.body;
},
(res: HttpErrorResponse) => console.log(res.message)
);
}4.3. 視圖
最後，我們可以為圖書視圖添加一個按鈕，該按鈕調用組件中的新購買方法：
<button type="button"
class="btn btn-primary"
(click)="purchase(book.id)">
<span>Purchase</span>
</button>下方圖片展示了前端更新後的視圖：
點擊新的 購買 按鈕將發起對我們新 API 的調用，前端會自動更新庫存狀態（或在出現問題時顯示錯誤信息）。
5. 結論
在本教程中，我們學習瞭如何在 JHipster 中創建自定義 API，並將其集成到前端。
我們首先將 API 和業務邏輯添加到 Spring Boot 中。然後，我們修改了前端代碼，以利用新的 API 並顯示結果。 僅需付出一點努力，我們就能在現有的 CRUD 操作之上添加新的功能，這些操作由 JHipster 自動生成。
