189 8069 5689
一、安装
1、安装 mock axios
npm install mockjs axios --save
2、安装axios-mock-adapter
axios-mock-adapter 是axios与mock配置器，简单来说就是把二者结合在一起的工具
npm install axios-mock-adapter --save-dev
创新互联建站是一家专注于成都网站设计、做网站与策划设计,尚志网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:尚志等地区。尚志做网站价格咨询:13518219792
二、使用mock
1、在src目录下，创建mock文件夹，在下面再创建data文件夹，创建数据文件，比如user.js，用于模拟生成用户信息数据，初始化我们需要的数据，这里举例初始化用户信息数据
//user.js
import Mock from 'mockjs'; // 导入mockjs 模块
let Users = []; // 定义我们需要的数据，后面导出
const COUNT = [1, 2, 3, 4, 5]; // 定义我们需要数量，即生成几条模拟数据
for (let i = 1; i <= COUNT.length; i++) {
Users.push(Mock.mock({ // 根据数据模板生成模拟数据。
id: Mock.Random.guid(), // 随机id
title: Mock.Random.first(), // 随机标题
name:Mock.Random.cname(), //随机中文名
addr: Mock.mock('@county(true)'), //随机地址
'age|18-60': 1, //随机年龄
birth: Mock.Random.date(), //随机生日
sex: Mock.Random.integer(0, 1) //随机性别
isDelete: false, //是否删除
locked: Mock.Random.boolean(), // 随机锁定
record: COUNT.map(() => { // ×××单项列表的数据
return {
text: Mock.Random.cparagraph(2), // 随机内容
isDelete: false, //是否删除
checked: Mock.Random.boolean() //是否完成
};
})
}));
}
export { // 导出用户数据
Users
};2、创建mock,js
核心文件，它的作用就是模拟ajax请求的接口，生成并返回模拟数据.
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Mock from 'mockjs';
import { Users } from './data/user.js'; // 导入Users数据
export default {
/**
* mock start
*/
start() { // 初始化函数
let mock = new MockAdapter(axios); // 创建 MockAdapter 实例
//获取用户列表
mock.onGet('/user/list').reply(config => { // config 指 前台传过来的值 网址自己随意定义，访问时要和这个网址一致就可以，这个'/user/list'，就是get请求时的url地址
let {name} = config.params;
let mockUsers = Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false;
return true;
});
return new Promise((resolve, reject) => { //响应请求，返回数据给前台
setTimeout(() => {
resolve([200, {
users: mockUsers
}]);
}, 1000);
});
});
mock.onGet('/todo/list').reply(config => { // config 指 前台传过来的值
let mockTodo = Todos.map(tode => { // 重组 Todos数组，变成我们想要的数据
return {
id: tode.id,
title: tode.title,
count: tode.record.filter((data) => {
if (data.checked === false) return true;
return false;
}).length, // 过滤到record里面 ‘checked’ 为true的数据，因为它们已经被完成了
locked: tode.locked,
isDelete: tode.isDelete
};
}).filter(tode => {
if (tode.isDelete === true) return false; // 过滤掉 ‘isDelete’为true，因为已经被删除了。
return true;
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
todos: mockTodo // 返回状态为200，并且返回todos数据
}]);
}, 200);
});
});
// 新增一条todo
mock.onPost('/todo/addTodo').reply(config => {
Todos.push({
id: Mock.Random.guid(),
title: 'newList',
isDelete: false,
locked: false,
record: []
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200]);
}, 200);
});
});
}
};3、导出 mock
新建src/mock/index.js，并且复制以下代码，这里的index作用在于方便其他文件引入。
import mock from './mock';
export default mock; // 导入同级下mock.js的内容，并且导出4、引入 mock
打开 src/main.js，并且复制以下代码，这里的作用就是全局加载mock，执行初始化函数函数，这样的本地我们设定的接口，就可以在全局调用了。
import Mock from './mock'; // 引入mock模块
Mock.start(); //并且执行初始化函数5、封装api函数
import axios from 'axios'; //导入axios模块
export const getTodoList = params => { //封装一个函数，名为getTodoList
return axios.get(`/todo/list`, { // 请求路径 ‘/todo/list’
params: params
});
};
export const addTodo = params => {
return axios.post(`/todo/addTodo`, params).then(res => res.data);
};6、调用接口