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'));  // 結果: [e-mail]

第二種:

var Random = Mock.Random;
console.log(Random.email());  // 結果: [e-mail]

提供的種類有:

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));

​

文章：

https://segmentfault.com/a/1190000008839142
https://blog.csdn.net/guoscy/article/details/78963557