Mock.js使用

Mock.js 是一款前端開發中攔截Ajax請求再生成隨機數據響應的工具.能夠用來模擬服務器響應. 優勢是很是簡單方便, 無侵入性, 基本覆蓋經常使用的接口數據類型.

大概記錄下使用過程, 詳細使用能夠參見Mock文檔 Mock Wiki

安裝

使用npm安裝: npm install mockjs;
或直接<script src="http://mockjs.com/dist/mock.js"></script>;

數據模板格式:

'name|rule': value

屬性名|生成規則: 屬性值

GET請求

發起get請求:

$.ajax({
    url: 'http://test.com',
    type: 'get',
    dataType: 'json'
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js響應:

var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};

// Mock響應模板
Mock.mock('http://test.com', {
    "user|1-3": [{   // 隨機生成1到3個數組元素
        'name': '@cname',  // 中文名稱
        'id|+1': 88,    // 屬性值自動加 1，初始值爲88
        'age|18-28': 0,   // 18至28之內隨機整數, 0只是用來肯定類型
        'birthday': '@date("yyyy-MM-dd")',  // 日期
        'city': '@city(true)',   // 中國城市
        'color': '@color',  // 16進制顏色
        'isMale|1': true,  // 布爾值
        'isFat|1-2': true,  // true的機率是1/3
        'fromObj|2': obj,  // 從obj對象中隨機獲取2個屬性
        'fromObj2|1-3': obj,  // 從obj對象中隨機獲取1至3個屬性
        'brother|1': ['jack', 'jim'], // 隨機選取 1 個元素
        'sister|+1': ['jack', 'jim', 'lily'], // array中順序選取元素做爲結果
        'friends|2': ['jack', 'jim'] // 重複2次屬性值生成一個新數組
    },{
        'gf': '@cname'
    }]
});

能夠看到結果:

{
    "user": [
        {
            "name": "董靜",
            "id": 88,
            "age": 25,
            "birthday": "2015-04-01",
            "city": "湖南省 懷化市",
            "color": "#c0f279",
            "isMale": false,
            "isFat": false,
            "fromObj": {
                "dd": "44",
                "aa": "11"
            },
            "fromObj2": {
                "bb": "22",
                "cc": "33"
            },
            "brother": "jack",
            "sister": "jack",
            "friends": [
                "jack",
                "jim",
                "jack",
                "jim"
            ]
        },
        {
            "gf": "田傑"
        }
    ]
}

響應時也能夠是使用function, 如:

Mock.mock('http://test.com', 'get', function() {
    return Mock.mock({
        "user|1-3": [{
            'name': '@cname',
            'id': 88
        }
      ]
    });
});

結果:

{
    "user": [
        {
            "name": "許超",
            "id": 88
        }
    ]
}

POST請求

發起post請求:

$.ajax({
    url: 'http://test.com',
    type: 'post',
    dataType: 'json',
    data: {
      account: 888,
      pwd: 'abc123'
    }
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js響應:

Mock.mock('http://test.com', function(options) {
    console.log(options);
    return Mock.mock({
        "user|1-3": [{
            'name': '@cname',
            'id|+1': 88
        }
      ]
    });
});

能夠看到結果:

{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}

{
    "user": [
        {
            "name": "曾明",
            "id": 88
        }
    ]
}

自定義響應時間

能夠自定義設置響應時間, 能夠是絕對值, 也能夠是區間.

// 設置4秒後再響應
Mock.setup({ timeout: 4000 });  

// 設置1秒至4秒間響應
Mock.setup({ timeout: '1000-4000' });

數據集

Mock.Random是一個工具類，用於生成各類格式隨機數據. 有兩種寫法:

第一種:

// 生成一個email格式的字符串
console.log(Mock.mock('@email'));  // 結果: s.uorjeqdou@crqfpdypt.gw

第二種:

var Random = Mock.Random;
console.log(Random.email());  // 結果: r.quyppn@yit.cv

提供的種類有:

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

若是上面沒有你須要的種類, 還能夠自定義擴展, 以下:

Random.extend({
    weekday: function(date) {
        var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        return this.pick(weekdays);
    },
    sex: function(date) {
        var sexes = ['男', '女', '中性', '未知'];
        return this.pick(sexes);
    }
});

console.log(Random.weekday());  // 結果: Saturday
console.log(Mock.mock('@weekday'));  // 結果: 112Tuesday
console.log(Random.sex());  // 結果: 男
console.log(Mock.mock('@sex'));  // 結果: 未知

校驗

Mock.valid(template, data): 用來校驗真實數據data是否與數據模板template匹配

var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
var realData = { "user": [{ 'name': '張三', 'id': 90 } ]};
console.log(Mock.valid(tempObj, realData));

JSON Schema

Mock.toJSONSchema(template): 用來把Mock.js風格的數據模板template轉換成JSON Schema

var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
console.log(Mock.toJSONSchema(tempObj));