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.jsimport "./mock/index"// 直接导入(其实就是执行里面的代码，挂载mock)，这样就可以劫持ajax请求了

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

(相关资料图)

// 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 三个属性*/

配置拦截 Ajax 请求时的行为

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

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

// Mock.Random 的方法在数据模板中称为占位符，书写格式为 @占位符 示例如下var Random = Mock.RandomRandom.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生成规则 的 含义 需要依赖 属性值的类型 才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型。*/

// "name|min-max": string重复(min-max)次，范围包含min，max// 输入{  "name|2-5": "哈"}//输出{  "name": "哈哈哈"}// "name|count": string// 输入{  "name|3": "哈"}// 输出{  "name|5": "哈哈哈哈哈"}// 重复count次

// "name|+1": number属性值自动加 1，初始值为 number// name|min-max": number生成一个随机数，min-max范围//"name|min-max.dmin-dmax": number除了min-max的整数，还有保留小数的位数，也能限制范围(dmin,dmax)

// "name|1": booleantrue与false的概率是1/2// "name|min-max": valuetrue的概率为: min/(min+max)，false的概率max/(min+max)// 比如，十分之一的可能为true// "name|1-9": true

// "name|count": object随机从object中取count个属性// 输入{  "name|2": {    a:"a",    b:"b",    c:"c"  }}// 输出{  "name": {    b:"b",    c:"c"  }}// "name|min-max": object范围选取

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

// "name": function// 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 "name" 所在的对象。// 输入{  "name": function(){    return this.txt+"嘿"  },  txt: "哟"}// 输出{  name: "哟嘿",  txt: "哟"}

// "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()来扩展自定义占位符。占位符也可以引用 数据模板中的属性。占位符会优先引用 数据模板中的属性。占位符支持 相对路径和 绝对路径。

Random.boolean 返回一随机布尔值

Random.boolean()// 50% trueRandom.boolean(min,max,current)// mim/(min+max) truemin，max是可选的，默认1Random.boolean(1,9,true) //10%为true// => false

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

Random.natural()Random.natural(min,max)// 返回一个区间数，min，max是可选的Random.natural(10000)// => 71529071126209Random.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]

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

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 可选 指示图片上的文字。默认值为参数 sizeRandom.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

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

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

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

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

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

Random.name()// => "Larry Wilson"Random.name(true)// => "Helen Carol Martinez"// middle 可选。布尔值。指示是否生成中间名

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

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

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

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 地址

Random.region 随机生成一个（中国）大区

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

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

Random.city()Random.city( prefix )/*prefix 可选。布尔值。指示是否生成所属的省*/

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

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

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

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

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

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

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

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

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