mockjs

开始

mock一个用于拦截ajax请求,并返回模拟数据的库。主要让前端独立于后端进行开发,通过 pnpm add mockjs 来进行安装

基础

初窥门径

var data = Mock.mock({
 // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
 'list|1-10': [{
        // 属性 id 是一个自增数,起始值为 1,每次增 1
        'id|+1': 1
    }]
   })
   /*
解释一下输出一个对象,有一个list属性,属性值是一个数组,随机1-10个,数组里面存在一个对象,对象有一个属性
值id,值是1,往后的id值都自增1


大概是这样的
{
	list: [
		{ 
			id: 1
		},
		{ 
			id: 2
		}
	]
}

*/


在项目中引入

创建一个文件夹存放mock文件,比如我们后面的例子是放在 /src/mock/index.js 文件中的,然后在main文件中导入即可,示例如下


// /src/main.js
import './mock/index'	// 直接导入(其实就是执行里面的代码,挂载mock),这样就可以劫持ajax请求了


Mock方法

Mock.mock

根据数据模板生成模拟数据

// Mock.mock( rurl?, rtype?, template|function( options ) )

// 根据数据模板生成模拟数据
Mock.mock( template )

// 记录数据模板,当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回
Mock.mock( rurl, template ) 

// 当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回
Mock.mock( rurl, function( options ) )

// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
Mock.mock( rurl, rtype, template )

// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )



/*

rurl 可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。

rtype 可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template 可选。表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

function(options) 可选。表示用于生成响应数据的函数。

options 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性

*/

Mock.setup

配置拦截 Ajax 请求时的行为

Mock.setup( settings )

// 只有一个配置 自定义响应时间,如200-600毫秒
Mock.setup({				
    timeout: '200-600' // '300'
})

Mock.Random

是一个工具类,用于生成各种随机数据

// Mock.Random 的方法在数据模板中称为占位符,书写格式为 @占位符 示例如下
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

扩展(自定义占位符)

// Mock.Random 中的方法与数据模板的 @占位符 一一对应,在需要时还可以为 Mock.Random 扩展方法,然后在数据模板中通过 @扩展方法 引用。例如

Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }



语法规范

Mock.mock() 可以根据数据模板和占位符,生成数据的一个方法,下面我们会用到

数据模板定义规范

语法如下

// 数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value


/*
重点!!!

属性名 和 生成规则 之间用竖线 | 分隔
生成规则 是可选的
生成规则 有 7 种格式

'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

生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

*/

String属性值

// 'name|min-max': string	重复(min-max)次,范围包含min,max

// 输入
{
  'name|2-5': '哈'
}

//输出
{
  'name': '哈哈哈'
}



// 'name|count': string

// 输入
{
  'name|3': '哈'
}

// 输出
{
  'name|5': '哈哈哈哈哈'
}

// 重复count次

Number属性值

// 'name|+1': number	属性值自动加 1,初始值为 number

// name|min-max': number	生成一个随机数,min-max范围

//'name|min-max.dmin-dmax': number		除了min-max的整数,还有保留小数的位数,也能限制范围(dmin,dmax)

Boolean属性值

// 'name|1': boolean	true与false的概率是1/2

// 'name|min-max': value	true的概率为: min/(min+max),false的概率max/(min+max)

// 比如,十分之一的可能为true
// 'name|1-9': true


Object属性值

// 'name|count': object		随机从object中取count个属性

// 输入
{
  'name|2': {
    a:'a',
    b:'b',
    c:'c'
  }
}

// 输出
{
  'name': {
    b:'b',
    c:'c'
  }
}


// 'name|min-max': object	范围选取

Array属性值

// 'name|1': array		数组随机选一个为最终值

// 输入
{
  'name|1': [1,2,3]
}

// 输出
{
  'name': 2
}


// 'name|+1': array		从数组中按顺序取一个为最终值

// 'name|min-max': array	根据范围 来重复n次数组的数据

// 'name|count': array		重复n次数组的数据

