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

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 {
    @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请求获取学生信息，并将数据渲染到前端页面上。

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 {
    @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
      }
    }
  }
};