背景
之前在爲框架集成knife4j接口調試查看工具,使用了一段時間,使用體驗上比較繁瑣,因爲接口都需要token,所以每次都要去f12查看token複製再創建全局參數,可能我只需要測試一個接口但是步驟少不了,針對此問題框架做了一些優化
設計分析
框架後端針對系統管理員增加一個根據用戶直接生成token的接口,將獲取到的token通過js方式直接附加到knife4j的全局參數中,這樣就只需要點擊獲取token按鈕我們就可以直接進行任意接口的調試工作,通過f12分析發現,knife4j的全局參數變量是存儲在瀏覽器數據庫IndexedDB中,數據表爲keyvaluepairs,對應的數據行key爲Knife4jOfficeParameter
進一步分析字段名稱爲SwaggerBootstrapUiInstance68c7b0eebe75b10d20003678a43730cb,存儲值就是我們添加的全局參數設置的數組列表,字段名是由SwaggerBootstrapUiInstance+編碼命名的,所以我們只要搞定編碼的生成就可以自己通過js賦值了
因爲knife4j集成的doc.html頁面是由vue打包生成的,js做過編譯處理,所以源碼我們需要具體的vue工程中查看,經過分析查找SwaggerBootstrapUiInstance關鍵字
代碼路徑:knife4j/knife4j-vue/src/core/Knife4jAsync.js
生成規則:生成的編碼由name(分組對象)+location(url地址)+version(版本號)生成的字符串md5後的值
上述的name,location,version三個值是通過請求swagger-resources接口獲取的,返回值爲一個數組,根據選擇的group去匹配
代碼實現
分析完畢後就可以進行代碼操作了,其中涉及到IndexedDB的操作簡單學習一下即可
- 獲取所有資源
function initResourceInfo() {
$.get(resourceUrl, function(data, status) {
data.forEach(element => {
pageData.resourceMap[element.name] = element;
});
});
}
- 設置全局參數
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('數據庫開啓成功');
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("數據庫開啓出錯");
}
} else {
console.log('你的瀏覽器不支持IndexedDB');
}
}