¡Intuitivo y fácil de usar! Se recomiendan dos herramientas de visualización JSON, ¡y son realmente deliciosas para usar con Swagger!

¡Los amigos que usan Swagger con frecuencia deben entender que el soporte de Swagger para JSON es realmente hostil! Recientemente, encontré dos atractivas herramientas de visualización de JSON, que pueden mostrar elegantemente los datos de JSON y mejorar la eficiencia del desarrollo. ¡Se las recomiendo a todos!

Dirección del centro comercial del proyecto de comercio electrónico real SpringBoot (50k + estrella): github.com/macrozheng/…

Hablar de Swagger

¡Hablemos primero sobre los aspectos hostiles del soporte JSON de Swagger y por qué necesitamos herramientas de visualización JSON!

• Cuando usamos Swagger para enviar una solicitud POST e ingresar parámetros de solicitud JSON, no admite la verificación ni el formateo del formato JSON, lo cual es muy inconveniente de usar;

• Cuando los datos JSON que obtenemos con Swagger son relativamente largos, Swagger no admite el plegado de datos y, a veces, solo podemos copiar los datos a otras herramientas para verlos, como encontrar una herramienta de análisis de JSON en línea.

• Para los dos puntos de dolor de uso de Swagger anteriores, use JsonHeroy JsonVisiose pueden resolver, y son herramientas de visualización JSON más distintivas.

jsonhero

Introducción

JsonHero es una herramienta de visualización JSON de código abierto, que actualmente está disponible en Github 2.9K+Star. Es muy conveniente ver datos JSON a través de JsonHero. Admite vista de columna, vista de árbol y vista de edición. ¡Siempre hay una adecuada para usted!

Instalar

• JsonHero es un proyecto front-end, la descarga y la instalación son muy simples, primero descargue su paquete de instalación, dirección de descarga: github.com/jsonhero-io…

• Una vez completada la descarga, descomprímala en el directorio especificado y cree un .envarchivo en el directorio raíz.El contenido del archivo es el siguiente;

SESSION_SECRET=abc123
复制代码

• Luego use los siguientes comandos para instalar dependencias e iniciarlas.Antes de usar, necesita instalar el node.jsentorno;

npm install
npm start
复制代码

• Después de que el inicio sea exitoso, la consola mostrará la siguiente información;

• 接下来就可以使用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版本，下载地址：github.com/AykutSarac/…

• 下载成功后解压到指定目录，然后使用npm命令进行安装和启动；

npm install
npm run dev
复制代码

• 启动成功后控制台将输出如下信息；

• 接下来就可以访问JsonVisio的页面了，点击Start Generating开始使用JSON编辑器，访问地址：http://localhost:3000

使用

• Copie los parámetros de solicitud que necesitamos editar en Swagger, JsonVisio puede admitir operaciones de edición, formateo, borrado y guardado;

• Cuando haya un error en nuestro formato JSON, se dará un aviso;

• También puede soportar la generación de dendrogramas según formato JSON.

Resumir

Al usar las dos herramientas de visualización JSON anteriores, incluso si solo usa Swagger para depurar la interfaz, ¡no tiene que preocuparse por eso! Los amigos cuidadosos deberían poder encontrar que JsonHero solo admite la visualización de JSON y no admite la edición, por lo que se debe usar JsonVisio para editar JSON. Sin embargo, el autor del proyecto respondió en Problemas que será compatible en futuras versiones.

dirección del proyecto

• JsonHero : https://github.com/jsonhero-io…
• JsonVisio: github.com/AykutSarac/…