Mockjs模拟接口实现增删改查、分页、多条件查询

哈喽！大家好，我是【Bug 终结者】 ，【CSDN新星创作者】，阿里云技术博主，51CTO人气博主，INfoQ写作专家

一位上进心十足，拥有极强学习力的【Java领域博主】

【Bug 终结者】博客的领域是【面向后端技术】的学习，未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识，会更新实战项目，面向企业级开发应用！
如果有对【后端技术】、【前端领域】感兴趣的【小可爱】，欢迎关注【Bug 终结者】


❤️❤️❤️ 感谢各位大可爱小可爱！ ❤️❤️❤️

一、什么是Mock？

mock官网

mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。

二、使用Mock有什么好处

生成随机数据，拦截 Ajax 请求

1️⃣前后端分离

让前端攻城师独立于后端进行开发。

2️⃣增加单元测试的真实性

通过随机数据，模拟各种场景。

3️⃣开发无侵入

不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

4️⃣用法简单

符合直觉的接口。

5️⃣数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

6️⃣方便扩展

支持支持扩展更多数据类型，支持自定义函数和正则。

三、安装Mock

//安装最新版本mockjs
npm install mockjs

四、效果图

五、使用Mock模拟接口实现增删改查、分页、多条件查询

使用mock实现英文单词的增删改查、分页、多条件查询

话不多说，上代码

Mock下 index.js

var englishArr = [];
//保存英文单词
Mock.mock('/addEnglish', /post/i,(options) => {
    let english = JSON.parse(options.body).params.english;
    if (english.noid == null) {
        english.noid = Mock.Random.increment();
        englishArr.push(english);
    } else {
        for (let i = 0; i < englishArr.length; i++) {
            if (englishArr[i].noid == english.noid) {
                englishArr.splice(i, 1);
                englishArr.push(english);
            }
        }
    }
    return 0;
});

//获取所有英文单词
Mock.mock("/getEnglishList", /post/i, (options)=> {
    let info = JSON.parse(options.body).params.info;
    if (!info.pageNum) {
        info.pageNum = 1;
    }
    let newArr = [];
    // pageNum, pageSize, searchKey
    // console.log("截取指定元素："+newArr.length)
    //englishArr.splice((info.pageNum -1) * info.pageSize, info.pageSize)
    if (englishArr.length > 0) {
        let pageNum = (info.pageNum -1) * info.pageSize;
        console.log(pageNum+"--"+info.pageSize)
        //计算截取的数组长度，如果用splice会导致原数组数据丢失
        let num = info.pageNum * info.pageSize;
        for (let i = pageNum; i < num; i++) {
            //全部数据的数组长度不能为空
            if (englishArr[i] != undefined) {
                //查询条件为单词时直接将符合的数据添加到新数组内
                if (info.searchKey && !englishArr[i].world.indexOf(info.searchKey)) {
                    console.log("查询条件："+info.searchKey)
                    newArr.push(englishArr[i]);
                }

                //查询条件为中文时将符合的数据添加到新数组内
                if (info.searchKey && !englishArr[i].chinese.indexOf(info.searchKey)) {
                    console.log("查询条件："+info.searchKey)
                    newArr.push(englishArr[i]);
                }

                //查询条件为空时添加所有数据到新数组
                if (!info.searchKey) {
                    newArr.push(englishArr[i]);
                }
            }
        }
        console.log(newArr)
        let page={ list: newArr, pageSize: 2, total: englishArr.length };
        return page;
    }
    let page={ list: englishArr, pageSize: 2, total: englishArr.length };
    return page;
});

//删除英文单词
Mock.mock("/deleteEnglish", /post/i, (options)=> {
    let english = JSON.parse(options.body).params.english;
    for (let i = 0; i < englishArr.length; i++) {
        if (englishArr[i].noid == english.noid) {
            englishArr.splice(i, 1);
        }
    }
    return 0;
})

EnglishList.vue

♨️往期精彩热文回顾

✈️ Netty进阶 – WebSocket长连接开发

✈️ Netty进阶 – 非阻塞网络编程 实现群聊+私聊+心跳检测系统

✈️ Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】

✈️ Java面向对象 — 吃货联盟订餐系统（完整版）

✈️ 一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI

⛵小结

以上就是【Bug 终结者】对Mock模拟接口实现增删改查、分页、多条件查询简单的理解，使用Mock大大提高了开发效率，前端开发利器，工具用的好，开发效率高~

如果这篇【文章】有帮助到你，希望可以给【Bug 终结者】点个赞，创作不易，如果有对【后端技术】、【前端领域】感兴趣的小可爱，也欢迎关注❤️❤️❤️ 【Bug 终结者】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】！