关于springboot:knife4j通过js动态刷新全局参数

之前在为框架集成 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');
        }
    }

关于springboot:knife4j通过js动态刷新全局参数

背景

设计剖析

代码实现