锐客网

  1. 首页 > 睿知 > it技术 > >

Mockjs模拟接口实现增删改查分页多条件查询

IT知识条件查询多条件查询

幼敏悟过人，读书辄成诵。这篇文章主要讲述Mockjs模拟接口实现增删改查分页多条件查询相关的知识，希望能为你提供帮助。


一、什么是Mock？??mock官网??
mock测试就是在??测试过程??中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。


二、使用Mock有什么好处生成随机数据，拦截 Ajax 请求
1??前后端分离让前端攻城师独立于后端进行开发。
2??增加单元测试的真实性通过随机数据，模拟各种场景。
3??开发无侵入不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
4??用法简单【Mockjs模拟接口实现增删改查分页多条件查询】符合直觉的接口。
5??数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6??方便扩展支持支持扩展更多数据类型，支持自定义函数和正则。
三、安装Mock

//安装最新版本mockjs
npm install mockjs

四、效果图
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="> ">
< el-breadcrumb-item :to=" path: / "> 首页< /el-breadcrumb-item>
< el-breadcrumb-item> < a href="https://www.songbingjia.com/"> 英文单词管理< /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="https://www.songbingjia.com/android/englishPage.list" style="width: 100%"
:header-cell-style="background-color:#999,color:#fff">
< el-table-columntype="index" label="序号" >
< /el-table-column>
< el-table-columnprop="world" label="英文单词" >
< /el-table-column>
< el-table-columnprop="chinese" label="中文解释" >
< /el-table-column>
< el-table-column label="操作" >
< 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->
< 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 =https://www.songbingjia.com/android/= 0)
this.getEnglishList();
this.showAddEnglish = false;

)
,
clkBtnDelete(row)
this.$confirm("您确信要删除吗？", "提示").then(() =>
Axios.post("/deleteEnglish",
params:
english:row

).then((res) =>
if (res.data =https://www.songbingjia.com/android/= 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>

?小结以上就是【小王 Java】对Mock模拟接口实现增删改查、分页、多条件查询简单的理解，使用Mock大大提高了开发效率，前端开发利器，工具用的好，开发效率高~


如果这篇【文章】有帮助到你，希望可以给【小王 Java】点个赞

    推荐阅读


    上一篇：华为防火墙IPSec网络安全协议

    下一篇：广义与狭义技能集（神秘的软件工程技能）