如何使用Mockjs模拟接口实现增删改查、分页及多条件查询

本篇内容主要讲解“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”吧!

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

<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"               :header-cell->                <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模拟接口实现增删改查、分页及多条件查询”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！