前面文章已經(jīng)搭建了本地的easy-mock

本地搭建Easy-Mock實現(xiàn)模擬數(shù)據(jù)

常見的Mock方式：

將模擬數(shù)據(jù)直接寫在代碼里

利用javascript攔截請求

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

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

登錄easy-mock創(chuàng)建項目

點擊+號創(chuàng)建項目

填寫項目信息

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

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

接口文檔如圖所示:

創(chuàng)建項目完成，自動生成了所有的Mock接口

預(yù)覽接口

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

如下圖所示：

前端只需發(fā)出如下圖請求即可：

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

var baseUrl ="http://localhost:7300/mock/5eaaed4a7a3fdf16dc164663/mall" ; var params = { url: baseUrl +'/subject/list',//基礎(chǔ)url拼接接口url success: function (res) {//success為請求成功之后，會返回接口內(nèi)容，打印res就能拿到 console.log(res); }, error: function (error) { console.log(error); } };//以下是ajax請求過程 var xhr = new XMLHttpRequest(); // 定義xhr對象的請求響應(yīng)事件 xhr.onreadystatechange = function() { switch(xhr.readyState) { case 0 : //alert("請求未初始化"); break; case 1 : //alert("請求啟動，尚未發(fā)送"); break; case 2 : //alert("請求發(fā)送，尚未得到響應(yīng)"); break; case 3 : //alert("請求開始響應(yīng)，收到部分?jǐn)?shù)據(jù)"); 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))

以下內(nèi)容正是接口中編寫的返回的內(nèi)容：

編輯數(shù)據(jù)

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

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

簡單的舉個栗子：

categoryId使用了正則表達(dá)式定義在了0-9范圍內(nèi)

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

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

一鍵模擬數(shù)據(jù)，讓我們不再依賴后端，只專注前端的業(yè)務(wù)，等后端把接口寫完之后，再進(jìn)行聯(lián)合調(diào)試就可以了，這樣我們就不費吹灰之力搞定了所有難題。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。