JSON Mock 工具：模拟JSON API 接口（一）-CSDN博客
上一篇学习到，JSON Mock 工具，是用于模拟返回 JSON 数据的 API 接口，解决后端接口未就绪时前端无法开发测试的问题，实现 “无后端依赖” 的前端独立开发，提升协作效率。以下基于上篇的内容进行链接与拓展：
一、基础配置：定义接口 “身份”
选请求方法：
点GET下拉框（同时还支持POST/PUT等 ），选择模拟 HTTP 的方法（比如模拟获取数据用GET，模拟提交用POST）。
填接口名称：
Name填接口标识（如goods），方便识别，一般和功能关联。设响应状态码：
Http Code填200（成功 ）、400（参数错 ）等，模拟真实接口的响应状态，前端能据此做不同逻辑（比如401跳转登录 ）。
二、核心步骤：构造 JSON 响应数据
找到数据编辑区：
界面里的Root Node（或类似 “数据根节点” 区域 ），即定义 JSON 结构的地方。添加字段 / 结构：
- 点
+/Add Filed按钮，可新增字段，选字段类型（string/number/object/array等 ）。
- 比如模拟商品信息：
- 建一个
object类型节点（命名goods），展开后加string类型brand，值填"索尼"；加number类型 foundedYear，值填1946 等。 - 最终 JSON 结构：
{ "brand" : "索尼", "foundYear" : 1946, "productTypes1":{...}, "productTypes2":{...} }
- 建一个
- 点
灵活用 Mock 语法：JSON Mock 工具能生成随机数据（类似 Mock.js 语法 ）
例如：
- price，填
@integer(60,100)生成 60 - 100 的随机数
- 给
productTypes1新增description字段，值填@sentence，生成随机的单词句子
- 填
@image('200x100')生成随机图片地址
这样模拟的数据更贴近真实场景（比如列表数据、不同用户信息 ）。
- price，填
三、保存 & 调用：让模拟接口生效
保存配置：
点Save，工具会把你配置的 “请求方法 + 名称 + 响应数据” 存为一个模拟接口。获取模拟接口地址：
JSON Mock工具会在顶部生成一个访问 URL（如http://xx.xxx/mock/xxx），复制下来。前端 / 工具调用：
- 前端代码里，把这个 URL 当真实接口请求（用
fetch/axios等 ），就能拿到 mock 的 JSON 数据。 - 也能用 Postman 等工具，发送对应 HTTP 方法的请求到这个 URL，测试响应是否符合预期。
- 前端代码里，把这个 URL 当真实接口请求（用
四、前端调用接口
1. 原生 JavaScript + HTML 方式
（1）使用 Kooboo在线平台，创建页面结构与逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Mock 接口验证</title>
</head>
<body>
<button id="fetchBtn">调用 POST goods 接口</button>
<pre id="responseData"></pre>
<script>
const fetchBtn = document.getElementById('fetchBtn');
const responseData = document.getElementById('responseData');
fetchBtn.addEventListener('click', () => {
// 构造请求参数（根据接口需求，可传空对象或具体参数 ）
const requestData = {};
// Mock接口详细地址
fetch('https://xxx.com/mock/xxx', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP 错误！状态码：${response.status}`);
}
return response.json();
})
.then(data => {
responseData.textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
responseData.textContent = `请求失败：${error.message}`;
});
});
</script>
</body>
</html>
（2）代码说明
- 请求构造：通过
fetch发起 POST 请求，设置Content-Type为application/json声明数据格式，body中requestData为请求参数，无特殊需求时传空对象即可。 - 响应处理：先校验响应状态，再解析 JSON 数据并格式化展示，便于查看接口返回结构；同时捕获请求过程中的错误并展示。
2. 关键技巧：动态数据与异常模拟（提升模拟真实度）
- 动态数据生成：
开启字段旁 “mock” 按钮，自动生成随机值（如price生成 60-100 的随机数）。 - 异常场景模拟：
修改 HTTP 状态码为 404/500，或故意填错字段类型，测试前端错误处理逻辑。
三、总结
JSON Mock 工具通过 “可视化配置 + 零代码” 模式，实现了：
- 前端脱离后端独立开发，提前验证页面逻辑；
- 动态数据与异常场景模拟，提升测试覆盖度；
- 无缝衔接真实接口，减少联调阶段的适配成本。
- 实际应用中，结合 Postman 等工具可进一步提升接口验证效率，是前后端分离开发中的关键辅助工具。