这篇文章给大家分享的是“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”吧。

一、什么是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="&gt;">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/" rel="external nofollow" >英文单词管理</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>

以上就是关于“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。