# JSON可视化操作

**Repository Path**: helloevery/json-visualization-operation

## Basic Information

- **Project Name**: JSON可视化操作
- **Description**: JSON可视化操作小工具
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-05
- **Last Updated**: 2024-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSON 可视化配置

## 项目说明

- 使用 react-flow 实现节点拖拽、连接、删除等操作
- 使用 react-ace 实现代码高亮
- 使用 SQLite 数据库存储自定义接口数据

## 运行方式

### 本地开发运行

```bash
# 安装依赖
npm install

# 启动后端服务
npm run server

# 启动前端服务
npm start
```

### Docker 运行

1. 使用 docker-compose（推荐）

```bash
# 首次运行或重新构建
docker-compose up --build

# 后续运行
docker-compose up -d

# 停止服务
docker-compose down
```

2. 使用 Docker 直接运行

```bash
# 构建镜像
docker build -t json-visualizer .

# 运行容器
docker run -d \
  --name json-visualizer \
  -p 3000:3000 \
  -p 3001:3001 \
  -v $(pwd)/data:/app/data \
  -v $(pwd)/.env:/app/.env \
  json-visualizer
```

## 环境配置

项目使用 .env 文件进行配置管理。在开始使用之前，请：

1. 复制 .env.example 到 .env
2. 根据实际环境修改配置值

### Docker 环境变量说明

在使用 Docker 运行时，可以通过以下方式配置环境变量：

1. 修改 .env 文件（推荐）
2. 在 docker-compose.yml 中直接设置
3. 使用 docker run 的 -e 参数

### 数据持久化

SQLite 数据库文件存储在 ./data 目录中，该目录会被挂载到 Docker 容器中，确保数据持久化。

## 配置项说明

```plaintext
# 前端配置
REACT_APP_API_BASE_URL     - 前端访问后端API的基础URL
REACT_APP_Swagger_BASE_URL - 前端访问Swagger服务的基础URL
REACT_APP_SWAGGER_URLS     - Swagger文档地址配置
PORT                       - 前端开发服务器端口

# 后端配置
SERVER_PORT           - 后端服务器端口
API_PROXY_TARGET     - 本地API代理目标地址
SWAGGER_PROXY_TARGET - Swagger服务代理目标地址
```

## 开发计划

- [完成] 实现节点拖拽、连接、删除等操作
- [完成] 实现节点配置面板
- [完成] 实现节点数据与配置面板数据的双向绑定
- [完成] 实现节点连线
- [完成] 实现应用访问 Swagger.json 页面
- [完成] 实现应用连接 Sqlite 数据库
- [完成] 侧面 Swagger 文件支持新增特定的数据结构至 Sqlite 数据库
- [完成] 下方的 JSON 结构映射完成对特定 JSON 结构的映射
- [ ] 应用页面需要完善和美化

## 注意事项

1. 首次运行时，数据库会自动初始化
2. 确保 data 目录有适当的读写权限
3. Docker 环境下，配置文件的修改需要重启容器才能生效