出现的原因
1、开发进度的不同 2、前后端分离
优势
1、前后端分离—–定义好接口文档之后，前端人员不用再等待后台的接口
2、增加测试的真实性
3、可拦截Ajax请求，并返回请求
4、易上手
5、数据类型丰富、支持扩展
安装及使用
引入mockjs ： http://mockjs.com/dist/mock.js
模拟数据
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'
}
]
});
- 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个数组元素
- 姓名
'name': '@cname', // 随机中文名称
- ID
'id|+1': 1, // 属性值自动加 1，初始值为1
- 年龄
'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
- 时间
'time': '@date("yyyy-MM-dd")', // 日期
- 城市
'city': '@city(true)', // 中国城市
- 颜色
'color': '@color', // 16进制颜色
- 布尔
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的概率是1/3
- 从某对象中抽取属性
var params = {a: 1, b: 2, c: 3};
'params|2': params, // 从params对象中随机获取2个属性
'params2|1-3': params, // 从params对象中随机获取1至3个属性
- 数组抽取
'arr|1': ['a', 'b'], // 随机选取 1 个元素
'arr1|+1': ['c', 'b', 'a'], // array中顺序选取元素作为结果
'arr2|2': ['b', 'a'] // 重复2次元素生成一个新数组
'email': '@email'