快捷導(dǎo)航

Vue+Mockjs模擬curd接口請(qǐng)求的示例詳解

更新時(shí)間：2022年07月11日 17:13:54 作者：就愛(ài)吃小魚(yú)

這篇文章主要介紹了Vue+Mockjs模擬curd接口請(qǐng)求的示例詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在前后端分離的項(xiàng)目中常常會(huì)遇到當(dāng)前端頁(yè)面開(kāi)發(fā)完成
但是后端接口還沒(méi)好，暫不支持聯(lián)調(diào)的情況下，一般我們會(huì)用到mock數(shù)據(jù)
這邊簡(jiǎn)單說(shuō)一下最常見(jiàn)且經(jīng)常會(huì)遇到的curd接口模擬
注：這邊可以和后端先約定好接口路徑以及入?yún)⒎祬⒌淖侄?，避免二次修?/p>

1.安裝依賴(lài)，新建js文件，在文件中導(dǎo)入mock.js，模擬列表數(shù)據(jù)

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)",
        })
    )
}

2.查詢(xún)列表接口模擬

 {
        url: "/user/getPageList",
        type: "post",
        response: config => {
            // 拿到入?yún)?
            const {
                name,
                account,
                status,
                type,
                pageNum,
                pageSize,
            } = config.body;
            // 做一些查詢(xún)條件的處理
            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
            })
            // 模擬分頁(yè)
            const pageList = mockData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
            // 返回?cái)?shù)據(jù)
            return {
                resultCode: "1",
                messageCode: null,
                message: null,
                data: {
                    list: pageList,
                    total: mockData.length
                }
            };
        }
    },

3.刪除功能接口模擬

 {
        url: "/user/removeRow",
        type: "post",
        response: config => {
            const {
                id
            } = config.body
            // 根據(jù)id找到需要?jiǎng)h除的元素索引
            const index = list.findIndex(item => item.id === id)
            // 調(diào)用splice刪除
            list.splice(index, 1)
            return {
                resultCode: "1",
                messageCode: null,
                message: null,
                data: 'success'
            }
        }
    },

4.保存及編輯接口模擬

{
        url: "/user/saveForm",
        type: "post",
        response: config => {
            const {
                id
            } = config.body
            if (id) {
                // 關(guān)鍵在于id，其他入?yún)⒉欢噘樖觯窬謎d找到那條數(shù)據(jù)調(diào)用splice替換
                const index = list.findIndex(item => item.id === id)
                list.splice(index, 1, config.body)
            } else {
                // 如果id不存在則在列表添加一條數(shù)據(jù)
                list.unshift(
                    Mock.mock({
                        id: '@id',
                        ...config.body
                    })
                )
            }
            return {
                resultCode: "1",
                messageCode: null,
                message: null,
                data: 'success'
            }
        }
    },

如上便是簡(jiǎn)易的curd接口模擬，具體mock-server.js的配置可去網(wǎng)上查閱
所有接口使用module.exports導(dǎo)出后，在調(diào)用時(shí)就會(huì)執(zhí)行mock的接口

您可能感興趣的文章: