整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
揭秘knife4j：一招教你用JS实现全局参数实时刷新的实战攻略
前言
在前后端分离的大潮下，API接口文档的管理与调试变得尤为重要。Knife4j（原名Swagger-bootstrap-ui）作为一款优秀的 Swagger UI 实现方案，以其丰富的功能和友好的界面深受开发者喜爱。本文将针对其强大的全局参数实时刷新功能进行深入探讨，通过JavaScript实现这一功能的实战操作，帮助您提升工作效率。
1.1 Knife4j 简介
Knife4j 是一个基于 Swagger2 和 OpenAPI 规范的第三方 UI 实现，它对原有的 Swagger UI 进行了大量优化与增强，提供了一种更为高效、易用的方式来管理和调试 RESTful API。
1.2 全局参数概念
在 Knife4j 中，全局参数是指在所有接口请求中都会使用的公共参数，如用户身份令牌（Token）、版本号等。全局参数的实时刷新意味着每当这些参数值发生变化时，无需手动更新，所有关联接口的请求结果会自动随之改变。
2.1 配置全局参数
java
@Bean
public Docket createRestApi() {
ParameterBuilder tokenPar=new ParameterBuilder();
List<Parameter> pars=new ArrayList<>();
tokenPar.name("token").description("认证token").modelRef(new ModelRef("string")).parameterType("header").required(false).build();
pars.add(tokenPar.build());
return new Docket(DocumentationType.SWAGGER_2)
.globalOperationParameters(pars) // 设置全局参数
// ...其他配置
}
在Java后端项目中，通常通过 Swagger2 的 `Docket` 类配置全局参数：
2.2 刷新机制原理
虽然Knife4j本身并不直接支持全局参数的实时刷新，但我们可以利用浏览器缓存、前端轮询或WebSocket等技术实现实时更新。以下我们将采用JavaScript实现一个简单的模拟示例。
3.1 前端监听输入变化
javascript
document.querySelector('#tokenInput').addEventListener('input', function() {
refreshGlobalParams();
});
首先，我们需要在Knife4j的全局参数输入框上添加事件监听器，当参数值发生改变时触发刷新动作。
3.2 刷新全局参数方法
javascript
function refreshGlobalParams() {
// 获取当前全局参数值
const tokenValue=document.querySelector('#tokenInput').value;
// 假设我们有一个接口列表，这里仅做演示
const apiList=['/api/user', '/api/product'];
apiList.forEach(api=> {
// 使用Ajax或者Fetch发起请求，实际应用中请替换为你的请求库
fetch(api, { headers: { 'Authorization': `Bearer ${tokenValue}` } })
.then(response=> response.json())
.then(data=> console.log(`Refreshed data from ${api}:`, data))
.catch(error=> console.error('Error refreshing:', error));
});
}
定义一个`refreshGlobalParams`函数，该函数负责重新发起所有接口请求，获取最新的数据。
通过上述步骤，我们已经实现了全局参数在前端的实时刷新。然而在真实场景中，可能还需要考虑性能优化，例如采用节流或防抖策略来控制刷新频率，以及结合WebSocket等技术实现实时推送更新。
尽管Knife4j本身并未内置全局参数实时刷新的功能，但借助前端JavaScript的强大能力，我们依然可以灵活地满足这一需求。希望本篇攻略能助你在API管理与调试过程中更进一步，提高开发效率，享受更好的开发体验。后续我们将持续探索更多 Knife4j 的高级玩法，敬请期待！
过js获得当前页面路由参数，是一个常用的方法，即使是静态的html页面，也可以借此获得传来的参数，达到动态页面一般的效果。
window.location
我们需要用到的就是window.location的几个属性，下面从这个简单的测试代码中可以看到详细的用法：
建立一个htm文件，先设置一个全局样式，为的是清晰地显示文字
<style>
body{
background-color: #111;
color:#0c0;
font-family: 'Courier New';
font-size: 36px;
}
</style>
下面是js代码部分
<script> a="<pre>"; //获取完整的 URL。 a+="\n href=" + window.location.href; //获取 URL 的协议类型。 a+="\nprotocol=" + window.location.protocol; //获取 网址:端口号。 a+="\n host=" + window.location.host; //获取/开头的带路径的文件名。 a+="\npathname=" + window.location.pathname; //获取文件名问号后面的部分（含问号） a+="\n search=" + window.location.search; //获取 URL 最后#号后的部分（含#号） a+="\n hash=" + window.location.hash; //获取 URL 的端口号。 a+="\n port=" + window.location.port; a+="\n</pre>"; //把上面的结果显示出来 document.write(a); </script>
保存代码到一个页面比如1.htm，我们需要在本地启动一个模拟的web服务器，比如使用vscode的GoLive插件，在本例中，它启用的默认web地址是 http://127.0.0.1:5500 ，在其对应的根目录下建立js目录，1.htm放在其中，然后我访问类似这样的地址即可看到页面：
http://127.0.0.1:5500/js/1.htm
这是一个普通的静态页面地址，我们可以带上一些参数，形成这样的地址：
http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first
这是个比较完整的url，他带有了协议，端口，路径，参数，还有锚点，已经可以满足所有动态页面的应用，我们得到这个结果：
我们可以看到，所有的参数都被解析出来了！
注：当然你也可以直接打开浏览器访问页面1.htm，而无需启动模拟的web服务器。显示的协议是file://开头的。但是路径编码后会比较长不方便看，仅此而已。
总结一下：
window.location.href
获取完整的 URL：
http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first
window.location.protocol
获取 URL 的协议类型：
http:
window.location.host
获取网址和端口号：
127.0.0.1:5500
window.location.pathname
获取/开头的带路径的文件名：
/js/1.htm
window.location.search
获取文件名问号后面的部分（含问号）
?id=7&do=ok
window.location.hash
获取 URL 最后#号后的部分（含#号）
#first
window.location.port
获取 URL 的端口号。
5500
以上就是js所能获得的url参数了。方法简单而用法无穷：
我们可以通过获取这些属性，来判断页面状态，做出相应的动作或者交互响应。
我们也可以通过写入新的数据而使这些属性发生改变，此时页面就会跳转到新的url页面去了！
用WebAssembly的导入导出功能可以灵活地实现宿主JavaScript程序与加载的单个wasm模块之间的交互，那么如何在宿主程序与多个wasm之间传递和共享数据呢？这就需要使用到Global这个重要的对象了。
一、数值类型全局变量
二、将JavaScript函数设置为全局变量
三、利用全局变量处理字符串
Global全局变量支持多种值类型，包括数组（i32/i64和f32/f64）、向量和引用类型（externref和funcref）。下面的实例利用Global提供了全局计数的功能。在WebAssembly Text Format (WAT)文件app.wat中，我们从宿主JavaScript应用中导入了一个i32类型的可读写（mut表示可以修改）的全局变量，导入路径为“imports.counter”，我们将其命名为$counter。在用于自增的导出函数increment中，我们通过执行global.get指令读取全局变量的值，并将其加1之后，执行global.set指令对全局变量重新赋值。
(module
(global $counter (import "imports" "counter") (mut i32))
(func (export "increment")
(i32.add (global.get $counter) (i32.const 1))
(global.set $counter)
)
)
在index.html文件中，我们在页面中添加了一个“Increment”按钮，并利用一个<span>显式计算器当前的值。JavaScript脚本通过调用WebAssembly.Global构造函数将代表全局变量的Global对象创建出来后，调用WebAssembly.instantiateStreaming加载app.wat编译生成的app.wasm模块文件，并将此Global对象包含在导入对象中。
<html>
<head></head>
<body>
<span id="counter">0</span>
<button id="btnInc">Increment</button>
<script>
const globalCounter=new WebAssembly.Global({ value: "i32", mutable: true }, 0);
WebAssembly
.instantiateStreaming(fetch("app.wasm"), {"imports":{"counter":globalCounter}})
.then(results=> {
document.getElementById("btnInc").onclick=()=>{
results.instance.exports.increment();
document.getElementById("counter").innerText=globalCounter.value;
};
});
</script>
</body>
</html>
wasm模块成功导入后，我们注册了按钮的click事件，使之在调用导出的increment函数后，重新刷新计数器的值。如下图所示，针对“Increment”的每次点击都将计数器加1（源代码）。
*请认真填写需求信息，我们会在24小时内与您取得联系。
