Mockjs 增、删、改、查（分页、多条件查询）

查（分页、多条件查询）：

关键代码：

Mock.mock('/vue-table-list/tableLinkage/list', 'post', (option) => {// console.log("🚀 ~ file: tableLinkage.js:66 ~ Mock.mock ~ option:", option)const params = JSON.parse(option.body) // 获取查询参数const paramsKeyArr = Object.keys(params) // 获取查询参数的key值// console.log("🚀 ~ file: tableLinkage.js:47 ~ Mock.mock ~ paramsKeyArr:", paramsKeyArr)// console.log("🚀 ~ file: tableLinkage.js:46 ~ Mock.mock ~ params:", params)// console.log("🚀 ~ file: tableLinkage.js:140 ~ queryList ~ tableLinkageData:", tableLinkageData)// 例，companyCodeList 是下拉框多选出来的数组，数组内的值对应 列表的 companyCodeconst paramsMap = {'companyCodeList': 'companyCode' }// tableLinkageData 是列表数据const multipleArr = tableLinkageData.data.filter(item => {let key = 'companyCodeList'// 若多选数组长度为0，则直接返回原有列表数据if (params[key].length === 0) {return true} else {// 若不为0，则根据多选数组内的值（params[key] =》 value）与列表数据的值（item[paramsMap[key]]）对比，相等则返回相应的数据（tableLinkageData.data =》item）let flag = falseparams[key].map(value => {if (value && (item[paramsMap[key]] + '') === (value + '')) {flag = true}})return flag}})// console.log("🚀 ~ file: tableLinkage.js:149 ~ multipleArr ~ multipleArr:", multipleArr)const queryList = multipleArr.filter(item => {// const queryList = tableLinkageData.data.filter(item => {let flag = trueparamsKeyArr.map(key => {if (key !== 'companyCodeList') {// 只要列表行数据内容有一个不与查询参数一致，则排除这条数据if (params[key] && item[key]?.indexOf(params[key]) === -1) {flag = false}}})return flag})// console.log("🚀 ~ file: tableLinkage.js:61 ~ queryList ~ queryList:", queryList)// 根据搜索条件得到最终的数据，并对数据进行分页const list = getSelectList(queryList, params.pageNum, params.pageSize)// console.log("🚀 ~ file: tableLinkage.js:48 ~ Mock.mock ~ list:", list)return {code: 200,msg: '操作成功',total: tableLinkageData.data.length,data: null,rows: [...list]}
})

根据搜索条件得到最终的数据，并对数据进行分页：

const list = getSelectList(queryList, params.pageNum, params.pageSize)
// 对表格数据分页
const getSelectList = (data, pageNum, pageSize) => {const start = Math.ceil(((pageNum - 1) * pageSize).toFixed(0)),end = Math.ceil((start + pageSize).toFixed(2))const list = data.slice(start >= 0 ? start : 0, end)return list
}

 全部代码：

