The last time you refactored the Vue directory, you mentioned a mock directory that simulates generating Ajax data. Take a look at this legacy today and see how it can be applied to team front-end development:
Mockjs.com/
Github address: github.com/nuysoft/Moc…
The documentation is on Github and we’ll go through it briefly, installing and using: 1. Install: NPM install Mockjs
2.简单使用：
var Mock = require('mockjs');
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
});
// 生成数据的方法很简单，但是得熟悉模拟数据的各种规则
3.语法规范
mock.js 的语法规范包含 2 部分：
1.数据模板定义规则(Data Template Definition, DTD)
2.数据占位符定义规则(Data Placeholder Definition, DPD)
DTD 规范：
每个属性由 3 部分组成：属性名、生成规则、属性值。
'name|rule': value
name - 属性名
rule - 生成规则
value - 属性值
注意点：
1.属性名和生成规则，之间有一个 '|'
2.生成规则是 '可选的'
3.生成规则有 '7' 种格式：
1>min-max
2>count
3>min-max.dmin-dmax
4>min-max.dcount
5>count.dmin-dmax
6>count.dcount
7>+step
4.生成规则的含义，依赖 '属性值类型' 来确定(意思是：生成规则，根据属性值 '类型' 的不同，会生成不同的模拟数据)
5.属性值中可以含有 '@占位符'
6.属性值，指定了最终值的 '初始值' 和 '类型'
生成规则：
1.属性值是 String
1>'name|min-max': string
通过重复 string 生成一个字符串，重复次数 >= min、<= max
2>'name|count': string
通过重复 string 生成一个字符串，重复次数 = count
2.属性值是 Number
1>'name|+1': number
属性值自动 +1，初始值是 number
2>'name|min-max': number
生成一个 >= min、<= max 的整数，属性值 number 只是用来确定类型
3>'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分 >= min、<= max，小数部分保留 dmin - dmax 位数
3.属性值是 Boolean
1>'name|1': boolean
实际生成一个 boolean，值为 true 的概率是 1/2，值为 false 的概率也是 1/2
2>'name|min-max': value
随机生成一个 boolean，值为 value 的概率是 min/(min + max)，值为 !value 的概率是 max
4.属性值是 Object
1>'name|count': object
从属性值 object 中随机选取 count 个属性
2>'name|min-max': object
从属性值 object 中随机选取 min - max 个属性
5.属性值是 Array
1>'name|1': array
从属性值 array 中随机选取一个元素，作为最终值
2>'name|+1': array
从属性值 array 中顺序选取一个元素，作为最终值
3>'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数 >= min、<= max
4>'name|count': array
通过重复属性值 array 生成一个新数组，重复次数 = count
6.属性值是 Function
1>'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象
7.属性值是 RegExp
1>'name': regexp
根据正则表达式 regexp，反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5-10}/,
});
// 输出
{
'regexp1': 'pJ7',
'regexp2': 'f)\fp1G',
'regexp3': '123456',
}
DPD 规范：
占位符，只是在 '属性值' 中占个位置，并不会出现在生成的属性值中。
@占位符
@占位符(参数[, 参数])
注意点：
1.用 '@' 来标识其后的字符串为 '占位符'
2.占位符引用的是 'Mock.Random' 中的方法
3.通过 Mock.Random.extend() 来 '自定义' 占位符
4.'占位符' 也 '可以引用' '数据模板' 的属性
5.'占位符' 会 '优先' 引用 '数据模板' 的属性
6.'占位符' 支持 '相对路径' 和 '绝对路径'
示例：
Mock.mock({
name: {
first: '@FIRST',
middle: '@MIDDLE',
last: '@LAST',
full: '@first @middle @last',
}
})
// 输出
{
name: {
first: 'dong',
middle: 'xue',
last: 'min',
full: 'dong xue min',
}
}
/*
生成数据的方式，非常多，我们需要根据自己需求，来使用合适的规则！得经常使用！不用一次全部记住！
官方提供了各个规则的示例，我们可以好好参照下：
http://mockjs.com/examples.html#String
*/
4.Mock.mock() 函数解析：
Mock.mock(rurl? rtype? template|function(options))
生成模拟数据
rurl - 可选
表示需要拦截的 URL，可以是 '字符串' 或 '正则'。例如：
'www.xxx.com/list.json'
/\/www\.xxx\.com\/list\.json/
rtype - 可选
表示需要拦截的 Ajax 请求方法。例如：
GET、POST、PUT、DELETE 等
template - 可选
表示数据模板，可以是 '对象' 或 '字符串'。例如：
{
'data|1-10': [{}]
}
或
'@EMAIL'
function(options) - 可选
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，包含：
url
type
body
3 个属性
几个可选参数，有以下几种组合形式：
1.Mock.mock(template)
根据数据模板生成模拟数据
2.Mock.mock(rurl, template)
记录用于生成响应数据的 '数据模板'。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回
3.Mock.mock(rurl, function(options))
记录用于生成响应数据的 '函数'。当拦截到匹配 rurl 的 Ajax 请求时，将根据函数 function(options) 生成模拟数据，并作为响应数据返回
4.Mock.mock(rurl, rtype, template)
比 2 多了一个 rtype，匹配对应的请求方法
5.Mock.mock(rurl, rtype, function(options))
比 3 多了一个 rtype，匹配对应的请求方法
5.Mock.setup() 函数解析：
Mock.setup(settings)
配置拦截 Ajax 请求的行为。支持的配置项只有：'timeout'
timeout - 必选
指定被拦截的 Ajax 请求的响应时间，单位是 'ms'。
值有 2 种格式：
正整数：
400 - 表示 400ms 后才会返回响应数据
'-' 风格字符串：
'200-600' - 表示响应时间介于 200ms 和 600ms 之间。(默认值是：'10-100')
Mock.setup({
timeout: 400
});
6.Mock.Random - 注意这是一个 '类'，用于生成各种随机数据
Mock.Random 的方法，在数据模板中称为 '占位符'，格式为：
@占位符(参数[, 参数])
用法：
var Random = Mock.Random;
Random.email(); // [email protected]
Mock.mock('@email'); // [email protected]
Mock.mock({email: '@email'}); // {email: '[email protected]'}
Mock.Random 的完整方法列表，按类别展示：
Basic:
boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image:
image, dataImage
Color:
color
Text:
paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name:
first, last, name, cfirst, clast, cname
Web:
url, domain, email, ip, tld
Address:
area, region
Helper:
capitalize, upper, lower, pick, shuffle
Miscellaneous:
guid, id
扩展 Random 方法：
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'];
return this.pick(constellations);
}
})
之后就可以像上面 'email' 那样来使用了
7.Mock.valid() 函数解析：
Mock.valid(template, data)
校验真实数据 'data' 是否与数据模板 template 匹配
template - 必选
表示数据模板，可以是对象或字符串。例如：
{
'list|1-10': [{}]
}
或
'@EMAIL'
data - 必选
表示真实数据
var template = {
name: 'value1'
};
var data = {
name: 'value2'
}
Mock.valid(template, data);
// 输出
[
{
"path": [
"data",
"name"
],
"type": "value",
"actual": "value2",
"expected": "value1",
"action": "equal to",
"message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
}
]
8.Mock.toJSONSchema()
Mock.toJSONSchema(template)
把 Mock.js 风格的数据模板 template 转换成 JSON Schema
template - 必选
表示数据模板，可以是 '对象' 或 '字符串'。例如：
{
'data|1-10': [{}]
}
或
'@EMAIL'
JSON Schema：
http://json-schema.org/
JSON Schema 定义了如何基于 JSON 格式描述 JSON 数据结构的规范，进而提供数据校验、文档生成和接口数据交互控制等一系列能力。
貌似是一个规定 JSON 数据的规范！不太清楚，自行搜索！
Copy the codeWe want to use mock.js to simulate Ajax requests for data in a project so that the front end can wait for the back end or query the database itself to get the data. In the future, you can simulate your own data without relying on the back end!
The idea is to create mock/ directories in your project that correspond to API interface directories and methods and then use them later to supplement instances