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

2022-05-24 636

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

📢📢📢📣📣📣

哈喽！大家好，我是【 Bug 终结者】 ，【CSDN新星创作者】🏆，阿里云技术博主🏆，51CTO人气博主🏆，INfoQ写作专家🏆 <br/>
一位上进心十足，拥有极强学习力的【 Java领域博主】😜😜😜 <br/>
🏅【Bug 终结者】博客的领域是【面向后端技术】的学习，未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识，会更新实战项目，面向企业级开发应用！
🏅 如果有对【后端技术】、【前端领域】感兴趣的【小可爱】，欢迎关注【Bug 终结者】💞💞💞

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

@[TOC]

一、什么是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

<template>
  <div class="english">
    <div class="container1">
      <div class="left2">
        <left/>
      </div> 
      <div class="right2">
        <div class="top3">
          <top3/>
        </div>
        <div class="main3">
          
          <!--  主体部分开始 -->

          <div class="bread4">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">英文单词管理</a></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="main4">

            <div class="box-search">
              <div class="input5">
                <el-input type="text" size="mini" v-model="searchInfo.searchKey" @keydown.native.enter="getEnglishList" @clear="getEnglishList" placeholder="英文/中文"></el-input>
              </div>
              <div class="button5">
                <el-button @click="getEnglishList()" size="mini" type="primary" icon="el-icon-search">搜索</el-button>
                <el-button @click="clkBtnAdd()" size="mini" type="warning" icon="el-icon-plus">新增</el-button>
              </div>
            </div>

            <div class="box-table5">
              <el-table :border="true" :data="englishPage.list" style="width: 100%"
              :header-cell-style="{'background-color':'#999','color':'#fff'}">
                <el-table-column  type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column  prop="world" label="英文单词" width="180">
                </el-table-column>
                <el-table-column  prop="chinese" label="中文解释" width="180">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                      <el-button type="warning" size="mini" @click="editInfo(scope.row)">修改</el-button>
                      <el-button type="primary" size="mini" @click="clkBtnDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="box-page5">
              <el-pagination
                      layout="prev, pager, next" @current-change = "chgPageNum"
                      :page-size="englishPage.pageSize" :total="englishPage.total">
              </el-pagination>
            </div>

            <el-dialog title="保存信息" :visible.sync="showAddEnglish">
              <el-form :model="english" label-width="120px">
                <el-form-item label="英文单词">
                  <el-input v-model="english.world" size="mini" placeholder="请输入英文单词"></el-input>
                </el-form-item>
                <el-form-item label="中文解释">
                  <el-input v-model="english.chinese" size="mini" placeholder="请输入中文解释"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer">
                <el-button type="primary" size="mini" @click="clkBtnSave">保存</el-button>
                <el-button type="warning" size="mini" @click="showAddEnglish = false">取消</el-button>
              </span>
            </el-dialog>

          </div>

          <!--  主体部分结束 -->

        </div>
      </div>

    </div>
  </div>
</template>

<script>
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("取消删除")
      })

    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.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;
}


</style>

♨️往期精彩热文回顾

✈️ **[Netty进阶 -- WebSocket长连接开发
](https://blog.csdn.net/weixin_45526437/article/details/123351605?spm=1001.2014.3001.5502)**
✈️ **[Netty进阶 -- 非阻塞网络编程实现群聊+私聊+心跳检测系统
](https://blog.csdn.net/weixin_45526437/article/details/123197281?spm=1001.2014.3001.5502)**

✈️ **[Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】
](https://blog.csdn.net/weixin_45526437/article/details/121317623)**

✈️ **[一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI
](https://blog.csdn.net/weixin_45526437/article/details/123247055?spm=1001.2014.3001.5502)**

⛵小结

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

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

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

一、什么是Mock？

二、使用Mock有什么好处

1️⃣前后端分离

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

3️⃣开发无侵入

4️⃣用法简单

5️⃣数据类型丰富

6️⃣方便扩展

三、安装Mock

四、效果图

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

♨️往期精彩热文回顾

⛵小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、什么是Mock？

二、使用Mock有什么好处

1️⃣前后端分离

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

3️⃣开发无侵入

4️⃣用法简单

5️⃣数据类型丰富

6️⃣方便扩展

三、安装Mock

四、效果图

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

♨️往期精彩热文回顾

⛵小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景