出现的原因
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对象
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
}
]
});
});
- ajax请求数据
ajax({
url: 'http://aaa.com',
method: 'POST',
data: {
name: 'hyj',
age: 18
},
callback: function (data) {
console.log(data);
}
});
4.mock基本数据
基本模板：属性名|生成规则: 属性值
- 数组
'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'
- 设置响应时间
// 设置4秒后再响应
Mock.setup({ timeout: 1000 });
// 设置1秒至3秒间响应
Mock.setup({ timeout: '1000-3000' });