网站导航
> 文档中心 > Mockjs模拟接口实现增删改查、分页、多条件查询

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

网友: 文档中心 2022-03-16 14:06:11

📢📢📢📣📣📣

哈喽！大家好，我是【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

//安装最新版本mockjsnpm 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

  
    
      
       
 
    
 
         
     首页英文单词管理        
   
     
  
  搜索  新增
     
     
                     修改 删除             
     
     
                       保存  取消        
    
      
    
  
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 终结者】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💝💝💝！

网络标签：

相关问题