前面文章已經搭建了本地的easy-mock

本地搭建Easy-Mock實現模擬數據

常見的Mock方式：

將模擬數據直接寫在代碼里

利用javascript攔截請求

利用Charles、Fiddler等工具攔截請求

以上方式各有千秋，我們要說的是使用Swager API Docs和easy-mock生成模擬數據

登錄easy-mock創建項目

點擊+號創建項目

填寫項目信息

• 歸屬 ：默認已經生成好了
• 項目名：與你的實際項目名一致，就可以了
• 項目基礎URL：沒有特殊要求，盡量簡短表意，和你的項目保持一致就可了
• 項目描述：輸入簡短的項目描述
• Swagger Docs API：重要，輸入Swagger描述文件URL，Easy Mock會自動基于此描述文檔創建Mock接口

描述文件的URI可以從接口文檔中找到，如圖所示：

接口文檔如圖所示:

創建項目完成，自動生成了所有的Mock接口

預覽接口

可以看到，自動生成并返回的Response數據，這個時候就可以完全脫離后端了，前端可以在后端還沒有開發或開發不完善的情況下，使用該Mock數據也能完成前后端分離的調試

如下圖所示：

前端只需發出如下圖請求即可：

什么？不相信，我們試試！！

var baseUrl ="http://localhost:7300/mock/5eaaed4a7a3fdf16dc164663/mall" ; var params = { url: baseUrl +'/subject/list',//基礎url拼接接口url success: function (res) {//success為請求成功之后，會返回接口內容，打印res就能拿到 console.log(res); }, error: function (error) { console.log(error); } };//以下是ajax請求過程 var xhr = new XMLHttpRequest(); // 定義xhr對象的請求響應事件 xhr.onreadystatechange = function() { switch(xhr.readyState) { case 0 : //alert("請求未初始化"); break; case 1 : //alert("請求啟動，尚未發送"); break; case 2 : //alert("請求發送，尚未得到響應"); break; case 3 : //alert("請求開始響應，收到部分數據"); break; case 4 : if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { var data = xhr.responseText; params.success(JSON.parse(data)); }else { var data = xhr.responseText; params.error(JSON.parse(data)); } break; } }; xhr.open("get", params.url, true); xhr.send(JSON.stringify(params.data))

以下內容正是接口中編寫的返回的內容：

編輯數據

以上的Mock數據有些可能是不符合我們要求的，需要修改，點擊編輯數據

左側是對數據對象的說明，在這里改成我們想要的數據即可，需要了解Moke.js語法

簡單的舉個栗子：

categoryId使用了正則表達式定義在了0-9范圍內

查看返回的數據：這時的categoryId只能在0-9之間了，因為有正則表達式的約束。

更多的Mock.js語法查看文檔：https://github.com/nuysoft/Mock/wiki

一鍵模擬數據，讓我們不再依賴后端，只專注前端的業務，等后端把接口寫完之后，再進行聯合調試就可以了，這樣我們就不費吹灰之力搞定了所有難題。

總結

以上是生活随笔為你收集整理的mock模拟的数据能增删改查吗_使用Swager API Docs和easy-mock生成模拟数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。