正文

Vue3轻松对接Spring Boot，实现前后端高效协作全攻略

/0 浏览量
1030

引言

随着互联网技术的不断发展，前后端分离的开发模式已经成为主流。Vue3作为前端框架的代表，Spring Boot作为后端框架的佼佼者，两者的结合能够实现高效的前后端协作。本文将详细介绍Vue3与Spring Boot的对接方法，帮助开发者轻松实现前后端高效协作。

一、环境搭建

1.1 Vue3项目创建

首先，我们需要创建一个Vue3项目。可以使用Vue CLI工具来完成这一步骤。

vue create vue3-project

1.2 Spring Boot项目创建

接下来，创建一个Spring Boot项目。可以使用Spring Initializr来生成项目。

https://start.spring.io/

选择Maven作为构建工具，添加Web、Spring Data JPA等依赖。

二、前后端对接

2.1 接口设计

在Spring Boot项目中，首先需要设计接口。以下是一个简单的用户管理接口示例：

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/list")
    public ResponseEntity<List<User>> list() {
        return ResponseEntity.ok(userService.findAll());
    }

    @PostMapping("/add")
    public ResponseEntity<User> add(@RequestBody User user) {
        return ResponseEntity.ok(userService.save(user));
    }

    @PutMapping("/update")
    public ResponseEntity<User> update(@RequestBody User user) {
        return ResponseEntity.ok(userService.save(user));
    }

    @DeleteMapping("/delete/{id}")
    public ResponseEntity<Void> delete(@PathVariable Long id) {
        userService.delete(id);
        return ResponseEntity.ok().build();
    }
}

2.2 Vue3调用接口

在Vue3项目中，可以使用axios库来调用Spring Boot接口。

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:8080'
});

export default api;

接下来，使用api调用接口：

import api from './api';

export default {
    name: 'UserList',
    data() {
        return {
            users: []
        };
    },
    created() {
        this.fetchUsers();
    },
    methods: {
        fetchUsers() {
            api.get('/user/list').then(response => {
                this.users = response.data;
            });
        }
    }
};

三、跨域问题

在开发过程中，可能会遇到跨域问题。为了解决这个问题，可以在Spring Boot项目中添加CORS拦截器。

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true);
    }
}

四、总结

通过本文的介绍，相信你已经掌握了Vue3与Spring Boot的对接方法。在实际开发过程中，可以根据项目需求进行调整和优化。希望这篇文章能帮助你实现前后端高效协作，提高开发效率。

-- 展开阅读全文 --