開始
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 // => falseRandom.natural 返回一個隨機的自然數（大於等於0的整數）
Random.natural() Random.natural(min,max) // 返回一個區間數，min，max是可選的 Random.natural(10000) // => 71529071126209 Random.natural(60, 100) // => 77Random.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:ssRandom.datetime 返回一個隨機的日期和時間字串
Random.datetime() Random.datetime( format ) // 指示生成的日期和時間字串的格式。預設值為 yyyy-MM-dd HH:mm:ssRandom.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.comRandom.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 SchemaMock.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": [] }] }] }