Mock.mock()

官方文档

https://github.com/nuysoft/Mock/wiki

Mock.mock()

1. Mock.mock( template )

根据数据模板生成模拟数据。

<!-- （必选）加载 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>

image

2. Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

<!-- （必选）加载 Mock -->
<script src="http://mockjs.com/dist/mock.js"></script>
// Mock.mock(rurl, template)
Mock.mock(/\.json/, {
    'list|1-10': [{
        'id|+1': 1,//属性 id 是一个自增数，起始值为 1，每次增 1
        'email': '@EMAIL'//随机邮箱地址
    }]
})
$.ajax({
    url: 'hello.json',
    dataType: 'json'
}).done(function(data, status, jqXHR){
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

image

3. Mock.mock( rurl, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

// 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')
})

image

4. Mock.mock( rurl, rtype, template )

记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

// 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')
})

image

5. Mock.mock( rurl, rtype, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

// 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')
})

image

参数

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",//随机生成日期时间
        "score":  "@natural(1, 800)",//随机生成1-800的数字
        "rank":  "@natural(1, 100)",//随机生成1-100的数字
        "stars": "@natural(0, 5)",//随机生成1-5的数字
        "nickname": "@cname",//随机生成中文名字
      }
});

2. rtype，可选。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

3. template，可选。

表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

4. function(options)，可选。

表示用于生成响应数据的函数。

5. options

指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。

从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。