用mockjs生成数据,不需要等待接口即可调试
一、安装
- 用npm包管理工具安装
npm install mockjs
- 标签引入
<script src="http://mockjs.com/dist/mock.js"></script>
二、生成随机数据
Mock.js 的语法规范包括两部分：
- 数据模板定义（Data Temaplte Definition，DTD）
- 数据占位符定义（Data Placeholder Definition，DPD）
1. 将字符串随机重复1遍-10遍
Mock.mock({
"string|1-10": "★"
})
// {
// "string": "★★★"
// }
2. 将一个字符串随机重复5遍
Mock.mock({
"string|5": "★"
})
// {
// "string": "★★★★★"
// }
3. 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2
Mock.mock({
"boolean|1": true
})
// {
// "boolean": true
// }
4. 从属性值 {} 中随机选取 2 个属性
Mock.mock({
"object|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
})
// {
// "object": {
// "310000": "上海市",
// "330000": "浙江省"
// }
// }
5. 从属性值 {} 中随机选取 2 到 4 个属性
Mock.mock({
"object|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
})
// {
// "object": {
// "110000": "北京市",
// "120000": "天津市",
// "130000": "河北省",
// "140000": "山西省"
// }
// }
6. 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值
Mock.mock({
"array|1": [
{title:"AMD"},
{title:"CMD"},
{title:"UMD"},
]
})
// {
// "array": {
// title:"CMD"
// }
// }
7. 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 2，小于等于 3
Mock.mock({
"array|2-3": [
{title:"AMD"},
{title:"CMD"},
{title:"UMD"},
]
})
// {
// "array": [
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// },
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// }
// ]
// }
8. 传入一个正则，返回符合正则的字符串
Mock.mock({
'regexp': /[a-z][A-Z][0-9]/
})
// {
// "regexp": "uD2"
// }
9. Mock对象中有一个Random方法，利用Random方法我们可以做很多事情：
var Random = Mock.Random
Random.integer(20,100) //随机返回20到100的数字
Random.float(60, 100, 3, 5) //随机返回60到100的带有3到5位小数的数字
Random.string() //随机返回一个字符串
Random.string(5) //随机返回一个长度为5的字符串
Random.string(7, 10)//随机返回一个长度为5到7位的字符串
Random.date()//随机返回一个日期
Random.date('yyyy-MM-dd')//随机返回一个格式化日期
Random.image()//随机返回一张图片
Random.image('200x100')//随机返回一张带尺寸的图片
Random.image('200x100', '#FF6600')//随机返回一张带尺寸和颜色的图片
Random.paragraph()//随机返回一段文字
Random.cparagraph()//随机返回一段中文文字
Random.cparagraph(1, 3)//随机返回1到3段中文文字
Random.csentence()//随机返回一句中文
Random.ctitle()//随机返回一个中文标题
三、注意
Mock.mock({
'list|2-10': [{
'id': Random.integer(20,100),
'name':Random.ctitle(),
'date':Random.date("yyyy-MM-dd")
}]
});
这样写会使返回的每个数据重复
// {
// "list": [
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// }
// ]
// }
如果想在
list里返回数据不同的数组,Mock模板里属性的值可以是Function
Mock.mock({
'list|2-10': [{
'id': ()=>Random.integer(20,100),
'name': ()=>Random.ctitle(),
'date':()=>Random.date("yyyy-MM-dd")
}]
});
// {
// "list": [
// {
// "id": 74,
// "name": "但称青气",
// "date": "2004-10-31"
// },
// {
// "id": 32,
// "name": "三六属集",
// "date": "2008-06-28"
// },
// {
// "id": 28,
// "name": "装造始",
// "date": "1975-04-29"
// }
// ]
// }