mockjs

转载作者：我是一只小鸟更新时间：2023-05-13 22:31:39

29

4

开始

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"
}

数据占位符定义规范

用 @ 来标识其后的字符串是 占位符 。

占位符 引用的是 Mock.Random 中的方法。

通过 Mock.Random.extend() 来扩展自定义占位符。

占位符 也可以引用 数据模板 中的属性。

占位符 会优先引用 数据模板 中的属性。

占位符 支持 相对路径 和 绝对路径 。

Basic

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

Random.natural 返回一个随机的自然数（大于等于0的整数）。

                              
                                Random.natural()
Random.natural(min,max)		// 返回一个区间数，min，max是可选的

Random.natural(10000)
// => 71529071126209
Random.natural(60, 100)
// => 77

Random.integer 返回一个随机的整数。

                              
                                Random.integer()
Random.integer( min )
Random.integer( min, max )

Random.float 返回一个随机的整数。

                              
                                Random.float()
Random.float( min )
Random.float( min, max )
Random.float( min, max, dmin )
Random.float( min, max, dmin, dmax )

character 返回一个随机字符。

                              
                                Random.character()
Random.character( 'lower/upper/number/symbol' )
Random.character( pool )

// pool 字符串。表示字符池，将从中选择一个字符返回。

string 返回一个随机字符串。

                              
                                Random.string()
Random.string( length )
Random.string( pool, length )
Random.string( min, max )
Random.string( pool, min, max )

//pool 字符串。表示字符池，将从中选择一个字符返回。

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

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

Random.time 返回一个随机的时间字符串。

                              
                                Random.time()
Random.time( format )

// 指示生成的时间字符串的格式。默认值为 HH:mm:ss

Random.datetime 返回一个随机的日期和时间字符串。

                              
                                Random.datetime()
Random.datetime( format )

// 指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss

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

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=!"

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

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

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

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

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

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

Text

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

                              
                                Random.paragraph()
Random.paragraph( len )
Random.paragraph( min, max )

/*
len	可选。指示文本中句子的个数。默认值为 3 到 7 之间的随机数。
min	可选。指示文本中句子的最小个数。默认值为 3。
max	可选。指示文本中句子的最大个数。默认值为 7。

*/

Random.cparagraph 随机生成一段中文文本。

                              
                                Random.cparagraph()
Random.cparagraph( len )
Random.cparagraph( min, max )

Random.sentence 随机生成一个句子，第一个单词的首字母大写。

                              
                                Random.sentence()
Random.sentence( len )
Random.sentence( min, max )

/*
len	可选。指示句子中单词的个数。默认值为 12 到 18 之间的随机数。
min	可选。指示句子中单词的最小个数。默认值为 12。
max	可选。指示句子中单词的最大个数。默认值为 18。
*/

Random.csentence 随机生成一段中文文本。

                              
                                Random.csentence()
Random.csentence( len )
Random.csentence( min, max )

Random.word 随机生成一个单词。

                              
                                Random.word()
Random.word( len )
Random.word( min, max )

/*
len 可选。指示单词中字符的个数。默认值为 3 到 10 之间的随机数。
min 可选。指示单词中字符的最小个数。默认值为 3。
max 可选。指示单词中字符的最大个数。默认值为 10。

*/

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

Random.title 随机生成一句标题，其中每个单词的首字母大写。

                              
                                Random.title()
Random.title( len )
Random.title( min, max )

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

*/

Random.ctitle 随机生成一句中文标题。

                              
                                Random.ctitle()
Random.ctitle( len )
Random.ctitle( min, max )

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

*/

Name

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

Random.last 随机生成一个常见的英文姓。
Random.name 随机生成一个常见的英文姓名。
                              
                                Random.name()
// => "Larry Wilson"
Random.name(true)
// => "Helen Carol Martinez"

// middle 可选。布尔值。指示是否生成中间名


                              
                            
Random.cfirst 随机生成一个常见的中文名。

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

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

Web

Random.url 随机生成一个 URL 。

                              
                                Random.url()
Random.url( protocol, host )

// protocol 指定 URL 协议。例如 http。
// host 指定 URL 域名和端口号。例如 nuysoft.com。

Random.protocol 随机生成一个 URL 协议。返回以下值之一。

                              
                                'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'

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

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

                              
                                Random.email()
Random.email( domain )

// domain	指定邮件地址的域名。例如 nuysoft.com

Random.ip 随机生成一个 IP 地址。

Address

Random.region 随机生成一个（中国）大区。
Random.province 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。

Random.city 随机生成一个（中国）市。

                              
                                Random.city()
Random.city( prefix )

/*
prefix 可选。布尔值。指示是否生成所属的省

*/

Random.county 随机生成一个（中国）县。

                              
                                Random.county()
Random.county( prefix )

/*
prefix 可选。布尔值。指示是否生成所属的省、市。
*/

Random.zip 随机生成一个邮政编码（六位数字）。

Helper

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

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

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

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

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

Miscellaneous

Random.guid 随机生成一个 GUID 。
Random.id 随机生成一个 18 位身份证。

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

                              
                                Random.increment()
Random.increment( step )

/*
step 可选。整数自增的步长。默认值为 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"
    }
]

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": []
        }]
    }]
}

最后此篇关于mockjs的文章就讲到这里了,如果你想了解更多关于mockjs的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

29

4

0

文章推荐：浅谈如何使用github.com/yuin/gopher-lua

文章推荐：在ASP.NETCoreWebAPI中处理Patch请求

文章推荐：索引初识

文章推荐：都说DevOps落地难，到底难在哪里？也许你还没找到套路

mockjs
开始 mock一个用于拦截ajax请求，并返回模拟数据的库。主要让前端独立于后端进行开发，通过 pnpm add mockjs 来进行安装基础初窥门径
玩转 Mockjs，前端也能跑得很溜
mockjs作用就是，生成随机模拟数据，拦截 ajax 请求，可以对数据进行增删改查。在生成数据时，我们就需要能够熟练使用 mock.js 的语法。 Mockjs 的语法规范包括两部分：数据模

首页

博学

6Ren·AI

商城