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 等工具可進一步提升接口驗證效率，是前后端分離開發中的關鍵輔助工具。
![[xiaozhi-esp32] 應用層(9種state) | 音頻編解碼層 | 雙循環架構](http://pic.xiahunao.cn/[xiaozhi-esp32] 應用層(9種state) | 音頻編解碼層 | 雙循環架構)
