使用Mock.js模拟数据请求

最近重构公司项目，为了让前端独立于后端进行开发，王二尝试使用了 Mock.js

1、有什么用？

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

2、如何安装？

一、在前端工程中，咱们能够经过以下命令安装

npm install mockjs
复制代码

二、若是想在浏览器中测试，能够在本身的html中引用以下代码：

<script src="http://mockjs.com/dist/mock.js"></script>
复制代码

3、为何能拦截 Ajax 请求

对这个问题感兴趣的同窗能够参考这个连接

4、生成随机数据

Mock.js 的语法规范包括两部分：

• 数据模板定义（Data Temaplte Definition，DTD）
• 数据占位符定义（Data Placeholder Definition，DPD）

我们不玩这些虚的，先看一些简单的例子：

说明：若是在本身的html中引用以下代码：<script src="http://mockjs.com/dist/mock.js"></script>，如下测试代码能够直接运行

一、将一个字符串随机重复1到10遍

Mock.mock({
  "string|1-10": "★"
})

// {
// "string": "★★★"
// }
复制代码

二、将一个字符串随机重复5遍

Mock.mock({
  "string|5": "★"
})

// {
// "string": "★★★★★"
// }
复制代码

三、 随机生成一个布尔值，值为 true 的几率是 1/2，值为 false 的几率是 1/2

Mock.mock({
  "boolean|1": true
})

// {
// "boolean": true
// }
复制代码

四、从属性值 {} 中随机选取 2 个属性

Mock.mock({
  "object|2": {
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})

// {
// "object": {
// "310000": "上海市",
// "330000": "浙江省"
// }
// }
复制代码

五、从属性值 {} 中随机选取 2 到 4 个属性

Mock.mock({
  "object|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
})

// {
// "object": {
// "110000": "北京市",
// "120000": "天津市",
// "130000": "河北省",
// "140000": "山西省"
// }
// }
复制代码

六、从属性值 [{}, {} ...] 中随机选取 1 个元素，做为最终值

Mock.mock({
  "array|1": [
    {title:"AMD"},
    {title:"CMD"},
    {title:"UMD"},
  ]
})

// {
// "array": {
// title:"CMD"
// }
// }
复制代码

七、经过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 2，小于等于 3

Mock.mock({
  "array|2-3": [
    {title:"AMD"},
    {title:"CMD"},
    {title:"UMD"},
  ]
})

// {
// "array": [
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// },
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// }
// ]
// }
复制代码

八、传入一个正则，返回符合正则的字符串

Mock.mock({
  'regexp': /[a-z][A-Z][0-9]/
})

// {
// "regexp": "uD2"
// }
复制代码

九、Mock对象中有一个 Random 方法，利用 Random 方法咱们能够作不少事情：

var Random = Mock.Random
Random.integer(20,100)   //随机返回20到100的数字
Random.float(60, 100, 3, 5) //随机返回60到100的带有3到5位小数的数字
Random.string() //随机返回一个字符串
Random.string(5) //随机返回一个长度为5的字符串
Random.string(7, 10)//随机返回一个长度为5到7位的字符串
Random.date()//随机返回一个日期
Random.date('yyyy-MM-dd')//随机返回一个格式化日期
Random.image()//随机返回一张图片
Random.image('200x100')//随机返回一张带尺寸的图片
Random.image('200x100', '#FF6600')//随机返回一张带尺寸和颜色的图片
Random.paragraph()//随机返回一段文字
Random.cparagraph()//随机返回一段中文文字
Random.cparagraph(1, 3)//随机返回1到3段中文文字
Random.csentence()//随机返回一句中文
Random.ctitle()//随机返回一个中文标题
复制代码

关于其更多的用法，感兴趣的同窗能够参考官方示例代码；

5、拦截 ajax 请求的代码细节

以jQuery为例：

Mock.mock('http://test/api', {
    'name'	   : '[@name](/user/name)()',
    'age|1-100': 100,
    'color'	   : '[@color](/user/color)'
});

$.ajax({
    url: 'http://test/api',
    success: function(data){
        console.log(JSON.stringify(data, null, 4)
    )}
})

// {
// "name": "Elizabeth Hall",
// "age": 91,
// "color": "#0e64ea"
// }
复制代码

语法以下：Mock.mock( rurl, template ),其中的参数 rurl 还能够传入正则表达式。

关于其更多的用法，感兴趣的同窗能够参考官方文档；

6、王二遇到的问题

有了以上的各类方法，再加上嵌套，能够知足绝大多数咱们想要的数据格式。可是由于使用姿式不正确，王二也遇到了一点小小的的问题，

例如以下代码：

Mock.mock({
    'list|2-10': [{
        'id': Random.integer(20,100),
        'name':Random.ctitle(),
        'date':Random.date("yyyy-MM-dd")
    }]
});

// {
// "list": [
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// }
// ]
// }
复制代码

王二本来的目的是想在 list 里返回数据不一样的数组,可是用以上的写法数组里每一个对象的数据都同样。

通过查阅文档，发如今 Mock 模板里属性的值能够是 Function,因而修改以下：

Mock.mock({
    'list|2-10': [{
        'id': ()=>Random.integer(20,100),
        'name': ()=>Random.ctitle(),
        'date':()=>Random.date("yyyy-MM-dd")
    }]
});

// {
// "list": [
// {
// "id": 74,
// "name": "但称青气",
// "date": "2004-10-31"
// },
// {
// "id": 32,
// "name": "三六属集",
// "date": "2008-06-28"
// },
// {
// "id": 28,
// "name": "装造始",
// "date": "1975-04-29"
// }
// ]
// }
复制代码

这样就符合王二的预期了。

7、参考文章

Mock官方网站 Mock官方示例代码 Mock官方文档 'think2011'的博客

8、原文地址

王玉略的我的网站