使用Spring Boot和Vue.js构建一个简单的CRUD应用

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕？ 尝试使用Okta API进行托管身份验证，授权和多因素身份验证。

在本教程中，您将使用Vue.js作为客户端并将Spring Boot作为资源服务器来构建完整的CRUD Web应用程序。 您还将使用OAuth 2.0和Okta保护应用程序的安全。

CRUD是C reate，R EAD，U PDATE，和d elete。 这有点像服务器世界的“ Hello World”。 就像“ Hello服务器！” 如果您可以添加，更新，读取和删除数据，那么您几乎已经掌握了REST接口或基本资源API的所有基本工具。

您将要构建的示例应用程序是一个简单的待办应用程序。 通常，这些待办事项应用程序使用本地存储的数据，但是在本示例中，您将在Spring Boot资源服务器上创建，读取，更新和删除待办事项。

激动吗 大！ 在我们深入研究之前，先简要介绍所涉及的技术。

什么是Vue.js？

Vue是一个JavaScript视图库，例如React和Angular。 它的设计旨在逐步采用，并且核心库仅专注于视图层。

以我的经验，Vue.js是React的绝佳替代品。 我首先学习了React，后来又开始使用Vue。 与React一样，Vue使用虚拟DOM，提供反应性和可组合的视图组件，并在定义属性和状态时强制执行严格的单向父子关系。 这意味着它是高性能的，并且避免了在没有单向数据绑定的情况下可能发生的许多令人困惑的状态关系。 但是，与React不同，Vue使用模板而不是JSX（这是一个可能受欢迎并且更易于访问的选项），并且Vue使用单文件组件中的style标签为您提供了组件范围内CSS。 在实践中，这种差异是非常巨大的，因为在React中，JSX和类似CSS的语法与HTML和CSS足够接近，容易引起混淆，但实际上并不完全相同，这在最初就产生了问题（以前的语言不需要分号做到这一点吗？就是这样）。

我发现Vue是一个更简单，更简洁的实现。 React需要深入研究。 您必须服用红色药丸，然后一直服用。 它是一个超级强大的系统，但您必须全力以赴。Vue更加友好，入门也更简单。

关于Spring Boot

您将要使用的服务器技术是Spring Boot。 纯净，纯净的Spring（弹簧启动前）有点像庞然大物：功能强大，但可能会浪费时间并令人沮丧。 我敢肯定，整个计算机会议现象的产生都是为了让人们可以学习和理解老式的Spring XML文件。 当然，它推动了计算机出版帝国的大部分发展。

Spring Boot是Spring对这种复杂性（以及诸如Ruby on Rails和Grails之类的框架）的解决方案。 他们做了出色的工作，将Spring的所有功能分解为一个简单，快速，易于使用的Web框架。 只需很少的几行代码和一些注释，便可以拥有功能全面的资源服务器。

另外，当您准备就绪时，f就可以拥有Spring的全部强大功能，只需等待即可。

对于此项目，您将需要一个服务器和客户端项目。 创建一个名为SpringBootVueApplication的根项目目录，并在该目录下创建两个子目录： client和server 。

client将是您的Vue.js客户端应用程序。

server将是Spring Boot资源服务器。

创建您的Spring Boot应用

让我们从使用Spring Initializer创建Spring Boot应用程序开始。

进行以下选择：

• 项目类型： Gradle Project
• 群组： com.okta
• 工件： spring-boot-vue
• 依赖项 ： JPA ， H2 ， Web ， Rest Repositories ， Lombok

下载文件并将内容解压缩到您的SpringBootVueApplication/server目录。

首先，让我们从简单的事情开始。 将默认端口从8080更改为9000（这样一点儿就不会与Vue.js应用客户端端口冲突）。

将server/src/main/resources/application.properties文件的名称更改为application.yml ，并在其中添加以下行：

server:  
  port: 9000

定义Todo模型类

让我们定义Todo模型类文件。 这定义了您的Spring Boot应用程序将使用的数据结构。

在com.okta.springbootvue包中的src/main/java下创建一个Todo.java类。

package com.okta.springbootvue;  
  
import lombok.*;  
  
import javax.persistence.Id;  
import javax.persistence.GeneratedValue;  
import javax.persistence.Entity;  
  
@Entity  
@Data  
@NoArgsConstructor  
public class Todo {  
      
  @Id @GeneratedValue  
  private Long id;  

