一、mock解決的問題

　　開發時，後端還沒完成資料輸出，前端只好寫靜態模擬資料。資料太長了，將資料寫在js檔案裡，完成後挨個改url。某些邏輯複雜的程式碼，加入或去除模擬資料時得小心翼翼。想要儘可能還原真實的資料，要麼編寫更多程式碼，要麼手動修改模擬資料。特殊的格式，例如IP,隨機數，圖片，地址，需要去收集

 

二、mock優點

　　

　　1、前後端分離 　　讓前端工程師獨立於後端進行開發。   　　2、增加單元測試的真實性 　　通過隨機資料，模擬各種場景。   　　3、開發無侵入 　　不需要修改既有程式碼，就可以攔截Ajax請求，返回模擬的響應資料。   　　4、用法簡單 　　符合直覺的介面。   　　5、資料型別豐富 　　支援生成隨機的文字、數字、布林值、日期、郵箱、連結、圖片、顏色等。   　　6、方便擴充套件 　　支援支援擴充套件更多資料型別，支援自定義函式和正則。   　　7、在已有介面文件的情況下，我們可以直接按照介面文件來開發，將相應的欄位寫好，在介面完成 之後，只需要改變url地址即可。   三、mock的基本使用 　　 　　1、安裝mockJS       cnpm install mockjs -S   　   2、使用mockJS（mock/index.js）       import Mock from "mock";         3、官方文件       https://github.com/nuysoft/Mock/wiki/Syntax-Specification         4、Mock.mock       Mock.mock([rurl],[rtype],[template|function(options)])        這裡的引數都是可選：           rurl(可選)。         表示需要攔截的 URL，可以是 URL 字串或 URL 正則。例如 /shoopList          rtype(可選)。        表示需要攔截的 Ajax 請求型別。例如 GET、POST、PUT、DELETE 等。          template(可選)。        表示資料模板，可以是物件或字串。例如 { ‘data|1-10’:[{}] }          function(options)(可選)。        表示用於生成響應資料的函式。          options：指向本次請求的 Ajax 選項集 　　　     5、模擬資料介面 　　

//定義資料
const data = Mock.mock({
    "data|20": [{
        "goodsId|+1": 1,
        "goodsName": "@ctitle(10)",
        "goodsTel": /^1(5|3|7|8)[0-9]{9}$/,
        "goodsAddress": "@county(true)",
        "goodsLogo": "@Image('200x100', 'EasyMock')",
    }]
})


//模擬資料介面

Mock.mock(/\/shoopList/,"post",function(options){
    console.log(options);
    return data
    
})

/* 　　輸出的options的值為 　　　　url:"請求的地址" 　　　　type:"請求的型別" 　　　　body:post提交的資料 */

　　6、在main.js中引入mock/index.js    　　 import "../src/utils/mock";