何宏伟

Mockjs

[嵌牛导读]

在开发阶段，有没有因为后端API搭建迟迟未好，后端数据库无法按时构建，导致你的前端界面无法及时拿到后端数据而苦恼！不存在的，快来看看Mock.js

Mock.js，生成随机数据，拦截Ajax请求

（emmm, 这篇文章和上一篇Ajax遥相呼应）

[嵌牛鼻子]

拦截Ajax请求，随机数据，前后端分离

[嵌牛提问]

  • 前端和后端长久依赖紧密连接，你中有我，我中有你，开发过程连接紧密，如何做到前后端分离？

  • Mock如何拦截Ajax请求，模拟后端服务器，让我们“放弃后端”直接开发前端？

[嵌牛正文]

Mock

1. 前后端分离

正如文章开始提到的那样，前端开发需要后端API提供的数据做支撑，毕竟不可能手写后端测试数据，麻烦又浪费时间。前端依赖后端的服务器才可以完成自己的交互逻辑，自己真正意义上的的数据传递。

通过Mockjs，我们可以非常方便的生成随机数据，不管是测试使用的，还是后端服务器必须提供的都可以提供。这样，前后端解耦分离，前端在后端没有提供数据的前提下依然可以开发，甚至超前与后端开发，最后只需要将前端Mockjs Api替换成后端服务器API，即可完成前后端连接，大大提高开发效率。

2. 拦截Ajax，模拟后端服务器

我们使用Mockjs来模拟前端开发中的Ajax数据请求，将原本需要向后端服务器请求数据的Request拦截，使用Mockjs生成所需要的数据，返回给前端。

GET请求

  • Ajax
$.ajax({
    url: 'http://test.com',
    type: 'get',
    dataType: 'json'
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});
  • Mock模拟数据请求响应
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": "田杰"
        }
    ]
}

POST请求

  • Ajax
$.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模拟数据请求响应
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
        }
    ]
}

3. 生成随机数据

所有的数据生成都是随机生成，不过并不是真正的不按照要求随机生成，而是遵循rule生成数据。

例如

  • 人的姓名: Mock.mock('@cfirst') + Mock.mock('@clast')
  • 说的话: Mock.mock('@cword')
  • url: Mock.mock('@url')
  • 地址: Mock.mock('@province') + Mock.mock('@city') + Mock.mock('@county')
  • 区域范围: Mock.mock('@region')
  • 图片，文章，段落，数组，对象......

示例 - 刷新页面可以获得不同的图片和表格数据

END

参考 ：

举报
收藏
赞