使用 Angular 5.0和Spring Boot 2.0 構建一個基本的 CRUD 應用

最新 03-02

協作翻譯

原文：Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0

鏈接：https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot

譯者：白又白呀, Tot_ziens, Tocy, 無若

在所有 Web 開發的框架中，Anglar 和 Spring Boot 可以說是兩個最流行的了。那麼我們不妨看看如何在你的應用中使用它們。

現在技術進展得很快，跟上最新的趨勢以及你喜歡的項目的最新發布版本是很有挑戰性的。Anglar 和 Spring Boot 是我最喜歡的兩個項目。因此我想我應該給你們寫個指南，讓你清楚如何使用它們最新、最完整的版本構建一個基本的應用程序。

對於 Spring Boot，在 2.0 版本中最重要的變化是它的全新 Web 框架：Spring WebFlux。在 Angular 5.0 中我們也在表格中有了一個新的 HttpClient。這個類代替了 Http，並且使用起來更簡單一些，使用更少的樣板(boilerplate)代碼即可。但今天，我並不打算去探索 Spring WebFlux，因為在我們能夠支持Okta Spring Boot Starte之前我們還有一些工作要做。

好消息是我們的Angular SDK能夠很好地與 Angular 5 兼容，我將在這篇博文中展示如何使用它。說到 Angular，你知道在 Stack Overflow 上，Angular 是最引人注目的問題之一嗎？你可能認為這意味著很多人都對 Angular 有相關的疑問。我更偏向於認為是使用人數龐大，開發者在使用新技術時經常有疑問（所導致）。這是一個健康的社區的明確標誌。對於垂死的技術你很少會在 Stack Overflow 上看到很多的問題。

本文將講解如何構建一個簡單的 CRUD 應用來顯示一個酷的汽車的列表。它允許你去編輯這個列表，並且它將顯示一個與汽車名稱相匹配的源於GIPHY的 gif 動畫。你也會學習到如何使用 Okta』s Spring Boot starter 和 Angular SDK 來保護你的應用程序。

本教程中，你將會需要在電腦中安裝Java 8和Node.js 8。

創建一個目錄來存放你的伺服器和客戶端應用程序。我的目錄命名為 okta-spring-boot-2-angular-5-example，你可以命名為你喜歡的任意名稱。如果你只想看該應用程序運行而不是編寫代碼，那麼你可以在 GitHub 上查看示例，或使用以下命令進行本地克隆和運行。

從 start.spring.io 下載了 demo.zip 後，將其解壓並將 demo 文件複製到應用程序存放目錄。將 demo 重命名為 server。用你喜歡的 IDE 打開項目，在 src/main/java/com/okta/developer/demo 目錄下創建一個 Car.java 文件。你可以使用 Lombok 註解來減少樣板代碼。

創建 CarRepository 類以在 Car 實體上執行 CRUD（創建，讀取，更新和刪除）。

將 ApplicationRunner bean 添加到 DemoApplication 類（在 src/main/java/com/okta/developer/demo/DemoApplication.java 中），並使用它添加一些默認數據到資料庫。

如果你在添加此代碼後啟動你的應用程序（使用 ./mvnw spring-boot:run），則會在啟動時看到汽車列表顯示在控制台中。

添加一個 CoolCarController 類（在 src/main/java/com/okta/developer/demo/CoolCarController.java 中），該類用於返回一個汽車列表，並在 Angular 客戶端中顯示。

如果你重啟伺服器應用程序，並使用瀏覽器或命令行客戶端鍵入 localhost:8080/cool-cars，則應該會看到過濾後的汽車列表。

Angular CLI 是一個命令行工具，可為你生成一個 Angular 項目。它不僅可以創建新項目，還可以生成代碼。這是一個方便的工具，因為它還提供了命令用來構建和優化生產環境中使用的項目。它使用 covers 下的 webpack 用於構建。如果你想了解更多關於 webpack 的信息，推薦這個網站 ——webpack.academy。

你可以通過https://cli.angular.io了解 Angular CLI 的基礎知識。

安裝最新版本的 Angular CLI，版本號是 1.5.2。

在你創建的傘形目錄中新建一個項目。我的名字命名為 okta-spring-boot-2-angular-5-example。

客戶端創建後，導航到其目錄並安裝 Angular Material。

你將使用 Angular Material 的組件來使 UI 看起來更好，特別是在手機上。安裝 Angular 的動畫庫，因為其中的 Angular Material 組件有時會用到。

如果你想了解有關 Angular Material 的更多信息，請參閱https://material.angular.io。它有各種組件的大量文檔以及如何使用它們。

使用 Angular CLI 生成可與 Cool Cars API 交互的汽車服務。

將生成的文件移動到 client/src/app/shared/car 目錄。

在 src/app/app.module.ts 中將此服務作為提供者添加，並導入 HttpClientModule。

生成 car-list 組件以顯示汽車列表。

更新 client/src/app/car-list/car-list.component.ts 以使用 CarService 獲取列表並在本地 cars 變數中設置值。

