安裝Mock
npm install mockjs
語法規(guī)范
數(shù)據(jù)模板
數(shù)據(jù)模板中的每個屬性由 3 部分構成：屬性名、生成規(guī)則、屬性值：
生成規(guī)則 有 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 //通過重復 string 生成一個字符串，重復次數(shù)大于等于 min，小于等于 max。
'name|count': string //通過重復 string 生成一個字符串，重復次數(shù)等于 count。
- 屬性值是數(shù)字 Number
'name|+1': number //屬性值自動加 1，初始值為 number。
'name|min-max': number //生成一個大于等于 min、小于等于 max 的整數(shù)，屬性值 number 只是用來確定類型。
'name|min-max.dmin-dmax': number //生成一個浮點數(shù)，整數(shù)部分大于等于 min、小于等于 max，小數(shù)部分保留 dmin 到 dmax 位。
- 屬性值是布爾型 Boolean
'name|1': boolean //隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。
'name|min-max': value //隨機生成一個布爾值，值為 value 的概率是 min / (min + max)，值為 !value 的概率是 max / (min + max)。
4.屬性值是對象 Object
'name|count': object //從屬性值 object 中隨機選取 count 個屬性。
'name|min-max': object //從屬性值 object 中隨機選取 min 到 max 個屬性。
5.屬性值是數(shù)組 Array
'name|1': array //從屬性值 array 中隨機選取 1 個元素，作為最終值。
'name|+1': array //屬性值 array 中順序選取 1 個元素，作為最終值
'name|min-max': array //同String
'name|count': array //同String
6.屬性值是函數(shù) Function
'name': function //執(zhí)行函數(shù) function，取其返回值作為最終的屬性值，
7.屬性值是正則表達式 RegExp
'name': regexp //根據(jù)正則表達式 regexp 反向生成可以匹配它的字符串。用于生成自定義格式的字符串。
數(shù)據(jù)占位符定義
占位符 的格式為：
@占位符
@占位符(參數(shù) [, 參數(shù)])
注意：
占位符 引用的是 Mock.Random 中的方法。
通過 Mock.Random.extend() 來擴展自定義占位符。
占位符 也可以引用 數(shù)據(jù)模板 中的屬性。
占位符 會優(yōu)先引用 數(shù)據(jù)模板 中的屬性。
占位符 支持 相對路徑 和 絕對路徑。
如何使用Mock
Mock.mock()
Mock.mock( rurl?, rtype?, template|function( options ) )
Mock.mock( template )
//api.js
function ***(data={},fn){
var res = Mock.mock({
'error_code': '',
'error_msg': '',
'data|10': [{
'id|+1': 1,
'name': "@cname()",
'title': "@csentence(15,26)",
'date': Random.date('MM-dd'),
'type|1-4': 1,//事件類型
}]
})
// 輸出結果
// console.log(JSON.stringify(res, null, 2))
fn(res);
}
//某個組件
var API = require('../../utils/api.js');
API.****('', function (res) {
//這里既可以獲取模擬的res
console.log(res)
that.setData({
list: res.data
})
});
Mock.mock( rurl, template )
這種是直接對你請求的的真實url進行攔截,平時怎么請求后臺數(shù)據(jù)現(xiàn)在依然怎么請求
Mock.mock( rurl, function( options ) )
記錄用于生成響應數(shù)據(jù)的函數(shù)。當攔截到匹配 rurl 的 Ajax 請求時，函數(shù) function(options) 將被執(zhí)行，并把執(zhí)行結果作為響應數(shù)據(jù)返回。
主要用于當你請求的數(shù)據(jù)要根據(jù)傳遞參數(shù)值發(fā)生變化時使用
Mock.mock( rurl, rtype, template )
記錄數(shù)據(jù)模板。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，將根據(jù)數(shù)據(jù)模板 template 生成模擬數(shù)據(jù)，并作為響應數(shù)據(jù)返回。
Mock.mock( rurl, rtype, function( options ) )
記錄用于生成響應數(shù)據(jù)的函數(shù)。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數(shù) function(options) 將被執(zhí)行，并把執(zhí)行結果作為響應數(shù)據(jù)返回。
注意：options 指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性
學習到這里，你所掌握的Mock知識應該就夠你使用了。下面介紹一些不常用到的工具
Mock工具類
Mock.setup( settings )
配置攔截 Ajax 請求時的行為。支持的配置項有：timeout。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
Mock.Random（是一個工具類，用于生成各種隨機數(shù)據(jù)。）
Mock.Random 提供的完整方法。比如：Address、Web、Name、Text、Color
擴展方法：@擴展方法
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '雙魚座']
return this.pick(constellations)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
Mock.valid()
校驗真實數(shù)據(jù) data 是否與數(shù)據(jù)模板 template 匹配
var template = {
name: 'value1'
}
var data = {
name: 'value2'
}
Mock.valid(template, data)
Mock.toJSONSchema()
把 Mock.js 風格的數(shù)據(jù)模板 template 轉換成 JSON Schema。
百度百科：jsonschema是描述你的JSON數(shù)據(jù)格式；JSON模式（應用程序/模式+ JSON）有多種用途，其中之一就是實例驗證。驗證過程可以是交互式或非交互式的。例如，應用程序可以使用JSON模式來構建用戶界面使互動的內(nèi)容生成除了用戶輸入檢查或驗證各種來源獲取的數(shù)據(jù)。
