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') 生成随机图片地址
  这样模拟的数据更贴近真实场景（比如列表数据、不同用户信息）。

三、保存 & 调用：让模拟接口生效

保存配置：
点 Save，工具会把你配置的 “请求方法 + 名称 + 响应数据” 存为一个模拟接口。
获取模拟接口地址：
JSON Mock工具会在顶部生成一个访问 URL（如 http://xx.xxx/mock/xxx ），复制下来。
前端 / 工具调用：
- 前端代码里，把这个 URL 当真实接口请求（用 fetch/axios 等），就能拿到 mock 的 JSON 数据。
- 也能用 Postman 等工具，发送对应 HTTP 方法的请求到这个 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 数据并格式化展示，便于查看接口返回结构；同时捕获请求过程中的错误并展示。