如何使用Mockjs模擬接口實現增刪改查、分頁及多條件查詢

本篇內容主要講解“如何使用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" 
              :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模擬接口實現增刪改查、分頁及多條件查詢”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！