❌ 别再用接口文档开发了！我改用“Mock-First”后爽到飞起

七月丶2025-04-25 10:27

❌ 别再用接口文档开发了！我改用"Mock-First"后爽到飞起

"需求还没定、接口还在画、我代码已经跑起来了。"

以前做项目的时候，我们习惯等产品开完会、接口文档出完，再开始对接开发。结果呢？

前端等后端接口
后端接口改动，前端全重写
QA 说「这个字段对不上」

我现在统一团队流程：用 Mock 驱动开发，一口气解决这些问题。****

🚀 什么是 Mock-First 开发？

简单说，就是：

前端和后端约定 API 返回结构，然后前端直接根据 Mock 数据启动开发。

等接口 Ready，只需把 mock 切换成真实请求 ✅

⚒ 我怎么落地 Mock-First 的？

项目统一 mock 文件结构：

bash 复制代码

/mock
  ├── expense.ts        // /api/expense
  ├── auth.ts           // /api/login
  └── ...

mock 文件结构统一使用 vite-plugin-mock，支持本地启动自动注入 API：

javascript 复制代码

export default [
  {
    url: '/api/expense',
    method: 'get',
    response: () => ({
      total: 999,
      list: [...Array(10)].map((_, i) => ({ id: i, amount: 100 })),
    }),
  },
]

启动项目即拥有完整接口体验：

shell 复制代码

pnpm dev
# 所有 /api 路由 mock 自动生效

🧩 Mock-First 带来的好处？

✅ 不等接口，立刻开发

UI 写完，逻辑能调，完全模拟真实接口体验。

✅ 前后端提前约定数据结构

不再用脑子记字段，mock 文件就是文档。

✅ 更好测试逻辑分支

mock 可以按参数、状态模拟各种返回，不再等接口「上线测试环境」。

✅ 上线更稳，接口替换零改动

只需切换请求库 baseURL，mock 数据无感下线。

📦 项目实践场景（我的真实例子）

我目前的 CLI 工具、桌面 App、Flutter 项目，前期全部用 mock 开发逻辑：

gix：CLI 项目 mock 命令输出做测试
ixiu：Electron 本地提醒模拟时间任务
Flutter App：mock 数据驱动 UI 状态图、数据页分析图表

🧠 总结一句：

你不是不努力，是流程让你内耗。

Mock-First，不是偷懒，是一种「不依赖、快上线」的开发哲学。

写代码最怕"等"。不如自己把接口"造"出来。