# html-preview-system

**Repository Path**: li7hai26/html-preview-system

## Basic Information

- **Project Name**: html-preview-system
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-01
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML 预览系统启动指南

## 🚀 快速启动

### 1. 环境准备

确保您的系统中已安装以下软件：
- Java 17+
- Node.js 20.19+ (当前是 20.18.0，可能会有警告但仍可工作)
- PostgreSQL 数据库
- Redis (可选，用于缓存)

### 2. 数据库配置

```sql
-- 连接到 PostgreSQL
psql -U postgres

-- 创建数据库
CREATE DATABASE html_preview_db;

-- 运行初始化脚本
\i /home/admin/workspace/html-preview-system/backend/src/main/resources/db/migration/V1__Initialize_Database.sql
```

### 3. 后端启动

```bash
cd /home/admin/workspace/html-preview-system/backend

# 开发模式启动
mvn spring-boot:run -Dspring-boot.run.profiles=dev

# 或者使用生产配置
mvn spring-boot:run -Dspring-boot.run.profiles=prod
```

后端将在 `http://localhost:8080` 启动

### 4. 前端启动

```bash
cd /home/admin/workspace/html-preview-system/frontend

# 安装依赖（如果还没有安装）
npm install

# 启动开发服务器
npm run dev
```

前端将在 `http://localhost:5173` 启动

## 📋 默认账户

系统预设了以下测试账户：

### 管理员账户
- **用户名**: admin
- **密码**: admin123
- **权限**: 管理员

### 演示账户
- **用户名**: demo
- **密码**: user123
- **权限**: 普通用户

## 🔧 配置说明

### 环境变量配置

创建 `.env` 文件或在启动时设置以下环境变量：

```bash
# 数据库配置
DB_HOST=localhost
DB_PORT=5432
DB_NAME=html_preview_db
DB_USERNAME=postgres
DB_PASSWORD=your_password

# Redis 配置
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=

# AWS S3 配置
AWS_REGION=us-east-1
S3_BUCKET=html-preview-files
AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key

# JWT 配置
JWT_SECRET=your_jwt_secret_key_here
JWT_EXPIRATION=86400000

# 文件上传配置
MAX_FILE_SIZE=104857600
MAX_STORAGE_PER_USER=10737418240
```

### 开发环境配置

开发环境使用 H2 内存数据库，无需额外配置：
- 数据库控制台: http://localhost:8080/h2-console
- JDBC URL: `jdbc:h2:mem:testdb`
- 用户名: `sa`
- 密码: 空

## 🧪 功能测试

### 1. 用户认证测试
1. 访问 `http://localhost:5173`
2. 使用默认账户登录
3. 测试注册新用户功能

### 2. 项目管理测试
1. 登录后创建新项目
2. 添加项目成员
3. 测试权限控制

### 3. 文件上传测试
1. 选择项目
2. 上传 ZIP/RAR/7Z/TAR/GZ 文件
3. 查看上传状态和进度

### 4. 文件解压测试
1. 对已上传的文件触发解压
2. 查看解压进度和状态
3. 测试解压失败的错误处理

### 5. 文件预览测试
1. 在解压完成后查看文件列表
2. 预览 HTML 文件
3. 查看图片和其他文档

## 📊 API 端点

### 认证相关
- `POST /api/auth/login` - 用户登录
- `POST /api/auth/register` - 用户注册
- `GET /api/auth/me` - 获取当前用户信息

### 项目管理
- `GET /api/projects` - 获取项目列表
- `POST /api/projects` - 创建项目
- `GET /api/projects/{id}` - 获取项目详情
- `PUT /api/projects/{id}` - 更新项目
- `DELETE /api/projects/{id}` - 删除项目

### 文件管理
- `POST /api/files/upload` - 上传文件
- `GET /api/files/project/{projectId}` - 获取项目文件列表
- `GET /api/files/{id}/download` - 下载文件
- `DELETE /api/files/{id}` - 删除文件

### 解压管理
- `POST /api/extractions/extract/{fileId}` - 触发解压
- `GET /api/extractions/status/{fileId}` - 获取解压状态
- `GET /api/extractions/files/{extractionId}` - 获取解压文件列表

### 文件预览
- `GET /api/preview/file/{extractedFileId}` - 获取文件预览
- `GET /api/preview/tree/{extractionId}` - 获取目录树
- `GET /api/preview/search/{extractionId}` - 搜索文件

## 🐛 故障排除

### 常见问题

1. **前端构建失败**
   - 确保 Node.js 版本 >= 20.19
   - 删除 `node_modules` 重新安装依赖

2. **后端启动失败**
   - 检查数据库连接配置
   - 确保端口 8080 未被占用

3. **文件上传失败**
   - 检查 S3 配置
   - 确认文件大小限制

4. **解压失败**
   - 检查磁盘空间
   - 确认文件格式支持

### 日志查看

- 后端日志: `/logs/html-preview.log`
- 前端开发服务器日志: 终端输出

## 📝 开发注意事项

1. **安全性**: 生产环境中请更改默认密码和 JWT 密钥
2. **性能**: 大文件处理可能需要调整 JVM 参数
3. **存储**: 确保 S3 存储桶有足够的存储空间
4. **备份**: 定期备份数据库和重要文件

## 🎯 下一步开发

1. 完善文件上传和管理界面
2. 实现预览和历史记录页面
3. 添加项目和版本管理界面
4. 集成测试和性能优化
5. Docker 容器化部署

---

如有问题，请查看日志文件或联系开发团队。