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;可实现材料反射率、屏蔽性能特性参数测试。系统由矢量网络分析仪、测试夹具、系统软件等组…
阅读更多...
申论笔记（思路技巧）

申论笔记（思路技巧）

文章目录&#xff1a; 一&#xff1a;福利 二&#xff1a;常见题型 1.归纳概括题 2.提出对策/措施/建议题 2.1 找到对策的来源 2.2 提炼对策 2.3 明确是否需要先概括问题 2.4 对策表述三部曲 3.综合分析题 3.1 综合分析最大的难点 3.2 分析问题的技巧 4.应用文/公文…
阅读更多...
力扣每日一题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、品牌宣传拓客难 甲醛处理公司也需…
阅读更多...
公司app定制开发 ，打造专属企业移动应用

公司app定制开发 ，打造专属企业移动应用

公司app定制&#xff1a;打造专属企业移动应用 在当今数字化时代&#xff0c;移动应用已经成为了人们生活中不可或缺的一部分&#xff0c;越来越多的企业也意识到了移动应用对于企业形象和业务拓展的重要性&#xff0c;为了满足企业的需求&#xff0c;公司app定制服务应运而生…
阅读更多...
基于查表法的水流量算法设计与实现

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

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

C++ 中的引用

文章目录 C 引用的应用1. 修改函数中传递的参数2. 避免复制大型结构3. for 循环中修改所有对象4. for 循环中避免复制对象 References vs Pointers引用的限制使用引用的优点练习Quesition 1Question 2Question 3Question 4Question 5Question 6 如果一个变量被声明为引用&#…
阅读更多...
Android-Framework 默认横屏、dpi设置

Android-Framework 默认横屏、dpi设置

一、环境 高通865 Android 10 二、源码修改位置 1、修改dpi device/qcom/kona/kona.mk -116,7 116,7 TARGET_USES_RRO : true# system prop for Bluetooth SOC typePRODUCT_PROPERTY_OVERRIDES \vendor.qcom.bluetooth.sochastings \ - ro.sf.lcd_density480ro.sf.lcd_d…
阅读更多...
Python中的logging介绍

Python中的logging介绍

Python中的logging模块是一个强大的、灵活的、可配置的日志记录系统。它允许你在不修改源代码的情况下记录错误和调试信息&#xff0c;同时也可以对日志信息进行各种处理&#xff0c;例如写入到文件、输出到控制台、记录到数据库等。 logging模块提供了一种用于日志记录的通用接…
阅读更多...
液态二氧化碳储存罐远程无线监测系统

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

二氧化碳强化石油开采技术&#xff0c;须先深入了解石油储层的地质特征和二氧化碳的作用机制。现场有8辆二氧化碳罐装车&#xff0c;每辆罐车上有4台液态二氧化碳储罐&#xff0c;每台罐的尾部都装有一台西门子S7-200 smart PLC。在注入二氧化碳的过程中&#xff0c;中控室S7-1…
阅读更多...
国产单片机XL32F001，价格便宜，性价比高，32位M0+内核

国产单片机XL32F001，价格便宜，性价比高，32位M0+内核

XL32F001芯片简介 1、是一个32位ARM架构Cortex -M0系列的单片机 2、系统工作频率最高为24MHz 3、拥有24Kbytes Flash存储器和3Kbytes SRAM 4、拥有内部24MHz和32.768MHz的RC振荡器&#xff08;HSI和LSI&#xff09;&#xff0c;拥有32.768KHz低速晶体振荡器&#xff08;LSE…
阅读更多...
JVM内存模型+JVM类加载机制

JVM内存模型+JVM类加载机制

jvm内存模型包括哪些以及各自作用 主要包括类加载 对象创建 方法调用 本地方法区 程序计数 方法区&#xff1a; class文件加载到方法区 堆&#xff1a; 对象创建在堆内存中 jvm栈&#xff1a;方法调用入栈 本地方法栈&#xff1a;主要是c写的一些方法 程序计数器&#xff1a;存…
阅读更多...
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;也可 以编写出高质量的网络通信程序…
阅读更多...
最新文章

Copyright @ 2022~2023