出现的原因
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://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
}
]
});
});
// 第三种
// 可提取请求的参数与信息，并且区别不同的请求方式，如果出现相同的接口，但请求方式的不同就可以使用以下的方式了
// 接口一一对应
// 请求方式
// 回调函数：拦截到请求所做的一些操作，要有返回值，其实就是响应，这样我们就可以在实际开发做一些 其他操作：监听 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 用户的年龄等
基本模板：属性名|生成规则: 属性值
- 数组
'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'
- 设置响应时间
适用场景：模拟请求耗时，可做等待优化，例如：在加载数据的时候，显示加载GIF图
// 设置4秒后再响应
Mock.setup({ timeout: 1000 });
// 设置1秒至3秒间响应
Mock.setup({ timeout: '1000-3000' });
小案例：
index.js
window.addEventListener('DOMContentLoaded', domLoad);
function domLoad() {
var globalData = null;
var tempData = null;
ajax({
url: 'http://127.0.0.1:3000/api/data',
callback(data) {
console.log(data);
globalData = JSON.parse(data).data
// 初次渲染 数据 容器 回调函数
render(globalData, container, addEvent);
}
});
console.log(globalData); // null
function render(data, parent, callback) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += `
- ${data[i].id}
- ${data[i].name}
- ${data[i].age}
- ${data[i].address}
`
}
parent.innerHTML = html;
callback && callback();
}
function addEvent() {
// 获取修改按钮
var updateBtn = document.getElementsByClassName('update');
// 获取删除按钮
var delBtn = document.getElementsByClassName('del');
// 姓名输入框 年龄输入框 地址输入框
var nameIpt = document.getElementById('name');
var ageIpt = document.getElementById('age');
var addressIpt = document.getElementById('address');
// 提交功能按钮
var submit = document.getElementById('submit');
// 循环的绑定修改按钮，和删除按钮
for (let i = 0; i < delBtn.length; i++) {
updateBtn[i].onclick = function () {
tempData = globalData[i];
// 将临时的用户信息给了input框
nameIpt.value = tempData.name;
ageIpt.value = tempData.age;
addressIpt.value = tempData.address;
}
delBtn[i].onclick = function () {
// 请求删除相对应id的用户
ajax({
url: 'http://127.0.0.1:3000/api/delete',
method: 'POST',
data:{
id: delBtn[i].dataset.id
},
callback(data) {
// 重新渲染数据
render(JSON.parse(data), container, addEvent);
}
})
}
}
// 提交修改信息
submit.onclick = function () {
// 获取所修改后的信息
tempData.name = nameIpt.value;
tempData.age = ageIpt.value;
tempData.address = addressIpt.value;
// 更新的接口
ajax({
url: 'http://127.0.0.1:3000/api/update',
method: 'POST',
data:tempData,
callback(data) {
// 从新渲染页面
render(JSON.parse(data), container, addEvent);
}
});
}
}
}
mockApi.js
// 存储数据
let user = Mock.mock({
'data|10': [
{
'name': '@cname', // 随机名字
'age|10-20': 0,
'address': '@city()',
'id': '@id'
}
]
});
// 拦截请求数据的接口
Mock.mock('http://127.0.0.1:3000/api/data?', user);
// 修改数据接口
Mock.mock('http://127.0.0.1:3000/api/update', 'post', update);
// 删除数据的接口
Mock.mock('http://127.0.0.1:3000/api/delete', 'post', deleteFn);
function update(opt) {
// opt:请求的信息
console.log(opt);
var userData = JSON.parse(opt.body);
// 比对修改对应的用户
for (var i = 0; i < user.data.length; i++) {
if (user.data[i].id === userData.id) {
user.data[i] = userData;
}
}
return user.data;
}
function deleteFn(opt) {
let id = JSON.parse(opt.body).id;
// 比对id，删除对应的用户
for (var i = 0; i < user.data.length; i++) {
if (user.data[i].id === id) {
user.data.splice(i, 1);
break;
}
}
return user.data
}