Vue.js快速入门之五：Mockjs的使用和语法详解

在前后端分离的开发中，需要前后台同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以开发初始前端会使用模拟数据，这里使用是mockjs。

Mock.js的语法规范包括两部分，这些后面会跟大家详解的。

数据模板定义规范（Data Template Definition，DTD）
数据占位符定义规范（Data Placeholder Definition，DPD）

一、安装mockjs

npm install --save-dev mockjs

二、创建mock目录

在项目的src目录下，创建mock文件夹，里面新建index.js，用来存储http模拟反馈的接口数据。目录结构如下图：

2.1 index.js添加模拟数据

在index.js添加一个栏目列表接口，代码如下：

import { mock } from 'mockjs'
//栏目接口
mock("/api/category", (req, res) => {return {code: 200,message: 'success',data: [{"id": 1, "name": "菜单栏目一", "path": "/category/column01"},{"id": 2, "name": "菜单栏目二", "path": "/category/column02"},{"id": 3, "name": "菜单栏目三", "path": "/category/column03"},{"id": 4, "name": "菜单栏目四", "path": "/category/column04"}]}
});

2.2 在main.js中引入mock/index.js

模拟接口定义好后，为了方便所有组件使用，需要将mock/index.js在main.js中引入，代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'//引入mock/index.js
require('@/mock/index');Vue.use(ElementUI);
Vue.config.productionTip = false;/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
});

2.3 创建api.js，定义请求函数

我们可以通过http请求，去获取该接口数据了。在前一篇已讲axios的安装和使用，这里就直接使用了。在src目录中再创建一个api目录，用来存储所有的api请求文件；api目录创建完后，再在内部新建api.js文件，用来定义相关请求。代码如下：

import service from '@/utils/request'//获取栏目数据
export const getCategory = () => {return service.get('/api/category', {});
}

2.4 页面中获取接口数据

先在created中调用接口，获取栏目数据并赋值。代码如下：

import { getCategory } from '@/api/api'
export default {data () {return {menuList: []}},created(){getCategory().then(res => {if(res.code==200){this.menuList = res.data;}console.log(res);}).catch(error => {console.error(error);})}
}

输出结果如下图：

三、数据模板定义规范（DTD）

数据模板中的每个属性由3部分构成：属性名、生成规则、属性值。属性名和生成规则由“|”分隔，代码如下：

/*name 属性名 （选填）rule 生成规则 （选填）value 属性值 可以含有点位符 @占位符（必填）
*/
"name|rule": value

生成规则有7种格式，具体如下：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

3.1 属性值是字符串 String

规则	类型	描述
'name\|min-max': string	String	通过重复string生成一个字符串，重复次数大于等于min，小于等于max。
'name\|count': string	String	通过重复string生成一个字符串，重复次数等于count。

生成规则和示例：

let _string = mock({'name|2-10': '','msg|10': ''
});console.log(_string);

输出结果如下图：

3.2 属性值是数字 Number

规则	类型	描述
'name\|+1': number	Number	属性值自动加1，初始值为number。
'name\|min-max': number	Number	生成一个大于min、于小等于max的整数，属性值number只是用来确定类型。
‘name\|min-max.dmin-dmax': number	Number	生成一个浮点数，整数部分大于等于min、小于等于max，小数部分保留dmin到dmax位。

生成规则和示例：

let _number = mock({'int1|+1': 1,'int2|3-20': 1,'float1|1-100.1-10': 1,'float2|123.1-10': 1,'float3|123.3': 1,'float4|123.10': 1.123
})console.log(_number);

输出结果如下图：

3.3 属性值是布尔型 Boolean

规则	类型	描述
’name\|1': Boolean	Boolean	随机生成一个布尔值，值为true的概率是1/2，值为false的概率同样是1/2
'name\|min-max': value	Boolean	随机生成一个布尔值，值为value的概率是 min / (min + max)，值为!value的概率是max / (min + max)。

生成规则和示例：

for(var i = 0; i < 10; i++){let _boolean = mock({'isTrue|1': false,'age|1-100': 1,})console.log(_boolean);
}

输出结果如下图：

3.4 属性值是对象 Object

生成规则和示例：

for(var i = 0; i < 5; i++){let _object = mock({'name|2': { tom: '1', john: '2', lily: '3', peter: '4' },'age|1-3': { num1: 20, num2: 30, num3: 15, num4: 30, num5: 50 },})console.log(JSON.stringify(_object));
}

输出结果如下图：

3.5 属性值是数组 Array

生成规则和示例：

let _array = mock({'name|1': ['tom', 'john', 'lily', 'peter'],'name2|+1': ['tom', 'john', 'lily', 'peter'],'name3|3': ['tom', 'john', 'lily', 'peter'],'name4|1-2': ['tom', 'john', 'lily', 'peter']
})
console.log(_array);

输出结果如下图：

从上结果可以看出name3|3将原数组重复了循环3次返回一个新数组；name4|1-2随机循环了2次返回一个新数组。

