直觀易用！推薦兩款JSON視覺化工具，配合Swagger使用真香！

macrozheng發表於2022-05-24
JSON視覺化Swagger
經常使用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資料，它支援列檢視、樹檢視和編輯檢視，總有一款適合你！

安裝

  • 下載完成後解壓到指定目錄，在根目錄下建立.env檔案，檔案內容如下；
SESSION_SECRET=abc123
  • 然後使用如下命令安裝依賴並啟動，使用前需先安裝node.js環境；
npm install
npm start
  • 啟動成功後控制檯將顯示如下資訊；

使用

  • 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生成樹狀圖。

安裝

  • 下載成功後解壓到指定目錄，然後使用npm命令進行安裝和啟動；
npm install
npm run dev
  • 啟動成功後控制檯將輸出如下資訊；

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

使用

  • 把我們需要在Swagger中編輯的請求引數給拷貝過來，JsonVisio可以支援編輯、格式化、清空和儲存等操作；

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

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

總結

通過使用上面兩種JSON視覺化工具，就算只使用Swagger來除錯介面也不愁了！細心的小夥伴應該可以發現，JsonHero只支援檢視JSON，並不支援編輯，所以編輯JSON還得使用JsonVisio。不過專案作者在Issues裡面回覆到，以後版本會進行支援。

專案地址

相關文章