前言
作为前端开发,很多时候我们还来不及等待后端程序员开发接口,想做数据渲染,已被测试怎么办呢,
一、MOCKJS是什么?
-
采用json数据模拟,生成数据比较繁琐,也比较有局限性,没办法达到增删改查
-
采用mockJs进行模拟数据,可以模拟各种场景(get、post)生成接口,并且随机生成所需数据,还可以对数据进行增删改查
二、Mock优点
1.前后端分离
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。
三、语法规则
- 数据模板定义规范(Data Template Definition,DTD)
// 属性名 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
- 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
- 属性值 中可以含有 @占位符。
- 属性值 还指定了最终值的初始值和类型。
四、使用Mock
1.安装Mock
-
首先,我们要通过Vue-cli创建一个vue项目
-
使用一下命令
npm install mockjs //安装mock
2.在环境中使用
实例代码如下:
import mock from 'mockjs'
// 调用Mock的方法。生产模拟数据
// var data = Mock.mock({...})
// 生成一个用户名长度随机1~10的随机数据
var data = Mock.mock({
'Username|1-10':'*'
// })
// 生成一个年龄 18-40岁
var data = Mock.mock({
'age|18-40':0
// })
// 生产一个 id
var data = Mock.mock('@id()')
// 随机生产中文名称
var data = Mock.mock('@cname()')
const data = mock({
id: '@id',
username: '@cname()',
dateTime: '@date(yyyy-MM-dd)',
description: '@paragraph()',
email: '@email',
'age|18-130': 0
})
console.log(data)
//试写一个接口
const Mock = require('mockjs')
module.exports = function(app) {
// 参数1:接口地址 req
// 参数2:服务器处理函数 res
// eslint-disable-next-line brace-style
app.get('api/userinfo', (req, res) => {
var data = Mock.mock({
id: '@id',
username: '@cname()',
dateTime: '@date(yyyy-MM-dd)',
description: '@paragraph()',
email: '@email',
'age|18-130': 0
})
// node中的express框架
res.json(data)
})
}