File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1- # JSON-Tree-Viewer
1+ # JSON Tree Viewer - JSON 树形结构解析器
2+
3+ ## 项目介绍
4+ 一个轻量级、美观且功能完善的 JSON 树形结构解析器,支持文件上传、URL 拉取和直接输入三种方式导入 JSON 数据,并以可视化的树形结构展示,支持节点折叠/展开、路径复制和关键词搜索,适配移动端和桌面端。
5+
6+ ## 功能特点
7+ - 📥 ** 多源导入** :支持文件上传、URL 拉取、直接输入三种 JSON 导入方式
8+ - 🌳 ** 树形可视化** :以层级树形结构展示 JSON 数据,清晰直观
9+ - 🔍 ** 实时搜索** :支持关键词搜索并高亮匹配节点
10+ - 📋 ** 路径复制** :一键复制任意节点的完整路径
11+ - 📱 ** 响应式设计** :完美适配桌面端和移动端
12+ - 🎨 ** 美观界面** :渐变风格 UI,优雅的交互动画
13+ - 🚀 ** 零依赖** :纯原生 HTML/CSS/JS 实现,无需任何框架
14+
15+ ## 快速开始
16+ ### 方式 1:直接使用
17+ 1 . 克隆本仓库
18+ ``` bash
19+ git clone https://github.com/EndlessPixel/JSON-Tree-Viewer.git
20+ ```
21+ 2 . 打开 ` index.html ` 文件即可使用
22+
23+ ### 方式 2:URL 自动加载(进阶)
24+ 可以通过 URL 参数自动加载指定的 JSON 接口:
25+ ```
26+ ?url=https://api.example.com/data.json
27+ ```
28+
29+ ## 使用说明
30+ 1 . ** 选择导入方式** :文件上传 / URL 拉取 / 直接输入
31+ 2 . ** 导入 JSON 数据** :
32+ - 文件上传:选择 ` .json ` 格式文件
33+ - URL 拉取:输入有效的 JSON 接口地址(需支持跨域)
34+ - 直接输入:粘贴或输入标准 JSON 文本
35+ 3 . ** 点击「导入并解析」** 按钮
36+ 4 . ** 交互操作** :
37+ - 点击节点前的 ` +/- ` 按钮折叠/展开子节点
38+ - 悬停节点显示「复制」按钮,点击复制节点路径
39+ - 使用搜索框实时搜索关键词,匹配节点会高亮显示
40+
41+ ## 截图展示
42+ <img width =" 1300 " height =" 5643 " alt =" image " src =" https://github.com/user-attachments/assets/2a1893e3-7cc6-44b9-be13-54bf973d385f " />
43+
44+ ## 技术栈
45+ - HTML5 (语义化标签、响应式布局)
46+ - CSS3 (Flex 布局、渐变、动画、媒体查询)
47+ - Vanilla JavaScript (原生 JS,无框架依赖)
48+
49+ ## 许可证
50+ [ ![ License: MIT] ( https://img.shields.io/badge/License-MIT-yellow.svg )] ( https://opensource.org/licenses/MIT )
51+ 本项目采用 MIT 许可证 - 详见 [ LICENSE] ( LICENSE ) 文件
You can’t perform that action at this time.
0 commit comments