關於Mock.js使用

目前在作一個我的網站,寫了一半沒有數據填充,也不知道寫啥了,就順帶學習下mockjs這個東西,官網上主要介紹它是一個能夠隨機生成各類類型數據,攔截ajax請求等優勢。接下來就近距離結束下mockjs吧!git

1.安裝

經過npm爲本身的項目安裝mockjs。es6

npm install mockjs

安裝完成後對mockjs進行使用:github

const Mock \= require('mockjs')  
let data \= Mock.mock({  
 'list|10': \[{'id|+1': 1}\]  
})

先不要管裏面的語法,這上面生成的是一個對象數組,裏面每一個元素是一個對象,每一個對象的key是從0-9,value是一個對象,對象中的key是id,value是1-10.ajax

這裏只介紹commonjs中的用法,其實用es6的模塊引入方法也能夠,可是最終被babel轉義的也是經過require引入的。關於import,require這些區別建議看下這篇文章正則表達式

2. 語法規範

mockjs的語法規範包括兩部分:npm

1\. 數據模板定義規範  
2\. 數據佔位符定義規範
  • 數據模板定義規範

數據模板中的屬性由三個部分組成:屬性名,生成規則,屬性值json

// 屬性名   name  
// 生成規則 rule  
// 屬性值   value  
'name|rule': value

Notice:segmentfault

1\. 屬性名和生成規則之間用 | 分割。  
2\. 生成規則是可選  
3\. 生成規則有7種格式:  
 (1)'name|min-max': value  
 (2)'name|count': value  
 (3)'name|min-max.dmin-dmax': value  
 (4)'name|min-max.dcount': value  
 (5)'name|count.dmin-dmax': value  
 (6)'name|count.dcount': value  
 (7)'name|+step': value  
4\. 生成規則的含義須要依賴屬性值得類型才能肯定。  
5\. 屬性值中能夠含有'@佔位符'  
6\. 屬性值還指定了最終值得初始值和類型。
(1) 屬性值是字符串String
1\. name|min-max: string  
經過重複string生成一個字符串,重複次數大於等於min,小於等於max。這裏的重複是指對初始化string的重複次數。  
​  
2\. name|count: string  
經過重複string生成一個字符串,重複次數等於count。
(2) 屬性值是數字Number
1. name|+1 : number  
屬性值自動加1, 初始值爲number  
​  
2. name|min\-max: number  
生成一個大於等於min,小於等於max的整數。  
​  
3. name|min\-max.dmin\-dmax: number  
生成一個浮點數,整數部分大於等於min,小於等於max,小數部分保留dmin到dmax位。  
Mock.mock({  
 'number1|1-100.1-10': 1,  
 'number2|123.1-10': 1,  
 'number3|123.3': 1,  
 'number4|123.10': 1.123  
})  
// =>  
{  
 "number1": 12.92,  
 "number2": 123.51,  
 "number3": 123.777,  
 "number4": 123.1231091814  
}
(3)屬性值是布爾類型Boolean
1. name|1: boolean  
隨機生成一個布爾值,值爲true的機率爲1/2, 值爲false的機率爲1/2。  
​  
2. name|min\-max: value  
隨機生成一個布爾值,值爲 value 的機率是 min / (min + max),值爲 !value 的機率是 max / (min + max)。
(4)屬性值是對象Object
1. name|count: object  
從屬性值object中隨機選取count個屬性  
​  
2. name|min\-max: object  
從屬性值object中隨機選取min到max個屬性
(5) 屬性值是數組Array
1. name|1: array  
從屬性值array中隨機選取一個元素,做爲最終值  
​  
2. name|+1: array  
從屬性值array中順序選取一個元素,做爲最終值  
​  
3. name|min\-max: array  
經過重複屬性值array生成一個新數組,重複次數大於等於min,小於等於max。  
​  
4. name|count: array  
經過重複屬性值array生成一個新數組,重複次數爲count。
(6) 屬性值是函數Function
'name': function  
​  
執行函數 function,取其返回值做爲最終的屬性值,函數的上下文爲屬性 'name' 所在的對象。
(7) 屬性值是正則表達式RegExp
1\. name: regexp  
根據正則表達式regexp反向生成能夠匹配他的字符串。用於生成自定義格式的字符串。  
Mock.mock({  
 '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"  
}
  • 數據佔位符定義規範DPD

佔位符只是在屬性值字符串中佔個位置,並不出如今最終的屬性值中。佔位符格式:數組

@佔位符  
@佔位符(參數 \[, 參數\])

Notice:babel

1\. 用@來標識其後的字符串是佔位符。  
2\. 佔位符引用的是Mock.Random中的方法。  
3\. 經過Mock.Random.extend()來擴展自定義佔位符。  
4\. 佔位符也能夠引用數據模板中的屬性。  
5\. 佔位符會有限引用數據模板中的屬性。  
6\. 佔位符支持相對路徑和絕對路徑。

3. Mock.mock()

Mock.mock(rurl?, rtype?, template|function(options)) 根據數據模板生成模擬數據

Mock.mock(template) 根據數據模板生成模擬數據。

Mock.mock(rurl, template) 記錄數據模板,當攔截到匹配rurl的ajax請求時,根據數據模板生成模擬數據,並做爲響應數據返回。

Mock.mock(rurl, function(options)) 記錄用於生成響應數據的函數。當攔截到匹配rurl的ajax請求時,函數function執行,並把執行結果做爲響應數據返回。

Mock.mock(rurl, rtype, template) 記錄數據模板,當攔截到匹配rurl和rtype的ajax請求時,將根據數據模板生成模擬數據,並做爲響應數據返回。

Mock.mock(rurl, rtype, function(options)) 記錄用於生成響應數據的函數。當攔截到匹配rurl和rtype的ajax請求時,函數function(options)將被執行,並把執行結果做爲響應數據返回。

rurl 標識須要攔截的url,能夠是url字符串或者url正則:

/\\/domain\\/list\\.json/、'/domian/list.json'。

rtype 可選,標識須要攔截的ajax請求類型。例如GET, POST, PUT, DELETE等。

template 可選,標識數據模板,能夠是對象或字符串。

function(options) 可選,表示用於生成響應數據的函數。

options 指向本次請求的ajax選項集,含有url, type和body三個屬性。

4. Mock.setup()

Mock.setup(setting) 配置攔截ajax請求時的行爲。支持的配置項有:timeout。

setting 必選,配置項集合

timeout 可選,執行攔截的ajax請求的響應時間,單位是毫秒,值能夠是正整數。例如400標識400ms後纔會返回響應的內容;也能夠是200-600這樣表示響應時間介於200和600毫秒之間,默認是10-100.

Mock.setup({  
 timeout: 400  
})  
Mock.setup({  
 timeout: '200-600'  
})

目前,接口 Mock.setup( settings ) 僅用於配置 Ajax 請求,未來可能用於配置 Mock 的其餘行爲。

5. Mock.Random

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: "射手座"

還有一些其餘的生成隨機數據的方法,你們能夠直接去官網看下,這裏就不一一的描述了。地址:https://github.com/nuysoft/Mo...

6. Mock.valid()

Mock.valid(template, data) 校驗真實數據data是否與數據模板template匹配。

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

7. Mock.toJSONSchema()

Mock.toJSONSchema( template ) 把Mock.js風格的數據模板template轉換成JSON Schema

template 必選,表示數據模板,能夠是對象或者字符串。

關於mock.js的介紹也這麼多,這些基本上是根據官文摘抄,可是基本上夠咱們平常使用。

官文:http://mockjs.com/

相關文章
相關標籤/搜索