🎭 API Mock 服务

后端接口还没写好?联调进度被卡住? 使用 API Mock 快速模拟 RESTful 接口响应,让前端开发与后端逻辑并行,彻底消除“等待”环节。

广告占位符 - 支撑免费工具运行

✨ 创建 Mock 接口
响应体 (JSON)
响应头 (Headers)
快速模板:

赞助商广告

解决前后端并行开发中的“阻塞”问题

在现代敏捷开发流程中,前后端通常是并行开展工作的。然而,理想很丰满,现实很骨感。 前端开发者经常遇到这样的困境:页面 UI 已经画好了,但后端接口还在定义中,或者因为数据库变动导致接口暂时不可用。 这时候,你就需要一个轻量级的 API Mock 服务。

🚨 场景 1:后端接口文档还没定,前端怎么写逻辑?

解决方案: 只要前后端口头约定好基本的数据结构,你就可以在这里创建一个 Mock 接口。 定义好 /api/user/profile ,填入约定的 JSON 结构,你的前端代码就可以直接发起 fetchaxios 请求。 当真实接口准备好后,只需修改一下 BaseURL。

🚨 场景 2:如何测试前端对“异常状态”的处理?

解决方案: 真实的后端接口很难随时抛出 500 错误或 403 权限不足。 在我们的工具中,你可以轻松创建一个状态码为 500 的接口,测试你的前端页面是否能正确显示“服务器繁忙”的友好提示。

本工具的核心优势

  • 纯前端运行 :所有 Mock 配置保存在本地浏览器中,无需担心隐私数据上传服务器。
  • 动态变量系统 :使用 {{uuid}} 生成唯一标识,使用 {{random:1-100}} 生成随机数,让模拟数据更真实。
  • Postman 兼容 :一键导出所有 Mock 配置为 Postman 集合,方便团队共享和进一步测试。

如何高效使用变量替换?

在响应体或响应头中,你可以嵌入以下占位符:

  • {{uuid}} :生成一个随机的 UUID。
  • {{timestamp}} :当前的时间戳。
  • {{date}} :当前的日期字符串。
  • {{random:min-max}} :生成指定范围内的随机整数。
❓ 常见问题 (FAQ)

这些接口真的可以被 fetch 调用吗?

是的!我们在内部通过拦截或 Service Worker 模拟响应(取决于实现环境)。在演示模式下,你可以直接在控制台测试。对于更复杂的联调,我们建议导出到 Postman 或 Mock 服务器。

数据会丢失吗?

数据保存在浏览器的 LocalStorage 中。只要不清除浏览器缓存,数据就会一直存在。建议重要配置定期使用“导出 JSON”进行备份。

操作成功