当前位置:网站首页>Address bar parameter transmission of list page based on jeecg-boot
Address bar parameter transmission of list page based on jeecg-boot
2022-07-06 06:25:00 【Hanyue Zhuge crossbow】
Pre knowledge :
1、 What is address bar parameter passing ? What is the format of address bar parameter transmission (? Variable 1= value 1& Variable 2= value 2……)
2、 If you pass JavaScript Get address bar parameters ( There are various solutions on the Internet )
My method ( Put it in util.js in ):
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、 Yes jeecg Of mixin Understanding ( Look at the code , See the development documents )
The main implementation :
1、 Build a general method to obtain address bar parameters
Because the address bar parameter acquisition is a very common method , So find it on the Internet js After obtaining the solution for the address bar parameters , You can add it to jeecg-boot Of :src/utils/util.js in
/**
* Get the specified parameters from the address bar
* @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 Understanding of code in
The key :src/mixins/JeecgListMixin.js
(1) Blend in coverage : This mixin.js yes jeecg To simplify front-end operations , Many general codes are packaged . meanwhile ,jeecg-boot It also provides us with an interface that can be mixed ,

In the picture above disableMixinCreated It is the judgment variable mixed with coverage
(2) Conditional generation

In the picture above queryParam It is based on the filter conditions to be built by the entity , The method in the figure above is loadData(arg) In the called , as follows :

(3) Data acquisition
Jeecg-boot Yes axios Further encapsulation , Here is getAction, There's another. postAction etc. , Execute different types of requests separately , Just call it directly in the process of use , The specific code is in :src/api/manage.js( Not detailed here , Because there is no need to modify )

getAction,postActon And so on are often used when we write code , So here you can see jeecg Official call code , Convenient for subsequent self simulation .
3、list Page coding
Understand section 2 After the principle of step , In the 1 On the basis of step, we can implement it very simply list Transfer and configuration of page parameters :
(1) stay list Page data Some settings :disableMixinCreated:true

(2) stay created Partial get parameters , And call mixin Code

Be careful :(1) If in list The page is not configured disableMixinCreated:true, Then the code will not be mixed with coverage ,list The request will be loaded twice .
(2) If the first 2 I can't understand the steps , No problem , Let's first 1 Step code into util.js in , Then according to the 3 The step method is directly in list Just write code in the page .
边栏推荐
- D - How Many Answers Are Wrong
- [mqtt from getting started to improving series | 01] quickly build an mqtt test environment from 0 to 1
- Simulation volume leetcode [general] 1143 Longest common subsequence
- 还在为如何编写Web自动化测试用例而烦恼嘛?资深测试工程师手把手教你Selenium 测试用例编写
- 数据库隔离级别
- Simulation volume leetcode [general] 1219 Golden Miner
- Career advancement Guide: recommended books for people in big factories
- 模拟卷Leetcode【普通】1218. 最长定差子序列
- 「 WEB测试工程师 」岗位一面总结
- Cannot create PoolableConnectionFactory (Could not create connection to database server. 错误
猜你喜欢

JDBC Requset 对应内容及功能介绍

Basic knowledge of MySQL

Engineering organisms containing artificial metalloenzymes perform unnatural biosynthesis

【MQTT从入门到提高系列 | 01】从0到1快速搭建MQTT测试环境

Technology sharing | common interface protocol analysis

E - 食物链
![[postman] collections configuration running process](/img/09/bcd9fd6379fa724671ffd09278442e.png)
[postman] collections configuration running process

org.activiti.bpmn.exceptions.XMLException: cvc-complex-type.2.4.a: 发现了以元素 ‘outgoing‘ 开头的无效内容

在uni-app中使用腾讯视频插件播放视频
![[wechat applet] build a development tool environment](/img/f6/51f97b1c927337b34c5b3a4207abb4.png)
[wechat applet] build a development tool environment
随机推荐
模拟卷Leetcode【普通】1414. 和为 K 的最少斐波那契数字数目
[no app push general test plan
Properties file
记一个基于JEECG-BOOT的比较复杂的增删改功能的实现
[API interface tool] Introduction to postman interface
模拟卷Leetcode【普通】1143. 最长公共子序列
Caused by:org. gradle. api. internal. plugins . PluginApplicationException: Failed to apply plugin
黑猫带你学UFS协议第8篇:UFS初始化详解(Boot Operation)
[mqtt from getting started to improving series | 01] quickly build an mqtt test environment from 0 to 1
G - Supermarket
Simulation volume leetcode [general] 1296 Divide an array into a set of consecutive numbers
Luogu p2089 roast chicken
JDBC requset corresponding content and function introduction
[C language] string left rotation
私人云盘部署
An article was uncovered to test the truth of outsourcing companies
职场进阶指南:大厂人必看书籍推荐
The whole process realizes the single sign on function and the solution of "canceltoken" of undefined when the request is canceled
模拟卷Leetcode【普通】1405. 最长快乐字符串
QT: the program input point xxxxx cannot be located in the dynamic link library.