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

在前后端分离的项目中常常会遇到当前端页面开发完成
但是后端接口还没好，暂不支持联调的情况下，一般我们会用到mock数据
这边简单说一下最常见且经常会遇到的curd接口模拟
注：这边可以和后端先约定好接口路径以及入参返参的字段，避免二次修改
1.安装依赖，新建js文件，在文件中导入mock.js，模拟列表数据

1. yarn add mockjs
2. const Mock = require("mockjs")
4. const list = []
5. const length = 18
6. for (let i = 0; i < length; i++) {
7.     list.push(
8.         Mock.mock({
9.             id: '@id',
10.             account: '@first',
11.             name: '@name',
12.             email: '@email',
13.             mobile: '@phone',
14.             sex: '@integer(0,1)',
15.             type: "@integer(100,101)",
16.             status: "@integer(0,1)",
17.         })
18.     )
19. }

复制代码

2.查询列表接口模拟

1. {
2.         url: "/user/getPageList",
3.         type: "post",
4.         response: config => {
5.             // 拿到入参
6.             const {
7.                 name,
8.                 account,
9.                 status,
10.                 type,
11.                 pageNum,
12.                 pageSize,
13.             } = config.body;
14.             // 做一些查询条件的处理
15.             const mockData = list.filter(item => {
16.                 if (name && item.name.indexOf(name) < 0) return false
17.                 if (account && item.account.toString() !== account) return false
18.                 if (status && item.status.toString() !== status) return false
19.                 if (type && item.type.toString() !== type) return false
20.                 return true
21.             })
22.             // 模拟分页
23.             const pageList = mockData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
24.             // 返回数据
25.             return {
26.                 resultCode: "1",
27.                 messageCode: null,
28.                 message: null,
29.                 data: {
30.                     list: pageList,
31.                     total: mockData.length
32.                 }
33.             };
34.         }
35.     },

复制代码

3.删除功能接口模拟

1. {
2.         url: "/user/removeRow",
3.         type: "post",
4.         response: config => {
5.             const {
6.                 id
7.             } = config.body
8.             // 根据id找到需要删除的元素索引
9.             const index = list.findIndex(item => item.id === id)
10.             // 调用splice删除
11.             list.splice(index, 1)
12.             return {
13.                 resultCode: "1",
14.                 messageCode: null,
15.                 message: null,
16.                 data: 'success'
17.             }
18.         }
19.     },

复制代码

4.保存及编辑接口模拟

1. {
2.         url: "/user/saveForm",
3.         type: "post",
4.         response: config => {
5.             const {
6.                 id
7.             } = config.body
8.             if (id) {
9.                 // 关键在于id，其他入参不多赘述，格局id找到那条数据调用splice替换
10.                 const index = list.findIndex(item => item.id === id)
11.                 list.splice(index, 1, config.body)
12.             } else {
13.                 // 如果id不存在则在列表添加一条数据
14.                 list.unshift(
15.                     Mock.mock({
16.                         id: '@id',
17.                         ...config.body
18.                     })
19.                 )
20.             }
21.             return {
22.                 resultCode: "1",
23.                 messageCode: null,
24.                 message: null,
25.                 data: 'success'
26.             }
27.         }
28.     },

复制代码

如上便是简易的curd接口模拟，具体mock-server.js的配置可去网上查阅
所有接口使用module.exports导出后，在调用时就会执行mock的接口