本篇内容主要讲解“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”吧!
mock官网
mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。
生成随机数据，拦截 Ajax 请求
1️⃣前后端分离
让前端攻城师独立于后端进行开发。
2️⃣增加单元测试的真实性
通过随机数据，模拟各种场景。
3️⃣开发无侵入
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
4️⃣用法简单
符合直觉的接口。
5️⃣数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6️⃣方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。
//安装最新版本mockjs npm install mockjs
使用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=">">
<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模拟接口实现增删改查、分页及多条件查询”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
