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

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

相关推荐
烛阴15 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
六毛的毛27 分钟前
Springboot开发常见注解一览
java·spring boot·后端
AntBlack34 分钟前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
315356691336 分钟前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx41 分钟前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
uzong1 小时前
curl案例讲解
后端
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