const Mock = require('mockjs')
// 对表格数据分页
const getSelectList = (data, pageNum, pageSize) => {const start = Math.ceil(((pageNum - 1) * pageSize).toFixed(0)),end = Math.ceil((start + pageSize).toFixed(2))const list = data.slice(start >= 0 ? start : 0, end)return list
}
Mock.mobile_prefix = ["134","135","136","137","138","139","150","151","152","157","158","159","130","131","132","155","156","133","153"
]
Mock.bank_prefix = ["4367","6227","6228","9559","6222","9558","6216","4563","6013","6221","6210","6014","5218","6282","3568","6226","4218","6229","4864","6029","9988"
]
Mock.numeric = "0123456789"
Mock.random = (len, list) => {if (len <= 1) {len = 1}var s = ""var n = list.lengthif (typeof list === "string") {while (len-- > 0) {s += list.charAt(Math.random() * n)}} else if (list instanceof Array) {while (len-- > 0) {s += list[Math.floor(Math.random() * n)]}}return s
}
Mock.getMobile = () => {return Mock.random(1, Mock.mobile_prefix) + Mock.random(8, Mock.numeric)
}
Mock.getBank = () => {return Mock.random(1, Mock.bank_prefix) + Mock.random(15, Mock.numeric)
}
const Random = Mock.Random
const tableLinkageData = Mock.mock({//输出数据//还可以自定义其他数据// code: 200,// msg: '操作成功',// total: 75,"data|75": [{// 'id': "@increment",'id|+1': 1,'bankAccountId': '@id()','companyCode|+1': 1,// 'companyName': `公司${'@increment(1)'}`,'accountType|1': ['1', '2'],// 'accountTypeDesc|1': ['银行帐号', '虚拟子户'],'no': '@string(3,50)', // 生成3-50位的保养合同号'subBranch': Random.cword(2,4)+'银行','cardNum': /^([1-9]{1})(\d{14}|\d{18})$/, // 随机生成银行卡卡号// 'cardNum': Mock.getBank(), // 随机生成银行卡卡号（统一19位）'phone': Mock.getMobile(), // 手机号// 'phone': /^1[358][1-9]\d{8}/,'name': `${Random.first()} ${Random.last()}`, // 人员姓名'groups': Random.integer(), // 组织编号'groupNames': `${Random.first()} ${Random.last()}`, // 组织名称// 'idCard': Random.integer(), // 身份证'desc': Random.cparagraph(),'avatar': Random.image('250x250', Random.color()),'qrCode': Random.image('720x300', Random.color(), 'bg-img'), //二维码'address': Random.city(true),'status|1': ['0', '1'],'type|1': ['0', '1'],// 'statusDesc|1': ['启用', '禁用'],'jobType|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],'preview': Random.ctitle(3, 5),'email': '@email','remark': "@csentence(50)",'createdBy': "@cname()",'createdAt': "@date(yyyy-MM-dd)",'updatedBy': "@cname()",'updatedAt': "@date(yyyy-MM-dd hh:mm:ss)",}]
})Mock.mock('/vue-table-list/tableLinkage/list', 'post', (option) => {// console.log("🚀 ~ file: tableLinkage.js:66 ~ Mock.mock ~ option:", option)const params = JSON.parse(option.body) // 获取查询参数const paramsKeyArr = Object.keys(params) // 获取查询参数的key值// console.log("🚀 ~ file: tableLinkage.js:47 ~ Mock.mock ~ paramsKeyArr:", paramsKeyArr)// console.log("🚀 ~ file: tableLinkage.js:46 ~ Mock.mock ~ params:", params)// console.log("🚀 ~ file: tableLinkage.js:140 ~ queryList ~ tableLinkageData:", tableLinkageData)// 例，companyCodeList 是下拉框多选出来的数组，数组内的值对应 列表的 companyCodeconst paramsMap = {'companyCodeList': 'companyCode' }// tableLinkageData 是列表数据const multipleArr = tableLinkageData.data.filter(item => {let key = 'companyCodeList'// 若多选数组长度为0，则直接返回原有列表数据if (params[key].length === 0) {return true} else {// 若不为0，则根据多选数组内的值（params[key] =》 value）与列表数据的值（item[paramsMap[key]]）对比，相等则返回相应的数据（tableLinkageData.data =》item）let flag = falseparams[key].map(value => {if (value && (item[paramsMap[key]] + '') === (value + '')) {flag = true}})return flag}})// console.log("🚀 ~ file: tableLinkage.js:149 ~ multipleArr ~ multipleArr:", multipleArr)const queryList = multipleArr.filter(item => {// const queryList = tableLinkageData.data.filter(item => {let flag = trueparamsKeyArr.map(key => {if (key !== 'companyCodeList') {// 只要列表行数据内容有一个不与查询参数一致，则排除这条数据if (params[key] && item[key]?.indexOf(params[key]) === -1) {flag = false}}})return flag})// console.log("🚀 ~ file: tableLinkage.js:61 ~ queryList ~ queryList:", queryList)// 根据搜索条件得到最终的数据，并对数据进行分页const list = getSelectList(queryList, params.pageNum, params.pageSize)// console.log("🚀 ~ file: tableLinkage.js:48 ~ Mock.mock ~ list:", list)return {code: 200,msg: '操作成功',total: tableLinkageData.data.length,data: null,rows: [...list]}
})

使用：

