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

❌ 别再用接口文档开发了!我改用"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,不是偷懒,是一种「不依赖、快上线」的开发哲学。

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

相关推荐
abigale0327 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
程序员张33 小时前
SpringBoot计时一次请求耗时
java·spring boot·后端
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化