Mock.js练手,练习基础!

/**
 * 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)
  */

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值