經(jīng)常使用Swagger的小伙伴應(yīng)該有所體會(huì)，Swagger對(duì)于JSON的支持真的很不友好！最近發(fā)現(xiàn)了兩款顏值很不錯(cuò)的JSON可視化工具，可以優(yōu)雅地展示JSON數(shù)據(jù)從而提高開(kāi)發(fā)效率，推薦給大家！

SpringBoot實(shí)戰(zhàn)電商項(xiàng)目mall（50k+star）地址：https://github.com/macrozheng/mall

聊聊Swagger

我們先來(lái)聊聊Swagger對(duì)JSON支持有哪些不友好的地方，我們?yōu)槭裁葱枰狫SON可視化工具！

當(dāng)我們使用Swagger提交POST請(qǐng)求，輸入JSON請(qǐng)求參數(shù)時(shí)，它既不支持JSON格式校驗(yàn)，也不支持格式化，用起來(lái)很不方便；

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

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

JsonHero

簡(jiǎn)介

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

安裝 JsonHero是個(gè)前端項(xiàng)目，下載安裝還是非常簡(jiǎn)單的，首先下載它的安裝包，

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

下載完成后解壓到指定目錄，在根目錄下創(chuàng)建.env文件，文件內(nèi)容如下；

SESSION_SECRET=abc123

然后使用如下命令安裝依賴并啟動(dòng)，使用前需先安裝node.js環(huán)境；

npm install
npm start

啟動(dòng)成功后控制臺(tái)將顯示如下信息；

接下來(lái)就可以使用JsonHero來(lái)可視化JSON數(shù)據(jù)了，訪問(wèn)地址：http://localhost:8787

使用

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

我們可以把Swagger中獲取到的長(zhǎng)JSON數(shù)據(jù)復(fù)制過(guò)來(lái)，通過(guò)列視圖我們可以層層深入地查看JSON數(shù)據(jù)；

當(dāng)我們選中某個(gè)JSON對(duì)象時(shí)，右側(cè)會(huì)直接顯示該JSON對(duì)象的數(shù)據(jù)；

通過(guò)JSON視圖我們可以查看格式化好的JSON數(shù)據(jù)，同樣選中某個(gè)JSON對(duì)象時(shí)，右側(cè)會(huì)直接顯示該JSON對(duì)象的數(shù)據(jù)；

通過(guò)樹(shù)視圖可以對(duì)JSON數(shù)據(jù)進(jìn)行折疊，可以更加方便地查看數(shù)據(jù)；

我們還可以通過(guò)搜索功能，對(duì)JSON數(shù)據(jù)進(jìn)行全局搜索；

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

JsonVisio

簡(jiǎn)介

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

安裝

首先我們需要下載JsonVisio的安裝包，注意下載1.6.0版本

下載地址：https://github.com/AykutSarac/jsonvisio.com/releases

下載成功后解壓到指定目錄，然后使用npm命令進(jìn)行安裝和啟動(dòng)；

npm install
npm run dev

啟動(dòng)成功后控制臺(tái)將輸出如下信息；

接下來(lái)就可以訪問(wèn)JsonVisio的頁(yè)面了，點(diǎn)擊Start Generating開(kāi)始使用JSON編輯器，訪問(wèn)地址：http://localhost:3000

使用

把我們需要在Swagger中編輯的請(qǐng)求參數(shù)給拷貝過(guò)來(lái)，JsonVisio可以支持編輯、格式化、清空和保存等操作；

當(dāng)我們的JSON格式出錯(cuò)時(shí)，會(huì)給出提示；

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

總結(jié)

通過(guò)使用上面兩種JSON可視化工具，就算只使用Swagger來(lái)調(diào)試接口也不愁了！細(xì)心的小伙伴應(yīng)該可以發(fā)現(xiàn)，JsonHero只支持查看JSON，并不支持編輯，所以編輯JSON還得使用JsonVisio。不過(guò)項(xiàng)目作者在Issues里面回復(fù)到，以后版本會(huì)進(jìn)行支持。

項(xiàng)目地址

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

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

更多關(guān)于Swagger JSON可視化工具的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: