SpringBoot2 和 React 全栈开发实用指南（四）

原文：zh.annas-archive.org/md5/B5164CAFF262E48113020BA46AD77AF2

译者：飞龙

协议：CC BY-NC-SA 4.0

第十五章：最佳实践

本章介绍了一些你应该了解的要点，如果你想成为一名全栈开发者，或者如果你想在软件开发职业中进一步发展。我们还将介绍一些在软件开发领域工作时要牢记的最佳实践。

在本章中，我们将看到以下内容：

你应该了解哪些技术
对你来说重要的最佳实践是什么

接下来学习什么

要成为一名全栈开发者，你必须能够同时处理后端和前端。这听起来是一个相当具有挑战性的任务，但如果你专注于正确的事情，不试图掌握一切，是可能的。现在，可用的技术栈非常庞大，你可能经常想知道接下来应该学习什么。有多种因素可能会给你一些关于下一步去哪里的提示。一种方法是浏览工作机会，看看公司正在寻找哪些技术。

开始学习新技术有多种方式，没有正确的路径。编程网络课程的使用是一个非常流行的起点，它为你提供了开始学习过程的基本知识。这个过程是永无止境的，因为技术一直在发展和变化。

如果你想成为一名全栈开发者，必须了解以下技术。这不是完整的列表，但是一个很好的起点。

HTML

HTML 是 Web 开发中最基本的东西，你应该学习它。你不必掌握 HTML 的所有细节，但你应该对它有一个良好的基本了解。HTML 5 引入了许多值得学习的新功能。

CSS

CSS 也是一个非常基本的东西要学习。好处是有很多关于 HTML 和 CSS 的好教程可用。学习一些 CSS 库的使用也是一个好主意，比如广泛使用的 Bootstrap。CSS 预处理器，比如 SASS 和 LESS，也值得学习。

HTTP

在开发 Web 应用和 RESTful Web 服务时，HTTP 协议是关键部分。你必须了解 HTTP 的基础知识，知道它的限制。你还应该知道有哪些方法存在，以及如何在不同的编程语言中使用它们。

JavaScript

JavaScript 绝对是你应该掌握的编程语言。没有 JavaScript 技能，要与现代前端开发一起工作是非常困难的。学习 ES6 也是很好的，因为它使 JavaScript 编码更清洁、更高效。

后端编程语言

不了解一些编程语言是很难生存的。如果 JavaScript 用于前端开发，它也可以在后端与 Node.js 一起使用。这就是 Node.js 的好处；你可以在前端和后端使用一种编程语言。其他流行的后端开发语言包括 Java、C#、Python 和 PHP。所有这些语言也有很好的后端框架可以使用。

一些前端库或框架

在这本书中，我们在前端使用了 React.js，这是目前一个流行的选择，但还有许多其他也是不错的选择，比如 Angular 和 Vue.js。

数据库

你还应该知道如何使用后端编程语言与数据库。数据库可以是 SQL 或 NoSQL 数据库，了解这两种选项是很好的。你还应该知道如何优化你正在使用的数据库以及你正在执行的查询的性能。

版本控制

版本控制是你无法离开的东西。现在，Git 是一个非常流行的版本控制系统，了解如何使用它非常重要。还有仓库管理服务，比如 GitHub 和 GitLab，也是值得了解的。

有用的工具

还有许多不同的工具可以帮助你使开发过程更加高效。在这里，我们只提到了一些可能对你有用的工具。Gulp.js 是一个开源的 JavaScript 工具包，用于自动化开发过程中的任务。Grunt 类似于 JavaScript 任务运行器，可以用来自动化你的过程。Webpack 是一个 JavaScript 模块打包工具，可以从你的依赖项创建静态资源。create-react-app，在之前的章节中使用过，实际上在内部使用了 Webpack。

安全

你必须了解网络安全的基础知识，以及如何在 Web 开发中处理这些问题。开始学习的一个好方法是阅读OWASP 十大最严重的 Web 应用安全风险（www.owasp.org/index.php/Category:OWASP_Top_Ten_Project）。然后你必须学习如何使用你正在使用的框架来处理这些问题。

最佳实践

软件开发总是团队合作，因此团队中的每个人都使用共同的最佳实践非常重要。在这里，我们将介绍一些你必须考虑的基本事项。这不是完整的清单，但我们试图集中在一些你应该知道的基本事项上。

编码规范

编码规范是描述代码应该如何在特定编程语言中编写的指南。它使代码更易读和更易维护。命名规范定义了变量、方法等应该如何命名。命名非常重要，因为它帮助开发人员理解程序中某个单元的目的。布局规范定义了源代码的结构应该如何看起来，例如缩进和空格的使用。注释规范定义了源代码应该如何被注释。通常最好使用一些标准化的注释方式，比如 Java 中的 Javadoc。

