mock.js是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.
思考: 提个简单的开发需求:
请求后台某个接口,返回10-15条学生数据: 要求包含 姓名,年龄,性别. 成功状态码:200 .成功状态信息: success.
`响应数据结构分析:`
{
status:200,
msg:'success',
stuInfo:
{
name:'abc',
age:10,
gender:0
}
,
...
,
{
name:'abc',
age:10,
gender:0
}
]
}
`方法1: 模拟后台(node/php + mysql)`
1,搭建node服务器/Apache服务器
2,开启Mysql服务, 制定数据库,数据表,添加表信息(添加姓名,年龄,性别的值 和 值类型)
3,使用node或者php语法关联数据库,声明查询sql语句,并执行sql.
4,将查询db内容处理为json返回
代码量: 前端ajax+模板引擎20行左右 + 后台实现代码40行左右 + 繁琐的数据表设计 + 一条条的添加数据库内容 = BOOM心态爆炸!!!
// 或者你可以...
`方法2: 完全脱离后台和数据库(mockjs配合vue的拦截器),或者 脱离数据库操作(mockjs简单的node后台)`
1,搭建node服务器
2,使用mockjs的mock方法制定随机数据
3,处理为json返回
代码量: 前端ajax+模板引擎20行左右 + node服务响应mock数据11行 = 咦嘿嘿很开心!
代码:
const app = reqire('express')
const Mock = require('mockjs')
app.get('/someApi',(req,res)=>{
var resData = Mock.mock({
'status':200,
'msg':'success',
'stuData|10-20':[{
'name|1-3':/[a-z][A-Z]/,
'age|+1':10,
'gender|1':true
}]
})
res.end(JSON.stringify(resData))
})
app.listen(3000)
一 Mockjs怎么用?
1 mock.js的使用
1.1.1 安装并引入mock.js
创建一个node服务器--server.js文件
// 引入express
const express = require('express');
// 创建服务对象
const app = express()
// 准备数据
var data = '123'
// 监听路由
app.get('/', (req, res) => {
res.end(data);
})
// 开启服务
app.listen(3000)
1.1.2 安装并引入mock.js
npm install mockjs
或者
script:src="http://mockjs.com/dist/mock.js"
1.1.3 mockjs模块模拟数据
// 引进express
const express = require('express');
// 引进mockjs
const Mock = require('mockjs')
// 准备服务对象
const app = express()
// 监听路由
app.get('/', (req, res) => {
// 准备随机数据
var data = Mock.mock({
'list|1-20': [{
'name|3-5': /[a-z][A-Z]/,
'age|10-15': 15,
'gender|1': true,
}]
})
res.end(JSON.stringify(data));
})
// 开启服务
app.listen(3000)
1.1.4 测试服务
在terminal窗口中运行命令nodemoon server.js
在浏览器中请求127.0.0.1:3000 观察响应体
1560216083(1).jpg
1.1.5 使用
这样在ajax请求相关接口就能返回内容随机,结构固定的JSON数据了
2 mockjs语法
2.1 Mock.mock()方法
加对象参数就可以生成响应数据
2.2 参数对象模板规则
- 属性名|生成规则：属性值 name | rule : value
- name: 生成数据的名字字符串
- |: 一定要加
-
rule: 生成数据的规则
|min-max 生成个数min至max条
|count 生成count条
|min-max.dmin-dmax 1-9.2-3 数字值在1-9之间,小数点后保留2-3位 如 2.1 3.74
|min-max.dcount 1-9.2 数字值在1-9之间,小数点后保留2位 如2.13 8.54
|count.dmin-dmax 10.1-2 整数部分是10,小数点部分1-2位 如10.99 10.1
|count.dcount 10.2 整数部分是10,小数点部分2位 如10.11 10.43
|+step 'score|+1':1, 以value 1为基准,递增1 -
value: 属性值的规则
-
字符串
'name|min-max': string
通过重复 string 生成一个字符串，min<=重复次数<=max'name|count': string 通过重复 string 生成一个字符串，重复次数==count。 -
数字
'name|+1': number
属性值自动加 1，初始值为 number。'name|min-max': number number确定数据类型,生成值在min-max间的整数 'name|min-max.dmin-dmax': number number确定数据类型,生成值在min-max间的小数 -
布尔
'name|1': boolean
随机生成一个布尔值,真假各50%
'name|t-f': true
随机生成一个布尔值,真占t/t+f 假占f/t+f -
对象
'name|count': object
从属性值 object 中随机选取 count 个属性。'name|min-max': object 从属性值 object 中随机选取 min 到 max 个属性。 -
数组'name|1': array 从属性值 array 中随机选取 1 个元素，作为最终值。 'name|+1': array 从属性值 array 中顺序选取 1 个元素，作为最终值。 'name|min-max': array 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。 'name|count': array 通过重复属性值 array 生成一个新数组，重复次数为 count。 var data = mock.mock({ // 将value数组中的项(对象) 重复计算1-10次 添加到新数组返回 'obj|1-10':[ { 'score|+1':1 } ] }) //生成 { obj: [ { score: 1 }, { score: 2 }, { score: 3 }, { score: 4 } ] } -
函数(不用)
'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。 -
正则
'name': regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。/[a-z][A-Z][0-9]/ /\w\W\s\S\d\D/ /\d{5,10}/ [\u4e00-\u9fa5]
-
2.3 Mock.valid( template, data ) 校验数据(处理请求发送来的数据,如果完全脱离后台就需要该方法)
-
在vue中可以脱离后台开发(参考文章) -
template 必选, 表示数据模板，可以是对象或字符串
-
data 必选, 表示真实数据
// 可以用来做基于mock的ajax请求参数的处理 var template = { name: 'value1' } var data = { name: 'value2' } Mock.valid(template, data)//返回值是一个校验结果数组 // 如果匹配则 返回空数组 // 如果不匹配 messages属性表示tteamplate和data不匹配的原因
2.4 Mock.random工具对象
- Mock.Random 是一个工具类，
用于生成各种随机数据。不用掌握,用到就点击蓝字查
网友评论