Vue+Mockjs模拟curd接口请求怎么实现

这篇文章主要介绍“Vue+Mockjs模拟curd接口请求怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue+Mockjs模拟curd接口请求怎么实现”文章能帮助大家解决问题。

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

安装依赖，新建js文件，在文件中导入mock.js，模拟列表数据

yarn add mockjsconst Mock = require("mockjs")const list = []const length = 18for (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'            }        }    },

所有接口使用module.exports导出后，在调用时就会执行mock的接口

关于“Vue+Mockjs模拟curd接口请求怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。