一、介绍
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"
}
}