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

一、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";

 

　　7、例子

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