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

供应的品种有:

TypeMethod
Basicboolean, natural, integer, float, character, string, range, date, time, datetime, now
Imageimage, dataImage
Colorcolor
Textparagraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Namefirst, last, name, cfirst, clast, cname
Weburl, domain, email, ip, tld
Addressarea, region
Helpercapitalize, upper, lower, pick, shuffle
Miscellaneousguid, 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));
    原文作者:laowen
    原文地址: https://segmentfault.com/a/1190000008839142
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