基於JEECG-BOOT的list頁面的地址欄參數傳遞

前置知識：

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頁面中編寫代碼即可。