mock 數據 解決方案

前端工程化之--Mock解決方案   https://www.jianshu.com/p/720b12b5d120

1、爲何要使用mock數據：

　　一、後端接口數據沒有的時候，前端根據接口文檔，使用 mock 數據模擬後端數據。（我的以爲 這裏使用 mock數據並非很重要，還要本身根據文檔配數據）

　　二、後端接口開發好，可是 測試環境數據有限，生產環境數據比較全。經過代理本地是能夠直接使用生產環境的數據。可是若是生產環境代碼有認證系統，認證經過，由服務器決定跳轉到指定的 生產上的域名地址。頁面沒有跳轉到本地的域名的地址，沒法調試開發。

　　　 可是測試環境是能夠正常跳到 本地 域名頁面的，這個時候能夠把測試環境數據不足的接口使用MOCK數據（直接把生產上返回的數據直接複製到mock數據上就能夠了，根本不須要直接配mock了）。【開發醫保大數據就碰到這個狀況】

　　總結：mock 數據不要全部的接口都是mock數據。配了mock數據的接口，請求會被攔截，使用mock數據；沒有配置的話，請求正常發出，從後端接口獲取數據。【antd pro 腳手架安裝的項目，就是這個邏輯的mock】

---

2、mockjs

一、官網： http://mockjs.com/  或  http://www.javashuo.com/article/p-uiqatlqd-ks.html (這個是使用 script 引入mockjs使用的)

二、Mock.mock() ：   https://github.com/nuysoft/Mock/wiki/Mock.mock()

　　a、Mock.mock( rurl, template )     ，當攔截到匹配 rurl 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並做爲響應數據返回。

　　b、Mock.mock( rurl, function( options ) )    ，當攔截到匹配 rurl 的 Ajax 請求時，函數 function(options) 將被執行，並把執行結果做爲響應數據返回。

3 、Mock.setup() ： https://github.com/nuysoft/Mock/wiki/Mock.setup()

四、 Mock.Random ：  https://github.com/nuysoft/Mock/wiki/Mock.Random   （Mock.Random 是一個工具類，用於生成各類隨機數據。）

　　這裏面的隨機數據基本包含可能會用到的全部數據。

五、擴展：  經過擴展，能夠從自定義的數據中隨機選取。（注意，新版的mockjs，對外暴露的藉口只有Mock，因此Random方法掛在Mock對象下，即Mock.Random）

Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蠍座', '射手座', '摩羯座', '水瓶座', '雙魚座']
        return this.pick(constellations)
    }
})

Random.constellation()
// => "水瓶座"

總結：直接使用mockjs做爲假數據，在某些地方仍是很好用的。好比返回多種不同的隨機數（須要過一會就變化的動態數據）。使用mockjs自帶的接口能夠很方便。

3、 Postman搭建mock server （推薦）

   　　　　參考： https://1991421.cn/2018/07/29/74fadb6c/  或 http://www.javashuo.com/article/p-xlytufgl-np.html （推薦，親測有效）

　　　　　　　　postman的使用方法詳解  ：  http://www.javashuo.com/article/p-pcgfxfnp-hd.html

 　　　　說明：本質上 Postman 內置的 mock server 是在 將配置好的接口以及響應數據都放到了 外網的服務器上了（相似在線mock服務）。

　　　　　　　 這個經過斷網，就沒有響應數據就已經驗證了。

　　　　注意：一、Postman 的 mock server 只是域名改變，後面的數據都不變

　　　　　　　二、一個項目能夠創建多個 mock server 域名（域名是項目爲單位創建的），可是這些域名都是等價的。（能夠理解爲指向的同一個IP）

　　　　　　　三、一個接口地址能夠有多個響應數據的模板（模板是以接口爲單位創建的，能夠把以前請求的數據做爲模板）。

　　　　　　　　　至於多個響應模板，實際響應的是哪一個模板怎麼選，還沒研究出來。暫時就讓一個接口，一個響應吧。

　　　　　　    四、mock serve對應的接口，只是把原來接口的域名改爲 mock server 域名就能夠了。

　　　　　　　五、postman設置環境變量（如開發環境，生產環境），通常一個變量對應的是一個域名。

　　　　　　　　  若是，咱們把開發環境和生產環境的域名都設置成一個變量 url ，把請求地址都用 {{ url }} + "/abc"來表示，則只要切換不一樣的環境就能夠訪問對應的接口了。

　　　　　　　　   而不須要從新輸入請求地址。

4、在線mock服務  

　　參考 ： https://www.easy-mock.com/ （easy-mock挺好用的，就是請求相對本地比較慢）

 

5、本地搭建  mock server 服務器 （這個比較繁瑣，不適合前端使用，目前沒有發現安裝軟件就能夠的mock server 服務器）

  　　

6、使用 json文件模擬後臺數據  （最簡單，推薦這個）

 　　使用json文件模擬後臺的數據雖然方便，可是有條件限制：

　　　　a、只能經過get請求獲取json文件，由於靜態服務器處理不了post請求，post請求須要後端程序處理   https://blog.csdn.net/u012612399/article/details/50888448

　　　　b、請求的json文件，必須放在web服務器上（靜態服務器）。資源管理器 (file協議) 處理不了ajax的請求，沒法給出響應的數據。

 

 

 

總結： mock.js        的優點在於能夠經過   js 程序生成 任意數量且隨機的數據（若是數據條數不少，js用一個循環就能夠生成，這樣就提現出優點來了）； 

           mock服務器  的數據須要本身對應一個一個輸入，使用這種方式徹底不須要去配置，很方便，並且是徹底接近真實運行環境的。（推薦這種方式，開發時不多會用到大量的數據，本身設置字段也不會很複雜）