【20170316】Mock.js前端模拟数据

[zhongxia245]

时间：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 占位符

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

//使用方式
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》