AJAX数据模拟之Mock

出现的原因

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对象

// 在实际前后端分离开发的时候，可以拦截ajax请求

    Mock.mock('http://127.0.0.1：3000/api/data', {
      // 属性名|生成规则: 属性值
      '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
        }
      ]
    });
});

// 第三种
// 可提取请求的参数与信息，并且区别不同的请求方式，如果出现相同的接口，但请求方式的不同就可以使用以下的方式了
// 接口一一对应
// 请求方式
// 回调函数：拦截到请求所做的一些操作，要有返回值，其实就是响应，这样我们就可以在实际开发做一些 其他操作：监听 get put delete post, 并对数据总增删改查的操作

  Mock.mock('http://test.com', 'post', function(options) {
    console.log(options);
    return Mock.mock({
        "user|1-3": [{
            'name': '@cname',
            'id|+1': 88
        }
      ]
    });
});

// 第四种

// 模拟数据
// 适用场景： 可以保存数据，配合其他接口实现接口拦截对其增删改查

let user = Mock.mock({
    'data|10': [
        {
            'name': '@cname',
            'age|10-20': 0,
            'address': '@city(true)',
            'id': '@id'
        }
    ]
});

1. ajax请求数据

// 模拟ajax请求，mock则拦截相同的url
ajax({
    url: 'http://aaa.com',
    method: 'POST',
    data: {
        name: 'hyj',
        age: 18
    },
    callback: function (data) {
        console.log(data);
    }
});

4.mock基本数据 对于一些常用的自动随机生成的数据，MOCK提供了一些方法，然后可以在实际开发当中选取一些适用的随机函数，模拟类似的数据， 适用场景：用户名 用户的地址 用户的id 用户的年龄等 基本模板：属性名|生成规则: 属性值 1. 数组

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

1. 姓名

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

1. ID

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

1. 年龄

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

1. 时间

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

1. 城市

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

1. 颜色

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

1. 布尔

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

1. 从某对象中抽取属性

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

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

1. 数组抽取

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

1. email

'email': '@email'