首頁 > 軟體

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

2022-06-20 22:00:58

前言

經常使用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視覺化工具的資料請關注it145.com其它相關文章！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com