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实现学生管理系统
- 创建后端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 {
@Autowired
private StudentRepository studentRepository;
@GetMapping
public List<Student> getAllStudents() {
return studentRepository.findAll();
}
@PostMapping
public 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请求获取学生信息，并将数据渲染到前端页面上。
- 实现学生信息的增删改查功能：
在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 {
@Override
public 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
}
}
}
};