mock基本使用

**一.mock解決的問題**

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

 

**2、mock優勢**

　　

　　1、先後端分離

　　讓前端工程師獨立於後端進行開發。

 

　　2、增長單元測試的真實性

　　經過隨機數據，模擬各類場景。

 

　　3、開發無侵入

　　不須要修改原有代碼，就能夠攔截Ajax請求，返回模擬的響應數據。

 

　　4、用法簡單

　　符合直覺的接口。

 

　　5、數據類型豐富

　　支持生成隨機的文本、數字、布爾值、日期、郵箱、連接、圖片、顏色等。

 

　　6、方便擴展

　　支持支持擴展更多數據類型，支持自定義函數和正則。

 

　　7、在已有接口文檔的狀況下，咱們能夠直接按照接口文檔來開發，將相應的字段寫好，在接口完成 以後，只須要改變url地址便可。

 

**3、mock的基本使用**

　　

　　1、安裝mockJS

​      cnpm install mockjs -S

 

　   二、使用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、模擬數據接口

　　

[![複製代碼](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);)

```
//定義數據
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提交的數據

*/

```

```

[![複製代碼](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);)

　　六、在main.js中引入mock/index.js

   　　 import "../src/utils/mock";

 

　　7、例子

[![複製代碼](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);)

```
//  apis/shop.js

const Mock  = require("mockjs");
let data = Mock.mock({
    "data|50":[
        {
            "shopId|+1": 1,
            "shopName": "@ctitle(10)",
            "shopTel": /^1(5|3|7|8)[0-9]{9}$/,
            "shopAddress": "@county(true)",
            "shopStar|1-5": "★",
            "salesVolume|30-1000": 30,
            "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')",
            "food|7":[
                {
                    "foodName":"@cname(5)",
                    "foodPic":"@Image('100x40','#c33', '#ffffff','小可愛')",
                    "foodPrice|1-100":20,
                }
            ]
        }
    ]
})


let dataList = data.data;

function currentPage(page,limit){

    var arr =  dataList.filter((item,index)=>{
    
        return index<(page*limit) && index>=(page-1)*limit
     })
     return arr;
}

const getShopPage = (config)=>{
    let {page,limit} = pathParams(config.url.split("?")[1]);
   
    return {
        data:currentPage(page,limit),
        page:Math.ceil(dataList.length/limit)
    };
       


}


const modifyShop = (config)=>{
    let obj = pathParams(config.body);
    let page = obj.page;
    delete obj.page;
    dataList[obj.shopId-1] = {...dataList[obj.shopId],...obj};
    console.log(dataList[obj.shopId])
    return currentPage(page,8) ;
}

export default {
    getShopPage,
    modifyShop
}
```

import Api from "../api/shop";

import Mock from "mockjs"

 

 

 

 

 

 

//分頁

Mock.mock(/\/getShopPage/,"get",Api.getShopPage)

//修改數據

Mock.mock(/\/ModifyShop/,"post",Api.modifyShop)