不难懂-----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)