参考文章：vue中使用mockjs实现增删改查
安装开发依赖
npm install mockjs -D
安装mockjs在你的开发依赖上，因为你生产环境用的是正式的接口，安装在开发依赖上可以减少你包的大小。
建立mock文件夹
在src目录中，建立一个mock的文件夹。在mock目录下，建一个index.js和一些其他的js文件（下文是user.js）
mock目录.png
)
这是一个带分页的mock数据，可以实现增删改查的功能。
在hospitals.js中
import Mock from 'mockjs'
const data = Mock.mock({
'items|30': [{
id: '@id()',
name: '@ctitle(2,4)医院',
description: '@cparagraph',
status: '@boolean',
created_at: '@datetime'
}]
})
export default [
// 获取列表
{
url: '/admin/hospitalList',
type: 'get',
response: config => {
const items = data.items
const { name, currentPage = 1, pageSize = 20 } = config.query
const mockList = items.filter(user => {
if (name && user.name.indexOf(name) === -1) return false
return true
})
const pageList = mockList.filter((item, index) => index < pageSize * currentPage && index >= pageSize * (currentPage - 1))
return {
code: 20000,
data: {
total: mockList.length,
items: pageList
}
}
}
},
// 创建or编辑
{
url: '/admin/createHospital',
type: 'post',
response: config => {
let obj = config.query
if (obj.id) {
data.items.some(u => {
if (u.id === obj.id) {
u.name = obj.name
u.description = obj.description
u.status = obj.status
return true
}
})
return {
code: 20000,
message: '修改成功'
}
}else{
obj.id = Mock.Random.id()
obj.created_at = Mock.mock('@now')
data.items.unshift(obj)
return {
code: 20000,
message: '添加成功'
}
}
}
},
// 删除
{
url: '/admin/delHospital',
type: 'get',
response: config => {
let obj = config.query
if (!obj.id) {
return {
code: -999,
message: '参数不正确'
}
} else {
data.items = data.items.filter(u => u.id !== obj.id)
return {
code: 20000,
message: '删除成功'
}
}
}
},
// 批量删除
{
url: '/admin/batchremove/hospital',
type: 'post',
response: config => {
let str = config.query.idStr
let arr = str.split(',')
data.items = data.items.filter(u => !arr.includes(u.id))
return {
code: 20000,
message: '批量删除成功'
}
}
}
]
在index.js中
import Mock from 'mockjs'
import { param2Obj } from '../src/utils'
import user from './user'
import hospitals from './hospitals'
const mocks = [
...user,
...hospitals
]
// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
export function mockXHR() {
// mock patch
// https://github.com/nuysoft/Mock/issues/300
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
Mock.XHR.prototype.send = function() {
if (this.custom.xhr) {
this.custom.xhr.withCredentials = this.withCredentials || false
if (this.responseType) {
this.custom.xhr.responseType = this.responseType
}
}
this.proxy_send(...arguments)
}
function XHR2ExpressReqWrap(respond) {
return function(options) {
let result = null
if (respond instanceof Function) {
const { body, type, url } = options
// https://expressjs.com/en/4x/api.html#req
result = respond({
method: type,
body: JSON.parse(body),
query: param2Obj(url)
})
} else {
result = respond
}
return Mock.mock(result)
}
}
for (const i of mocks) {
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
}
}
// for mock server
const responseFake = (url, type, respond) => {
return {
url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
type: type || 'get',
response(req, res) {
console.log('request invoke:' + req.path)
res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
}
}
}
export default mocks.map(route => {
return responseFake(route.url, route.type, route.response)
})
在main.js中
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
在组件中按自己平时调用接口使用的习惯即可
遇到的问题
mockjs从数组中随机选择n项组成新数组？
const data = Mock.mock({
'items|30': [{
'id|+1': 1,
account: '@last()',
nickname: '@cname()',
role: ['Administrator'],
permissions: function () {
let arr = ['All permission','Dashboard','Login','User setting','Auth management'];
let count = Math.floor(Math.random() * arr.length + 1);
let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
},
created_at: '@datetime',
updated_at: '@datetime',
}]
})
生成随机函数的方法：
// 方法一: 打乱数组的顺序，然后slice 切割出来新的数组
function a() {
let arr = ['All permission','Dashboard','Login','User setting','Auth management'];
let count = Math.floor(Math.random() * arr.length + 1);
let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}
// 方法二：
function a() {
let arr = ['All permission','Dashboard','Login','User setting','Auth management'];
let count = Math.floor(Math.random() * arr.length + 1);
var i = arr.length, min = i - count ;
arr.sort((a,b)=>{
return Math.random() > 0.5 ? a-b : b-a
})
return arr.slice(min);
}
// 方法三：
function a() {
let arr = ['All permission','Dashboard','Login','User setting','Auth management'];
let count = Math.floor(Math.random() * arr.length + 1);
let newArr = [];
var pick = function () {
var index = Math.ceil((arr.length * Math.random())) - 1;
return arr.splice(index, 1);
}
for (var i = 0; i < count ; i++) {
newArr.push(pick()[0]);
}
return newArr;
}