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)示例代码:

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)示例代码:

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);
    }
}
  1. 调用后端API并显示数据:

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

首先,在Vue项目中安装axios库:

bash 复制代码
npm install axios

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

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

添加学生表单组件(AddStudentForm.vue)示例代码:

javascript 复制代码
<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类中添加如下配置:

java 复制代码
@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文件中添加如下配置:

javascript 复制代码
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};
相关推荐
Vicky&James10 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336414 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟23 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386323 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596024 分钟前
前端代理,解决跨域问题讲解
前端
quitv29 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238138 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星39 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端