使用 Angular 5.0和Spring Boot 2.0 构建一个基本的 CRUD 应用

协作翻译

原文：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。

使用 Spring Boot 2.0 创建 API

创建一个目录来存放你的服务器和客户端应用程序。我的目录命名为 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 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

要在服务器上启用 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，你会看到汽车列表，但没有与它们关联的图像。

使用 Giphy 添加动画 GIFs

要将 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 添加验证是一个极好的你可以添加到此应用的功能。如果你想为你的应用程序添加审核或个性化功能（例如评级功能），那么知道对方是谁可以派得上用场。

Okta 的 Spring Boot Starter

在服务器端，你可以使用 Okta Spring Boot starter 来锁定一些事物。打开 server/pom.xml 并添加以下依赖项。

现在你需要配置服务器以使用 Okta 进行认证，为此你将需要在 Okta 中创建一个 OIDC 应用。

在 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。

现在，当你重新启动服务器时，你应该在浏览器中看到如下所示的消息。

很好，你的服务器已被锁定，但是现在你需要配置你的客户端来与之对话。这就是 Okta 对 Angluar 的支持派上用场的地方。

Okta 的 Angular 支持