在Vite+React项目中优雅实现Mock数据：前后端并行开发实践

我想说一句
319 阅读5分钟

前后端分离开发中最痛苦的时刻：前端页面写好了，后端接口还没完成。如何解决这个痛点？Mock数据技术给出了完美答案。

什么是Mock？为什么需要它？

Mock（模拟）是一种通过创建虚拟数据对象来替代真实依赖的技术。在前端开发中，我们使用Mock模拟后端API返回的数据。在前后端分离的开发模式中，Mock扮演着关键角色：

  1. 解除前后端耦合：前端不再依赖后端接口完成进度
  2. 并行开发：前后端可以同时进行开发工作
  3. 异常测试：轻松模拟网络错误、超时等边界情况
  4. 独立调试：前端可在本地完整测试所有业务场景

在我们的全栈开发项目中，React前端需要与Java/Node/Go后端协作，但后端接口尚未就绪时，Mock技术就成为项目推进的关键。

项目集成vite-plugin-mock

安装与配置

通过简单的命令安装Mock插件：

pnpm i vite-plugin-mock -D

在vite.config.js中配置插件：

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    react(),
    viteMockServe({
      mockPath: 'mock',  // Mock文件存放目录
      enable: true       // 是否启用Mock
    })
  ]
})

这个配置告诉Vite：在项目根目录的mock文件夹中查找Mock定义，并启用Mock服务。

创建Mock数据文件

在/mock/test.js中定义API模拟规则，数据格式需要在立项时规定的API接口文档一致，之后有了真正的后端接口，我们就只需要修改基础地址即可：

export default [
    {
        url: '/api/todos',
        method: 'get',
        response: () => {
            const todos = [
                {
                    id: 1,
                    title: '吃饭',
                    completed: false
                },
                {
                    id: 2,
                    title: '睡觉',
                    completed: true
                }
            ]
            return {
                code: 0, // 表示没有错误
                message: 'success',
                data: todos
            }
        }
    },
    {
        url: '/repos',
        method: 'get',
        response: () => {
            const repos = [
                {
                    id: 695370163,
                    name: 'ai_lesson',
                    description: "AI全栈工程师课程",
                },
                {
                    id: 152578450,
                    name: 'AlloyFinger',
                    description: "super tiny size multi-touch gestures library for the web. 　　　You can touch this",
                }
            ]
            return repos
        }
    }
]

这种声明式配置让API模拟变得直观且易于维护，每个API包含三个关键属性：

  • url：匹配请求路径
  • method：指定HTTP方法
  • response：生成动态响应的函数

我们可以用Apifox来测试一下，请求方式要一致和规定的，地址就是react所占用的端口加上我们设置的url： image.png

前后端协同开发流程

1. 定义接口规范（关键步骤！）

在项目启动阶段，前后端需共同确定接口规范：

GET /api/todos
响应格式：
{
  "code": 0,
  "data": [
    {
      "id": "string",
      "title": "string",
      "completed": "boolean"
    }
  ],
  "message": "string"
}

2. 前端Mock实现

基于接口规范，前端在Mock文件中实现模拟数据，并在组件中使用：

// api/index.js
export const getTodos = () => axios.get('/api/todos')

// App.jsx
useEffect(() => {
  const fetchData = async () => {
    const result = await getTodos()
    setTodos(result.data.data) // 访问模拟数据
  }
  fetchData()
}, [])

3. 无缝切换真实接口

当后端完成开发，只需修改config.js中的基础地址：

// 开发阶段 - 使用Mock
// axios.defaults.baseURL = ''

// 生产阶段 - 切换到真实API
axios.defaults.baseURL = 'https://api.yourservice.com'

整个过程无需修改任何业务逻辑代码，因为请求路径和数据结构保持不变。

Mock服务的运行原理

vite-plugin-mock在开发环境中创建了一个虚拟的API服务器：

  1. 拦截前端发起的API请求
  2. 根据URL和方法匹配Mock配置
  3. 执行response函数生成动态数据
  4. 返回模拟响应而不发送真实网络请求

实际项目应用示例

在App组件中同时展示待办事项和GitHub仓库：

function App() {
  const [todos, setTodos] = useState([])
  const [repos, setRepos] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      
      // 从真实API获取仓库数据
      const repoResult = await getRepos()
      setRepos(repoResult.data)
    }
    fetchData()
  }, [])

  return (
    <>
      
      <h1>Repos</h1>
      {repos.map(repo => (
        <div key={repo.id}>
          <h2>{repo.name}</h2>
          <p>{repo.description}</p>
        </div>
      ))}
    </>
  )
}

这种混合模式让我们在部分API未完成时也能进行完整的功能开发。

我们只需要将测试地址基础地址修改一下就可以完成我们的任务，因为数据格式是相同的，不需要再去做修改，非常省事

//  标准的http请求库，vue/react 都用它
import axios from "axios";
//  mock 地址
// axios.defaults.baseURL = 'http://localhost:5173'
// 线上地址有了
axios.defaults.baseURL = 'https://api.github.com/users/dwk-lzd'
export default axios

这是api文件中，写好的请求数据的函数

import axios from './config'

// todos接口
export const getTodos = () => {
    return axios.get('/todos')
}

export const getRepos = () => {
    return axios.get('/repos')
}

我们先来看使用axios.defaults.baseURL = 'http://localhost:5173'的结果：

image.png

再来看看axios.defaults.baseURL = 'https://api.github.com/users/dwk-lzd':

image.png 我们几乎没做修改，就完成了我们的工作，只是修改了一下基础地址，这就是mock的妙用

换到真实环境的注意事项

  1. 保持数据结构一致：Mock数据字段需与真实API完全一致
  2. 错误处理：在Mock中模拟的错误状态码（如401、500）应能被真实API复用
  3. 参数验证：Mock中使用的请求参数需符合后端要求
  4. 版本控制：将Mock文件纳入Git管理，方便团队协作

总结

通过vite-plugin-mock，我们实现了：

  1. 高效并行开发：前端不阻塞于后端进度
  2. 无缝切换：通过axios基础配置轻松切换环境
  3. 真实模拟：支持动态参数、延迟响应等特性
  4. 质量保障：提前进行完整的功能测试

Mock不是目的，而是手段。它通过创建临时替代品来保持开发流程的连续性，最终目标仍是构建高质量的产品。当真实API就绪时，我们只需修改一行配置就能完成切换，这种灵活性正是现代前端工程化的魅力所在。

avatar
文章
阅读
粉丝