一、介绍
SpringBoot 是一个基于 Spring 框架的疾速开发框架，它可能帮忙开发者疾速搭建一个 Web 利用。Vue3 是一种前端框架，它可能帮忙开发者疾速构建一个交互式的用户界面。SpringBoot 和 Vue3 的联合，能够实现前后端拆散，进步开发效率。
download:daxiacode.com
本文将介绍如何应用 SpringBoot 和 Vue3 搭建一个 Web 利用，并实现根本的增删改查性能。
二、环境搭建
装置 Java 和 Maven
SpringBoot 是一个 Java 框架，所以须要装置 Java 和 Maven。能够从 Oracle 官网下载 Java 和 Maven，并依照官网文档进行装置。
装置 Node.js 和 Vue CLI
Vue3 是一个前端框架，所以须要装置 Node.js 和 Vue CLI。能够从 Node.js 官网下载 Node.js，并应用 npm 装置 Vue CLI。
创立 SpringBoot 我的项目
能够应用 Spring Initializr 来创立 SpringBoot 我的项目。Spring Initializr 是一个疾速创立 SpringBoot 我的项目的工具，能够抉择所需的依赖和插件，生成一个根本的 SpringBoot 我的项目构造。
创立 Vue3 我的项目
能够应用 Vue CLI 来创立 Vue3 我的项目。Vue CLI 是一个疾速创立 Vue3 我的项目的工具，能够抉择所需的依赖和插件，生成一个根本的 Vue3 我的项目构造。
三、开发后端利用
增加依赖
在 pom.xml 文件中增加 SpringBoot 和 JPA 的依赖。
xml
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-data-jpa
com.h2database
h2
runtime
创立实体类
创立一个实体类，用于映射数据库表。
@Entity
@Table(name = “user”)
public cl* User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private Integer age;
private String email;
// getter 和 setter 办法省略
}
创立 Repository
创立一个 Repository，用于拜访数据库。
@Repository
public interface UserRepository extends JpaRepository {
}
创立 Controller
创立一个 Controller，用于解决 HTTP 申请。
@RestController
@RequestMapping(“/api/users”)
public cl* UserController {
@Autowired
private UserRepository userRepository;
@GetMapping
public List getAllUsers() {
return userRepository.findAll();
}
@PostMapping
public User addUser(@RequestBody User user) {
return userRepository.save(user);
}
@PutMapping(“/{id}”)
public User updateUser(@PathVariable Long id, @RequestBody User user) {
user.setId(id);
return userRepository.save(user);
}
@DeleteMapping(“/{id}”)
public void deleteUser(@PathVariable Long id) {
userRepository.deleteById(id);
}
}
配置数据库
在 application.properties 文件中配置数据库连贯信息。
spring.datasource.url=jdbc:mysql://localhost:3306/test?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.p*word=123456
spring.datasource.driver-cl*-name=com.mysql.cj.jdbc.Driver
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
启动利用
应用 Maven 启动利用，拜访 http://localhost:8080/api/users，能够看到返回了一个空的 JSON 数组。
四、开发前端利用
增加依赖
在 package.json 文件中增加 Vue3 和 Axios 的依赖。
json
{
“dependencies”: {
“vue”: “^3.0.0”,
“axios”: “^0.21.0”
}
}