  @NonNull
  private String title;  

  private Boolean completed = false;
      
}

这很简单。 您正在定义一个具有三个属性的数据模型：一个自动生成的id ，一个字符串title和一个completed的true / false属性。

Lombok为您节省了许多定义吸气剂和吸气剂的冗长的仪式代码。 这些都是添加到课程上的所有注释。

后台发生了大量沉重的打击，这使Spring Data和JPA可以自动将此类文件映射到数据库。 这是一门很深的主题，如果您想了解更多信息，可以在本教程的结尾处找到一些链接。 现在，仅知道上面的类将被映射到内存H2数据库中的数据库表就足够了，并且该类中的每个属性都将成为一个表列。 默认情况下，您将获得包含以下依赖项的内存数据库：H2。 这对于教程和测试非常方便，但是很显然，您还想包括更多到实际持久数据库的映射。

定义数据库和REST类

在com.okta.springbootvue包中创建一个TodoRepository.java 。

package com.okta.springbootvue;  
  
import org.springframework.data.jpa.repository.JpaRepository;  
import org.springframework.data.rest.core.annotation.RepositoryRestResource;  
  
@RepositoryRestResource  
interface TodoRepository extends JpaRepository<Todo, Long> {}

此类非常简单。 同样，幕后还有很多事情发生。 实际上，在此处为我们自动生成Todo应用程序的REST API所需的所有方法。 但是，您可以根据需要在此类中定义一些自定义访问方法。

我们还要在同一包中创建RestRepositoryConfigurator类。

package com.okta.springbootvue;

import org.springframework.data.rest.core.config.RepositoryRestConfiguration;
import org.springframework.data.rest.webmvc.config.RepositoryRestConfigurer;
import org.springframework.stereotype.Component;

/**
 * IDs are not returned by RestRepository by default. I like them exposed so that the client can easily find
 * the ID of created and listed resources.
 * */
@Component
public class RestRepositoryConfigurator implements RepositoryRestConfigurer {

  @Override
  public void configureRepositoryRestConfiguration(RepositoryRestConfiguration config) {
    config.exposeIdsFor(Todo.class);
  }
}

此类仅是配置类。 这样做的全部目的是告诉Spring返回带有对象序列化的数据模型实例ID（这样，您可以通过客户端应用程序的ID引用它们，因为这将是UUID）。

测试Rest API服务器

不管您相信与否，到此为止，您都拥有一个有效的REST API。

让我们使用HTTPie对其进行测试。 如果未安装HTTPie，请使用brew install httpie进行brew install httpie 。 或前往他们的网站并实现它。 或者只是跟随。

首先，使用./gradlew bootRun启动服务器。

您应该看到很多这样的输出结束：

2018-11-08 21:20:36.614  INFO 56214 --- [nio-9000-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring FrameworkServlet 'dispatcherServlet'
2018-11-08 21:20:36.615  INFO 56214 --- [nio-9000-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization started
2018-11-08 21:20:36.646  INFO 56214 --- [nio-9000-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization completed in 31 ms
<=========----> 75% EXECUTING [2m 59s]
> :bootRun

现在，在服务器端点上执行基本的GET请求： http GET http://localhost:9000

HTTP/1.1 200
Content-Type: application/hal+json;charset=UTF-8
Date: Fri, 09 Nov 2018 03:44:37 GMT
Transfer-Encoding: chunked
{
  "_links": {
    "profile": {
      "href": "http://localhost:9000/profile"
    },
    "todos": {
      "href": "http://localhost:9000/todos{?page,size,sort}",
      "templated": true
    }
  }
}

profile链接与ALPS（应用程序级配置文件语义）有关。 看看上面的Spring文档 。 这是描述REST API公开的可用资源的一种方式。

todos链接是从Todo类生成的端点。

使用GET请求查看该端点。 实际上，您可以省略“ GET”和“ http：// localhost”，因为这些是HTTPie的默认设置。

$ http :9000/todos
HTTP/1.1 200
Content-Type: application/hal+json;charset=UTF-8
Date: Fri, 09 Nov 2018 03:50:12 GMT
Transfer-Encoding: chunked
{
  "_embedded": {
    "todos": []
  },
  "_links": {
    "profile": {
      "href": "http://localhost:9000/profile/todos"
    },
    "self": {
      "href": "http://localhost:9000/todos{?page,size,sort}"