SpringBoot+Vue用户管理系统：从Mock数据到真实API切换实践

在前后端分离项目中，使用Mock数据开发前端页面，再平滑切换到真实API是高效的工作流程。以下是关键步骤和代码示例：

一、Mock数据阶段（Vue前端）

1. Mock方案选择

   • 使用Mock.js拦截Ajax请求
   • 本地JSON文件模拟接口

   // src/mock/user.js
   import Mock from 'mockjs'
   Mock.mock('/api/users', 'get', {
     'data|5-10': [{
       'id|+1': 1,
       'name': '@cname',
       'email': '@email'
     }]
   })
   

2. Axios请求封装

   // src/utils/request.js
   import axios from 'axios'
   const service = axios.create({
     baseURL: '/api', // Mock拦截路径
     timeout: 5000
   })
   export default service
   

3. 组件调用示例

   // src/views/user/UserList.vue
   <script>
   import request from '@/utils/request'
   export default {
     async created() {
       const res = await request.get('/users')
       this.userList = res.data
     }
   }
   </script>
   

二、SpringBoot后端开发

1. RESTful API设计

   // UserController.java
   @RestController
   @RequestMapping("/api/users")
   public class UserController {
     @GetMapping
     public ResponseEntity<List<User>> getUsers() {
       return ResponseEntity.ok(userService.findAll());
     }
   }
   

2. 跨域解决方案（二选一）

   • 全局配置

     @Configuration
     public class CorsConfig implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080") // Vue开发地址
                .allowedMethods("*");
       }
     }
     

   • 注解配置

     @CrossOrigin(origins = "http://localhost:8080")
     @GetMapping
     public ResponseEntity<List<User>> getUsers() { ... }
     

三、切换真实API

1. 修改Vue请求基地址

   // src/utils/request.js
   const service = axios.create({
   - baseURL: '/api',      // 移除Mock路径
   + baseURL: 'http://localhost:8080/api', // SpringBoot地址
   })
   

2. 移除Mock拦截

   // src/main.js
   - import './mock' // 删除Mock导入
   

3. 环境变量配置（生产部署）

   # .env.production
   VUE_APP_BASE_API = 'https://your-domain.com/api'
   

   // request.js
   baseURL: process.env.VUE_APP_BASE_API
   

四、调试与验证

1. 接口测试工具

   • 使用Postman验证SpringBoot接口

   GET http://localhost:8080/api/users
   

2. 前端调试技巧

   • Chrome开发者工具 > Network标签
   • 检查HTTP状态码和响应体
   • 处理常见错误：
     • 404：检查后端路由注解
     • 401：添加JWT认证头
     • 500：查看服务端日志

3. 数据一致性处理

   // Vue组件添加错误处理
   try {
     const res = await request.get('/users')
   } catch (error) {
     console.error('API错误:', error.response.data)
   }
   

五、最佳实践建议

1. 接口规范

   • 统一响应格式：

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

2. 切换策略

   graph LR
   A[Mock开发阶段] --> B[后端接口完成]
   B --> C{接口验证}
   C -->|通过| D[切换基地址]
   C -->|失败| E[同步修改接口]
   

3. 持续集成

   • 使用Swagger维护API文档
   • Jest单元测试覆盖核心组件
   • 自动化构建时切换环境变量

关键点：通过抽象请求模块和环境变量配置，实现无缝切换。真实API上线后，应保留Mock能力用于异常场景测试。