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.pswp.cn/news/215928.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/215928.shtml
英文地址，請注明出處：http://en.pswp.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