背景

之前在為框架集成knife4j接口調(diào)試查看工具，使用了一段時間阿弃，使用體驗上比較繁瑣诊霹，因為接口都需要token，所以每次都要去f12查看token復(fù)制再創(chuàng)建全局參數(shù)渣淳，可能我只需要測試一個接口但是步驟少不了脾还，針對此問題框架做了一些優(yōu)化

設(shè)計分析

框架后端針對系統(tǒng)管理員增加一個根據(jù)用戶直接生成token的接口，將獲取到的token通過js方式直接附加到knife4j的全局參數(shù)中入愧，這樣就只需要點(diǎn)擊獲取token按鈕我們就可以直接進(jìn)行任意接口的調(diào)試工作鄙漏，通過f12分析發(fā)現(xiàn)，knife4j的全局參數(shù)變量是存儲在瀏覽器數(shù)據(jù)庫IndexedDB中棺蛛，數(shù)據(jù)表為keyvaluepairs,對應(yīng)的數(shù)據(jù)行key為Knife4jOfficeParameter

PageSetting.png

ChromeSetting.png

進(jìn)一步分析字段名稱為SwaggerBootstrapUiInstance68c7b0eebe75b10d20003678a43730cb怔蚌，存儲值就是我們添加的全局參數(shù)設(shè)置的數(shù)組列表，字段名是由SwaggerBootstrapUiInstance+編碼命名的旁赊，所以我們只要搞定編碼的生成就可以自己通過js賦值了

因為knife4j集成的doc.html頁面是由vue打包生成的桦踊，js做過編譯處理，所以源碼我們需要具體的vue工程中查看终畅，經(jīng)過分析查找SwaggerBootstrapUiInstance關(guān)鍵字

代碼路徑：knife4j/knife4j-vue/src/core/Knife4jAsync.js

生成規(guī)則：生成的編碼由name（分組對象）+location（url地址）+version（版本號）生成的字符串md5后的值

IDGengerate.png

上述的name籍胯，location，version三個值是通過請求swagger-resources接口獲取的离福，返回值為一個數(shù)組杖狼，根據(jù)選擇的group去匹配

GetResource.png

代碼實(shí)現(xiàn)

分析完畢后就可以進(jìn)行代碼操作了，其中涉及到IndexedDB的操作簡單學(xué)習(xí)一下即可

• 獲取所有資源

    function initResourceInfo() {
        $.get(resourceUrl, function(data, status) {
            data.forEach(element => {
                pageData.resourceMap[element.name] = element;
            });
        });
    }

• 設(shè)置全局參數(shù)

    function refreshKnife4jConfig(token) {
        var selectApiName = window.knife4jFrame.contentWindow.document.getElementsByClassName("ant-select-selection-selected-value")[0].innerText;
        var resource = pageData.resourceMap[selectApiName];
        if ('indexedDB' in window) {
            var req = indexedDB.open("localforage");
            req.onupgradeneeded = function(event) {

            }
            req.onsuccess = function(event) {
                console.log('數(shù)據(jù)庫開啟成功');
                var db = event.target.result;
                var table = db.transaction(['keyvaluepairs'], 'readwrite').objectStore('keyvaluepairs')
                var key = resource.name + resource.location + resource.swaggerVersion;
                var id = hpMD5(key).toLowerCase();
                var configData = {}
                configData["SwaggerBootstrapUiInstance" + id] = [
                {
                    in: "header",
                    name: "token",
                    pkid: "tokenheader",
                    value: token
                },
                {
                    in: "header",
                    name: "Content-Type",
                    pkid: "Content-Typeheader",
                    value: "application/json"
                }, ]
                table.put(configData, "Knife4jOfficeParameter");
            }
            req.onerror = function() {
                console.log("數(shù)據(jù)庫開啟出錯");
            }
        } else {
            console.log('你的瀏覽器不支持IndexedDB');
        }
    }