Mock.js 前端模拟数据工具——学习资料

Mock.js　虚拟接口

mock.js介绍

1.适用场景

• 前后台工作不同步，后端的接口迟迟不能提供，前端的许多开发都要等到后台接口实现才能进行。
• 前后台分离开发，后台模块设置访问验证，本地调试请求跨域。

总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。

2.mock.js特点

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型，可以帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

3.安装

使用npm安装: npm install mockjs --save-dev; 
或直接<script src="http://mockjs.com/dist/mock.js">script>;

Mock文档
数据模板编辑器
html在线编辑器
在线编辑器

mock.js的使用

1.数据模板定义 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

'name|rule': value

属性名|生成规则: 属性值

ajax请求例子：

 $.ajax({
            type: 'get'/'post',
            url:'http://www.bai.com',
            dataType:'json',
            success:function(e){
                console.log(e)
            }
        })

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": "田杰"
        }
    ]
}

2.数据占位符定义 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性。
使用示例：

 {
     name: {
         first: '@FIRST',
         middle: '@FIRST',
         last: '@LAST',
         full: '@first @middle @last'
     }
 }
 // =>
 {
     "name": {
         "first": "Charles",
         "middle": "Brenda",
         "last": "Lopez",
         "full": "Charles Brenda Lopez"
     }
 }

Mock.Random数据集
Mock.Random 是一个工具类，用于生成各种随机数据。Mock.Random 的方法在数据模板中称为“占位符”，引用格式为 @占位符(参数 [, 参数]) 。例如：

var Random = Mock.Random;
Random.email()              
// =>"[email protected]"
Mock.mock('@EMAIL')
// =>"[email protected]"
Mock.mock( { email: '@EMAIL' } )
// =>{ email: "[email protected]" }

Mock.Random 提供的完整方法（占位符）如下：

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

如果上面没有你需要的种类, 还可以自定义扩展, 如下:

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'));  // 结果: 未知

3.自定义响应时间

Mock.setup配置拦截ajax请求的行为，支持的配置项有timeout可以自定义设置响应时间（可以是绝对值, 也可以是区间）。

// 设置4秒后再响应
Mock.setup({ timeout: 4000 });  
// 设置1秒至4秒间响应
Mock.setup({ timeout: '1000-4000' });

4.校验

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

5.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));

6.数据增删改查的模拟数据接口示例

$.ajax({      //请求
    url:'http://www.bai.com',
    type:"DELETE",
    data:{
        id:1  //假设需要删除id=1的数据
    },
    dataType:'json',
    success:function(e){
        console.log(e)
    }
})
/*模拟删除数据的方式*/
var arr=[
    {name:'fei',age:20,id:1},
    {name:'liang',age:30,id:2},
    {name:'jun',age:40,id:3},
    {name:'ming',age:50,id:4}
]

Mock.mock('http://www.bai.com','delete',function(options){
    var id = parseInt(options.body.split("=")[1])//获取删除的id
    var index;
    for(var i in arr){
        if(arr[i].id===id){//在数组arr里找到这个id
            index=i
            break;
        }
    }
    arr.splice(index,1)//把这个id对应的对象从数组里删除
    return arr;//返回这个数组,也就是返回处理后的假数据
})

学习资料收集：
数据类型详解
文档地址
https://segmentfault.com/a/1190000010211622
https://segmentfault.com/a/1190000008839142
https://www.cnblogs.com/zhenfei-jiang/p/7235339.html