大多数软件开发环境和编辑器都提供了帮助你遵循代码规范的工具。你也可以使用代码格式化工具，比如用于 JavaScript 的 prettier。

选择合适的工具

你应该始终选择最适合你软件开发过程的工具。这样可以使你的过程更加高效，也有助于你的开发生命周期。有许多工具可以自动化开发过程中的任务，这是避免重复任务中出现错误的好方法。当然，你使用的工具将取决于过程和你正在使用的技术。

选择合适的技术

在开始开发应用程序时，要决定的第一件事之一是选择哪些技术（编程语言、框架、数据库等）应该使用。通常情况下，选择你一直使用的技术会让人感到安全，但这并不总是最佳选择。应用程序本身通常对你可以使用的技术做出一些限制。例如，如果你必须创建一个移动应用程序，有几种技术可以使用。但如果你必须开发一个你已经做过很多次的类似应用程序，使用你已经很熟悉的技术可能更明智。

尽量减少编码量

一个常见的好习惯是尽量减少编码量。这是非常明智的，因为这样可以使代码的维护和测试变得更容易。DRY（不要重复自己）是软件开发中的一个常见原则。DRY 的基本思想是通过避免代码中的重复来减少代码量。将源代码分割成较小的组件总是一个很好的做法，因为较小的单元总是更容易管理。当然，最佳的结构取决于你使用的编程语言。还有一个好的声明是保持简单，愚蠢（KISS），这应该指导你朝着正确的方向前进。

总结

在本章中，我们介绍了如果你想成为全栈开发人员，你应该熟悉的技术。你应该掌握的知识量听起来很多，但你不必成为我们描述的所有技术的大师。了解一些软件开发的最佳实践也是很好的，因为这样你就可以避免常见的错误，你的源代码将更易读和更易于维护。

问题

编码规范为什么重要？
为什么你应该尽量避免过多编码？
命名规范为什么重要？

进一步阅读

Packt 还有其他很好的资源可以学习全栈开发：

第十六章：评估

第一章

答案 1：Spring Boot 是基于 Java 的 Web 应用程序框架，基于 Spring。使用 Spring Boot，您可以开发独立的 Web 应用程序，带有嵌入式应用服务器。

答案 2：Eclipse 是开源的集成开发环境（IDE），主要用于 Java 编程，但也支持多种其他编程语言。

答案 3：Maven 是开源软件项目管理工具。Maven 可以管理软件开发项目中的构建、文档、测试等。

答案 4：开始一个新的 Spring Boot 项目最简单的方法是在 Spring Initializr 网页上创建它。这将为您的项目创建一个包含所需模块的框架。

答案 5：如果您使用 Eclipse IDE，只需激活主类并点击运行按钮。您也可以使用 Maven 命令**mvn spring-boot:run**来运行应用程序。

答案 6：Spring Boot starter 包为您提供日志记录功能。您可以在application.properties设置文件中定义日志记录级别。

答案 7：在运行应用程序后，您可以在 Eclipse IDE 控制台中看到错误和日志消息。

第二章

答案 1：ORM 是一种技术，允许您使用面向对象的编程范式从数据库中提取和操作数据。JPA 为 Java 开发人员提供了对象关系映射。Hibernate 是基于 Java 的 JPA 实现。

答案 2：实体类只是一个标准的带有@Entity注解的 Java 类。在类内部，您必须实现构造函数、字段、getter 和 setter。将作为唯一 id 的字段用@Id注解标注。

答案 3：您必须创建一个新的接口，该接口扩展 Spring Data 的CrudRepository接口。在类型参数中，您定义实体和id字段的类型，例如，<Car, Long>。

答案 4：CrudRepository为您的实体提供了所有 CRUD 操作。您可以使用CrudRepository创建、读取、更新和删除实体。

答案 5：您必须创建实体类并使用@OneToMany和@ManyToOne注解链接实体。

答案 6：您可以在主应用程序类中使用CommandLineRunner添加演示数据。

答案 7：在您的application.properties文件中定义 H2 控制台的端点并启用它。然后您可以通过浏览器访问定义的端点来访问 H2 控制台。

答案 8：您必须在pom.xml文件中添加 MariaDB 依赖，并在application.properties文件中定义数据库连接设置。如果您使用了 H2 数据库依赖，还需要从pom.xml文件中删除它。

第三章

答案 1：REST 是一种用于创建 Web 服务的架构风格，并定义了一组约束。

答案 2：使用 Spring Data REST starter 包是使用 Spring Boot 创建 RESTful web 服务的最简单方法。默认情况下，Spring Data REST 会找到所有公共存储库，并为您的实体自动创建 RESTful Web 服务。

