当前位置:网站首页>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 .

原网站

版权声明
本文为[Hanyue Zhuge crossbow]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/187/202207060619394747.html