data() {return {// 遮罩层// loading: false,tableLoading: false,// 显示搜索条件showSearch: true,// 查询参数queryParams: {pageNum: 1,pageSize: 10,companyCodeList: [],cardNum: null,accountType: null,transactionTime: [],},}
},methods: {getList() {const res = await axios.get('/vue-table-list/tableLinkage/list', this.queryParams)}
}

 

模拟根据id查询对应数据 get

// 使用响应数据的函数，含有 url、type 和 body 三个属性
// 根据url 获取参数
Mock.mock(/listById/, 'get', ({ url }) => {// 获取？后面的参数const query = url.split('?')[1]// 解析参数const queryStr = new URLSearchParams(query)const id = queryStr.get('id')return {code: 0,data: list.data.find(item => item.id === Number(id))}
})
methods: {getDetailById() {const res = await axios.get('listById', { params: { id: 1 } })}
}

增加数据 post

// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/addItem/, 'post', ({ body }) => {// 获取请求体的数据const { data } = JSON.parse(body)// 对一些必填的字段做校验const dataTips = {name: '名字不能为空',sex: '性别不能为空',phone: '手机号码不能为空',account: '账号不能为空'}for (const key of Object.keys(dataTips)) {if (!data[key]) {return { code: 500, message: dataTips[key] }}}return { code: 200, data: '操作成功' }
})

使用：

// 返回 500 msg: '手机号码不能为空'
methods: {addItem () {const params = {name: 'lily',sex: '女'}const res = axios.post('/addItem', { data: params })}
}
// 返回200 ，msg: 操作成功
methods: {addItem () {const params = {name: 'lily',sex: '女',phone: '15915888888',account: 'aaa.com'}const res = axios.post('/addItem', { data: params })console.log(res, '===>addItem')}
}

 

 根据id删除对应数据 delete

Mock.mock(/removeById/, 'delete', ({ url }) => {// 获取？后面的参数const query = url.split('?')[1]// 解析参数const queryStr = new URLSearchParams(query)const id = queryStr.get('id')const index = list.data.findIndex(item => item.id === id)list.data.splice(index, 1)return {code: 200,data: '操作成功'}
})

 使用：

methods: {removeItemlById () {const res = axios.delete('/removeById', { params: { id: 1 } })}}

 

根据id修改对应数据  put

// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/updateById/, 'put', ({ body }) => {// 格式化body的参数const { data } = JSON.parse(body)// 找到对应的数据const target = list.data.find(item => item.id === data.id)if (!target) {return { code: 500, message: '查询有误' }}for (const key in data) {target[key] = data[key]}return { code: 0, data: target }
})

使用：

methods: {async updatetemlById () {const res = await axios.put('/updateById', { data: { id: 1, name: '我是修改的名字', role: '我是修改的role', account: '我是修改的账号' } })console.log(res, '===>updatetemlById')}}

相关文章：

前端在项目中使用mockjs模拟数据的增删改查_mockjs增删改查-CSDN博客

vue快速入门七（mock.js，js实现组件路由，总线）_mockjs vue-CSDN博客

Vue后台 - 利用 mockjs 完成数据的获取、编辑、增加、删除和分页【详细步骤篇】_vue获取数据并分页-CSDN博客 004：vue中安装使用Mock来模拟数据（详细教程）_vue模拟数据mock-CSDN博客

如何在vue中使用mockjs模拟接口的各种数据_mock模拟带参数的接口数据-CSDN博客 

vue 使用 mock.js_vue mockjs-CSDN博客 

使用Mockjs模拟接口实现增删改查、分页及多条件查询_vue.js_脚本之家

vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能_vue mock如何模拟新增-CSDN博客 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/215928.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MFC画折线图，基于x64系统

MFC画折线图，基于x64系统

由于项目的需要&#xff0c;需要画一个折线图。 传统的Teechart、MSChart、HighSpeedChart一般是只能配置在x86系统下&#xff0c;等到使用x64系统下运行就是会报出不知名的错误&#xff0c;这个地方让人很苦恼。 我在进行配置的过程之中&#xff0c;使用Teechart将x86配置好…
阅读更多...
基于Java SSM框架实现班级同学录、聚会报名网站系统项目【项目源码+论文说明】