更新 client/src/app/car-list/car-list.component.html 以顯示汽車列表。

更新 client/src/app/app.component.html 以擁有 app-car-list 元素。

使用 ng serve 啟動客戶端應用程序。打開你喜歡的瀏覽器訪問 http://localhost:4200。不過你目前還不會看到汽車列表，如果你打開開發者控制台，就會看到原因。

發生此錯誤是因為你尚未在伺服器上啟用 CORS 服務（跨源資源共享）。

要在伺服器上啟用 CORS，請將 @CrossOrigin 注釋添加到 CoolCarController（在 server/src/main/java/com/okta/developer/demo/CoolCarController.java 中）。

另外，將它添加到 CarRepository 中，以便在添加/刪除/編輯時可以與其端點進行通信。

重新啟動伺服器，刷新客戶端，然後就可以在瀏覽器中看到汽車列表。

更新 client/src/app/app.component.html 以使用工具欄組件。

更新 client/src/app/car-list/car-list.component.html 以使用卡片布局和列表組件。

修改 client/src/styles.csss 來指定主題和圖標。

如果你用 ng serve 運行你的客戶端並訪問 http://localhost:4200，你會看到汽車列表，但沒有與它們關聯的圖像。

要將 giphyUrl 屬性添加到汽車，請創建 client/src/app/shared/giphy/giphy.service.ts 並用下面的代碼填充它。

在 client/src/app/app.module.ts 中添加 GiphyService 作為提供者。

更新 client/src/app/car-list/car-list.component.ts 中的代碼以設置每輛車的 giphyUrl 屬性。

現在你的瀏覽器應該會顯示汽車名稱列表，以及旁邊的頭像圖片。

有一個汽車名稱和圖像的列表顯得十分美觀，但如果能和它進行交互就更好了！要添加編輯功能，首先生成一個 car-edit 組件。

更新 client/src/app/shared/car/car.service.ts 以擁有添加、刪除和更新汽車的方法。

這些方法與 CarRepository 和 @RepositoryRestResource 注釋提供的端點進行交互。

在 client/src/app/car-list/car-list.component.html 中，添加一個到編輯組件的鏈接。另外，在底部添加一個按鈕來添加一輛新車。

在 client/src/app/app.module.ts 中，添加路由並導入 FormsModule。

修改 client/src/app/car-edit/car-edit.component.ts 以從 URL 上傳遞的 id 獲取汽車的信息，並添加保存和刪除的方法。

更新 client/src/app/car-edit/car-edit.component.html 中的 HTML 以使用汽車名稱的表格，以及顯示來自 Giphy 的圖像。

將下面的 CSS 添加到 client/src/app/car-edit/car-edit.component.css 中，以在圖片周圍添加一些填充。

修改 client/src/app/app.component.html 並用替換。這種更改是必要的，或者組件之間的路由不起作用。

完成所有這些更改後，你應該可以添加、編輯或刪除任何汽車。以下是包含添加按鈕的顯示列表的屏幕截圖。

以下屏幕截圖顯示了編輯你添加的汽車的狀態。

使用 Okta 添加驗證是一個極好的你可以添加到此應用的功能。如果你想為你的應用程序添加審核或個性化功能（例如評級功能），那麼知道對方是誰可以派得上用場。

在伺服器端，你可以使用 Okta Spring Boot starter 來鎖定一些事物。打開 server/pom.xml 並添加以下依賴項。

現在你需要配置伺服器以使用 Okta 進行認證，為此你將需要在 Okta 中創建一個 OIDC 應用。

登錄你的 Okta 開發者帳戶（如果沒有帳戶的話點此進行註冊），然後導航到 Applications > Add Application。點擊 Single-page App，再點擊 Next，並給程序取個你能記住的名字。更改本地主機的所有實例 localhost:8080 到 localhost:4200，並點擊 Done。

拷貝 client ID 到你的 server/src/main/resources/application.properties 文件中。當你在裡面的時候，添加一個與你的 Okta 域匹配的 okta.oauth2 issuer 屬性。例如：

升級 server/src/main/java/com/okta/developer/demo/DemoApplication.java 來啟用它作為資源伺服器。

在作出這些變更後，你應該能夠重啟你的 app 並且當你嘗試導航到 http://localhost:8080 時看到拒絕訪問。

不幸的是，你可能會看到一個帶有以下錯誤的堆棧跟蹤。

原因是 Spring Boot 2.0.0.M6 包括了 Spring Security 5.0.0.RC1，它不包括 Resource Server 的支持。如果你想知道這個問題何時解決，你可以在GitHub 上訂閱 Okta Spring Boot Starter issue #30。

為了解決這個問題，你可以將 Okta Spring Boot starter 降級為 0.1.0。一定要將它的名稱從 spring-boot 改為 spring-security！

你還需要更改應用程序中的屬性名稱，屬性是 oauth 而不是 oauth2。

現在，當你重新啟動伺服器時，你應該在瀏覽器中看到如下所示的消息。