// 输入
{
  'name|2': [1,2,3]
}
// 输出
{
  'name|2': [1,2,3,1,2,3]
}

Function属性值

// 'name': function
// 执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。

// 输入
{
  'name': function(){
    return this.txt+"嘿"
  },
  txt: '哟'
}
// 输出
{
  name: '哟嘿',
  txt: '哟'
}

RegExp

// 'name': regexp	根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串

// 输入
{
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
}
// 输出
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}

数据占位符定义规范

  1. @ 来标识其后的字符串是 占位符
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径绝对路径

Basic

  1. Random.boolean 返回一随机布尔值

    Random.boolean()			// 50% true
    Random.boolean(min,max,current)	// mim/(min+max) true		min,max是可选的,默认1
    Random.boolean(1,9,true) 	//10%为true
    // => false
    
    
    
  2. Random.natural 返回一个随机的自然数(大于等于0的整数)

    Random.natural()
    Random.natural(min,max)		// 返回一个区间数,min,max是可选的
    
    Random.natural(10000)
    // => 71529071126209
    Random.natural(60, 100)
    // => 77
    
    
    
  3. Random.integer 返回一个随机的整数

    Random.integer()
    Random.integer( min )
    Random.integer( min, max )
    
    
    
  4. Random.float 返回一个随机的整数

    Random.float()
    Random.float( min )
    Random.float( min, max )
    Random.float( min, max, dmin )
    Random.float( min, max, dmin, dmax )
    
    
    
  5. character 返回一个随机字符

    Random.character()
    Random.character( 'lower/upper/number/symbol' )
    Random.character( pool )
    
    // pool 字符串。表示字符池,将从中选择一个字符返回。
    
    
    
  6. string 返回一个随机字符串

    Random.string()
    Random.string( length )
    Random.string( pool, length )
    Random.string( min, max )
    Random.string( pool, min, max )
    
    //pool 字符串。表示字符池,将从中选择一个字符返回。
    
    
    
  7. Random.range 返回一个整型数组

    Random.range( stop )
    Random.range( start, stop )
    Random.range( start, stop, step )
    
    //start
    //必选。
    
    //数组中整数的起始值。
    
    //stop
    //可选。
    
    //数组中整数的结束值(不包含在返回值中)。
    
    //step
    //可选。
    
    //数组中整数之间的步长。默认值为 1。
    
    
    Random.range(10)
    // => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    Random.range(3, 7)
    // => [3, 4, 5, 6]
    Random.range(1, 10, 2)
    // => [1, 3, 5, 7, 9]
    Random.range(1, 10, 3)
    // => [1, 4, 7]
    
    
    

