Mock.js使用

更新日期: 2020-02-17阅读: 2.3k标签: 数据

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程,


安装

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

链接: https://fly63.com/article/detial/8279

双向数据绑定与单向数据绑定的各自优势和关系

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

原生JS数据绑定的实现

双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe

JavaScript判断数据类型的多种方法【 js判断一个变量的类型】

js判断数据类型的多种方法,主要包括:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。

javascript中的typeof返回的数据类型_以及强制/隐式类型转换

由于js为弱类型语言拥有动态类型,这意味着相同的变量可用作不同的类型。 typeof 运算符返回一个用来表示表达式的数据类型的字符串,目前typeof返回的字符串有以下这些: undefined、boolean、string、number、object、function、“symbol

使用typeof obj===‘object’潜在的问题,并不能确定obj是否是一个对象?

在js中我们直接这样写typeof obj===‘object’有什么问题呢?发现Array, Object,null都被认为是一个对象了。如何解决这种情况,能保证判断obj是否为一个对象

js进制数之间以及和字符之间的转换

js要处理十六进制,十进制,字符之间的转换,发现有很多差不多且书写不正确的方法.一个一个实践才真正清楚如何转换,现在来记录一下它们之间转换的方法。

js判断数字是奇数还是偶数的2种方法实现

奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1

js算法_判断数字是否为素数/质数

质数又称素数。指在一个大于1的自然数中,除了1和此整数自身外,没法被其他自然数整除的数。比如100以内共25个,js实现代码如下。

Js数据类型转换_JavaScript 那些不经意间发生的数据类型自动转换

JavaScript自动类型转换真的非常常见,常用的一些便捷的转类型的方式,都是依靠自动转换产生的。比如 转数字 : + x 、 x - 0 , 转字符串 : \\\"\\\" + x 等等。现在总算知道为什么可以这样便捷转换。

Js中实现XML和String相互转化

XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。 这篇文章主要介绍Js中实现XML和String相互转化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!