答案 3：通过向实体的端点发送GET请求。例如，如果您有一个名为Car的实体类，Spring Data REST 将创建一个名为/cars的端点，用于获取所有汽车。

答案 4：通过向单个实体项目的端点发送DELETE请求。例如，/cars/1删除 id 为1的汽车。

答案 5：通过向实体的端点发送POST请求。标头必须包含Content-Type字段，值为application/json，新项目将嵌入在请求体中。

答案 6：通过向实体的端点发送PATCH请求。标头必须包含Content-Type字段，值为application/json，更新的项目将嵌入在请求体中。

答案 7：您必须使用@RepositoryRestResource注解注释您的存储库。使用@Param注解注释查询参数。

第四章

答案 1：Spring Security 为基于 Java 的 Web 应用程序提供安全服务。

答案 2：您必须将 Spring Security 启动包依赖添加到您的pom.xml文件中。您可以通过创建安全配置类来配置 Spring Security。

答案 3：JWT（JSON Web Token）是在现代 Web 应用程序中实现身份验证的一种紧凑方式。令牌的大小很小，因此可以在 URL 中、POST参数中或标头中发送。

答案 4：您可以使用 Java JWT 库，这是 Java 的 JSON Web Token 库。认证服务类添加和读取令牌。过滤器类处理登录和认证过程。

答案 5：您必须将 Spring Boot 测试启动器包添加到您的pom.xml文件中。Spring Boot 测试启动器包提供了许多很好的测试工具，例如 JUnit，AssertJ 和 Mockito。使用 JUnit 时，基本测试类使用@SpringBootTest注解，并且测试方法应该以@Test注解开头。

答案 6：可以通过在 Eclipse IDE 中运行测试类（Run | JUnit test）轻松执行测试用例。测试结果可以在 JUnit 选项卡中看到。

第五章

答案 1：Node.js 是一个基于 JavaScript 的开源服务器端环境。Npm 是 JavaScript 的包管理器。

答案 2：您可以从nodejs.org/en/download找到多个操作系统的安装包和说明。

答案 3：Visual Studio Code（VSCode）是一个面向多种编程语言的开源代码编辑器。

答案 4：您可以从code.visualstudio.com找到多个操作系统的安装包和说明。

答案 5：您必须使用 npm 全局安装create-react-app。然后使用以下命令创建一个应用程序**create-react-app projectname**。

答案 6：您可以使用以下命令运行应用程序npm start或**yarn start**。

答案 7：您可以通过修改App.js文件开始，当您保存修改时，可以立即在 Web 浏览器中看到更改。

第六章

答案 1：组件是 React 应用程序的基本构建块。React 组件可以使用 JavaScript 函数或 ES6 类创建。

答案 2：props 和 state 是呈现组件的输入数据。它们是 JavaScript 对象，当 props 或 state 发生变化时，组件会重新呈现。

答案 3：数据流从父组件到子组件。

答案 4：只有 props 的组件称为无状态组件。既有 props 又有状态的组件称为有状态组件。

答案 5：JSX 是 JavaScript 的语法扩展，建议与 React 一起使用。

答案 6：组件生命周期方法在组件生命周期的特定阶段执行。

答案 7：处理 DOM 元素事件类似。React 中的区别在于事件命名使用驼峰命名约定，例如onClick或onSubmit。

答案 8：通常情况下，我们希望在表单提交后调用具有对表单数据的访问权限的 JavaScript 函数。因此，我们必须使用preventDefault()函数禁用默认行为。您可以使用输入字段的onChange事件处理程序将输入字段的值保存到状态中。

第七章

答案 1：Promise 是表示异步操作结果的对象。使用 Promise 在进行异步调用时简化了代码。

答案 2：Fetch API 提供了fetch()方法，您可以使用它来使用 JavaScript 进行异步调用。

答案 3：REST API 的fetch()调用建议在componentDidMount()生命周期方法中执行，该方法在组件挂载后被调用。

答案 4：您可以使用fetch()方法的 promises 访问响应数据。响应中的数据保存到状态中，当状态改变时组件重新渲染。

第八章

答案 1：您可以从多个来源找到 React 组件，例如，js.coach/或github.com/brillout/awesome-react-components。

答案 2：您可以使用 npm 或 yarn 软件包管理器安装 React 组件。使用 npm 时，我们使用以下命令**npm install <componentname>**。

答案 3：您必须安装 React Table 组件。安装后，您可以在render()方法中使用ReactTable组件。您必须使用ReactTable的 props 定义数据和列。数据可以是对象或数组。

答案 4：在 React 应用中创建模态表单的一种方法是使用 React Skylight 组件（marcio.github.io/react-skylight/）。

