Vue 3 和 Spring Boot 3 的操作流程和执行步骤详解

1.介绍

在本篇博客中，我们将详细介绍Vue 3 和 Spring Boot 3 的操作流程和执行步骤。Vue 3 是一款流行的前端框架，而Spring Boot 3 是一款广泛应用于后端开发的框架。通过结合使用这两个框架，我们可以构建出功能强大的全栈应用。

2.Vue 3 的操作流程和执行步骤

2.1 安装Vue CLI
在开始使用Vue 3之前，首先需要安装Vue CLI。通过命令行运行npm install -g @vue/cli来进行安装。

2.2 创建Vue项目
运行vue create project-name(你的项目名称)命令来创建一个新的Vue项目。在项目创建过程中，可以选择使用默认配置或者手动配置项目。

2.3 编写Vue组件
在Vue项目中，我们可以使用Vue的单文件组件（.vue文件）来编写前端组件。通过Vue的语法，我们可以实现各种交互和数据绑定。

2.4 运行Vue项目
在项目根目录下运行npm run serve命令，即可启动Vue的开发服务器，并在浏览器中查看项目运行效果。

 3.Spring Boot 3 的操作流程和执行步骤

3.1 环境搭建
首先，确保已经安装了Java开发环境和Maven构建工具。然后，下载并安装Spring Tool Suite（STS）来进行Spring Boot项目的开发。

3.2 创建Spring Boot项目
在STS中，通过选择"File -> New -> Spring Starter Project"来创建一个新的Spring Boot项目。在创建过程中，可以选择项目的依赖和配置。

3.3 编写Controller和Service
在Spring Boot项目中，我们可以通过编写Controller来处理前端请求，并通过Service来处理业务逻辑。使用注解来标识Controller和Service。

3.4 运行Spring Boot项目
在STS中，右键点击项目，并选择"Run As -> Spring Boot App"来运行Spring Boot项目。Spring Boot会自动启动嵌入式的Tomcat服务器，并监听指定的端口。

4.使用vue和springboot实现学生管理系统 

1. 创建后端API：
   首先，创建一个Spring Boot项目，并添加所需的依赖。在项目中创建一个学生实体类，包含学生的姓名、年龄等信息。然后，创建一个学生控制器类，使用Spring MVC的注解来定义API的请求路径和参数，实现学生信息的增删改查功能。

 学生实体类（Student.java）示例代码：

@Entity
@Table(name = "students")
public class Student {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;private int age;// getters and setters
}

学生控制器类（StudentController.java）示例代码：

@RestController
@RequestMapping("/api/students")
public class StudentController {@Autowiredprivate StudentRepository studentRepository;@GetMappingpublic List<Student> getAllStudents() {return studentRepository.findAll();}@PostMappingpublic Student createStudent(@RequestBody Student student) {return studentRepository.save(student);}@PutMapping("/{id}")public ResponseEntity<Student> updateStudent(@PathVariable Long id, @RequestBody Student studentDetails) {Student student = studentRepository.findById(id).orElseThrow(() -> new ResourceNotFoundException("Student not found with id: " + id));student.setName(studentDetails.getName());student.setAge(studentDetails.getAge());Student updatedStudent = studentRepository.save(student);return ResponseEntity.ok(updatedStudent);}@DeleteMapping("/{id}")public ResponseEntity<Map<String, Boolean>> deleteStudent(@PathVariable Long id) {Student student = studentRepository.findById(id).orElseThrow(() -> new ResourceNotFoundException("Student not found with id: " + id));studentRepository.delete(student);Map<String, Boolean> response = new HashMap<>();response.put("deleted", Boolean.TRUE);return ResponseEntity.ok(response);}
}

2. 调用后端API并显示数据：
在Vue项目中，可以使用axios库发送HTTP请求调用后端API，并将返回的学生信息数据渲染到前端页面上。

 首先，在Vue项目中安装axios库：

npm install axios

然后，在Vue组件中使用axios发送GET请求获取学生信息，并将数据渲染到前端页面上。

1. 实现学生信息的增删改查功能：
   在Vue项目中，可以使用表单和按钮等元素实现学生信息的增删改查功能。通过发送HTTP请求调用后端API来实现数据的增删改查操作。

添加学生表单组件（AddStudentForm.vue）示例代码：

<template><form @submit="addStudent"><label for="name">姓名:</label><input type="text" id="name" v-model="name" required><label for="age">年龄:</label><input type="number" id="age" v-model="age" required><button type="submit">添加学生</button></form>
</template><script>
import axios from 'axios';export default {data() {return {name: '',age: 0};},methods: {addStudent(event) {event.preventDefault();axios.post('/api/students', {name: this.name,age: this.age}).then(response => {// 添加成功后刷新学生列表this.$emit('studentAdded');this.name = '';this.age = 0;}).catch(error => {console.error(error);});}}
};
</script>

学生列表组件（StudentList.vue）示例代码：

4.解决跨域问题：
由于前端和后端运行在不同的域名或端口上，可能会出现跨域问题。可以在Spring Boot项目中配置跨域访问的允许选项，或者在Vue项目中使用代理来解决跨域问题。

 在Spring Boot项目中配置跨域访问的允许选项，可以在WebConfig类中添加如下配置：

@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("http://localhost:8080").allowedMethods("GET", "POST", "PUT", "DELETE");}
}

在Vue项目中使用代理来解决跨域问题，可以在vue.config.js文件中添加如下配置：

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}}
};