配合Swagger使用绝佳的两款直观易用JSON可视化工具

目录
  • 前言
  • 聊聊Swagger
  • JsonHero
    • 简介
    • 使用
  • JsonVisio
    • 简介
    • 安装
    • 使用
  • 总结

前言

经常使用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可视化工具的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 如何实现json数据可视化详解

    如何实现json数据可视化详解

    前言 本文介绍的是如何实现json数据可视化,要用到的核心是JSON.stringify这个函数,没想到吧,平时我们只把它用来序列号json数据. JSON.stringify 函数 将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串. 语法 JSON.stringify(value [, replacer] [, space]) 参数 value 必需.  要转换的 JavaScript 值(通常为对象或数组). replacer 可选.  用于转换结果

  • SpringBoot2.6.x升级后循环依赖及Swagger无法使用问题

    SpringBoot2.6.x升级后循环依赖及Swagger无法使用问题

    最近想体验下最新版本的SpringBoot,逛了下官网,发现SpringBoot目前最新版本已经是2.6.4了,版本更新确实够快的.之前的项目升级了2.6.4版本后发现有好多坑,不仅有循环依赖的问题,连Swagger都没法用了!今天给大家分享下升级过程,填一填这些坑! SpringBoot实战电商项目mall(50k+star)地址:https://github.com/macrozheng/mall 聊聊SpringBoot版本 首先我们来聊聊SpringBoot的版本,目前最新版本是2.6.

  • Spring MVC+FastJson+Swagger集成的完整实例教程

    Spring MVC+FastJson+Swagger集成的完整实例教程

    基础部分 1. FastJson 简介 Fastjson是一个Java库,可用于将Java对象转换为JSON表示.它也可以被用来将一个JSON字符串转换成一个等效的Java对象.在转换速度上应该是最快的,几乎成为了项目的标配(在ajax请求和接口开发时一般都会用fastjson而不再使用jackson). GitHub: https://github.com/alibaba/fastjson (本地下载) 特性: 在服务器端和android客户端提供最佳性能 提供简单toJSONString()

  • 详谈Springfox与swagger的整合使用

    详谈Springfox与swagger的整合使用

    一.前言 让我们先理一下springfox与swagger的关系. swagger是一个流行的API开发框架,这个框架以"开放API声明"(OpenAPI Specification,OAS)为基础,对整个API的开发周期都提供了相应的解决方案,是一个非常庞大的项目(包括设计.编码和测试,几乎支持所有语言). OAS本身是一个API规范,它用于描述一整套API接口,包括一个接口是GET还是POST请求啊,有哪些参数哪些header啊,都会被包括在这个文件中.它在设计的时候通常是YAML

  • 配合Swagger使用绝佳的两款直观易用JSON可视化工具

    配合Swagger使用绝佳的两款直观易用JSON可视化工具

    目录 前言 聊聊Swagger JsonHero 简介 使用 JsonVisio 简介 安装 使用 总结 前言 经常使用Swagger的小伙伴应该有所体会,Swagger对于JSON的支持真的很不友好!最近发现了两款颜值很不错的JSON可视化工具,可以优雅地展示JSON数据从而提高开发效率,推荐给大家! SpringBoot实战电商项目mall(50k+star)地址:https://github.com/macrozheng/mall 聊聊Swagger 我们先来聊聊Swagger对JSON支

  • DBeaver一款替代Navicat的数据库可视化工具

    对于很多开发者来说,Navicat这个软件并不陌生, 相信这个彩虹色图标的软件,有效的帮助了你的开发工作.从前上学的时候,我都是用的都是从网上找来的密钥进行破解的,但是一直在寻找有没有一个能找到一个免费的能完美替代Navicat的工具.今天就给大家推荐一个可以完美替代的工具--DBeaver(Github开源). DBeaver 官网介绍是一款适用于开发人员,数据库管理员,分析师和所有需要使用数据库的人员的免费的多平台数据库工具.支持所有流行的数据库:MySQL,PostgreSQL,SQLit

  • 推荐几款 Redis 可视化工具(太厉害了)

    推荐几款 Redis 可视化工具(太厉害了)

    1. 命令行 不知道大家在日常操作redis时用什么可视化工具呢? 以前总觉得没有什么太好的可视化工具,于是问了一个业内朋友.对方回:你还用可视化工具?直接命令行呀,redis提供了这么多命令,操作起来行云流水.用可视化工具觉得很low. 命令行的鄙视用工具的,用高端工具的鄙视低端工具的,鄙视链一直存在.虽然用命令行自己也可以,但是总感觉效率上不如用工具,在视觉上不那么直观.尤其是看json的时候,在命令行就很不友好. 大佬朋友说:谁说命令行就不能格式化json了?可以利用iredis,用|将r

  • 推荐两款java开发实用工具 hutool 和 lombok

    推荐两款java开发实用工具 hutool 和 lombok

    一.hutool工具 摘抄一段hutool工具的简介: Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,是项目中"util"包友好的替代,它节省了开发人员对项目中公用类和公用工具方法的封装时间,使开发专注于业务. hutool-aop JDK动态代理封装,提供非IOC下的切面支持 hutool-bloomFilter 布隆过滤,提供一些Hash算法的布隆过滤 hutool-cache 简单缓存实现 hutool-core 核心,包括Bean操作.

  • 两款万能的php分页类

    本文为大家分享个超级好用.万能的php分页类,具体的实现代码如下 第一款php分页类 <?php /* * To change this template, choose Tools | Templates * and open the template in the editor. */ /** * 分页类 * 使用方式: * $page = new Page(); * $page->init(1000, 20); * $page->setNotActiveTemplate('<

  • 两款JS脚本判断手机浏览器类型跳转WAP手机网站

    随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我们在给自己的网站做了WAP手机网站之后,如果有用户通过手机访问我们的企业顶级域名网站,那就判断跳转到专为的WAP网站. 这里老左整理到目前自己在使用的2种JS脚本,因为之前一直有朋友跟我要,所以这里分享出来. 第一种:直接JS脚本 <script type="text/javascript&q

  • jQuery实现两款有动画功能的导航菜单代码

    jQuery实现两款有动画功能的导航菜单代码

    本文实例讲述了jQuery实现两款有动画功能的导航菜单代码.分享给大家供大家参考.具体如下: 这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • 基于dropdown.js实现的两款美观大气的二级导航菜单

    基于dropdown.js实现的两款美观大气的二级导航菜单

    本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

  • Go语言开发代码自测绝佳go fuzzing用法详解

    Go语言开发代码自测绝佳go fuzzing用法详解

    目录 特别说明 go fuzzing 是什么 go fuzzing 怎么用 运行 fuzzing tests go-zero 的最佳实践 1. 定义 fuzzing arguments 2. 怎么写 fuzzing target 3. 失败 case 如何打印输入 4. 编写新的测试用例 go fuzzing 更多经验 Go 版本问题 go fuzzing 不能复现的失败 复杂用法示例 特别说明 这个真的不是标题党,我写代码20+年,真心认为 go fuzzing 是我见过的最牛逼的代码自测方法

  • 利用Matlab复刻两款粒子爱心动画效果

    利用Matlab复刻两款粒子爱心动画效果

    目录 粒子爱心1 效果图 粒子爱心2 效果图 粒子爱心1 function particleHeart1 % @author : slandarer % 调整背景及比例 ax=gca;hold on ax.DataAspectRatio=[1,1,1]; ax.XLim=[-25,25]; ax.YLim=[-25,20]; ax.Color=[0,0,0]; ax.XColor='none'; ax.YColor='none'; set(gcf,'Color',[0,0,0]); % 散点位置

随机推荐