Mock.js
程序员文章站
2022-07-10 20:21:32
...
一、技术说明
- 为什么要使用这种技术？
- 对于前后端分离项目，后端工程师的API上线速度不匹配
- 前端工程师需要模拟数据接口，代替后端未上线的API
- Mock.js是一款模拟json数据的前端技术
- 官网：mockjs.com
二、安装测试
- 两种安装方式，一种是node下运行，另一种是浏览器中运行
- 如在node下运行，需要下载和安装node.js , node官网：nodejs.org/zh-cn/;
- 安装之后，在webstorm或者vscode测试node环境：node -v
- 创建Mock目录，在下面初始化package.json文件，命令：npm init -y
- 先安装node下的mock.js，命令：npm install mockjs
- 创建一个src，在下面创建01.js文件，然后用下面的官网实例代码练习吧：
// 引入mock.js,相当于src = "mock.js"
const Mock = require('mockjs')
const data = Mock.mock({
// list|1=10 为 list[0]-list[9]元素，默认从list[0] = 1开始，每个元素累加1，在这十个元素中随机
// 抽取元素渲染
'list|1-10': [{
'id|+1' : 1
}]
});
console.log(data);
7. 如果是浏览器运行，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
const data = Mock.mock({
'list|1-10':[{
'id|+1':1
}]
});
console.log(data);
console.log(JSON.stringify(data,null,4));
</script>
</head>
<body>
</body>
</html>三、mock语法规范
1. Mock.js的语法规范包括两个部分：数据模板定义规范和数据占位定义规范
2. 数据模板定义的规范包括3部分：属性名、生成规则和属性值；
' 属性名 | 生成规则 ' : 属性值 // ' name | rule ' : value
3. 其中，字符串、数值有 7 种生成规则，具体如下：
| 生成规则 | 说明 | 实例 |
| min-max | 生成min~max之间的字符串 | 'list | 1-10' |
| count | 生成count个字符串 | 'list | 5' |
| min-max,dmin-dmax |
生成min~max之间的浮点数， 小数点位数在dmin~dmax之间 |
'id | 1-10.1-3' : 1 |
| count.dcount |
生成count个字符串， 小数点位数为dcount |
'id | 8.2' : 1 |
| min-max.dcount | //同上 | |
| count.dmin-dmax | //同上 | |
| +step | 每次的进行都会累加一个值 | id | + 1" : 1 |
还有布尔型，对象，数组等规则
| 生成规则 | 说明 | 实例 |
| 布尔值 | 生成bool值，1/2 概率 true | 'flag | 1' : true |
| 布尔值 min-max |
生成布尔值， 概率为 min/(min + max) |
'flag | 1-10' : true |
| 对象 count |
从对象中随机抽取count个属性 |
'obj | 2' : obj |
| 对象 min - max |
从对象中随机抽取min - max 属性 |
'obj | 1 - 3' : obj |
| 数组 1 | 获取 1次数组 | 'arr | 1' : arr |
| 数组count | 重复count次组成新数组 | 'arr | 2' : arr |
| 数组 + 1 | 累加 | 'arr | +1' : arr |
| 数组 min - max | 重复min - max 次组成新数组 | 'arr | 1-2' : arr |
5. 也支持函数和正则表达式：
| 生成规则 | 说明 | 实例 |
| 函数 | 支持函数 | 'fn | 1' : function |
| 正则 |
支持正则 |
'reg | 1' : / [ a - z ] / |
6. 数据定义的占位符@，比较好理解，占领属性值的位置；
const data5 = Mock.mock({
'list|10' : [{
cname : '@cname',
city : '@city',
full : '@cname - @city'
}]
});7. 随机占位符
（1） 通过 '@占位符' 这种方式来随机占位符，从而产生多样数据
（2） 有两种方式可以输出这种随机占位符，具体如下：
//第一种输入占位符的方式
console.log(Mock.Random.cname());
//第二种输入占位符的方式
console.log(Mock.mock("@cname));
ps:如果在输出列表中，直接写 '@cname' 更加的方便快捷8. 常用的占位符
9.如果没有你想要的数据，还可以自己扩展