开始

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() // => "https://cdn.yuucn.cn/wp-content/uploads/2023/05/1684269119-969d695973a7f23.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.namevalue 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": [] }] }] }