使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁(yè)及多條件查詢
更新時(shí)間：2022年04月15日 17:00:55 作者：Bug?終結(jié)者
Mock.js是一個(gè)模擬數(shù)據(jù)生成器,可以讓前端獨(dú)立于后端進(jìn)行開發(fā),下面這篇文章主要給大家介紹了關(guān)于使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁(yè)及多條件查詢的相關(guān)資料,需要的朋友可以參考下
一、什么是Mock？
mock測(cè)試就是在測(cè)試過(guò)程中，對(duì)于某些不容易構(gòu)造或者不容易獲取的對(duì)象，用一個(gè)虛擬的對(duì)象來(lái)創(chuàng)建以便測(cè)試的測(cè)試方法。
二、使用Mock有什么好處
生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求
1??前后端分離
讓前端攻城師獨(dú)立于后端進(jìn)行開發(fā)。
2??增加單元測(cè)試的真實(shí)性
通過(guò)隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景。
3??開發(fā)無(wú)侵入
不需要修改既有代碼，就可以攔截 Ajax 請(qǐng)求，返回模擬的響應(yīng)數(shù)據(jù)。
4??用法簡(jiǎn)單
符合直覺(jué)的接口。
5??數(shù)據(jù)類型豐富
支持生成隨機(jī)的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
6??方便擴(kuò)展
支持支持?jǐn)U展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則。
三、安裝Mock
//安裝最新版本mockjs npm install mockjs
四、效果圖
五、使用Mock模擬接口實(shí)現(xiàn)增刪改查、分頁(yè)、多條件查詢
使用mock實(shí)現(xiàn)英文單詞的增刪改查、分頁(yè)、多條件查詢
話不多說(shuō)，上代碼
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)
//計(jì)算截取的數(shù)組長(zhǎng)度，如果用splice會(huì)導(dǎo)致原數(shù)組數(shù)據(jù)丟失
let num = info.pageNum * info.pageSize;
for (let i = pageNum; i < num; i++) {
//全部數(shù)據(jù)的數(shù)組長(zhǎng)度不能為空
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)
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: '/' }">首頁(yè)</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="序號(hào)" 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="請(qǐng)輸入英文單詞"></el-input>
</el-form-item>
<el-form-item label="中文解釋">
<el-input v-model="english.chinese" size="mini" placeholder="請(qǐng)輸入中文解釋"></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>
<!-- 主體部分結(jié)束 -->
</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("您確信要?jiǎng)h除嗎？", "提示").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>總結(jié)
到此這篇關(guān)于使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁(yè)及多條件查詢的文章就介紹到這了,更多相關(guān)Mockjs增刪改查、分頁(yè)及多條件查詢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中遇到scrollIntoView無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue中遇到scrollIntoView無(wú)效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下2023-07-07
element-ui中的clickoutside點(diǎn)擊空白隱藏元素
這篇文章主要為大家介紹了element-ui中的clickoutside點(diǎn)擊空白隱藏元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab切換的放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue 實(shí)現(xiàn)穿梭框功能的詳細(xì)代碼
本文給大家介紹Vue 實(shí)現(xiàn)穿梭框功能，代碼分為css，html和js代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-10-10
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項(xiàng)目開發(fā),客戶覺(jué)得地圖上的文字標(biāo)注太多了,要求地圖上只顯示省市等主要城市的標(biāo)注,這篇文章主要給大家介紹了關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
少女風(fēng)vue組件庫(kù)的制作全過(guò)程
這篇文章主要給大家介紹了關(guān)于少女風(fēng)vue組件庫(kù)的制作全過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue-cli 移動(dòng)端布局和動(dòng)畫使用詳解
這篇文章主要介紹了Vue-cli和移動(dòng)端布局和動(dòng)畫使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08