/**
* install mockjs
* use `npm install mockjs`
*/
// use 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语法规范
//Data Template Definition, DTD(数据模板定义规范):每个属性由3部分构成:属性名、生成规则、属性值:
/**
* 属性名: name
* 生成规则: rule
* 属性值: value
* 'name|rule':value
*
* 属性名和生成规则之间用竖线「|」分隔
*
* 生成规则和实例:
* [网址](https://github.com/nuysoft/Mock/wiki/Syntax-Specification)
*/
function kill( a1, a2, a3){return a1+a2+a3}
console.log(Mock.mock({
'number1|1-100.1-10':1,
'number2|123.1-10':1,
'number3|123.3':1,
'number4|123.10':1.123,
'string1|2':'yaoming',
'string2|3-5':'zhouqi',
'boolean1|1':true,
'boolean2|3-5':4,
'object1|1':kill(2,3,4),
'arrray1|1':[1,2,3,4,5,6,7],
//'array2|3-6':[1,2,3,4,5],
}))
console.log(Mock.mock({
'regexp1':/[a-z][A-Z][0-9]/,
'regexp2':/\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
}))
//Data Placeholder Definition, DPD(数据站位符定义规范)
/**
* 占位符只是在属性值字符串中占个位置,并不会出现在最终的属性值中
*
* 格式:
* @占位符
* @占位符(参数[, 参数])
*
* 注意:
* @来标识其后的字符传是占位符。
* 等
*
* [官网](https://github.com/nuysoft/Mock/wiki/Syntax-Specification)
*/
console.log(Mock.mock({
name:{
first: '@FIRST',
middle: '@FIRST',
last:'@LAST',
full: '@first @middle @last'
}
}))
/**
* Mock.mock()大全解
*
* Mock.mock(rurl?, rtype?, template|function(options))
* - 根据数据模版生成模拟数据
*
* Mock.mock(template)
* - 根据数据生成模拟数据
*
* Mock.mock(rurl,template)
* - 记录数据模版。当拦截到匹配rurl的Ajax请求时,将根据数据模版template生成模拟数据,并作为响应数据返回。
*
* Mock..mock(rurl,function(options))
* - 记录用于生成响应数据的函数。当拦截到匹配rurl的Ajax的请求时,函数function(options)将被执行,并把执行结果作为响应数据返回。
*
* Mock.mock(rurl, rtype,template)
* - 记录数据模版。当拦截到匹配rurl和rtype的Ajax请求时,将根据模版template生成模拟数据,并作为响应数据返回。
*
* Mock.mock(rurl, rtype, function(options))
* - 记录用于响应数据的函数。当拦截到匹配rurl和rtype的Ajax请求时,函数function(options)将被执行,并把执行结果作为响应数据返回。
*
* rurl
* - 可选。表示需要拦截的URL,可以是URL字符串或URL正则。例如 /\/domain\/list\.json/、'/*domian/list.json'。
*
* rtype
* - 可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
*
* template
* - 可选。 表示用于生成响应数据的函数。
*
* options
* - 指向本次请求的Ajax选项集,含有url、type和body三个属性。
*/
/**
* Mock.setup() 解读
*
* Mock.setup(settings)
* - Mock.setup(settings):配置拦截Ajax请求时的行为。支持的配置项有:timeout
* - timeout 可选。 指定被拦截的Ajax请求的响应时间,单位是毫秒。
* - settings 必选。 配置项集合
*
* 目前,接口 Mock.setup( settings ) 仅用于配置 Ajax 请求,将来可能用于配置 Mock 的其他行为。
*/
/*
Mock.setup({
timeout:400
})
Mock.setup({
timeout:'200-600'
})
*/
/**
* Mock.Random是一个工具类,用于生成各种随机数据
* - Mock.Random的方法在数据模版中称为「占位符」,书写格式为@占位符(参数[, 参数])
*/
var Random = Mock.Random
console.log(Random.email())
console.log(Mock.mock('@email'))
console.log(Mock.mock({email: '@email'}))
/**
* 扩展
* Mock.Random中的方法与数据模板的@占位符一一对应,在需要时还可以为Mock.Random扩展方法,然后在数据模板中通过@扩展方法应用。例如:
*/
Random.extend({
constellation:function(date){
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
console.log(Random.constellation())
console.log(Mock.mock('@CONSTELLATION'))
console.log(Mock.mock({
constellation:'@CONSTELLATION'
}))
//Basic
//Random.boolean(min?, max?, current)
//[网站](https://github.com/nuysoft/Mock/wiki/Basic)
console.log(Random.boolean(),Random.boolean(1, 9, true), Random.boolean(),Random.boolean(1, 9, false))
//Date
/**
* Random.date(format?)
* - Random.date()
* - Random.date(format);format可选。 指示生成的日期字符串的格式。默认为 yyyy-MM-dd
* - 返回一个随机的日期字符串
*/
console.log(Random.date(), Random.date('yyyy-MM-dd'), Random.date('yy-MM-dd'), Random.date('y-MM-dd'),Random.date('y-M-d'))
//console.log(Random.time(), Random.time(format)) //返回一个随机的时间字符串。 format可选。指示生成的时间字符串的格式。默认值为HH:mm:ss
console.log(Random.time('H:m:s'), Random.time('HH:mm:ss'), Random.time('A HH:mm:ss'))
//Random.datetime(format?)
/**
* Random.datetime()
* random.datetime(format) // 返回一个随机的日期和时间字符串
* format 可选。指示生成的日期和时间字符串的格式。默认值为:yyyy-MM-dd HH:mm:ss
*/
console.log(Random.datetime())
console.log(Random.datetime('yyyy-MM-dd A HH:mm:ss'))
// => "1976-04-24 AM 03:48:25"
console.log(Random.datetime('yy-MM-dd a HH:mm:ss'))
// => "73-01-18 pm 22:12:32"
console.log(Random.datetime('y-MM-dd HH:mm:ss'))
// => "79-06-24 04:45:16"
console.log(Random.datetime('y-M-d H:m:s'))
// => "02-4-23 2:49:40"
//Random.now(unit?, format)
/**
* unit: 可选。 表示时间单位,用于对当前日期和时间进行格式化。可选值有:year、month、week、day、minute、second、week,默认不会格式化
* format:可选。指示生成的日期和时间字符串的格式。
*/
console.log(Random.now())
console.log(Random.now('day', 'yyyy-MM-dd HH:mm:ss SS'),
Random.now('yyyy-MM-dd HH:mm:ss SS'))
//Image
/**
* Random.image(size?, background?, foreground?,format?, text?)
* 生成一个随机的图片地址
*
* - Random.image(0用于生成高度自定义的图片地址,一般情况下,应该使用更简单的Random.dataImage())
*
* size: 可选。指示图片的宽度,格式为‘宽x高’。默认从下面的数组中随机读取一个:
* [
'300x250', '250x250', '240x400', '336x280',
'180x150', '720x300', '468x60', '234x60',
'88x31', '120x90', '120x60', '120x240',
'125x125', '728x90', '160x600', '120x600',
'300x600'
]
* background 可选。指示图片的背景色,默认为'#0000000'
*
* foreground 可选。 指示图片的前景色(文字)。默认值为'#FFFFFFF'
*
* format 可选。 指示图片的格式。默认值为'png',可选值包括: 'png' , 'gif' ,'jpg'
*
* text 可选。 指示图片上的文字。默认值为参数size
*/
console.log(Random.image(),
// => "http://dummyimage.com/125x125"
Random.image('200x100'),
// => "http://dummyimage.com/200x100"
Random.image('200x100', '#fb0a2a'),
// => "http://dummyimage.com/200x100/fb0a2a"
Random.image('200x100', '#02adea', 'Hello'),
// => "http://dummyimage.com/200x100/02adea&text=Hello"
Random.image('200x100', '#00405d', '#FFF', 'Mock.js'),
// => "http://dummyimage.com/200x100/00405d/FFF&text=Mock.js"
Random.image('200x100', '#ffcc33', '#FFF', 'png', '!'))
// => "http://dummyimage.com/200x100/ffcc33/FFF.png&text=!"
//Random.dataImage(size?, text?)
/**
* Random.dataImage()
* Random.dataImage(size)
* Random.dataImage(size, text)
* - 生成一段随机的Base64图片编码
*/
//console.log(Random.dataImage())
//console.log(Random.dataImage('200x100'))
//console.log(Random.dataImage('200x100', 'Hello Mock.js!'))
//Color : 随机生成一个有吸引力的颜色,格式为'#RRGGBB'
console.log(Random.color())
console.log(Random.hex()) //随机生成一个有吸引的颜色,格式为'#RRGGBB'
console.log(Random.rgb()) //随机生成一个有吸引力的颜色,格式为'rgb(r, g, b)'
console.log(Random.rgba()) //随机生成一个有吸引力的颜色,格式为'rgba(r, g, b, a)'
console.log(Random.hsl()) //随机生成一个有吸引力的颜色,格式为'hsl(h, s, l)'
//Text 随机生成一段文本
//Name
/**
* Random.first() //随机生成一个常见的英文名
* Random.last() //随机生成一个常见的英文姓
* Random.name(middle?) //随机生成一个常见的英文姓名
* - middle:可选。 布尔值,指示是否生成中间名
* Random.cfirst() //随机生成一个常见的中文名
* Random.clast() //随机生成一个常见的中文姓。
* Random.cname() //随机生成一个常见的中文名
*/
console.log(Random.name())
console.log(Random.name(true))
console.log(Random.cfirst())
console.log(Random.clast())
console.log(Random.cname())
//Address
/**
* Random.region() //随机生成一个(中国)大区
*/
console.log(Random.region(), Random.province(), Random.city(), Random.county(), Random.zip())
//Miscellaneous
/**
* Random.guid()
* - 随机生成一个GUID
* Random.id()
* - 随机生成一个18位身份证
*/
console.log(Random.id(), Random.guid())
//Mock.valid()
/**
* 校验真实数据data是否与数据模板template匹配
*/
//Mock.toJSONSchema()
/**
* 把Mock.js风格的数据模板template转换成JSON Schema
* [官网]](https://github.com/nuysoft/Mock/wiki)
*/
Mock.js练手,练习基础!
最新推荐文章于 2023-03-27 09:06:09 发布