Date

  1. Random.date 返回一个随机的日期字符串

    Random.date()
    Random.date(format)
    
    Random.date()
    // => "2002-10-23"
    Random.date('yyyy-MM-dd')
    // => "1983-01-29"
    Random.date('yy-MM-dd')
    // => "79-02-14"
    Random.date('y-MM-dd')
    // => "81-05-17"
    Random.date('y-M-d')
    // => "84-6-5"
    
    // 指示生成的日期字符串的格式。默认值为 yyyy-MM-dd
    
    
    
    Format Description Example
    yyyy 年份的完整数字表示,4 位数字 1999 or 2003
    yy 年份的两位数表示 99 or 03
    y 年份的两位数表示 99 or 03
    MM 月份的数字表示,带前面零 01 to 12
    M 月份的数字表示,没有前面零 1 to 12
    dd 一个月中的第几天,带前面零的 2 位数字 01 to 31
    d 一个月中没有前面零的日子 1 to 31
    HH 带前面零的小时的 24 小时格式 00 to 23
    H 不带前面零的小时的 24 小时格式 0 to 23
    hh 不带前面零的 12 小时格式 1 to 12
    h 带前面零的小时的 12 小时格式 01 to 12
    mm 分钟,带前面零 00 to 59
    m 分钟,不带前面零 0 to 59
    ss 秒,带前面零 00 to 59
    s 秒,无前面零 0 to 59
    SS 毫秒,带前面零 000 to 999
    S 毫秒,无前面零 0 to 999
    A 大写的 Ante meridiem 和 Post meridiem AM or PM
    a 小写的 Ante meridiem 和 Post meridiem am or pm
    T 毫秒,自 1970-1-1 00:00:00 UTC 以来 759883437303
  2. Random.time 返回一个随机的时间字符串

    Random.time()
    Random.time( format )
    
    // 指示生成的时间字符串的格式。默认值为 HH:mm:ss
    
    
    
  3. Random.datetime 返回一个随机的日期和时间字符串

    Random.datetime()
    Random.datetime( format )
    
    // 指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss
    
    
    
  4. Random.now 返回当前的日期和时间字符串

    Ranndom.now( unit, format )
    Ranndom.now()
    Ranndom.now( format )
    Ranndom.now( unit )
    
    /*
    表示时间单位,用于对当前日期和时间进行格式化。可选值有:year、month、week、day、hour、minute、second、week,默认不会格式化。
    
    Random.now()
    // => "2014-04-29 20:08:38 "
    Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')
    // => "2014-04-29 00:00:00 000"
    Random.now('day')
    // => "2014-04-29 00:00:00 "
    Random.now('yyyy-MM-dd HH:mm:ss SS')
    // => "2014-04-29 20:08:38 157"
    
    Random.now('year')
    // => "2014-01-01 00:00:00"
    Random.now('month')
    // => "2014-04-01 00:00:00"
    Random.now('week')
    // => "2014-04-27 00:00:00"
    Random.now('day')
    // => "2014-04-29 00:00:00"
    Random.now('hour')
    // => "2014-04-29 20:00:00"
    Random.now('minute')
    // => "2014-04-29 20:08:00"
    Random.now('second')
    // => "2014-04-29 20:08:38"
    
    */
    
    

Image

  1. Random.image 生成一个随机的图片地址

    Random.image()
    Random.image( size )
    Random.image( size, background )
    Random.image( size, background, text )
    Random.image( size, background, foreground, text )
    Random.image( size, background, foreground, format, text )
    
    // size 可选 '宽x高' 比如 300*400,400*500
    // background 可选 指示图片的背景色。默认值为 '#000000'
    // foreground 可选 指示图片的前景色(文字)。默认值为 '#FFFFFF'
    // format 可选 指示图片的格式。默认值为 'png',可选值包括:'png'、'gif'、'jpg'
    // text 可选 指示图片上的文字。默认值为参数 size
    
    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=!"
    
    
    
  2. Random.dataImage 生成一段随机的 Base64 图片编码

    Random.dataImage()
    Random.dataImage( size )
    Random.dataImage( size, text )
    
    // size 可选,指示图片的宽高,格式为 '宽x高'。默认从下面的数组中随机读取一个
    /*
    
    [
        '300x250', '250x250', '240x400', '336x280', 
        '180x150', '720x300', '468x60', '234x60', 
        '88x31', '120x90', '120x60', '120x240', 
        '125x125', '728x90', '160x600', '120x600', 
        '300x600'
    ]
    
    */
    
    // text 可选 指示图片上的文字。默认值为参数 size
    
    
    

Color

  1. Random.color 随机生成一个有吸引力的颜色,格式为 '#RRGGBB'

  2. Random.hex 随机生成一个有吸引力的颜色,格式为 '#RRGGBB'

  3. Random.rgb 随机生成一个有吸引力的颜色,格式为 'rgb(r, g, b)'

  4. Random.rgba 随机生成一个有吸引力的颜色,格式为 'rgba(r, g, b, a)'

  5. Random.hsl 随机生成一个有吸引力的颜色,格式为 'hsl(h, s, l)'

