【巷子】---Mock---基本使用

1、mock解決的問題

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

 

2、mock優勢

　　

　　一、先後端分離

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

 

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

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

 

　　三、開發無侵入

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

 

　　四、用法簡單

　　符合直覺的接口。

 

　　五、數據類型豐富

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

 

　　六、方便擴展

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

 

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

 

3、mock的基本使用

　　

　　一、安裝mockJS

      cnpm install mockjs -S

 

　   二、使用mockJS（mock/index.js）

      import Mock from "mock";

 

      三、官方文檔

      https://github.com/nuysoft/Mock/wiki/Syntax-Specification

 

      四、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 選項集

　　　

    五、模擬數據接口

　　

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

*/

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

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

 

　　七、例子

//  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/index.js

//分頁

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

//修改數據

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