配合Swagger使用絕佳的兩款直觀易用JSON可視化工具
前言
經(jīng)常使用Swagger的小伙伴應該有所體會,Swagger對于JSON的支持真的很不友好!最近發(fā)現(xiàn)了兩款顏值很不錯的JSON可視化工具,可以優(yōu)雅地展示JSON數(shù)據(jù)從而提高開發(fā)效率,推薦給大家!
SpringBoot實戰(zhàn)電商項目mall(50k+star)地址:https://github.com/macrozheng/mall
聊聊Swagger
我們先來聊聊Swagger對JSON支持有哪些不友好的地方,我們?yōu)槭裁葱枰狫SON可視化工具!
當我們使用Swagger提交POST請求,輸入JSON請求參數(shù)時,它既不支持JSON格式校驗,也不支持格式化,用起來很不方便;

當我們使用Swagger獲取到的JSON數(shù)據(jù)比較長時,Swagger不支持折疊數(shù)據(jù),有時候我們只能把數(shù)據(jù)復制到其他工具里去查看,比如找個在線JSON解析工具。

針對上面兩個Swagger的使用痛點,使用JsonHero和JsonVisio都可以解決,而且它們都是比較有特色的JSON可視化工具。
JsonHero
簡介
JsonHero是一款開源的JSON可視化工具,目前在Github已有2.9K+Star,通過JsonHero可以非常方便地查看JSON數(shù)據(jù),它支持列視圖、樹視圖和編輯視圖,總有一款適合你!

安裝 JsonHero是個前端項目,下載安裝還是非常簡單的,首先下載它的安裝包,
下載地址:https://github.com/jsonhero-io/jsonhero-web

下載完成后解壓到指定目錄,在根目錄下創(chuàng)建.env文件,文件內容如下;
SESSION_SECRET=abc123
然后使用如下命令安裝依賴并啟動,使用前需先安裝node.js環(huán)境;
npm install npm start
啟動成功后控制臺將顯示如下信息;

接下來就可以使用JsonHero來可視化JSON數(shù)據(jù)了,訪問地址:http://localhost:8787

使用
JsonHero的使用非常簡單,直接把JSON數(shù)據(jù)或者獲取JSON的URL復制到輸入框,然后點擊Go按鈕即可;

我們可以把Swagger中獲取到的長JSON數(shù)據(jù)復制過來,通過列視圖我們可以層層深入地查看JSON數(shù)據(jù);

當我們選中某個JSON對象時,右側會直接顯示該JSON對象的數(shù)據(jù);

通過JSON視圖我們可以查看格式化好的JSON數(shù)據(jù),同樣選中某個JSON對象時,右側會直接顯示該JSON對象的數(shù)據(jù);

通過樹視圖可以對JSON數(shù)據(jù)進行折疊,可以更加方便地查看數(shù)據(jù);

我們還可以通過搜索功能,對JSON數(shù)據(jù)進行全局搜索;

JsonHero還支持對不同格式的數(shù)據(jù)進行預覽,比如圖片、時間、日期、網(wǎng)址等數(shù)據(jù)。

JsonVisio
簡介
JsonVisio是一款簡潔易用的JSON可視化工具,目前在Github已有4.1K+Star,可以支持JSON格式化、編輯和校驗,并且能根據(jù)JSON生成樹狀圖。

安裝
首先我們需要下載JsonVisio的安裝包,注意下載1.6.0版本
下載地址:https://github.com/AykutSarac/jsonvisio.com/releases

下載成功后解壓到指定目錄,然后使用npm命令進行安裝和啟動;
npm install npm run dev
啟動成功后控制臺將輸出如下信息;

接下來就可以訪問JsonVisio的頁面了,點擊Start Generating開始使用JSON編輯器,訪問地址:http://localhost:3000

使用
把我們需要在Swagger中編輯的請求參數(shù)給拷貝過來,JsonVisio可以支持編輯、格式化、清空和保存等操作;

當我們的JSON格式出錯時,會給出提示;

還可以支持根據(jù)JSON格式生成樹狀圖。

總結
通過使用上面兩種JSON可視化工具,就算只使用Swagger來調試接口也不愁了!細心的小伙伴應該可以發(fā)現(xiàn),JsonHero只支持查看JSON,并不支持編輯,所以編輯JSON還得使用JsonVisio。不過項目作者在Issues里面回復到,以后版本會進行支持。
項目地址
JsonHero:https://github.com/jsonhero-io/jsonhero-web
JsonVisio:https://github.com/AykutSarac/jsonvisio.com
更多關于Swagger JSON可視化工具的資料請關注腳本之家其它相關文章!
相關文章
java字符串轉數(shù)字及各種數(shù)字轉字符串的3種方法
這篇文章主要介紹了java字符串轉數(shù)字及各種數(shù)字轉字符串的3種方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Java多線程+鎖機制實現(xiàn)簡單模擬搶票的項目實踐
鎖是一種同步機制,用于控制對共享資源的訪問,在線程獲取到鎖對象后,可以執(zhí)行搶票操作,本文主要介紹了Java多線程+鎖機制實現(xiàn)簡單模擬搶票的項目實踐,具有一定的參考價值,感興趣的可以了解一下2024-02-02
SpringBoot整合Shiro的環(huán)境搭建教程
這篇文章主要為大家詳細介紹了SpringBoot整合Shiro的環(huán)境搭建教程,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解一下2022-12-12
java實戰(zhàn)案例之用戶注冊并發(fā)送郵件激活/發(fā)送郵件驗證碼
現(xiàn)在很多的網(wǎng)站都提供有用戶注冊功能,當我們注冊成功之后就會收到封注冊網(wǎng)站的郵件,郵件里包含了我們的注冊的用戶名和密碼及激活賬戶的超鏈接等信息,這篇文章主要給大家介紹了關于java實戰(zhàn)案例之用戶注冊并發(fā)送郵件激活/發(fā)送郵件驗證碼的相關資料,需要的朋友可以參考下2021-09-09