基于Java SSM框架实现班级同学录、聚会报名网站系统项目【项目源码+论文说明】

基于java的SSM框架实现班级同学录聚会报名网站系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人…
阅读更多...
程序员考公笔记之逻辑判断（图形推理）

程序员考公笔记之逻辑判断（图形推理）

文章目录 写在前面1、逻辑判断1.1、图形推理1.1.1、位置类1.1.2、样式类1.1.3、数量类1.1.4、属性类1.1.5、六面体 写在前面 1、逻辑判断 1.1、图形推理 观察&#xff1a;先宏观&#xff0c;再微观 图形推理的命题形式&#xff1a; 一组式 观察路径&#xff1a;顺序看(考最…
阅读更多...
解决方案- 材料吸波、屏蔽性能测试系统 （10MHz~500GHz）

解决方案- 材料吸波、屏蔽性能测试系统 （10MHz~500GHz）

材料吸波、屏蔽性能测试系统 &#xff08;10MHz~500GHz&#xff09; 材料电磁参数综合测试解决方案 材料吸波、屏蔽性能测试系统测试频率范围可达10MHz&#xff5e;500GHz&#xff0c;可实现材料反射率、屏蔽性能特性参数测试。系统由矢量网络分析仪、测试夹具、系统软件等组…
阅读更多...
力扣每日一题day34[110. 平衡二叉树]

力扣每日一题day34[110. 平衡二叉树]

给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;t…
阅读更多...
wappalyzer基于插件的网站开发技术解析工具

wappalyzer基于插件的网站开发技术解析工具

一、wappalyzer 解释&#xff1a;这是一款强大的工具&#xff0c;其主要能提供一种快速、可靠地检测网站所使用技术栈的方法&#xff0c;也就说说&#xff0c;服务器发来的信息都会被它剖析&#xff0c;然后分析出前端的技术栈&#xff0c;有时后端所使用的技术栈如果网页特征…
阅读更多...
[ 蓝桥杯Web真题 ]-冬奥大抽奖

[ 蓝桥杯Web真题 ]-冬奥大抽奖

目录 介绍 准备 目标 规定 思路 知识补充 解法参考 介绍 蓝桥云课庆冬奥需要举行一次抽奖活动&#xff0c;我们一起做一个页面提供给云课冬奥抽奖活动使用。 准备 开始答题前&#xff0c;需要先打开本题的项目代码文件夹&#xff0c;目录结构如下&#xff1a; ├──…
阅读更多...
甲醛处理企业网站效果如何

甲醛处理企业网站效果如何

甲醛往往是新装房间主所担心的问题&#xff0c;而甲醛处理公司则可以处理甲醛问题&#xff0c;市场需求也比较高&#xff0c;虽然具备同城服务属性&#xff0c;但外地或连锁经营也非常适合&#xff0c;而品牌们也遇到一些痛点&#xff1a; 1、品牌宣传拓客难 甲醛处理公司也需…
阅读更多...
基于查表法的水流量算法设计与实现

基于查表法的水流量算法设计与实现

写在前面 本文分享的是一种基于查表法的水流量的算法方案设计与实现&#xff0c;算法简单易懂&#xff0c;主要面向初学者&#xff0c;有两个目的&#xff1a;一是给初学者一些算法设计的思路引导&#xff1b;二是引导初学者学习怎样用C语言编程实现。 一、设计需求 基于“19…
阅读更多...
液态二氧化碳储存罐远程无线监测系统

液态二氧化碳储存罐远程无线监测系统

二氧化碳强化石油开采技术&#xff0c;须先深入了解石油储层的地质特征和二氧化碳的作用机制。现场有8辆二氧化碳罐装车&#xff0c;每辆罐车上有4台液态二氧化碳储罐&#xff0c;每台罐的尾部都装有一台西门子S7-200 smart PLC。在注入二氧化碳的过程中&#xff0c;中控室S7-1…
阅读更多...
OneNote for Windows10 彻底删除笔记本

OneNote for Windows10 彻底删除笔记本

