Vue 3与Spring Boot集成：全栈开发指南

Vue 3与Spring Boot的集成是现代全栈开发中非常流行的一种技术组合。Vue 3作为前端框架，提供了强大的组件化开发能力，而Spring Boot则在后端提供了快速构建RESTful API的能力。本文将详细介绍如何将Vue 3与Spring Boot进行集成，并提供从环境搭建到数据交互的完整流程。

一、环境准备

1. Vue 3项目初始化

使用Vue CLI或Vite来创建一个Vue 3项目：

npm install -g @vue/cli
vue create vue3-app

或者使用Vite：

npm init vite@latest vue3-app --template vue
cd vue3-app
npm install

2. Spring Boot项目初始化

通过Spring Initializr (https://start.spring.io/) 创建一个Spring Boot项目，选择以下依赖：

• Spring Web
• Spring Data JPA
• H2 Database（或其他数据库）

下载并解压项目，导入IDE（如IntelliJ IDEA）。

二、前后端分离架构设计

1. 前端与后端的职责划分

• 前端：负责用户界面和交互逻辑。
• 后端：负责业务逻辑处理和数据存储。

2. 数据交互方式

前端通过HTTP请求与后端进行通信，通常使用Axios库发送GET、POST等请求。

三、Spring Boot后端开发

1. 创建实体类

以“用户”为例，定义一个简单的实体类：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;

    // Getters and Setters
}

2. 创建Repository接口

public interface UserRepository extends JpaRepository<User, Long> {
}

3. 创建Controller

@RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }
}

四、Vue 3前端开发

1. 安装Axios

用于发送HTTP请求：

npm install axios

2. 创建API服务

在src/services目录下创建userService.js文件：

import axios from 'axios';

const API_URL = 'http://localhost:8080/api/users';

export const fetchUsers = async () => {
    const response = await axios.get(API_URL);
    return response.data;
};

export const createUser = async (user) => {
    const response = await axios.post(API_URL, user);
    return response.data;
};

3. 组件开发

创建一个展示用户的组件UserList.vue：

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.email }}</li>
    </ul>
    <button @click="fetchData">Refresh</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { fetchUsers } from '../services/userService';

export default {
  setup() {
    const users = ref([]);

    const fetchData = async () => {
      users.value = await fetchUsers();
    };

    fetchData();

    return { users, fetchData };
  }
};
</script>

五、前后端联调

1. 启动Spring Boot应用

运行Spring Boot应用程序：

mvn spring-boot:run

2. 启动Vue 3应用

在Vue 3项目的根目录运行：

npm run serve

3. 跨域问题解决

在Spring Boot中添加跨域支持：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080", "http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

六、扩展讨论

1. 状态管理

对于复杂的应用，可以引入Vuex或Pinia来管理状态。

2. 安全性

使用JWT或OAuth2为API增加身份验证。

3. 部署方案

可以将Vue 3打包后的静态文件部署到Nginx，Spring Boot应用部署到Tomcat或Docker容器中。

sequenceDiagram
    participant Frontend as Vue 3
    participant Backend as Spring Boot
    Frontend->>Backend: GET /api/users
    Backend-->>Frontend: [User List]
    Frontend->>Backend: POST /api/users
    Backend-->>Frontend: Created User