3.6 属性值是函数 Function

生成规则和示例：

let _func = mock({'name': () => {return 5 + 3;}
})
console.log(_func);

输出结果如下图：

3.7 属性值是正则表达式 RegExp

规则	类型	描述
’name': regexp	EegExp	根据正则表达式regexp反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

生成规则和示例：

let _regexp = mock({'regexp1': /[a-z][A-Z][0-9]/,'regexp2': /\w\W\s\S\d\D/,'regexp3': /\d{5,10}/
})
console.log(_regexp);

输出结果如下图：

四、数据点位符定义规范（DPD）

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符的格式：

@占位符
@占位符(参数 [, 参数])

注意：

用@来标识其后的字符串是“占位符”
占位符引用是 Mock.Random中的方法
通过 Mock.Random.extend() 来扩展自定义占位符
点位符也可以引用数据模板中的属性。
占位符会优先引用数据模板中的属性。
占位符支持相对路径和绝对路径。

代码示例：

let _result = mock({name: {first: '@FIRST',middle: '@FIRST',last: '@LAST',full: '@first @middle @last'}
})
console.log(_result);

输出结果如下图：

五、Mock.mock()函数

5.1 Mock.mock根据不同参数，来拦截并作出响应

名称	描述
Mock.mock( template )	根据数据模板生成模拟数据
Mock.mock( rurl, template )	记录数据模板。当拦截到匹配rurl的ajax的请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, function ( options) )	记录用于生成响应数据的函数。当拦截到匹配rurl的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, template)	记录数据模板。当拦截到匹配rurl和rtype的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, rtype, function (options) )	记录用于生成响应数据函数。当拦截到匹配rurl和rtype的ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。

5.2 参数列表

参数	是否可选	描述
rurl	可选	表示需要拦截的URL，可以是URL字符串或URL正则。
rtype	可选	表示需要拦截的Ajax请求类型。例如GET、POST、PUT、DELETE
template	可选	表示数据模板，可以是对象或字符串。例如 { 'data\|1-10' : [{}] } 、 '@EMAIL'。
function ( options )	可选	表示用于生成响应数据的函数。
options		指向本次请求的Ajax选项集，含有url、type和body三个属性。

六、Mock.setup()函数

配置拦截Ajax请求时的行为，支持配置项有: timeout。

Mock.setup ( settings )

参数	是否必填	描述
timeout	可选	指定被拦截的Ajax请求的响应时间，单位是毫秒。值可以是正整数，也可以是横杠'-'风格的字符串，表示取区间值。

代码示例：

import { setup } from 'mockjs'setup({timeout: 400
});//或者setup({timeout: '200-600'
});

七、Mock.Random

Mock.Random是一个工具类，用一直很安静成各种随机数据。代码示例如下：

console.log( Random.email() )
console.log( mock('@email') )
console.log(mock( { email: '@email' } )
)

输出结果如下图：

7.1 方法

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, tId
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

7.2 扩展

Mock.Random中的方法与数据模板可支持扩展，代码示例如下：

import { Random } from 'mockjs'Random.extend({constellation: function(date) {var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']return this.pick(constellations)}
});console.log( Random.constellation() )
console.log( mock('@constellation') )
console.log( mock({constellation: '@constellation'})
)

输出结果如下图：

八、Mock.valid()

Mock.valid( template, data )

校验真实数据 data 是否与数据模板 template 匹配。

参数	是否必选	描述
template	必选	表示数据模板，可以是对象或字符串。例如：{ 'data\|1-10' : [{}] } 、 '@EMAIL'
data	必选	表示真实数据

代码示例：

let template = {name: 'value1'
}
let data = {name: 'value2'
}
let _result = valid(template, data)console.log('result', _result);

输出结果如下图：

翻译过来意思如下：

[{"path": ["data","name"],"类型": "value","真实数据": "value2","期望的": "value1","确保的": "相等","信息": "[VALUE] 期望ROOT.name'的值等于value1，但等于value2"}
]

九、Mock.toJSONSchema()

Mock.toJSONSchema( template )

把Mock.js风格的数据模板 template 转换成 JSON Schema。

参数	是否必选	描述
template	必选	表示数据模板，可以是对象或字符串。例如：{ 'data\|1-10' : [{}] } 、 '@EMAIL'

代码示例如下：

import { toJSONSchema } from 'mockjs'let _template = toJSONSchema( {'key|1-10': '★'
} )console.log(_template);

输出结果如下：

{"name": undefined,"path": ["ROOT"],"type": "object","template": {"key|1-10": "★"},"rule": {},"properties": [{"name": "key","path": ["ROOT","key"],"type": "string","template": "★","rule": {"parameters": ["key|1-10", "key", null, "1-10", null],"range": ["1-10", "1", "10"],"min": 1,"max": 10,"count": 3,"decimal": undefined,"dmin": undefined,"dmax": undefined,"dcount": undefined}}]
}

更多详细说明，请访问官方地址：Mock.js