解决前后端并行开发中的“阻塞”问题
在现代敏捷开发流程中,前后端通常是并行开展工作的。然而,理想很丰满,现实很骨感。 前端开发者经常遇到这样的困境:页面 UI 已经画好了,但后端接口还在定义中,或者因为数据库变动导致接口暂时不可用。 这时候,你就需要一个轻量级的 API Mock 服务。
🚨 场景 1:后端接口文档还没定,前端怎么写逻辑?
解决方案:
只要前后端口头约定好基本的数据结构,你就可以在这里创建一个 Mock 接口。 定义好
/api/user/profile
,填入约定的 JSON 结构,你的前端代码就可以直接发起
fetch
或
axios
请求。 当真实接口准备好后,只需修改一下 BaseURL。
🚨 场景 2:如何测试前端对“异常状态”的处理?
解决方案: 真实的后端接口很难随时抛出 500 错误或 403 权限不足。 在我们的工具中,你可以轻松创建一个状态码为 500 的接口,测试你的前端页面是否能正确显示“服务器繁忙”的友好提示。
本工具的核心优势
- 纯前端运行 :所有 Mock 配置保存在本地浏览器中,无需担心隐私数据上传服务器。
-
动态变量系统
:使用
{{uuid}}生成唯一标识,使用{{random:1-100}}生成随机数,让模拟数据更真实。 - Postman 兼容 :一键导出所有 Mock 配置为 Postman 集合,方便团队共享和进一步测试。
如何高效使用变量替换?
在响应体或响应头中,你可以嵌入以下占位符:
-
{{uuid}}:生成一个随机的 UUID。 -
{{timestamp}}:当前的时间戳。 -
{{date}}:当前的日期字符串。 -
{{random:min-max}}:生成指定范围内的随机整数。