Mock.js
写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,我结合mock的学习视频和官方文档,来记录mock的学习历程,
1.Mock是啥
- Mock.js是模拟JSON数据的前端技术,为什么会产生它呢
- 对于前后端分离的项目,后端API迟迟没有上线
- 而前端没有json数据进行填充,自己写后端模拟又太繁重
- Mock.js就能解决这个问题,让前端工程师独立做自己!
- 它可以生成随机数据!
2.Mock安装
安装方式,我是在node下运行
-
安装node下的mock
npm install mockjs
如果是在浏览器运行
<script src="http://mockjs.com/dist/mock.js"></script>
3.Mock初使用
const Mock = require("mockjs");
const data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个对象元素
'list|1-10' : [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1':1
}]
});
console.log(data);
我们发现每执行一次,data中的数据条数都不一样,是根据条件随机产生的
data的打印结果的数据格式不是JSON格式的:
需要转为JSON格式:
//JSON.stringfy(要转换的数据,是否需要转换,4字符缩进)
JSON.stringfy(data,null,4)
4.Mock语法规范
Mock.js 的语法规范包括两部分:
- 数据模板定义规范(Data Template Definition,DTD)
- 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范
数据模板由 3 部分构成:属性名、生成规则、属性值:
生成规则 是可选的。
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
生成规则有7种格式
我们以 min-max.dmin-dmax为例
const Mock = require("mockjs");
const data = Mock.mock({
'list|1-10' : [{
//表示生成1-10之间的浮点数,小数位是1~3位
'id|1-10.1-3':1
}]
});
console.log(data);
console.log(JSON.stringify(data,null,4));
输出结果如下:
以从对象中随机抽取属性 对象|count 为例
const obj = {
gender:'男',
age:18,
name:'zs'
}
const data = Mock.mock({
//随机生成1-5组数据
'list|1-5':[{
//随机生成1-3个属性
'obj|1-3':obj
}]
});
结果:
以数组|1 获取一次数组为例
const arr = ['a','b','c','d']
const data = Mock.mock({
//随机生成1-5组数据
'list|1-5':[{
//随机获取一次数组
'arr|1':arr
}]
});
数据定义占位符
占领属性的位置
const data = Mock.mock({
'list|1-5':[{
//cname city是mock内置的
cname:'@cname',
city :'@city'
}]
});
随机占位符
例:
const Mock = require('mockjs');
console.log(Mock.mock('@id'));
console.log(Mock.mock('@image'));
console.log(Mock.mock('@color'));
console.log(Mock.mock('@Ctitle'));
console.log(Mock.mock('@url'));
结果
4.Mock拦截axios请求
axios.get('http://123.207.32.32:8000/home/multidata')
.then(res => {
console.log(JSON.stringify(res.data,null,4));
})
//只要axios的请求地址和mock的相同,axios请求就被拦截到了,拿到的也是mock生成的数据
Mock.mock('http://123.207.32.32:8000/home/multidata',{
'list|5-10':[
{
'id|+1':1,
'name':'@cname',
'gender':'@boolean',
'age':'@integer'
}
]
})
输出结果