Vue+Mockjs模拟curd接口请求的示例详解_vue.js_

yarn add mockjs const Mock = require("mockjs") const list = [] const length = 18 for (let i = 0; i < length; i++) { list.push( Mock.mock({ id: '@id', account: '@first', name: '@name', email: '@email', mobile: '@phone', sex: '@integer(0,1)', type: "@integer(100,101)", status: "@integer(0,1)", }) ) }

 { url: "/user/getPageList", type: "post", response: config => { // 拿到入参 const { name, account, status, type, pageNum, pageSize, } = config.body; // 做一些查询条件的处理 const mockData = list.filter(item => { if (name && item.name.indexOf(name) < 0) return false if (account && item.account.toString() !== account) return false if (status && item.status.toString() !== status) return false if (type && item.type.toString() !== type) return false return true }) // 模拟分页 const pageList = mockData.slice((pageNum - 1) * pageSize, pageNum * pageSize) // 返回数据 return { resultCode: "1", messageCode: null, message: null, data: { list: pageList, total: mockData.length } }; } },

 { url: "/user/removeRow", type: "post", response: config => { const { id } = config.body // 根据id找到需要删除的元素索引 const index = list.findIndex(item => item.id === id) // 调用splice删除 list.splice(index, 1) return { resultCode: "1", messageCode: null, message: null, data: 'success' } } },

{ url: "/user/saveForm", type: "post", response: config => { const { id } = config.body if (id) { // 关键在于id，其他入参不多赘述，格局id找到那条数据调用splice替换 const index = list.findIndex(item => item.id === id) list.splice(index, 1, config.body) } else { // 如果id不存在则在列表添加一条数据 list.unshift( Mock.mock({ id: '@id', ...config.body }) ) } return { resultCode: "1", messageCode: null, message: null, data: 'success' } } },