Mock的作用是 当后端还没有开发完接口的时候 导致前端很多业务没法开展 Mock就可以用来模拟Api接口 提高效率 那么应该怎么使用Mock呢 一以fastMock为例 (目前fastmock无法使用 其他类似的工具用法几乎一样)
基础用法
{
"code": 200,
"msg": "查询成功",
"data": {
"Title": "模拟api接口",
"Author": "小鹿"
}
}
// 生成多条数据
{
"code": 200,
"msg": "查询成功",
"data|1-10": [{
"id|+1": 1,
"name": "小鹿",
"price|10-99.1-3": 0
}]
}
Get | Post
// function({_req,Mock}) 可接受参数
{
"code": 200,
"msg": "查询成功",
"data": function({_req,Mock}) {
let {id,name} = _req.query;
return {
id: id,
name: name
}
}
}
headers
// 一般用于登录
{
"code": 200,
"msg": "查询成功",
"data": function({
_req,
Mock
}) {
let {
token = null
} = _req.headers;
if (token) {
return {
code: 1,
name: "admi"
}
} else {
return {
code: -1,
msg: "error"
}
}
}
}
Mock.mock()
// 把list解构出来
{
code: "200",
msg: "查询成功",
data: function({
_req,
Mock
}) {
let {
list
} = Mock.mock({
"list|3-8": [{
id: "@id",
name: "@cname"
}]
});
return list;
}
}
额外一种情况:如果post请求 携带参数来请求 比如下面的limit请求多少条数据 limit是个动态值 可能你会下意识写“data|limit” 但是是不被允许的。可以参考下面做法
参考一下下面做法。
{
"code": 200,
"data": function({
_req,
Mock
}) {
let {
limit = 2, size = 0, hot = false
} = _req.body;
let obj = {};
let item = {
"_id": "@id"
};
obj["list|" + limit] = [item];
return Mock.mock(obj);
}
}
生成规则的常见格式
"data|5":生成5条数据
"data|1-3":随机生成1-3条数据
"id|+1":递增
"price|10-99.1-3" 随机数字10-99,1-5位小数
"status|1":true, 布尔值true概率为1/2
数据占位符
// 使用案例
{
"code": 200,
"data|2-5": [{
id: "@id",
name: "@cname",
"price|10-99.1-5": 0,
status: "@boolean()",
num: "@natural(18,50)",
des: "@string(10,30)",
time: "@datetime(T)",
title: "@cword(10,40)",
address: "@county(true)",
prcurl: "@image(300x200,@color,#000,pic)"
}],
msg: "查询成功"
}