---Mock---基本使用-白红宇

---Mock---基本使用

阅读量：5943 次

发布时间：2019-06-19

本文共 2977 字，大约阅读时间需要 9 分钟。

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