发现一款 JSON 可视化工具神器,惊艳了!

前后端微服务商城项目,手把手教学!

前后端微服务商城项目,手把手教学!

前后端微服务商城项目,手把手教学!


JSON Hero 是一个简单实用的 JSON 工具,通过简介美观的 UI 及增强的额外功能,使得阅读和理解 JSON 文档变得更容易、直观。

e15667a550e5ccb4fa3897bbffea5e45.gif
图片

支持多种视图以便查看 JSON:列视图、树视图、JSON 视图等 列视图是受 macOS Finder 启发创建的一种浏览 JSON 文档的新方法。

f6ef6efcc6e5ea2587ee4f0543f04f2a.jpeg
图片

项目地址:https://github.com/jsonhero-io/jsonhero-web

安装

要在本地运行 JSON Hero,首先 clone 源代码,并安装相关依赖项:

git clone https://github.com/jsonhero-io/jsonhero-web.git
cd jsonhero-web
npm install

然后运行以下命令启动,打开 http://localhost:8787 即可使用:

npm start

使用

前往https://jsonhero.io/ 并将 JSON 文件拖拽到网站上,或在提供的表单中粘贴 JSON 或 JSON url

内容预览

JSON Hero 会自动推断字符串的内容,并对选择的值提供有用的预览和属性。

日期和时间

3a6c288ae440ed6fd9682f1ee815eada.jpeg
图片

图片网址

22ff78529ec058a6ae88c8fafcd13c93.jpeg
图片

网站网址

e5879515d4d726ad45de1c9ca8d6d627.jpeg
图片

JSON URL

15457a4a864fb689eb2a8a3cd8e1f08e.jpeg
图片

树状视图

这个也是用的最多的,树状图结构可以很清晰的展示,看一组图:

0ba58d957de9c5fe99570a91fa2d3508.png
图片

同时支持对JSON数据中的数据进行搜索:

21076a238ce1d92f3282123c914961ce.gif
图片

重点来了!

当你完成数据编辑或者审核后,需要分享给前端,不必复制全部数据,只需要生成指定链接即可,这个很方便。

6a7da606d79af804fc2ae948506c2cd5.jpeg
图片

整体来讲,JSON Hero 支持多种试图查看JSON数据,同时支持VS Code 等扩展,相信对经常处理JSON的小伙伴来说,是一款很给力的工具。

推荐全新学习项目

全新基于springboot+vue+vant的前后端分离的微商城项目,包括手机端微商城项目和后台管理系统,整个电商购物流程已经能流畅支持,涵盖商品浏览、搜索、商品评论、商品规格选择、加入购物车、立即购买、下单、订单支付、后台发货、退货等。功能强大,主流技术栈,非常值得学习。

项目包含2个版本:

  • 基于springboot的单体版本

  • 基于spring cloud alibaba的微服务版本

线上演示:https://www.markerhub.com/vueshop

f1db81e15a8c3064672d10b492ac4fe1.jpeg

从文档到视频、接口调试、学习看板等方面,让项目学习更加容易,内容更加沉淀。全套视频教程约44小时共260期,讲解非常详细细腻。下面详细为大家介绍:

架构与业务

使用主流的技术架构,真正手把手教你从0到1如何搭建项目手脚架、项目架构分析、建表逻辑、业务分析、实现等。

单体版本:springboot 2.7、mybatis plus、rabbitmq、elasticsearch、redis

微服务版本:spring cloud alibaba 2021.0.5.0,nacos、seata、openFeign、sentinel

前端:vue 3.2、element plus、vant ui

a922841b34be7a9208e20cd95dba4d91.png

更多详情请查看:

手把手教学,从0开发前后端微商城项目,主流Java技术一网打尽!

手把手教学,从0开发前后端微商城项目,主流Java技术一网打尽!

手把手教学,从0开发前后端微商城项目,主流Java技术一网打尽!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值