当前位置:网站首页>基於JEECG-BOOT的list頁面的地址欄參數傳遞
基於JEECG-BOOT的list頁面的地址欄參數傳遞
2022-07-06 06:25:00 【瀚嶽-諸葛弩】
前置知識:
1、什麼是地址欄參數傳遞?地址欄參數傳遞的格式是什麼(?變量1=值1&變量2=值2……)
2、如果通過JavaScript獲取地址欄參數(網上有各種解决方案)
我的方法(放到util.js裏):
export function getUrlParam(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return decodeURI(r[2]); return '';
}
3、對jeecg的mixin的了解(看代碼,看開發文檔)
主要實現:
1、構建通用的地址欄參數獲取方法
因為地址欄參數獲取是非常常用的方法,所以在網上找到js地址欄參數獲取解决方案後,可將其添加到jeecg-boot的:src/utils/util.js中
/**
* 從地址欄獲取指定參數
* @param {*} name
*/
export function getUrlParam(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return decodeURI(r[2]); return '';
}
2、JEECG-BOOT中代碼的理解
關鍵:src/mixins/JeecgListMixin.js
(1)混入覆蓋:這個mixin.js是jeecg為了簡化前端操作,將很多通用代碼進行了包裝。同時,jeecg-boot也為我們提供了可以混入的接口,
上圖中的disableMixinCreated就是這個混入覆蓋的判斷變量
(2)條件生成
上圖中的queryParam就是根據實體要構建的過濾條件,上圖的方法在loadData(arg)中被調用,如下:
(3)數據獲取
Jeecg-boot對axios進行了進一步封裝,這裏是getAction,還有個postAction等,分別執行不同類型的請求,在使用過程中直接調用就好,具體代碼在:src/api/manage.js(這裏不詳述,因為不用去修改)
getAction,postActon等是我們在編寫代碼時經常要用到的,所以此處可以看下jeecg的官方調用代碼,方便後續自行模擬編寫。
3、list頁面的代碼編寫
明白第2步的原理後,在第1步的基礎上我們就可以非常簡單地實現list頁面參數的傳遞與配置:
(1)在list頁面的data部分設置:disableMixinCreated:true
(2)在created部分獲取參數,並調用mixin代碼
注意:(1)如果在list頁面不配置disableMixinCreated:true,那麼代碼將不會混入覆蓋,list請求將被加載兩次。
(2)如果第2步看不明白,沒關系,就先將第1步的代碼放到util.js中,然後按照第3步方法直接在list頁面中編寫代碼即可。
边栏推荐
- [postman] collections configuration running process
- Simulation volume leetcode [general] 1091 The shortest path in binary matrix
- org. activiti. bpmn. exceptions. XMLException: cvc-complex-type. 2.4. a: Invalid content beginning with element 'outgoing' was found
- leaflet 地图
- Basic knowledge of MySQL
- 模拟卷Leetcode【普通】1447. 最简分数
- 全链路压测:构建三大模型
- How to extract login cookies when JMeter performs interface testing
- Customize the gateway filter factory on the specified route
- 技术分享 | 常见接口协议解析
猜你喜欢
基于JEECG-BOOT的list页面的地址栏参数传递
JWT-JSON WEB TOKEN
Pat (Grade B) 2022 summer exam
[no app push general test plan
MFC关于长字符串unsigned char与CString转换及显示问题
[eolink] PC client installation
Win10 cannot operate (delete, cut) files
Oscp raven2 target penetration process
LeetCode 1200. Minimum absolute difference
[mqtt from getting started to improving series | 01] quickly build an mqtt test environment from 0 to 1
随机推荐
Remember the implementation of a relatively complex addition, deletion and modification function based on jeecg-boot
模拟卷Leetcode【普通】1109. 航班预订统计
Simulation volume leetcode [general] 1061 Arrange the smallest equivalent strings in dictionary order
Postman core function analysis - parameterization and test report
MySQL is sorted alphabetically
Career advancement Guide: recommended books for people in big factories
「 WEB测试工程师 」岗位一面总结
Web界面元素的测试
Manhattan distance and Manhattan rectangle - print back font matrix
模拟卷Leetcode【普通】1447. 最简分数
The whole process realizes the single sign on function and the solution of "canceltoken" of undefined when the request is canceled
JDBC requset corresponding content and function introduction
Pat (Grade B) 2022 summer exam
Is the test cycle compressed? Teach you 9 ways to deal with it
MFC dynamically creates dialog boxes and changes the size and position of controls
Black cat takes you to learn UFS protocol Chapter 4: detailed explanation of UFS protocol stack
對數據安全的思考(轉載)
模拟卷Leetcode【普通】1062. 最长重复子串
Error getting a new connection Cause: org. apache. commons. dbcp. SQLNestedException
Database isolation level