Mockjs模拟接口实现增删改查、分页、多条件查询 |
您所在的位置：网站首页 › 前端怎么mock数据 › Mockjs模拟接口实现增删改查、分页、多条件查询 |
Mockjs模拟接口实现增删改查、分页、多条件查询
|
📢📢📢📣📣📣 哈喽！大家好，我是【Bug 终结者】 ，【CSDN新星创作者】🏆，阿里云技术博主🏆，51CTO人气博主🏆，INfoQ写作专家🏆 一位上进心十足，拥有极强学习力的【Java领域博主】😜😜😜 🏅【Bug 终结者】博客的领域是【面向后端技术】的学习，未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识，会更新实战项目，面向企业级开发应用！ 🏅 如果有对【后端技术】、【前端领域】感兴趣的【小可爱】，欢迎关注【Bug 终结者】💞💞💞 ❤️❤️❤️ 感谢各位大可爱小可爱！ ❤️❤️❤️ 文章目录 一、什么是Mock？二、使用Mock有什么好处1️⃣前后端分离2️⃣增加单元测试的真实性3️⃣开发无侵入4️⃣用法简单5️⃣数据类型丰富6️⃣方便扩展 三、安装Mock四、效果图五、使用Mock模拟接口实现增删改查、分页、多条件查询♨️往期精彩热文回顾⛵小结 一、什么是Mock？mock官网 mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。 二、使用Mock有什么好处生成随机数据，拦截 Ajax 请求 1️⃣前后端分离让前端攻城师独立于后端进行开发。 2️⃣增加单元测试的真实性通过随机数据，模拟各种场景。 3️⃣开发无侵入不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 4️⃣用法简单符合直觉的接口。 5️⃣数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 6️⃣方便扩展支持支持扩展更多数据类型，支持自定义函数和正则。 三、安装Mock //安装最新版本mockjs npm install mockjs 四、效果图
使用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.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 //查询条件为单词时直接将符合的数据添加到新数组内 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.splice(i, 1); } } return 0; })EnglishList.vue 首页 英文单词管理 搜索 新增 修改 删除 保存 取消 import Left from './include/Left.vue'; import Top3 from './include/Top3.vue'; import Axios from 'axios'; export default { components: { Left, Top3 }, name: 'english', data(){ return { page1: {pageSize: 5, total: 0, list: [] }, showAddEnglish:false, english:{}, englishPage:{pageNum:1, pageSize: 2, total: 0, list:[]}, searchInfo:{searchKey:''} } }, // vue 生命周期 mounted(){ this.initData(); }, methods:{ initData(){ this.getEnglishList(); }, clkBtnAdd() { this.english = {noid:null}; this.showAddEnglish = true; }, clk1(){ // Axios.post('/test3').then( (d1r)=>{ // this.page1 = d1r.data; // } ) }, chgPageNum(pageNum) { this.englishPage.pageNum = pageNum; this.getEnglishList(); }, editInfo(row){ this.showAddEnglish = true; this.english = JSON.parse(JSON.stringify(row)); }, getEnglishList() { Axios.post("/getEnglishList", { params:{ info:{pageNum: this.englishPage.pageNum, pageSize: this.englishPage.pageSize, searchKey: this.searchInfo.searchKey} } }).then((res) => { this.englishPage = res.data; console.log(res.data) }) }, clkBtnSave() { Axios.post("/addEnglish", { params:{ english:this.english } }).then((res) => { if (res.data == 0) { this.getEnglishList(); this.showAddEnglish = false; } }) }, clkBtnDelete(row) { this.$confirm("您确信要删除吗？", "提示").then(() => { Axios.post("/deleteEnglish", { params:{ english:row } }).then((res) => { if (res.data == 0) { this.getEnglishList(); this.$message("删除成功~") } }) }).catch(() => { this.$message("取消删除") }) } } } .english{ height: 100%; } .container1{ height: 100%; display: flex; } .container1 .left2{ width: 210px; height: 100%; background-color: #304156; } .container1 .right2{ flex: 1; display: flex; flex-flow: column; } .container1 .right2 .top3{ height: 40px; background-color: #e3e3e3; } .container1 .right2 .main3{ flex: 1; } .main4{ padding-left:20px; padding-right:20px; } .main4 .box-search{ display: flex; padding-top:10px; padding-bottom:10px; } .box-search .input5{ padding-right:10px; } .bread4{ padding-top:10px; padding-bottom: 10px; padding-left: 20px; background-color: #eceeef; } ♨️往期精彩热文回顾✈️ Netty进阶 – WebSocket长连接开发 ✈️ Netty进阶 – 非阻塞网络编程 实现群聊+私聊+心跳检测系统 ✈️ Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】 ✈️ Java面向对象 — 吃货联盟订餐系统（完整版） ✈️ 一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI ⛵小结以上就是【Bug 终结者】对Mock模拟接口实现增删改查、分页、多条件查询简单的理解，使用Mock大大提高了开发效率，前端开发利器，工具用的好，开发效率高~ 如果这篇【文章】有帮助到你，希望可以给【Bug 终结者】点个赞👍，创作不易，如果有对【后端技术】、【前端领域】感兴趣的小可爱，也欢迎关注❤️❤️❤️ 【Bug 终结者】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💝💝💝！ |
【本文地址】
今日新闻 |
推荐新闻 |