使用Swager API Docs和easy-mock生成模擬數據

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

常見的Mock方式：

1. 將模擬數據直接寫在代碼裡
2. 利用javascript攔截請求
3. 利用Charles、Fiddler等工具攔截請求

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

登錄easy-mock創建項目

點擊+號創建項目

填寫項目信息

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

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

接口文檔如圖所示:

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

預覽接口

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

如下圖所示：

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

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

<code>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))/<code>

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

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

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

簡單的舉個栗子：

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

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

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

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

閱讀更多 敏鍋說 的文章

關鍵字: JavaScript 模擬