關於mockjs的使用

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

1.安裝

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

npm install mockjs

安裝完成後對mockjs進行使用：

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

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

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

2. 語法規範

mockjs的語法規範包括兩部分：

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

• 數據模板定義規範

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

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

Notice:

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：

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/