mockjs的下載使用官網(wǎng)可以參考這里，它的功能主要是前端開發(fā)者可以不用等待后臺開發(fā)提供了現(xiàn)成的接口越驻，才進(jìn)行前端開發(fā)汁政，而只需要后臺開發(fā)人員提供接口統(tǒng)一格式，返回值的類型格式信息即可伐谈，mockjs就是為了解放前端開發(fā)者的依賴后臺接口的局限的烂完。
使用方法
mockjs的使用語法為： Mock.mock('url地址', 'url請求方法', {數(shù)據(jù)模版}|function (option) {響應(yīng)數(shù)據(jù)函數(shù)})
其中 url地址 / url請求方法 都是可選的，模擬的數(shù)據(jù)可以使用 數(shù)據(jù)模版 方式也可以使用 響應(yīng)數(shù)據(jù)函數(shù) 方式來模擬數(shù)據(jù)诵棵，下面分別來說明抠蚣。
1. 根據(jù)數(shù)據(jù)模版生成模擬數(shù)據(jù)
通過設(shè)置數(shù)據(jù)模版可以快速生成模擬數(shù)據(jù)，例如如下的例子履澳，生成一個字典嘶窄，里面的name屬性是隨機生成的：
Mock.mock({
'name': '@name'
})
2. 根據(jù)ajax請求生成模擬數(shù)據(jù)
通過設(shè)置ajax請求可以起到攔截請求怀跛，而直接返回數(shù)據(jù)的效果，例如如下攔截了一個GET請求地址 '/users/' 的目的柄冲，并且設(shè)置了該請求的返回數(shù)據(jù)：
Mock.mock('/users/', 'get', {
'name': '@name',
'age|1-10': 1
})
如果是要模擬帶有參數(shù)的get請求吻谋，那么mock中攔截的ulr就需要使用正則表達(dá)式，否則匹配不到现横，會出現(xiàn)跨域的錯誤漓拾，比如上面，我們想要匹配到 '/users/' 和 '/users/?name=xxx' 的url該如何設(shè)置呢戒祠？可以參考如下的設(shè)置
let users_url = new RegExp('^/users/' + '(\\?.*|)$') // 需要兼容后面是否帶有參數(shù)的情況
Mock.mock(users_url, 'get', {
'name': '@name',
'age|1-10': 1
})
注意：Mock中設(shè)置的url type必須要小寫骇两，否則會匹配失敗，例如上面的例子中使用的 'get'
3. 根據(jù)響應(yīng)數(shù)據(jù)函數(shù)方式生成模擬數(shù)據(jù)
通過設(shè)置響應(yīng)函數(shù)的方式來模擬數(shù)據(jù)姜盈，可以傳入?yún)?shù)來個性化設(shè)置模擬的數(shù)據(jù)
Mock.mock('/users/', 'get', function (option) {
return Mock.mock({
'name': '@name'
})
})
模擬數(shù)據(jù)語法
在使用Mockjs中低千，需要模擬一些數(shù)據(jù)，那么模擬的數(shù)據(jù)模版中每一項數(shù)據(jù)都包括三個部分： "屬性名" / "數(shù)據(jù)生成規(guī)則" / "屬性值"馏颂，其中屬姓名和數(shù)據(jù)生成規(guī)則之間用 "|" 分割示血，例如上面的 'age|1-10': 1 表示的含義是生成一個age，它的值在1-10之間的整數(shù)救拉。
下面介紹一下mockjs模擬數(shù)據(jù)的幾種規(guī)則：
- '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
注意：min / max 表示value中的元素個數(shù)最小值和最大值难审；count 表示value中的元素個數(shù)的數(shù)量；dmin / dmax 表示小數(shù)點后位數(shù)的最小值和最大值近上；dcount表示小數(shù)點后位數(shù)剔宪；+step 表示沒次添加step個
另外在屬性值中可以使用一些隨機數(shù)，Mock.Random 來生成一些隨機數(shù)據(jù)壹无，可以是 name 等葱绒，具體的使用可以參考這里，還有一些樣例
Mock屬性設(shè)置
在使用mockjs中斗锭，可以針對請求做一些設(shè)置地淀，例如響應(yīng)耗時時間；擴展模版岖是，即設(shè)計個性化的數(shù)據(jù)模版帮毁，然后方便使用等。下面將針對這些屬性豺撑，簡要說明一下烈疚，詳細(xì)可以參考這里
- 設(shè)置請求響應(yīng)時間為
import Mock from 'mockjs'
Mock.setup({
timeout: 30 // 設(shè)置響應(yīng)時間 30ms, 或者設(shè)置為 '200-600' 表示響應(yīng)時間介于 200ms~600ms
})
- 擴展模版，設(shè)計個性化的數(shù)據(jù)模版
Mock.Random中的方法與數(shù)據(jù)模板的‘@占位符’一一對應(yīng)聪轿，在需要時還可以為Mock.Random擴展方法爷肝，然后在數(shù)據(jù)模板中通過'@擴展方法'引用：
Mock.Random.extend({
alpha: function(option) {
var arr = ['a', 'b', 'c']
return this.pick(arr) // pick是Mock的函數(shù)，這里表示隨機選取數(shù)組中的一個值
}
})
// 使用方法：
Mock.Random.alpha()
// => "a"
Mock.mock('@ALPHA') // 或者使用 Mock.mock('@alpha')
// => "b"
Mock.mock({
name: '@ALPHA'
})
// => { name: "c" }
