VUE基于mockjs模拟后台数据
使用Mock.js
众所周知Mock.js因为两个重要的特性风靡前端:
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
拦截 Ajax 请求
不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。安全又便捷
支持的数据类型丰富
引用官网
项目实例
- 工程目录结构
- node.js
import Mock from 'mockjs';
const Nodes = [];
for (let i = 0; i < 86; i++) {
Nodes.push(Mock.mock({
id: Mock.Random.id(),
code:/[a-z][A-Z][0-9]/,
name: Mock.Random.province(),
address: Mock.Random.ip(),
'domain|2-3': 2,
'version|1-10': 1,
type: Mock.Random.integer(0, 1),
status: Mock.Random.integer(0, 9),
nodeConfig: Mock.Random.integer(0, 9),
updateTime: Mock.Random.date(),
createTime: Mock.Random.date(),
}));
}
export { Nodes };
- user.js
import Mock from 'mockjs';
const LoginUsers = [
{
id: 1,
username: 'admin',
password: '123456',
avatar: 'https://github.com/humingfeng',
name: '御前提笔小书童'
}
];
const Users = [];
for (let i = 0; i < 86; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),
addr: Mock.mock('@county(true)'),
'age|18-60': 1,
birth: Mock.Random.date(),
sex: Mock.Random.integer(0, 1)
}));
}
export { LoginUsers, Users };
- mock.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { LoginUsers, Users } from './data/user';
import { Nodes } from './data/node';
let _Users = Users;
let _Nodes = Nodes;
/**
* 方法实现说明
* @method mockjs模拟后台数据返回
* @author 胡铭锋
* @version 1.0
* @exception
* @date 2019/4/4 16:33
*/
export default {
/**
* mock bootstrap
*/
bootstrap() {
let mock = new MockAdapter(axios);
// mock success request
mock.onGet('/success').reply(200, {
msg: 'success'
});
// mock error request
mock.onGet('/error').reply(500, {
msg: 'failure'
});
//登录
mock.onPost('/login').reply(config => {
let {username, password} = JSON.parse(config.data);
return new Promise((resolve, reject) => {
let user = null;
setTimeout(() => {
let hasUser = LoginUsers.some(u => {
if (u.username === username && u.password === password) {
user = JSON.parse(JSON.stringify(u));
user.password = undefined;
return true;
}
});
if (hasUser) {
resolve([200, { code: 200, msg: '请求成功', user }]);
} else {
resolve([200, { code: 500, msg: '账号或密码错误' }]);
}
}, 1000);
});
});
//获取节点列表(分页)
mock.onPost('/node/listPage').reply(config => {
let {curPage, pageSize,name} = JSON.parse(config.data);
let mockNodes = _Nodes.filter(node => {
if (name && node.name.indexOf(name) == -1) return false;
return true;
});
let total = mockNodes.length;
mockNodes = mockNodes.filter((u, index) => index < pageSize * curPage && index >= pageSize * (curPage - 1));
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
total: total,
nodes: mockNodes
}]);
}, 1000);
});
});
//获取用户列表
mock.onGet('/user/list').reply(config => {
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('/user/listpage').reply(config => {
let {page, name} = config.params;
let mockUsers = _Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false;
return true;
});
let total = mockUsers.length;
mockUsers = mockUsers.filter((u, index) => index < 20 * page && index >= 20 * (page - 1));
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
total: total,
users: mockUsers
}]);
}, 1000);
});
});
//删除用户
mock.onGet('/user/remove').reply(config => {
let { id } = config.params;
_Users = _Users.filter(u => u.id !== id);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '删除成功'
}]);
}, 500);
});
});
//批量删除用户
mock.onGet('/user/batchremove').reply(config => {
let { ids } = config.params;
ids = ids.split(',');
_Users = _Users.filter(u => !ids.includes(u.id));
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '删除成功'
}]);
}, 500);
});
});
//编辑用户
mock.onGet('/user/edit').reply(config => {
let { id, name, addr, age, birth, sex } = config.params;
_Users.some(u => {
if (u.id === id) {
u.name = name;
u.addr = addr;
u.age = age;
u.birth = birth;
u.sex = sex;
return true;
}
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '编辑成功'
}]);
}, 500);
});
});
//新增用户
mock.onGet('/user/add').reply(config => {
let { name, addr, age, birth, sex } = config.params;
_Users.push({
name: name,
addr: addr,
age: age,
birth: birth,
sex: sex
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '新增成功'
}]);
}, 500);
});
});
}
};
直接调用和效果图
package.json