Text

  1. Random.paragraph 随机生成一段文本

    Random.paragraph()
    Random.paragraph( len )
    Random.paragraph( min, max )
    
    /*
    len	可选。指示文本中句子的个数。默认值为 3 到 7 之间的随机数。
    min	可选。指示文本中句子的最小个数。默认值为 3。
    max	可选。指示文本中句子的最大个数。默认值为 7。
    
    */
    
    
  2. Random.cparagraph 随机生成一段中文文本

    Random.cparagraph()
    Random.cparagraph( len )
    Random.cparagraph( min, max )
    
    
    
  3. Random.sentence 随机生成一个句子,第一个单词的首字母大写

    Random.sentence()
    Random.sentence( len )
    Random.sentence( min, max )
    
    /*
    len	可选。指示句子中单词的个数。默认值为 12 到 18 之间的随机数。
    min	可选。指示句子中单词的最小个数。默认值为 12。
    max	可选。指示句子中单词的最大个数。默认值为 18。
    */
    
  4. Random.csentence 随机生成一段中文文本

    Random.csentence()
    Random.csentence( len )
    Random.csentence( min, max )
    
    
  5. Random.word 随机生成一个单词

    Random.word()
    Random.word( len )
    Random.word( min, max )
    
    /*
    len 可选。指示单词中字符的个数。默认值为 3 到 10 之间的随机数。
    min 可选。指示单词中字符的最小个数。默认值为 3。
    max 可选。指示单词中字符的最大个数。默认值为 10。
    
    */
    
    
  6. Random.cword 随机生成一个汉字

    Random.cword()
    Random.cword( pool )
    Random.cword( length )
    Random.cword( pool, length )
    Random.cword( min, max )
    Random.cword( pool, min, max )
    
    
    /*
    pool 可选。汉字字符串。表示汉字字符池,将从中选择一个汉字字符返回。
    min 可选。随机汉字字符串的最小长度。默认值为 1。
    max 可选。随机汉字字符串的最大长度。默认值为 1。
    */
    
    
    
  7. Random.title 随机生成一句标题,其中每个单词的首字母大写

    Random.title()
    Random.title( len )
    Random.title( min, max )
    
    /*
    len 可选。指示单词中字符的个数。默认值为 3 到 7 之间的随机数。
    min 可选。指示单词中字符的最小个数。默认值为 3。
    max 可选。指示单词中字符的最大个数。默认值为 7。
    
    */
    
    
  8. Random.ctitle 随机生成一句中文标题

    Random.ctitle()
    Random.ctitle( len )
    Random.ctitle( min, max )
    
    /*
    len 可选。指示单词中字符的个数。默认值为 3 到 7 之间的随机数。
    min 可选。指示单词中字符的最小个数。默认值为 3。
    max 可选。指示单词中字符的最大个数。默认值为 7。
    
    */
    
    

Name

  1. Random.first 随机生成一个常见的英文名

  2. Random.last 随机生成一个常见的英文姓

  3. Random.name 随机生成一个常见的英文姓名

    Random.name()
    // => "Larry Wilson"
    Random.name(true)
    // => "Helen Carol Martinez"
    
    // middle 可选。布尔值。指示是否生成中间名
    
    
  4. Random.cfirst 随机生成一个常见的中文名

  5. Random.clast 随机生成一个常见的中文姓

  6. Random.cname 随机生成一个常见的中文姓名

Web

  1. Random.url 随机生成一个 URL

    Random.url()
    Random.url( protocol, host )
    
    // protocol 指定 URL 协议。例如 http。
    // host 指定 URL 域名和端口号。例如 nuysoft.com。
    
    
  2. Random.protocol 随机生成一个 URL 协议。返回以下值之一

    'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'
    
  3. Random.domain 随机生成一个域名

  4. Random.tld 随机生成一个顶级域名

  5. Random.email 随机生成一个邮件地址

    Random.email()
    Random.email( domain )
    
    // domain	指定邮件地址的域名。例如 nuysoft.com
    
    
  6. Random.ip 随机生成一个 IP 地址

