配合Swagger使用絕佳的兩款直觀易用JSON可視化工具

Posted on by

前言

經常使用Swagger的小夥伴應該有所體會，Swagger對於JSON的支持真的很不友好！最近發現瞭兩款顏值很不錯的JSON可視化工具，可以優雅地展示JSON數據從而提高開發效率，推薦給大傢！

SpringBoot實戰電商項目mall（50k+star）地址：https://github.com/macrozheng/mall

聊聊Swagger

我們先來聊聊Swagger對JSON支持有哪些不友好的地方，我們為什麼需要JSON可視化工具！

當我們使用Swagger提交POST請求，輸入JSON請求參數時，它既不支持JSON格式校驗，也不支持格式化，用起來很不方便；

當我們使用Swagger獲取到的JSON數據比較長時，Swagger不支持折疊數據，有時候我們隻能把數據復制到其他工具裡去查看，比如找個在線JSON解析工具。

針對上面兩個Swagger的使用痛點，使用JsonHero和JsonVisio都可以解決，而且它們都是比較有特色的JSON可視化工具。

JsonHero

簡介

JsonHero是一款開源的JSON可視化工具，目前在Github已有2.9K+Star，通過JsonHero可以非常方便地查看JSON數據，它支持列視圖、樹視圖和編輯視圖，總有一款適合你！

安裝 JsonHero是個前端項目，下載安裝還是非常簡單的，首先下載它的安裝包，

下載地址：https://github.com/jsonhero-io/jsonhero-web

下載完成後解壓到指定目錄，在根目錄下創建.env文件，文件內容如下；

SESSION_SECRET=abc123

然後使用如下命令安裝依賴並啟動，使用前需先安裝node.js環境；

npm install
npm start

啟動成功後控制臺將顯示如下信息；

接下來就可以使用JsonHero來可視化JSON數據瞭，訪問地址：http://localhost:8787

使用

JsonHero的使用非常簡單，直接把JSON數據或者獲取JSON的URL復制到輸入框，然後點擊Go按鈕即可；

我們可以把Swagger中獲取到的長JSON數據復制過來，通過列視圖我們可以層層深入地查看JSON數據；

當我們選中某個JSON對象時，右側會直接顯示該JSON對象的數據；

通過JSON視圖我們可以查看格式化好的JSON數據，同樣選中某個JSON對象時，右側會直接顯示該JSON對象的數據；

通過樹視圖可以對JSON數據進行折疊，可以更加方便地查看數據；

我們還可以通過搜索功能，對JSON數據進行全局搜索；

JsonHero還支持對不同格式的數據進行預覽，比如圖片、時間、日期、網址等數據。

JsonVisio

簡介

JsonVisio是一款簡潔易用的JSON可視化工具，目前在Github已有4.1K+Star，可以支持JSON格式化、編輯和校驗，並且能根據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中編輯的請求參數給拷貝過來，JsonVisio可以支持編輯、格式化、清空和保存等操作；

當我們的JSON格式出錯時，會給出提示；

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

總結

通過使用上面兩種JSON可視化工具，就算隻使用Swagger來調試接口也不愁瞭！細心的小夥伴應該可以發現，JsonHero隻支持查看JSON，並不支持編輯，所以編輯JSON還得使用JsonVisio。不過項目作者在Issues裡面回復到，以後版本會進行支持。

項目地址

JsonHero：https://github.com/jsonhero-io/jsonhero-web

JsonVisio：https://github.com/AykutSarac/jsonvisio.com

更多關於Swagger JSON可視化工具的資料請關註WalkonNet其它相關文章！

推薦閱讀：