找了超多方法&#xff0c;都没有用&#xff0c;我的OneNote都没有文件选项&#xff0c;要在OneDrive中删除&#xff0c;但是一直登不进&#xff0c;然后又找到一个方法&#xff1a; 在网页中打开Office的控制面板 "Sign in to your Microsoft account" 在“最近”一…
阅读更多...
【强化学习-读书笔记】多臂赌博机 Multi-armed bandit

【强化学习-读书笔记】多臂赌博机 Multi-armed bandit

参考 Reinforcement Learning, Second Edition An Introduction By Richard S. Sutton and Andrew G. Barto强化学习与监督学习 强化学习与其他机器学习方法最大的不同&#xff0c;就在于前者的训练信号是用来评估&#xff08;而不是指导&#xff09;给定动作的好坏的。 …
阅读更多...
第21章网络通信

第21章网络通信

网络程序设计基础 网络程序设计编写的是与其他计算机进行通信的程序。Java 已经将网络程序所需要的元素封 装成不同的类&#xff0c;用户只要创建这些类的对象&#xff0c;使用相应的方法&#xff0c;即使不具备有关的网络支持&#xff0c;也可 以编写出高质量的网络通信程序…
阅读更多...
2023年【危险化学品生产单位安全生产管理人员】考试题库及危险化学品生产单位安全生产管理人员考试技巧

2023年【危险化学品生产单位安全生产管理人员】考试题库及危险化学品生产单位安全生产管理人员考试技巧

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品生产单位安全生产管理人员考试题库是安全生产模拟考试一点通总题库中生成的一套危险化学品生产单位安全生产管理人员考试技巧&#xff0c;安全生产模拟考试一点通上危险化学品生产单位安全生产管理人员作业…
阅读更多...
【教程】制作 iOS 推送证书

【教程】制作 iOS 推送证书

如需向 iOS 设备推送数据&#xff0c;您首先需要在消息推送控制台上配置 iOS 推送证书。iOS 推送证书用于推送通知&#xff0c;本文将介绍消息推送服务支持的证书类型&#xff0c;并引导您制作 iOS 推送证书。 证书类型 消息推送服务仅支持 Apple Push Service 类型的证书。有…
阅读更多...
竞赛保研 LSTM的预测算法 - 股票预测 天气预测 房价预测

竞赛保研 LSTM的预测算法 - 股票预测 天气预测 房价预测

0 简介 今天学长向大家介绍LSTM基础 基于LSTM的预测算法 - 股票预测 天气预测 房价预测 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/postgraduate 1 基于 Ke…
阅读更多...
互联网公司，哪个部门才是鄙视链最顶端？

互联网公司，哪个部门才是鄙视链最顶端？

文章目录 每日一句正能量前言财务部法务部公关部销售部前台行政IT部创意部后记 每日一句正能量 我们必须在失败中寻找胜利&#xff0c;在绝望中寻求希望。 前言 在互联网公司中&#xff0c;不同职位的鄙视链是存在的。有些职位享有高尚的地位&#xff0c;而有些则被看作是次要…
阅读更多...
python 爬虫 m3u8 视频文件 加密解密 整合mp4

python 爬虫 m3u8 视频文件 加密解密 整合mp4

文章目录 一、完整代码二、视频分析1. 认识m3u8文件2. 获取密钥&#xff0c;构建解密器3. 下载ts文件4. 合并ts文件为mp4 三、总结 一、完整代码 完整代码如下&#xff1a; import requests import re import os from tqdm import tqdm from Crypto.Cipher import AES# 创建临…
阅读更多...
Shopify二次开发之五：元字段（Metafields）

Shopify二次开发之五：元字段（Metafields）

目录 解释 操作 1、添加Custom data 2、选择特定类型的数据 3、为Page配置元子段和值 4、模板访问 解释 Shopify Metafields 是一种用于存储和管理自定义数据的功能。它们允许商户在商城中的产品、订单、客户、Page等对象上添加自定义字段&#xff0c;以满足特定业务需求…
阅读更多...
c语言-＞自定义类型联合体和枚举类型

c语言-＞自定义类型联合体和枚举类型

系列文章目录 文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,函数,指针-CSDN博客 目的&#xff1a;学习联合体和枚举类型的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023