Address

  1. Random.region 随机生成一个(中国)大区

  2. Random.province 随机生成一个(中国)省(或直辖市、自治区、特别行政区)

  3. Random.city 随机生成一个(中国)市

    Random.city()
    Random.city( prefix )
    
    /*
    prefix 可选。布尔值。指示是否生成所属的省
    
    */
    
    
  4. Random.county 随机生成一个(中国)县

    Random.county()
    Random.county( prefix )
    
    /*
    prefix 可选。布尔值。指示是否生成所属的省、市。
    */
    
    
  5. Random.zip 随机生成一个邮政编码(六位数字)

Helper

  1. Random.capitalize 把字符串的第一个字母转换为大写

  2. Random.upper 把字符串转换为大写

  3. Random.lower 把字符串转换为小写

  4. Random.pick 从数组中随机选取一个元素,并返回

  5. Random.shuffle 打乱数组中元素的顺序,并返回

Miscellaneous

  1. Random.guid 随机生成一个 GUID

  2. Random.id 随机生成一个 18 位身份证

  3. Random.increment 生成一个全局的自增整数

    Random.increment()
    Random.increment( step )
    
    /*
    step 可选。整数自增的步长。默认值为 1
    */
    
    

扩展

  1. Mock.valid 校验真实数据 data 是否与数据模板 template 匹配

    Mock.valid( template, data )
    
    /*
    template 必选。表示数据模板,可以是对象或字符串。例如 { 'list|1-10':[{}] }、'@EMAIL'。
    data 必选。表示真实数据。
    
    */
    
    
    var template = {
        name: 'value1'
    }
    var data = {
        name: 'value2'
    }
    Mock.valid(template, data)
    // =>
    [
        {
            "path": [
                "data",
                "name"
            ],
            "type": "value",
            "actual": "value2",
            "expected": "value1",
            "action": "equal to",
            "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
        }
    ]
    
    
  2. Mock.toJSONSchema 把 Mock.js 风格的数据模板 template 转换成 JSON Schema

    Mock.toJSONSchema( template )
    
    /*
    template 必选。表示数据模板,可以是对象或字符串。例如 { 'list|1-10':[{}] }、'@EMAIL'。
    
    */
    
    
    var template = {
        'key|1-10': '★'
    }
    Mock.toJSONSchema(template)
    // =>
    {
        "name": undefined,
        "path": [
            "ROOT"
        ],
        "type": "object",
        "template": {
            "key|1-10": "★"
        },
        "rule": {},
        "properties": [{
            "name": "key",
            "path": [
                "ROOT",
                "key"
            ],
            "type": "string",
            "template": "★",
            "rule": {
                "parameters": ["key|1-10", "key", null, "1-10", null],
                "range": ["1-10", "1", "10"],
                "min": 1,
                "max": 10,
                "count": 3,
                "decimal": undefined,
                "dmin": undefined,
                "dmax": undefined,
                "dcount": undefined
            }
        }]
    }
    
    
    
    ---------------------------------------------------------------------------------------------------------
        
    
    
    
    var template = {
        'list|1-10': [{}]
    }
    Mock.toJSONSchema(template)
    // =>
    {
        "name": undefined,
        "path": ["ROOT"],
        "type": "object",
        "template": {
            "list|1-10": [{}]
        },
        "rule": {},
        "properties": [{
            "name": "list",
            "path": ["ROOT", "list"],
            "type": "array",
            "template": [{}],
            "rule": {
                "parameters": ["list|1-10", "list", null, "1-10", null],
                "range": ["1-10", "1", "10"],
                "min": 1,
                "max": 10,
                "count": 6,
                "decimal": undefined,
                "dmin": undefined,
                "dmax": undefined,
                "dcount": undefined
            },
            "items": [{
                "name": 0,
                "path": ["data", "list", 0],
                "type": "object",
                "template": {},
                "rule": {},
                "properties": []
            }]
        }]
    }
    
    
    
    
    

热门相关:超武穿梭   夫人,你马甲又掉了!   修仙界最后的单纯   无限杀路   最强装逼打脸系统