出现的原因

1、开发进度的不同
2、前后端分离

优势

1、前后端分离—–定义好接口文档之后，前端人员不用再等待后台的接口
2、增加测试的真实性
3、可拦截Ajax请求，并返回请求
4、易上手
5、数据类型丰富、支持扩展

安装及使用

1. 引入mockjs ： http://mockjs.com/dist/mock.js

2. 模拟数据

Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
rurl: 请求的路径
rtype: 请求的方式 GET POST 等
function(options): 表示用于生成响应数据的函数
options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性

// 第一种
// 第一个参数是接口
// 第二个参数是返回的对象 ，返回一个json对象
Mock.mock('http://aaa.com', {
    // 属性名|生成规则: 属性值
    'name|3': 'fei',
    'age|20-30': 25,
});



// 第二种
// 可提取请求的参数与信息
Mock.mock('http://test.com', function(options) {
    console.log(options);
    return Mock.mock({
        "user|1-3": [{
            'name': '@cname',
            'id|+1': 88
        }
      ]
    });
});

3. ajax请求数据

ajax({
    url: 'http://aaa.com',
    method: 'POST',
    data: {
        name: 'hyj',
        age: 18
    },
    callback: function (data) {
        console.log(data);
    }
});

4.mock基本数据
基本模板：属性名|生成规则: 属性值

1. 数组

    'user|1-3': [], // 随机生成1到3个数组元素

2. 姓名

     'name': '@cname',  // 随机中文名称

3. ID

'id|+1': 1,    // 属性值自动加 1，初始值为1

4. 年龄

'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型

5. 时间

 'time': '@date("yyyy-MM-dd")',  // 日期

6. 城市

  'city': '@city(true)',   // 中国城市

7. 颜色

'color': '@color',  // 16进制颜色

8. 布尔

'isMale|1': true,  // 布尔值
'isFat|1-2': true,  // true的概率是1/3

9. 从某对象中抽取属性

var params = {a: 1, b: 2, c: 3};


'params|2': params,  // 从params对象中随机获取2个属性
'params2|1-3': params,  // 从params对象中随机获取1至3个属性

10. 数组抽取

'arr|1': ['a', 'b'], // 随机选取 1 个元素
'arr1|+1': ['c', 'b', 'a'], // array中顺序选取元素作为结果
'arr2|2': ['b', 'a'] // 重复2次元素生成一个新数组

11. email

'email': '@email'

12. 设置响应时间

// 设置4秒后再响应
Mock.setup({ timeout: 1000 });  

// 设置1秒至3秒间响应
Mock.setup({ timeout: '1000-3000' });