Vue+Mockjs如何模拟curd接口请求

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

  1. 安装依赖,新建js文件,在文件中导入mock.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)",
})
)
}
  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
}
};
}
},
  1. 删除功能接口模拟
 {
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'
}
}
},
  1. 保存及编辑接口模拟
 {
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'
}
}
},

如上便是简易的curd接口模拟,具体mock-server.js的配置可去网上查阅
所有接口使用module.exports导出后,在调用时就会执行mock的接口
欢迎大家评论,如有帮助可以关注+收藏,我会经常更新博客,大家一起讨论学习

标签: Javascript

添加新评论