答案 5：您必须使用以下命令npm install @material-ui/core安装 Material-UI 组件库。安装库后，您可以开始使用组件。不同组件的文档可以在material-ui.com找到。

答案 6：可以使用 React Router 组件（github.com/ReactTraining/react-router）来实现路由。

第九章

答案 1：通过模拟，与客户讨论需求要比在开始编写任何实际代码之前更容易。与真实前端源代码相比，对模拟的修改非常容易和快速。

答案 2：有很多适合的应用程序可以轻松进行模拟。您也可以使用纸和铅笔来创建模拟。

答案 3：您可以修改安全配置类以允许在没有身份验证的情况下访问所有端点。

第十章

答案 1：首先，您必须使用fetch()方法调用 REST API。然后，您可以使用fetch()方法的 promises 访问响应数据。响应中的数据保存到状态中，当状态改变时组件重新渲染。

答案 2：您必须使用fetch()方法发送DELETE方法请求。调用的端点是您想要删除的项目的链接。

答案 3：您必须使用fetch()方法发送POST方法请求到实体端点。添加的项目应嵌入在请求体中，并且您必须使用Content-Type头和application/json值。

答案 4：您必须使用fetch()方法发送PATCH方法请求。调用的端点是您想要更新的项目的链接。更新的项目应嵌入在请求体中，并且您必须使用Content-Type头和application/json值。

答案 5：您可以使用一些第三方 React 组件来显示类似 React Toastify 的提示消息。

答案 6：您可以使用一些第三方 React 组件将数据导出到 CSV 文件，例如 React CSV。

第十一章

答案 1：Material-UI 是用于 React 的组件库，它实现了 Google 的 Material Design。

答案 2：首先，您必须使用以下命令安装 Material-UI 库npm install @material-ui/core。然后，您可以开始使用库中的组件。不同组件的文档可以在material-ui.com/找到。

答案 3：您可以使用以下 npm 命令删除组件**npm remove <componentname>**。

第十二章

答案 1：Jest 是 Facebook 开发的 JavaScript 测试库。

答案 2：使用.test.js扩展名创建一个测试文件。在文件中实现您的测试用例，您可以使用以下命令运行测试**npm test**。

答案 3：对于快照测试，您必须安装react-test-render包，并将renderer导入到您的测试文件中。在文件中实现您的快照测试用例，您可以使用以下命令运行测试**npm test**。

答案 4：Enzyme 是一个用于测试 React 组件输出的 JavaScript 库。

答案 5：使用以下 npm 命令 npm install enzyme enzyme-adapter-react-16 --save-dev。

答案 6：您必须将Enzyme和Adapter组件导入到您的测试文件中。然后，您可以创建测试用例来呈现一个组件。使用 Enzyme，您可以使用 Jest 进行断言。

答案 7：Enzyme 提供了simulate方法，可用于测试事件。

第十三章

答案 1：您必须创建一个新的组件，用于呈现用户名和密码的输入字段。该组件还包含一个按钮，当按钮被按下时调用/login端点。

答案 2：登录组件的调用是使用POST方法进行的，并且用户对象嵌入在主体中。如果身份验证成功，后端将在授权标头中发送令牌回来。

答案 3：可以使用sessionStorage.setItem()方法将令牌保存到会话存储中。

答案 4：令牌必须包含在请求的Authorization标头中。

第十四章

答案 1：您可以使用以下 Maven 命令创建可执行的 JAR 文件 mvn clean install。

答案 2：部署 Spring Boot 应用程序的最简单方法是将应用程序源代码推送到 GitHub，并从 Heroku 使用 GitHub 链接。

答案 3：将 React 应用程序部署到 Heroku 的最简单方法是使用 Heroku Buildpack for create-react-app (github.com/mars/create-react-app-buildpack)。

答案 4：Docker 是一个容器平台，使软件开发、部署和交付更容易。容器是轻量级和可执行的软件包，包括运行软件所需的一切。

答案 5：Spring Boot 应用程序只是一个可执行的 JAR 文件，可以使用 Java 执行。因此，您可以为 Spring Boot 应用程序创建 Docker 容器，方式与为任何 Java JAR 应用程序创建方式相似。

答案 6：您可以使用以下 Docker 命令从 Docker Hub 拉取最新的 MariaDB 容器**docker pull mariadb:latest**。

第十五章

答案 1：这使得代码更易读和更易于维护。它还使团队合作更容易，因为每个人在编码中都使用相同的结构。

答案 2：这使得代码更易读和更易于维护。代码的测试更容易。

答案 3：这使得代码更易读和更易于维护。它还使团队合作更容易，因为每个人在编码中都使用相同的命名约定。

SpringBoot2-和-React-全栈开发实用指南-四-