&quot;揭秘knife4j：一招教你用J

"揭秘knife4j：一招教你用JS實現全局參數實時刷新的

揭秘knife4j：一招教你用JS實現全局參數實時刷新的實戰攻略

前言

在前后端分離的大潮下，API接口文檔的管理與調試變得尤為重要。Knife4j（原名Swagger-bootstrap-ui）作為一款優秀的 Swagger UI 實現方案，以其豐富的功能和友好的界面深受開發者喜愛。本文將針對其強大的全局參數實時刷新功能進行深入探討，通過JavaScript實現這一功能的實戰操作，幫助您提升工作效率。

一、Knife4j與全局參數簡介

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實現一個簡單的模擬示例。

三、運用JS實現全局參數實時刷新

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 的端口號。

以上就是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（源代碼）。

在線咨詢

上一篇：Typecho中去除URL中的index.php
下一篇：推薦 10 款常用的富文本編輯器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

&amp;quot;揭秘knife4j：一招教你用J

一、Knife4j與全局參數簡介

二、全局參數配置與使用

三、運用JS實現全局參數實時刷新

四、總結與進階

一、數值類型全局變量

您的項目需求

"揭秘knife4j：一招教你用J

二、全局參數配置與使用

三、運用JS實現全局參數實時刷新

四、總結與進階

一、數值類型全局變量