• 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）示例代码：

    1. @Entity
    2. @Table(name = "students")
    3. public class Student {
    4.     @Id
    5.     @GeneratedValue(strategy = GenerationType.IDENTITY)
    6.     private Long id;
    7.  
    8.     private String name;
    9.     private int age;
    10.  
    11.     // getters and setters
    12. }

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

    1. @RestController
    2. @RequestMapping("/api/students")
    3. public class StudentController {
    4.     @Autowired
    5.     private StudentRepository studentRepository;
    6.  
    7.     @GetMapping
    8.     public List getAllStudents() {
    9.         return studentRepository.findAll();
    10.     }
    11.  
    12.     @PostMapping
    13.     public Student createStudent(@RequestBody Student student) {
    14.         return studentRepository.save(student);
    15.     }
    16.  
    17.     @PutMapping("/{id}")
    18.     public ResponseEntity updateStudent(@PathVariable Long id, @RequestBody Student studentDetails) {
    19.         Student student = studentRepository.findById(id)
    20.                 .orElseThrow(() -> new ResourceNotFoundException("Student not found with id: " + id));
    21.  
    22.         student.setName(studentDetails.getName());
    23.         student.setAge(studentDetails.getAge());
    24.  
    25.         Student updatedStudent = studentRepository.save(student);
    26.         return ResponseEntity.ok(updatedStudent);
    27.     }
    28.  
    29.     @DeleteMapping("/{id}")
    30.     public ResponseEntity> deleteStudent(@PathVariable Long id) {
    31.         Student student = studentRepository.findById(id)
    32.                 .orElseThrow(() -> new ResourceNotFoundException("Student not found with id: " + id));
    33.  
    34.         studentRepository.delete(student);
    35.         Map response = new HashMap<>();
    36.         response.put("deleted", Boolean.TRUE);
    37.         return ResponseEntity.ok(response);
    38.     }
    39. }

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

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

    npm install axios

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

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

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