如何使用Mockjs模拟接口实现增删改查、分页及多条件查询
导读：这篇文章给大家分享的是“如何使用Mockjs模拟接口实现增删改查、分页及多条件查询”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“如何使用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" style="width: 100%"
:header-cell-style="{
'background-color':'#999','color':'#fff'}
">
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模拟接口实现增删改查、分页及多条件查询”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用Mockjs模拟接口实现增删改查、分页及多条件查询
本文地址： https://pptw.com/jishu/654376.html