时间：2017-03-16 16:56:05
作者：zhongxia

一、背景

前后端分离开发的时候，前端和后端是并行开发的，前端往往刚开始不能拿到测试的数据，都需要自己写测试数据。 编写测试数据还是比较浪费时间的，虽然简单，但是都是体力活。

那么是否有工具可以帮我们生成数据，生成API接口，让前端能够爽爽的开发。

Mock.js 正是这样一款类库，可以帮我们模拟生成一堆数据。

二、使用

2.1 前端使用

引入引入mock.js的包，然后生成数据。

<pre>
</pre>
<!-- （必选）加载 Mock -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- （必选）加载 Mock -->
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
// 使用 Mock
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
</script>

生成的数据(数据的个数，1-10个中随机个数)

{
"list": [
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
    ]
}

2.2 Jquery中，模拟API接口

配置模拟数据

Mock.mock('http://g.cn', 'GET' , {
    'name'     : '@name',
    'age|1-100': 100,
    'color'    : '@color'
});

发送Ajax请求：

$.ajax({
    url: 'http://g.cn',
    dataType:'json'
    }).done(function(data, status, xhr){
    console.log(
    JSON.stringify(data, null, 4)
    )    
})；

返回数据：

// 结果1
{
"name": "Elizabeth Hall",
"age": 91,
"color": "#0e64ea"
}

// 结果2
{
"name": "Michael Taylor",
"age": 61,
"color": "#081086"
}

2.3 Node.js 中使用

// 安装
npm install mockjs

// 使用
var Mock = require('mockjs');
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});

console.log(JSON.stringify(data, null, 4))

三、Mock.js语法

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

3.1 模板定义

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：

属性名 和 生成规则 之间用 | 分隔。生成规则 是可选的。生成规则 有 7 种格式：

 'name|min-max': value    //随机取min-max之间的值
 'name|count': value      //
 'name|min-max.dmin-dmax': value   //随机取值，有小数点
 'name|min-max.dcount': value      //随机取出，有确定几位小数点
 'name|count.dmin-dmax': value  
 'name|count.dcount': value
 'name|+step': value    //自增的值

生成规则 的 含义 需要依赖 属性值 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

3.2 占位符

//使用方式
Mock.mock('http://g.cn', 'GET' , {
    'name'     : '@name',
    'age|1-100': '@ctitle',
    'color'    : '@color'
});

四、Mock.js 模拟Ajax请求响应时间

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

五、参考地址

1. 《使用Mock.js进行独立于后端的前端开发》
2. 《Mock.js》