配合Swagger使用絕佳的兩款直觀易用JSON可視化工具
前言
經(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)文章！
相關(guān)文章
SpringMvc根據(jù)返回值類型不同處理響應(yīng)的方法
這篇文章主要介紹了SpringMvc根據(jù)返回值類型不同處理響應(yīng),我們可以通過(guò)控制器方法的返回值設(shè)置跳轉(zhuǎn)的視圖，控制器支持如void，String，ModelAndView類型，需要的朋友可以參考下2023-09-09
SpringBoot @PostMapping接收HTTP請(qǐng)求的流數(shù)據(jù)問(wèn)題
這篇文章主要介紹了SpringBoot @PostMapping接收HTTP請(qǐng)求的流數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了Java?Convert?Kotlin空指針異常的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
反射就是加載類,并解剖出類的各個(gè)組成部分,下面介紹了java反射機(jī)制示例,大家參考使用吧2014-01-01
這篇文章主要介紹了如何在springBoot下搭建日志框架,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了java避免死鎖的常見(jiàn)方法代碼解析，具有一定借鑒價(jià)值,需要的朋友可以參考下2018-01-01
hutool是一個(gè)java基礎(chǔ)工具類,該工具類經(jīng)過(guò)長(zhǎng)期的發(fā)展,API已經(jīng)非常齊全,下面這篇文章主要給大家介紹了關(guān)于java?hutool工具類處理JSON的使用方法,需要的朋友可以參考下2024-04-04
這篇文章主要講解Struts2 Result的參數(shù)，講的比較詳細(xì)，希望能給大家做一個(gè)參考。2016-06-06
這篇文章主要介紹了Java責(zé)任鏈模式模板代碼分享，具有一定借鑒價(jià)值,需要的朋友可以參考下2018-01-01
Spring整合mybatis、springMVC總結(jié)
這篇文章主要為大家詳細(xì)介紹了Java整合Mybatis,SpringMVC,文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2023-05-05