第使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁及多條件查詢目錄一、什么是Mock？二、使用Mock有什么好處三、安裝Mock四、效果圖五、使用Mock模擬接口實(shí)現(xiàn)增刪改查、分頁、多條件查詢總結(jié)

一、什么是Mock？

mock官網(wǎng)

mock測試就是在測試過程中，對于某些不容易構(gòu)造或者不容易獲取的對象，用一個(gè)虛擬的對象來創(chuàng)建以便測試的測試方法。

二、使用Mock有什么好處

生成隨機(jī)數(shù)據(jù)，攔截Ajax請求

1??前后端分離

讓前端攻城師獨(dú)立于后端進(jìn)行開發(fā)。

2??增加單元測試的真實(shí)性

通過隨機(jī)數(shù)據(jù)，模擬各種場景。

3??開發(fā)無侵入

不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應(yīng)數(shù)據(jù)。

4??用法簡單

符合直覺的接口。

5??數(shù)據(jù)類型豐富

支持生成隨機(jī)的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等。

6??方便擴(kuò)展

支持支持?jǐn)U展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則。

三、安裝Mock

//安裝最新版本mockjs

npminstallmockjs

四、效果圖

五、使用Mock模擬接口實(shí)現(xiàn)增刪改查、分頁、多條件查詢

使用mock實(shí)現(xiàn)英文單詞的增刪改查、分頁、多條件查詢

話不多說，上代碼

Mock下index.js

varenglishArr=[];

//保存英文單詞

Mock.mock('/addEnglish',/post/i,(options)={

letenglish=JSON.parse(options.body).params.english;

if(english.noid==null){

english.noid=Mock.Random.increment();

englishArr.push(english);

}else{

for(leti=0;ienglishArr.length;i++){

if(englishArr[i].noid==english.noid){

englishArr.splice(i,1);

englishArr.push(english);

return0;

//獲取所有英文單詞

Mock.mock("/getEnglishList",/post/i,(options)={

letinfo=JSON.parse(options.body).;

if(!info.pageNum){

info.pageNum=1;

letnewArr=[];

//pageNum,pageSize,searchKey

//console.log("截取指定元素："+newArr.length)

//englishArr.splice((info.pageNum-1)*info.pageSize,info.pageSize)

if(englishArr.length0){

letpageNum=(info.pageNum-1)*info.pageSize;

console.log(pageNum+"--"+info.pageSize)

//計(jì)算截取的數(shù)組長度，如果用splice會(huì)導(dǎo)致原數(shù)組數(shù)據(jù)丟失

letnum=info.pageNum*info.pageSize;

for(leti=pageNum;inum;i++){

//全部數(shù)據(jù)的數(shù)組長度不能為空

if(englishArr[i]!=undefined){

//查詢條件為單詞時(shí)直接將符合的數(shù)據(jù)添加到新數(shù)組內(nèi)

if(info.searchKey!englishArr[i].world.indexOf(info.searchKey)){

console.log("查詢條件："+info.searchKey)

newArr.push(englishArr[i]);

//查詢條件為中文時(shí)將符合的數(shù)據(jù)添加到新數(shù)組內(nèi)

if(info.searchKey!englishArr[i].chinese.indexOf(info.searchKey)){

console.log("查詢條件："+info.searchKey)

newArr.push(englishArr[i]);

//查詢條件為空時(shí)添加所有數(shù)據(jù)到新數(shù)組

if(!info.searchKey){

newArr.push(englishArr[i]);

console.log(newArr)

letpage={list:newArr,pageSize:2,total:englishArr.length};

returnpage;

letpage={list:englishArr,pageSize:2,total:englishArr.length};

returnpage;

//刪除英文單詞

Mock.mock("/deleteEnglish",/post/i,(options)={

letenglish=JSON.parse(options.body).params.english;

for(leti=0;ienglishArr.length;i++){

if(englishArr[i].noid==english.noid){

englishArr.splice(i,1);

return0;

EnglishList.vue

template

div

div

div

left/

/div

div

div

top3/

/div

div

!--主體部分開始--

div

el-breadcrumbseparator=""

el-breadcrumb-item:to="{path:'/'}"首頁/el-breadcrumb-item

el-breadcrumb-itemahref="/"rel="externalnofollow"英文單詞管理/a/el-breadcrumb-item

/el-breadcrumb

/div

div

div

div

el-inputtype="text"size="mini"v-model="searchInfo.searchKey"@keydown.native.enter="getEnglishList"@clear="getEnglishList"placeholder="英文/中文"/el-input

/div

div

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

el-table:border="true":data="englishPage.list":header-cell-style="{'background-color':'#999','color':'#fff'}"

el-table-columntype="index"label="序號"width="80"

/el-table-column

el-table-columnprop="world"label="英文單詞"width="180"

/el-table-column

el-table-columnprop="chinese"label="中文解釋"width="180"

/el-table-column

el-table-columnlabel="操作"width="180"

templateslot-scope="scope"

el-buttontype="warning"size="mini"@click="editInfo(scope.row)"修改/el-button

el-buttontype="primary"size="mini"@click="clkBtnDelete(scope.row)"刪除/el-button

/template

/el-table-column

/el-table

/div

div

el-pagination

layout="prev,pager,next"@current-change="chgPageNum"

:size="englishPage.pageSize":total="englishPage.total"

/el-pagination

/div

el-dialogtitle="保存信息":visible.sync="showAddEnglish"

el-form:model="english"label-width="120px"

el-form-itemlabel="英文單詞"

el-inputv-model="english.world"size="mini"placeholder="請輸入英文單詞"/el-input

/el-form-item

el-form-itemlabel="中文解釋"

el-inputv-model="english.chinese"size="mini"placeholder="請輸入中文解釋"/el-input

/el-form-item

/el-form

spanslot="footer"

el-buttontype="primary"size="mini"@click="clkBtnSave"保存/el-button

el-buttontype="warning"size="mini"@click="showAddEnglish=false"取消/el-button

/span

/el-dialog

/div

!--主體部分結(jié)束--

/div

/div

/div

/div

/template

script

importLeftfrom'./include/Left.vue';

importTop3from'./include/Top3.vue';

importAxiosfrom'axios';

exportdefault{

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("您確信要?jiǎng)h除嗎？","提示").then(()={

Axios.post("/deleteEnglish",{

params:{

english:row

}).then((res)={

if(res.data==0){

this.getEnglishLis