Vue+SpringBoot联调实战：告别Mock数据

原创已于 2025-12-17 06:21:32 修改 · 435 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2025-12-17 01:51:25 首次发布

1. 理解目标

前端 (Vue)：移除 Mock.js 等模拟数据工具，改为调用真实的后端 API。
后端 (SpringBoot)：提供符合前端需求的 RESTful API 接口。
核心挑战：接口路径、数据格式、跨域问题、身份验证的一致性。

2. 准备工作

后端 (SpringBoot)

API 设计
设计符合 RESTful 规范的 API，例如：
- 用户列表：GET /api/users
- 新增用户：POST /api/users
- 修改用户：PUT /api/users/{id}
- 删除用户：DELETE /api/users/{id}

统一响应格式
使用统一的数据结构，例如：

{
  "code": 200,
  "message": "success",
  "data": { ... }
}

解决跨域问题
在 SpringBoot 中配置 CORS：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*") // 实际项目需指定域名
                .allowedMethods("*");
    }
}

实现用户管理接口
使用 Spring Data JPA 或 MyBatis 实现 CRUD 逻辑。

前端 (Vue)

封装 API 请求模块
使用 axios 封装请求实例：

// src/utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取
  timeout: 5000,
});

// 请求拦截器（如添加 Token）
service.interceptors.request.use(config => {
  config.headers.Authorization = localStorage.getItem('token');
  return config;
});

// 响应拦截器（统一处理错误）
service.interceptors.response.use(
  response => response.data,
  error => {
    console.error('API Error:', error);
    return Promise.reject(error);
  }
);

export default service;

替换 Mock 调用为真实 API
修改 Vue 组件中的请求逻辑：

// 原 Mock 写法（删除）
// Mock.mock('/api/users', 'get', { ... })

// 改为真实 API
import request from '@/utils/request';

export function getUserList(params) {
  return request.get('/api/users', { params });
}

更新环境变量配置
在 .env.development 和 .env.production 中配置后端地址：

VUE_APP_BASE_API = 'http://localhost:8080' // 开发环境
VUE_APP_BASE_API = 'https://api.yourdomain.com' // 生产环境

3. 关键切换步骤

步骤 1：关闭前端 Mock 服务

移除或注释掉 Vue 项目中引入 Mock.js 的代码（通常在 src/main.js 或单独模块）。

步骤 2：启动后端服务

确保 SpringBoot 应用正常运行，接口可访问：

http://localhost:8080/api/users

步骤 3：前端调用测试

在 Vue 组件中调用真实接口，检查网络请求和响应：

// 示例：获取用户列表
async loadUserList() {
  try {
    const res = await getUserList();
    this.userList = res.data;
  } catch (error) {
    this.$message.error('获取用户列表失败');
  }
}

步骤 4：联调与调试

检查数据格式：确保后端返回的数据结构与前端预期一致。
处理认证：如 JWT 验证，前端需在请求头中携带 Token。
错误处理：统一拦截 401（未授权）、500（服务器错误）等状态码。

4. 常见问题与解决

跨域问题 (CORS)

后端需正确配置 Access-Control-Allow-Origin。

开发环境下可配置 Vue 代理：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
}

接口 404 错误
- 检查后端接口路径是否与前端请求路径一致。
- 确保 SpringBoot 控制器注解正确：
```
@RestController
@RequestMapping("/api/users")
public class UserController { ... }
```

数据格式不一致

使用 Postman 测试后端接口，确认响应格式。

在前端响应拦截器中适配数据：

service.interceptors.response.use(res => {
  if (res.code === 200) {
    return res.data; // 提取实际数据
  } else {
    throw new Error(res.message);
  }
});

5. 安全增强建议

JWT 身份验证
- 后端生成 Token 并返回给前端。
- 前端存储 Token（建议使用 HttpOnly Cookie 或安全存储）。

API 权限控制
SpringBoot 中使用 @PreAuthorize 注解实现方法级权限：

@DeleteMapping("/{id}")
@PreAuthorize("hasRole('ADMIN')")
public Result deleteUser(@PathVariable Long id) { ... }

6. 总结

前后端协作：定义清晰的接口文档（如 Swagger）。
渐进式切换：可先切换部分非核心接口，逐步验证。
监控与日志：后端记录请求日志，前端捕获异常并上报。

通过以上步骤，即可平稳地将用户管理系统从 Mock 数据切换到真实 API 环境。

标签

#vue.js #spring boot #前端