加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!
使用Mockjs来创造虚拟数据
安装
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
如果你是后端nodejs项目中使用, 使用npm来安装
npm install --save mockjs
基本语法
- 属性名 | 生成规则 : 属性值
属性名和生成规则 之间用竖线 | 分隔,生成规则和属性值之间用 : 分隔,生成规则有七种:
'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
- 1、属性值是字符串
(1)‘name|min-max’: string,通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max
var d1 = Mock.mock({
'name|5-10': 'mySkey'
})
console.log(d1) // 5-10个mySkey
(2)‘name|count’: string,通过重复 string 生成一个字符串,重复次数等于 count
var d2 = Mock.mock({
'name|5': 'mySkey'
})
console.log(d2) // 5个mySkey
- 2、属性值是数字 Number
(1)‘name|+1’: number,属性值自动加 1,初始值为 number
var d1 = Mock.mock({
'age|+1': 1
})
console.log(d1) // 1
(2)‘name|min-max’: number,生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型
var d2 = Mock.mock({
'age|10-25': 1
})
console.log(d2) // 10-25随机整数
(3)‘name|min-max.dmin-dmax’: number,生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位
var d3 = Mock.mock({
'number1|1-100.1-2': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
console.log(d3) // 最小值-最大值-小数位数
- 3、属性值是布尔型 Boolean
(1)‘name|1’: boolean,随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2
var d1 = Mock.mock({
'super|1': false
})
console.log(d1) // false true各占 1/2
(2)‘name|min-max’: value,随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)
var d2 = Mock.mock({
'super|1-5': false
})
console.log(d2) // false 只占 1/(1+5)
- 4、属性值是对象 Object
(1)‘name|count’: object,从属性值 object 中随机选取 count 个属性
(2)‘name|min-max’: object,从属性值 object 中随机选取 min 到 max 个属性
- 5、属性值是数组 Array
(1)‘name|1’: array,从属性值 array 中随机选取 1 个元素,作为最终值
var d1 = Mock.mock({
'number|1': [0,1,2,3]
})
console.log(d1) // 0,1,2,3中随机一个值
(2)‘name|+1’: array,从属性值 array 中顺序选取 1 个元素,作为最终值
var d2 = Mock.mock({
'number|+1': [0,1,2,3]
})
console.log(d2) // 0
(3)‘name|min-max’: array,通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max
var d3 = Mock.mock({
'number|1-4': [0,1,2,3]
})
console.log(d3) // 1-4个[0,1,2,3]
(4)‘name|count’: array,通过重复属性值 array 生成一个新数组,重复次数为 count
var d4 = Mock.mock({
'number|4': [0,1,2,3]
})
console.log(d4) // 4个[0,1,2,3]连接起来的新数组
- 6、属性值是函数 Function
‘name’: function,执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 ‘name’ 所在的对象
- 7、属性值是正则表达式 RegExp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
Mock.mock()
- Mock.mock( template )
根据数据模板生成模拟数据
- Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl(需要拦截的url,比如路由) 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回
- Mock.mock( rurl, function(options){} )
记录用于生成响应数据的函数。当拦截到匹配 rurl(需要拦截的url,比如路由) 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回
- Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl(需要拦截的url,比如路由) 和 rtype(需要拦截的方法,GET、Post、Put、Delete) 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回
- Mock.mock( rurl, rtype, function(options){})
记录用于生成响应数据的函数。当拦截到匹配 rurl(需要拦截的url,比如路由) 和 rtype(需要拦截的方法,GET、Post、Put、Delete) 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回
Mock.setup()
- Mock.setup( settings )
指定被拦截的 Ajax 请求的响应时间,单位是毫秒。值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容;也可以是横杠 ‘-’ 风格的字符串,例如 ‘200-600’,表示响应时间介于 200 和 600 毫秒之间。默认值是’10-100’
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
Mock.Random()(核心)
Mock.Random 是一个工具类,用于生成各种随机数据。Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数])
var Random = Mock.Random
var email1 = Random.email()
var email2 = Mock.mock('@email')
console.log(email1, '\n', email2)
Mock.Random 提供的完整方法(占位符)如下:
/*
数据类型: boolean, natural, integer, float, character, string, range, date, time, datetime, now
图片: image, dataImage
颜色值: color
文本: paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
名字: first, last, name, cfirst, clast, cname
网站: url, domain, email, ip, tld
地址: area, region
辅助工具: capitalize, upper, lower, pick, shuffle
标识: guid, id
*/
常用的随机函数:
var Random = Mock.Random
// 日期
var date = Random.date('yyyy-MM-dd')
var time = Random.time('A HH:mm:ss')
var dateTime = Random.datetime('yyyy-MM-dd A HH:mm:ss')
var now = Random.now('second')
// 图片 Random.image( size, background, foreground, format, text ) foreground 图片的前景色 format 图片的格式 text 图片上的文字
var img = Random.image('500x300', '#dd5866', '#33c9d4', 'png', 'hello world')
// Base64 图片编码 Random.dataImage( size, text )
var imgData = Random.dataImage('500x300', 'hello world')
// 颜色值
Random.color() // 十六进制颜色
Random.hex() // 十六进制颜色
Random.rgb() // rgb颜色
Random.rgba() // rgba颜色
Random.hsl() // hsl颜色
// 文本
Random.paragraph( min, max ) // 随机生成一段 英文 文本
Random.cparagraph( min, max ) // 随机生成一段 中文 文本
Random.sentence( min, max ) // 随机生成一个句子,第一个单词的首字母大写
Random.csentence( min, max ) // 随机生成一段中文文本
Random.word( min, max ) // 随机生成一个单词
Random.cword( pool, min, max )// 随机生成一个汉字
Random.title( min, max ) // 随机生成一句标题,其中每个单词的首字母大写
Random.ctitle( min, max ) // 随机生成一句中文标题
// 姓名
Random.first() // 随机生成一个常见的英文名
Random.last() // 随机生成一个常见的英文姓
Random.name( middle ) // 随机生成一个常见的英文姓名
Random.cfirst() // 随机生成一个常见的中文名
Random.clast() // 随机生成一个常见的中文姓
Random.cname() // 随机生成一个常见的中文姓名
// WEB相关
Random.url( protocol, host ) // 指定 URL 域名和端口号
Random.protocol() // 随机生成一个 URL 协议 'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'
Random.domain() // 随机生成一个域名
Random.tld() // 随机生成一个顶级域名
Random.email( domain ) // 随机生成一个邮件地址
Random.ip() // 随机生成一个ip
// 地址
Random.region() // 随机生成一个(中国)大区
Random.province() // 随机生成一个(中国)省(或直辖市、自治区、特别行政区)
Random.city( prefix ) // 随机生成一个(中国)市,prefix 布尔值。指示是否生成所属的省
Random.county( prefix ) // 随机生成一个(中国)县,prefix 布尔值。指示是否生成所属的省、市
Random.zip() // 随机生成一个邮政编码(六位数字)
// 其他
Random.guid() // 邀请码,如 662C63B4-FD43-66F4-3328-C54E3FF0D56E
Random.id() // 身份证
- 扩展
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Mock.valid()
校验真实数据 data 是否与数据模板 template 匹配。
var template = {
name: 'value1'
}
var data = {
name: 'value2'
}
Mock.valid(template, data)
Mock.toJSONSchema()
把 Mock.js 风格的数据模板 template 转换成 JSON Schema
var template = {
'key|1-10': '★'
}
Mock.toJSONSchema(template)