採用vue編寫的功能強大的swagger ui頁面

2022-02-04 14:01:38 字數 1901 閱讀 6281

swagger-ui有非常多的版本,覺得不太好用,用postman,每個介面都要自己進行錄入。所以在基於think-vuele進行了swagger格式json的解析,自己實現了一套swaggerui介面。

swagger分為後端資料提供方方和前端頁面展示請求方。從一定角度來看,swagger是一種標準的資料格式的定義,對於不同語言進行實現一些註解api式的東西,能快速生成這種描述restful格式的api資訊的json串.

此專案模組依賴於think-vuele

demo:

github:

git clone

// 安裝依賴

npm install

// 直接執行

npm run dev

// 打包

npm run build

com.tennetcn.free

think-swagger-ui-starter

0.0.4

此jar包的開源專案為think-free-base中的子專案模組

登陸介面分為json模式和swagger請求位址訪問,沒多大區別,只有拿到標準的swaggerjson資料即可。

支援兩種主題,一種是後端管理系統模式的主題。另外一種也是類似,中間1024px進行居中,兩邊留白。

對於我使用過的乙個版本的swagger來說,當介面數量在1000+以上,會等的時間非常長,原因是他一次將所有介面資料進行解析渲染,這個就是慢的原因。

所以我將此進行優化,改為先解析出api摘要資訊,然後在點選摘要的時候進行請求頭、請求體的渲染;基本可以做到秒開

可以自動填充非json請求體的資料,採用的是mock.random

對於響應資料直接採用json格式化元件進行格式化展示,支援展開層級。再也不用將返回的資料在去找相關的json格式化工具進行格式化了。格式化控制項採用的是chenfengjw163大神的vue-json-viewer

在後端api請求的時候,一般都會在請求頭中帶一些token的驗證,來進行使用者標識,所以在設定中,進行了自定義請求頭的設定,可以方便的設定相關的請求頭,在任何乙個請求都會自動帶上設定的請求資訊。

**於後端swagger配置的相關資訊在此處進行展示

功能強大的KSnapshot

ksnapshot是kde整合桌面環境自帶的截圖工具,不過在gnome整合桌面環境下也可以安裝和使用它。我們可以通過新立得軟體包管理器或使用apt get命令來安裝它。假設使用命令列方式來安裝,開啟乙個gnome終端視窗,在終端視窗中輸入如下命令 sudo apt get install ksnap...

功能強大的SQL語句

1.複製表結構 sql 1.select into b from a where 1 0 select into b from a where 1 0 2.複製表記錄 複製某些字段 sql 1.insert into b a,b,c select d,e,f from a insert into b...

功能強大的sscanf 函式

int sscanf const char src,const char format,int scanf const char format,這兩個函式很相似,只是第乙個函式以src作為輸入,而第二個函式以標準輸入stdin讀取輸入 format 是格式控制字串,它包含控制字元 如 d,i,s等 ...