你有没有过这种经历?做前端开发时,后端同事的接口还没写完,你这边要调页面数据,只能对着空控制台发呆?要么手动写个 JSON 文件当假数据,改一次数据就得重新保存文件、刷新页面;要么用在线 Mock 工具,每次换电脑还得重新配,遇到网络差的时候直接加载不出来,那叫一个闹心!
其实我之前也总被这问题卡壳,直到上个月在 Github 逛开源项目时,发现了 Mockoon—— 一个免费开源的本地 Mock 服务工具,它的 Github 仓库地址是https://github.com/mockoon/mockoon,支持 Windows、Mac、Linux,下载下来就能用,不用装任何依赖。小索奇用它搭了一次 Mock 服务后,现在做项目再也不用等后端接口了,今天就跟你好好说说它有多实用。
先讲它最核心的优势:完全本地运行,不用依赖网络。你想想看,不管你是在没网的会议室,还是地铁上改代码,打开 Mockoon 就能启动 Mock 服务,接口地址是localhost开头的本地地址,响应速度比在线工具快多了。上次我去客户公司对接需求,他们会议室网特别差,在线 Mock 工具根本打不开,我掏出 Mockoon,三分钟搭好用户登录、列表查询的接口,前端页面直接跑起来,客户当场就说 “你们效率真高”,其实全靠这工具救场。
而且它的可视化界面真的太友好了,不用写一行命令。打开软件后,点 “新建环境”,再点 “新建路由”,就能设置接口路径(比如 /api/user/list)、请求方法(GET/POST 都支持),然后在 “响应” 里填 JSON 数据就行。更方便的是,它还能生成动态数据 —— 比如你需要随机的用户名、手机号,不用手动编,直接用它自带的变量,比如 {{faker:name.firstName}} 能生成随机名,{{faker:phone.phoneNumber}} 能生成随机手机号,甚至还能设置响应延迟,模拟真实接口的加载时间,这对测试 loading 状态太有用了。
我举个具体例子:上次做电商项目,需要一个商品列表接口,要返回 10 条商品数据,每条有 id、名称、价格、库存。用 Mockoon 的话,先建个 GET /api/goods/list 的路由,然后在响应里写个 JSON 数组,id 用 {{uuid}} 生成唯一 ID,价格用 {{number:between (10, 200)}} 生成 10 到 200 之间的随机数,库存用 {{number:between (0, 1000)}},保存后启动服务,前端直接调这个接口,每次刷新都能拿到不同的价格和库存数据,比手动写 10 条静态数据省事多了,而且还能模拟库存为 0 的情况,不用改代码就能测试缺货状态。
说到细节,有个功能我必须夸:支持多环境切换。比如你开发时需要 “开发环境” 的 Mock 数据(比如返回测试账号),测试时需要 “测试环境” 的 Mock 数据(比如返回异常状态码,像 401 未登录、500 服务器错误),不用删了重建,直接在 Mockoon 里建两个环境,点一下就能切换。小索奇上次做登录功能,要测试 “账号不存在”“密码错误” 的情况,建了个 “异常场景” 环境,每个错误状态对应一个接口,测试的时候切过去就行,不用每次改响应数据,效率直接翻倍。
可能有人会问:“这工具是开源的,会不会有 bug 啊?更新及时吗?” 我翻它 Github 仓库的时候注意到,维护团队更新挺频繁的,最近一次更新就在上个月,而且 Issues 里的问题回复也快。我之前遇到过一次 “响应头设置不生效” 的问题,去 Github 提了个 Issue,两天就有人回复解决办法,后来新版本还直接修复了这个小 bug,这种开源项目的社区支持真的很良心。
还有个小技巧要分享:它支持导入导出配置。你把自己搭好的 Mock 环境导出成 JSON 文件,发给团队同事,他们导入到自己的 Mockoon 里就能直接用,不用每个人都重复配置。上次我们团队做同一个项目,我把用户、订单、商品三个模块的 Mock 配置导出来,同事们导入后,大家调的接口都一致,后期对接后端接口时,只需要把请求地址从localhost改成真实接口地址,不用改任何逻辑,省了很多沟通成本。
不过有个小提醒:它主要是做本地 Mock 服务,如果你需要团队共享的在线 Mock 服务,可能还需要配合其他工具,但对于个人开发或者小团队本地联调,它绝对够用了。我问过做后端的朋友,他们有时候也用 Mockoon 模拟前端请求,测试自己的接口逻辑,没想到一个工具还能前后端都用。
现在你是不是也想试试?其实 Mockoon 还有很多隐藏功能,比如支持 HTTPS、自定义响应头、批量导入路由,这些你用熟了之后还能玩出更多花样。小索奇现在做项目,第一步就是用它搭好 Mock 服务,后端接口好之前,我这边就能把页面逻辑、交互都做好,等接口一好,无缝切换,根本不用等。
最后想问问你:你平时做 Mock 数据都是用什么方法?是写静态 JSON 文件,还是用在线工具?有没有遇到过 Mock 数据和真实接口格式不匹配的情况?评论区跟我聊聊呗,大家一起交流点提高效率的小技巧。
我是【即兴小索奇】,点击关注,获取更多相关资源