哈喽!大家好,我是【Bug 终结者】 ,【CSDN新星创作者】,阿里云技术博主,51CTO人气博主,INfoQ写作专家
一位上进心十足,拥有极强学习力的【Java领域博主】
【Bug 终结者】博客的领域是【面向后端技术】的学习,未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识,会更新实战项目,面向企业级开发应用!
如果有对【后端技术】、【前端领域】感兴趣的【小可爱】,欢迎关注【Bug 终结者】
?????? 感谢各位大可爱小可爱! ??????
文章目录
- 一、什么是Mock?
- 二、使用Mock有什么好处
-
- 1??前后端分离
- 2??增加单元测试的真实性
- 3??开发无侵入
- 4??用法简单
- 5??数据类型丰富
- 6??方便扩展
- 三、安装Mock
- 四、效果图
- 五、使用Mock模拟接口实现增删改查、分页、多条件查询
- ??往期精彩热文回顾
- ?小结
一、什么是Mock? mock官网
mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。
二、使用Mock有什么好处 【实用工具|Mockjs模拟接口实现增删改查、分页、多条件查询】生成随机数据,拦截 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
首页
英文单词管理
搜索
新增
修改
删除
保存
取消 .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 终结者】??????,我将会给你带来巨大的【收获与惊喜】!
推荐阅读
- vue从入门到成神|Vue2.x 安装 SCSS并使用
- Vue双向绑定原理及实现|Vue双向绑定原理及实现
- github|【GitHubShare】AI开发七巧板,快速训练、部署与监控机器学习模型,清晰查看模型的各项统计数据
- 前端|学习3D前需要了解的一些基础
- 键盘导航
- 学习笔记|CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
- css|CSS精灵图
- 傻瓜笔记|2.7css精灵图 字体图标 三角 用户界面样式 布局技巧 文字溢出省略号
- javascript|JavaScript之变量作用域的介绍