官方文檔
https://github.com/nuysoft/Mock/wiki
Mock.mock()
1. Mock.mock( template )
根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
<!-- (必選)加載 Mock -->
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
var template = {
'title': 'Syntax Demo',
'string1|1-10': '★',
'string2|3': 'value',
'number1|+1': 100,
'number2|1-100': 100,
'number3|1-100.1-10': 1,
'number4|123.1-10': 1,
'number5|123.3': 1,
'number6|123.10': 1.123,
'boolean1|1': true,
'boolean2|1-2': true,
'object1|2-4': {
'110000': '北京市',
'120000': '天津市',
'130000': '河北省',
'140000': '山西省'
},
'object2|2': {
'310000': '上海市',
'320000': '江蘇省',
'330000': '浙江省',
'340000': '安徽省'
},
'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
'array2|1-10': ['Mock.js'],
'array3|3': ['Mock.js'],
'function': function() {
return this.title
}
}
var data = Mock.mock(template)
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
</script>
2. Mock.mock( rurl, template )
記錄數(shù)據(jù)模板圃阳。當(dāng)攔截到匹配 rurl 的 Ajax 請求時(shí),將根據(jù)數(shù)據(jù)模板 template 生成模擬數(shù)據(jù)卤材,并作為響應(yīng)數(shù)據(jù)返回相满。
<!-- (必選)加載 Mock -->
<script src="http://mockjs.com/dist/mock.js"></script>
// Mock.mock(rurl, template)
Mock.mock(/\.json/, {
'list|1-10': [{
'id|+1': 1,//屬性 id 是一個(gè)自增數(shù),起始值為 1,每次增 1
'email': '@EMAIL'//隨機(jī)郵箱地址
}]
})
$.ajax({
url: 'hello.json',
dataType: 'json'
}).done(function(data, status, jqXHR){
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
3. Mock.mock( rurl, function( options ) )
記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)烟号。當(dāng)攔截到匹配 rurl 的 Ajax 請求時(shí),函數(shù) function(options) 將被執(zhí)行政恍,并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回汪拥。
// Mock.mock(rurl, function(options))
Mock.mock(/\.json/, function(options) {
return options
})
$.ajax({
url: 'hello.json',
dataType: 'json'
}).done(function(data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
$.ajax({
url: 'hello.json',
dataType: 'json',
data: {
foo: 1,
bar: 2,
faz: 3
}
}).done(function(data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
$.ajax({
url: 'hello.json',
type: 'post',
dataType: 'json',
data: {
foo: 1,
bar: 2,
faz: 3
}
}).done(function(data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
4. Mock.mock( rurl, rtype, template )
記錄數(shù)據(jù)模板。當(dāng)攔截到匹配 rurl 和 rtype 的 Ajax 請求時(shí)篙耗,將根據(jù)數(shù)據(jù)模板 template 生成模擬數(shù)據(jù)迫筑,并作為響應(yīng)數(shù)據(jù)返回。
// Mock.mock( rurl, rtype, template )
Mock.mock(/\.json/, 'get', {
type: 'get'
})
Mock.mock(/\.json/, 'post', {
type: 'post'
})
$.ajax({
url: 'hello.json',
type: 'get',
dataType: 'json'
}).done(function (data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
$.ajax({
url: 'hello.json',
type: 'post',
dataType: 'json'
}).done(function (data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
5. Mock.mock( rurl, rtype, function( options ) )
記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)宗弯。當(dāng)攔截到匹配 rurl 和 rtype 的 Ajax 請求時(shí)脯燃,函數(shù) function(options) 將被執(zhí)行,并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回蒙保。
// Mock.mock( rurl, rtype, function(options) )
Mock.mock(/\.json/, 'get', function(options) {
return options.type
})
Mock.mock(/\.json/, 'post', function(options) {
return options.type
})
$.ajax({
url: 'hello.json',
type: 'get',
dataType: 'json'
}).done(function (data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
$.ajax({
url: 'hello.json',
type: 'post',
dataType: 'json'
}).done(function (data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
參數(shù)
1. rurl辕棚,可選。
表示需要攔截的 URL,可以是 URL 字符串或 URL 正則逝嚎。例如 //domain/list.json/扁瓢、'/domian/list.json'。
Mock.mock(/\/proxy\/query_common_credit/, {//匹配所有包含/proxy/query_common_credit的url
"ret":0,
"data":
{
"mtime": "@datetime",//隨機(jī)生成日期時(shí)間
"score": "@natural(1, 800)",//隨機(jī)生成1-800的數(shù)字
"rank": "@natural(1, 100)",//隨機(jī)生成1-100的數(shù)字
"stars": "@natural(0, 5)",//隨機(jī)生成1-5的數(shù)字
"nickname": "@cname",//隨機(jī)生成中文名字
}
});
2. rtype补君,可選引几。
表示需要攔截的 Ajax 請求類型。例如 GET挽铁、POST伟桅、PUT、DELETE 等屿储。
3. template贿讹,可選。
表示數(shù)據(jù)模板够掠,可以是對(duì)象或字符串民褂。例如 { 'data|1-10':[{}] }、'@EMAIL'疯潭。
4. function(options)赊堪,可選。
表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)竖哩。
5. options
指向本次請求的 Ajax 選項(xiàng)集哭廉,含有 url、type 和 body 三個(gè)屬性相叁,參見 XMLHttpRequest 規(guī)范遵绰。
從 1.0 開始,Mock.js 通過覆蓋和模擬原生 XMLHttpRequest 的行為來攔截 Ajax 請求增淹,不再依賴于第三方 Ajax 工具庫(例如 jQuery椿访、Zepto 等)。