一个开源的JSON阅读器，可疾速阅读、搜寻和导航JSON文件

wangfan123

《开源精选》是咱们分享Github、Gitee等开源社区中优质名目的栏目，包罗技术、学习、实用与各种乏味的内容。本期保举的是一个开源的JSON文件阅读器——JSON Hero。


JSON Hero 由 API Hero 团队创立和保护。API Hero 能够轻松地集成到名目中，无需任何扩展。反对列视图、树视图、编纂器视图等多种预览形式，预览文件反对图片、视频、款式、网站等。
成果展现
列视图受 macOS Finder 的启示，Column View 是一种阅读 JSON 文档的新办法。反对键盘导航、门路栏、历史记载等功用。


此外，列视图反对 “持有” 选定的昆裔并在档次构造中向上挪动，而后在兄弟姐妹之间挪动并查看在该门路中找到的不同值。很难形容，但这里有一个动画能够帮忙演示：


如图所示，在挪动到父级时按住Option（或 Alt ）可放弃文档的一部份处于选中形态，并在其四周的 JSON 上下文中显示它。而后能够在数组中的名目之间遍历并对比跨深层档次构造的选择值。
编纂器视图在编纂器中查看全部 JSON 文档，但保存在文档中挪动时从侧边栏获取的实时预览和相干值：


树视图使用传统的树视图遍历JSON 文档，拥有可折叠的部份和键盘快捷键。同时放弃实时的预览成果：


搜寻疾速关上搜寻面板并在几毫秒内隐约搜寻全部 JSON 文件。反对搜寻：键名、键门路、值。


内容预览JSON Hero 自动推断字符串的内容并提供有用的预览和您选择的值的属性。
日期和时间：


图片网址：


网站网址：


推文网址：


JSON 网址：


色彩：


相干值轻松查看全部 JSON 文档中特定字段的一切相干值，包罗任何 undefined 或 null 值。


当地运转
克隆 repo 并装置依赖项：
git clone http://github.com/apihero-run/jsonhero-web.git cd jsonhero-web npm install
而后，在名为 repo 的根目录下创立一个文件 .env 并设置SESSION_SECRET值：
SESSION_SECRET=abc十二3
构建：
npm run build 或 npm run dev
运转：
npm start
拜候：http://localhost:8787
开源协定：Apache2.0
开源地址：http://github.com/apihero-run/jsonhero-web