推荐文章:
mockjs 可以在不修改既有代码的情况下拦截请求,模拟后端接口返回数据,可以根据一定的规则生成测试数据
可以通过拦截请求,模拟网络响应时间等,返回指定规则的数据,从而实现前后端独立开发(即前端工程师不需要等待后端工程师接口写好后再进行开发,也可以通过模拟数据来避免固定加数据带来的情况考虑不周)
# 安装
npm install mockjs
// 使用 Mock
var Mock = require(‘mockjs‘)
var data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
‘list|1-10‘: [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
‘id|+1‘: 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
// 使用 Mock
let Mock = require(‘mockjs‘);
Mock.mock(‘http://1.json‘,‘get‘,{
// 属性 list 的值是一个数组,其中含有 1 到 3 个元素
‘list|1-3‘: [{
// 属性 sid 是一个自增数,起始值为 1,每次增 1
‘sid|+1‘: 1,
// 属性 userId 是一个5位的随机码
‘userId|5‘: ‘‘,
// 属性 sex 是一个bool值
"sex|1-2": true,
// 属性 city对象 是对象值中2-4个的值
"city|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
},
//属性 grade 是数组当中的一个值
"grade|1": [
"1年级",
"2年级",
"3年级"
],
//属性 guid 是唯一机器码
‘guid‘: ‘@guid‘,
//属性 id 是随机id
‘id‘: ‘@id‘,
//属性 title 是一个随机长度的标题
‘title‘: ‘@title()‘,
//属性 paragraph 是一个随机长度的段落
‘paragraph‘: ‘@cparagraph‘,
//属性 image 是一个随机图片 参数分别为size, background, text
‘image‘: "@image(‘200x100‘, ‘#4A7BF7‘, ‘Hello‘)",
//属性 address 是一个随机地址
‘address‘: ‘@county(true)‘,
//属性 date 是一个yyyy-MM-dd 的随机日期
‘date‘: ‘@date("yyyy-MM-dd")‘,
//属性 time 是一个 size, background, text 的随机时间
‘time‘: ‘@time("HH:mm:ss")‘,
//属性 url 是一个随机的url
‘url‘: ‘@url‘,
//属性 email 是一个随机email
‘email‘: ‘@email‘,
//属性 ip 是一个随机ip
‘ip‘: ‘@ip‘,
//属性 regexp 是一个正则表达式匹配到的值 如aA1
‘regexp‘: /[a-z][A-Z][0-9]/,
}]
})
类型 | 可能的应用 |
---|---|
Object | 随机选择对象的几个属性 |
Function | 可以自定义函数,根据函数返回值返回(this.foo,this可以直接访问已有规则 ) |
Path | 可以根据相对路径,绝对路径,使用已有规则来生成新的数据项 |
Date | 可以生成各种格式的时间 |
Image | 可以生成各种测试图片(可以用的在线地址,图片的自定义程度还挺高,用来占位布局再好不过了) |
Color | 可以生成随机颜色,rgb、rgba、hex 类型的颜色值都可以 |
Text | 可以随机生成文本段落、指定单词数(中文、英文的都支持),在指定单词里按规则随机组合 |
Name | 可以随机生成名字、姓、名(中英文都支持) |
Web | 可以生成一系列的网址等 |
Address | 可以生成邮编、地址、省份、国家等,还可以指定是否携带上级(哪个省的什么市) |
Miscellaneous | 可以生成id |
不一定要用它来拦截请求
在我看来,mockjs 的数据生成还是挺好用的
在后端接口未实现,或者数据库没有相对完善的数据时,可以使用 mockjs 的规则来生成一些测试数据,来检验边缘情况(也可以用在后端作为测试数据)
// 别忘了引入
// 随机中文人名,不带 c 就是英文
console.log(Mock.mock(‘@cname‘));
后续可以考虑用网易云的 NEI 平台(接口管理平台,有点类似 Yapi)
网易开源的,可以本地部署
【官网】
提取码:q9pm
原文:https://www.cnblogs.com/suwanbin/p/13200521.html