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