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、模拟数据接口 [![复制代码](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);) 6、在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)