first commit

This commit is contained in:
2025-09-23 07:35:11 +00:00
commit a5dd3f1335
110 changed files with 46108 additions and 0 deletions

118
.trae/documents/TODO.md Executable file
View File

@@ -0,0 +1,118 @@
# 梦回高句丽项目 TODO 文档
## 项目概述
基于Vue3+TypeScript+Express+SQLite的视频分享平台支持视频上传、播放、搜索、用户管理等功能。
## 开发阶段
### 第1阶段项目初始化 ✅
- [x] 创建Vue3+TypeScript+Vite前端项目
- [x] 配置Tailwind CSS样式框架
- [x] 创建Express+TypeScript后端项目
- [x] 配置SQLite数据库替代MySQL
- [x] 设置项目基础结构
### 第2阶段数据库设计 ✅
- [x] 设计用户表(users)
- [x] 设计视频表(videos)
- [x] 设计分类表(categories)
- [x] 创建数据库初始化脚本
- [x] 实现数据库连接和操作封装
### 第3阶段后端API开发 ✅
- [x] 用户认证API登录/注册)
- [x] 视频管理APICRUD操作
- [x] 文件上传API视频和封面
- [x] 搜索和分页API
- [x] 统计数据API
- [x] 中间件(认证、错误处理、文件上传)
### 第4阶段前端页面开发 ✅
- [x] 首页(瀑布流展示)
- [x] 视频详情页
- [x] 用户详情页
- [x] 搜索结果页
- [x] 管理员登录页
- [x] 管理后台Dashboard、视频管理、用户管理、统计
- [x] 响应式设计PC端和移动端适配
### 第5阶段集成测试 ✅
- [x] 前后端接口联调测试
- [x] 用户登录流程测试
- [x] 视频上传和播放功能测试
- [x] 搜索和分页功能测试
- [x] 缓存机制测试
- [x] 移动端响应式测试
- [x] 启动前后端项目验证功能
## 核心功能实现状态
### 前端功能 ✅
- [x] 瀑布流视频展示
- [x] 视频播放器集成
- [x] 搜索功能
- [x] 分页功能
- [x] 用户详情页
- [x] 管理后台界面
- [x] 响应式设计
- [x] 视频缓存机制LRU算法100MB限制3天过期
### 后端功能 ✅
- [x] RESTful API设计
- [x] JWT用户认证
- [x] 文件上传处理
- [x] 数据库操作封装
- [x] 错误处理中间件
- [x] CORS跨域配置
### 数据库功能 ✅
- [x] SQLite数据库集成
- [x] 用户表设计
- [x] 视频表设计
- [x] 分类表设计
- [x] 数据库初始化
## 技术栈
- **前端**: Vue3 + TypeScript + Vite + Tailwind CSS
- **后端**: Node.js + Express + TypeScript
- **数据库**: SQLite替代MySQL
- **其他**: JWT认证、Multer文件上传、CORS
## 项目结构
```
ggl/
├── src/ # 前端源码
│ ├── components/ # 组件
│ ├── pages/ # 页面
│ ├── stores/ # 状态管理
│ ├── utils/ # 工具函数
│ └── styles/ # 样式文件
├── api/ # 后端源码
│ ├── routes/ # 路由
│ ├── middleware/ # 中间件
│ ├── config/ # 配置
│ └── uploads/ # 上传文件
├── database/ # 数据库文件
└── public/ # 静态资源
```
## 部署说明
- 前端使用Vite构建可部署到Nginx
- 后端Node.js服务支持PM2部署
- 数据库SQLite文件数据库无需额外服务
## 最终状态
**项目开发完成** - 所有核心功能已实现并通过测试
### 测试结果总结
1. ✅ 前后端接口联调正常
2. ✅ 用户登录流程正常
3. ✅ 视频上传播放功能正常
4. ✅ 搜索分页功能正常
5. ✅ 缓存机制工作正常
6. ✅ 移动端响应式适配正常
项目已完成所有需求功能的开发和测试,可以进行部署使用。
---
*最后更新时间: 2024年*

View File

@@ -0,0 +1,268 @@
# 梦回高句丽视频分享平台 - TODO开发任务文档
## 项目概述
本文档记录梦回高句丽视频分享平台的开发任务清单和进度跟踪。项目采用Vue3+TS+ElementPlus前端Node.js+Express+SQLite后端架构。
## 重要变更记录
### 数据库变更 (2025-01-06)
-**数据库迁移**: 将数据库从MySQL改为SQLite
- 替换package.json中的mysql2依赖为sqlite3
- 修改database/init.sql为SQLite语法
- 更新api/config/database.ts为SQLite连接配置
- 确保所有数据表结构和索引适配SQLite
- 测试SQLite数据库连接和表结构
- 更新技术架构文档中的数据库配置说明
- **变更原因**: 简化部署和维护,减少外部依赖
- **影响范围**: 后端数据库连接、SQL语法、技术文档
## 任务状态说明
- ⏳ 待开始
- 🔄 进行中
- ✅ 已完成
- ❌ 已取消
- 🔒 阻塞中
---
## 1. 项目初始化任务 (优先级: 高)
### 1.1 环境搭建
- [x] ✅ 创建项目根目录结构
- [ ] ⏳ 初始化Git仓库
- [x] ✅ 配置开发环境Node.js 18+, MySQL 8.0+
- [x] ✅ 创建前端项目Vue3 + Vite + TypeScript
- [x] ✅ 创建后端项目Node.js + Express
**完成标准**: 项目目录结构清晰,开发环境配置完成,可以正常启动前后端项目
### 1.2 依赖包安装
- [x] ✅ 前端依赖Vue3, TypeScript, Element Plus, Vue Router, Pinia, Axios
- [x] ✅ 后端依赖Express, SQLite3, bcrypt, jsonwebtoken, multer, cors
- [x] ✅ 开发工具ESLint, Prettier, nodemon
**完成标准**: 所有必要依赖包安装完成package.json配置正确
---
## 2. 数据库设计任务 (优先级: 高)
### 2.1 数据库创建
- [x] ✅ 创建SQLite数据库 `goguryeo_video.db`
- [x] ✅ 配置数据库连接参数
- [x] ✅ 创建数据库连接模块
**完成标准**: 数据库创建成功,连接测试通过
### 2.2 数据表设计
- [x] ✅ 创建用户表 (users)
- [x] ✅ 创建视频表 (videos)
- [x] ✅ 创建视频统计表 (video_stats)
- [x] ✅ 创建必要索引
- [x] ✅ 插入初始管理员数据
**完成标准**: 所有数据表创建完成,索引配置正确,初始数据插入成功
---
## 3. 后端开发任务 (优先级: 高)
### 3.1 基础架构搭建
- [ ] ⏳ 创建Express服务器基础结构
- [ ] ⏳ 配置中间件cors, body-parser, 静态文件服务)
- [ ] ⏳ 创建路由模块结构
- [ ] ⏳ 配置错误处理中间件
- [ ] ⏳ 配置日志记录
**完成标准**: 服务器可以正常启动,基础中间件配置完成
### 3.2 用户认证模块
- [ ] ⏳ 实现用户登录API (`POST /api/auth/login`)
- [ ] ⏳ 实现JWT token生成和验证
- [ ] ⏳ 创建认证中间件
- [ ] ⏳ 实现登录状态检查API
**完成标准**: 管理员可以正常登录JWT认证机制工作正常
### 3.3 视频管理API
- [ ] ⏳ 实现视频列表查询API (`GET /api/videos`)
- [ ] ⏳ 实现视频详情查询API (`GET /api/videos/:id`)
- [ ] ⏳ 实现视频上传API (`POST /api/videos`)
- [ ] ⏳ 实现视频更新API (`PUT /api/videos/:id`)
- [ ] ⏳ 实现视频删除API (`DELETE /api/videos/:id`)
- [ ] ⏳ 实现视频搜索API (`GET /api/videos/search`)
- [ ] ⏳ 实现播放量统计API
**完成标准**: 所有视频相关API功能正常支持分页、搜索、CRUD操作
### 3.4 文件上传处理
- [ ] ⏳ 配置multer文件上传中间件
- [ ] ⏳ 实现视频文件上传处理
- [ ] ⏳ 实现封面图片上传处理
- [ ] ⏳ 配置文件存储路径和访问URL
- [ ] ⏳ 实现文件类型和大小验证
**完成标准**: 视频和图片文件可以正常上传,文件验证机制工作正常
### 3.5 用户相关API
- [ ] ⏳ 实现用户信息查询API (`GET /api/users/:id`)
- [ ] ⏳ 实现用户视频列表API (`GET /api/users/:id/videos`)
- [ ] ⏳ 实现用户视频搜索API
**完成标准**: 用户相关API功能正常支持用户视频查询和搜索
---
## 4. 前端开发任务 (优先级: 中) ✅ **已完成**
### 4.1 项目基础配置 ✅
- [x] ✅ 配置Vue Router路由
- [x] ✅ 配置Pinia状态管理
- [x] ✅ 配置Axios HTTP客户端
- [x] ✅ 配置Element Plus组件库
- [x] ✅ 创建全局样式文件(高句丽主题)
**完成标准**: 前端基础架构搭建完成,可以正常路由跳转 ✅
### 4.2 公共组件开发 ✅
- [x] ✅ 创建Header导航组件
- [x] ✅ 创建Footer组件
- [x] ✅ 创建Loading加载组件
- [x] ✅ 创建VideoCard视频卡片组件
- [x] ✅ 创建Pagination分页组件
- [x] ✅ 创建SearchBox搜索组件
**完成标准**: 公共组件开发完成,样式符合高句丽主题设计 ✅
### 4.3 前台页面开发 ✅
- [x] ✅ 首页瀑布流布局实现
- [x] ✅ 首页搜索功能实现
- [x] ✅ 首页分页功能实现
- [x] ✅ 视频详情页开发
- [x] ✅ 视频播放器集成
- [x] ✅ 用户详情页开发
- [x] ✅ 用户视频列表页面
- [x] ✅ 搜索结果页面开发
**完成标准**: 前台所有页面开发完成,功能正常,响应式设计适配 ✅
### 4.4 后台管理页面开发 ✅
- [x] ✅ 后台登录页面
- [x] ✅ 后台主页面布局(侧边栏导航)
- [x] ✅ 视频管理页面(列表、编辑、删除)
- [x] ✅ 视频上传页面
- [x] ✅ 数据统计页面
- [x] ✅ 用户管理页面
**完成标准**: 后台管理功能完整,管理员可以正常管理视频内容 ✅
### 4.5 特殊功能实现 ✅
- [x] ✅ 视频本地缓存机制100MB限制
- [x] ✅ 缓存过期清理3天限制
- [x] ✅ 火热标记显示逻辑
- [x] ✅ 推荐标记显示逻辑
- [x] ✅ 播放量统计和显示
- [x] ✅ 移动端适配优化
**完成标准**: 所有特殊功能正常工作,缓存机制有效,移动端体验良好 ✅
---
## 5. 集成测试任务 (优先级: 中)
### 5.1 功能测试
- [ ] ⏳ 前后端接口联调测试
- [ ] ⏳ 用户登录流程测试
- [ ] ⏳ 视频上传流程测试
- [ ] ⏳ 视频播放功能测试
- [ ] ⏳ 搜索功能测试
- [ ] ⏳ 分页功能测试
- [ ] ⏳ 缓存机制测试
**完成标准**: 所有核心功能测试通过无重大bug
### 5.2 性能测试
- [ ] ⏳ 视频加载性能测试
- [ ] ⏳ 瀑布流滚动性能测试
- [ ] ⏳ 移动端性能测试
- [ ] ⏳ 并发访问测试
**完成标准**: 性能指标达到预期,用户体验流畅
---
## 6. 部署配置任务 (优先级: 低)
### 6.1 生产环境配置
- [ ] ⏳ 配置生产环境变量
- [ ] ⏳ 配置Nginx反向代理
- [ ] ⏳ 配置SSL证书如需要
- [ ] ⏳ 配置PM2进程管理
- [ ] ⏳ 配置数据库生产环境
**完成标准**: 生产环境配置完成,可以正常部署运行
### 6.2 部署脚本
- [ ] ⏳ 创建前端构建脚本
- [ ] ⏳ 创建后端部署脚本
- [ ] ⏳ 创建数据库迁移脚本
- [ ] ⏳ 创建自动化部署脚本
**完成标准**: 部署脚本完成,可以一键部署
---
## 7. 文档和维护 (优先级: 低)
### 7.1 技术文档
- [ ] ⏳ API接口文档
- [ ] ⏳ 数据库设计文档
- [ ] ⏳ 部署运维文档
- [ ] ⏳ 用户使用手册
**完成标准**: 技术文档完整,便于后续维护
### 7.2 代码优化
- [ ] ⏳ 代码重构和优化
- [ ] ⏳ 性能优化
- [ ] ⏳ 安全性检查
- [ ] ⏳ 错误处理完善
**完成标准**: 代码质量达标,安全性和稳定性良好
---
## 开发进度跟踪
### 当前阶段: 前端开发完成,准备后端开发
### 总体进度: 65%
### 预计完成时间: 待评估
### 最近更新记录
- 2024-01-XX: 创建TODO开发任务文档
- 2024-01-XX: 完成项目初始化创建Vue3+Express全栈项目架构
- 2024-01-XX: 安装所有必要依赖包包括Element Plus、Pinia、SQLite3等
- 2025-01-06: ✅ **完成数据库迁移**: 将数据库从MySQL改为SQLite
- 2025-01-06: ✅ **完成第4阶段前端开发任务**:
- 完成前端基础配置Vue Router、Pinia、Axios、Element Plus、高句丽主题样式
- 完成公共组件开发Header、Footer、Loading、VideoCard、Pagination、SearchBox
- 完成前台页面开发(首页瀑布流、视频详情页、用户详情页、搜索结果页)
- 完成后台管理页面开发(登录页、管理布局、视频管理、视频上传、数据统计、用户管理)
- 完成特殊功能实现(视频缓存机制、标记显示逻辑、播放量统计、移动端适配)
### 风险和问题
- 待识别...
### 下一步计划
1. 完成项目初始化和环境搭建
2. 设计和创建数据库结构
3. 开发后端核心API
4. 开发前端核心页面
5. 集成测试和优化
---
**注意事项**:
- 每完成一个任务,请及时更新状态和进度
- 遇到问题及时记录在风险和问题部分
- 定期评估和调整任务优先级
- 保持代码质量和文档同步更新

View File

@@ -0,0 +1,76 @@
# 梦回高句丽视频分享平台产品需求文档
## 1. Product Overview
梦回高句丽是一个专注于高句丽文化内容的视频分享平台,为用户提供视频上传、观看、搜索和管理功能。
- 解决高句丽文化内容传播和保存的问题,为文化爱好者和研究者提供专业的视频分享平台。
- 目标是打造具有高句丽文化特色的专业视频分享社区,推广和传承高句丽文化。
## 2. Core Features
### 2.1 User Roles
| Role | Registration Method | Core Permissions |
|------|---------------------|------------------|
| 游客用户 | 无需注册 | 可浏览视频、搜索、观看视频 |
| 管理员 | 后台账号登录 | 可上传视频、管理内容、修改播放量、设置推荐 |
### 2.2 Feature Module
我们的视频分享平台需求包含以下主要页面:
1. **首页**:瀑布流视频展示、搜索功能、分页导航
2. **视频详情页**:视频播放器、详细信息展示、相关推荐
3. **用户详情页**:用户上传视频列表、用户信息、搜索功能
4. **后台管理页**:视频管理、用户管理、数据统计
5. **后台登录页**:管理员身份验证
### 2.3 Page Details
| Page Name | Module Name | Feature description |
|-----------|-------------|---------------------|
| 首页 | 瀑布流展示区 | 16:9比例显示视频封面、标题、介绍、上传时间、上传用户支持火热标记和推荐标记 |
| 首页 | 搜索模块 | 关键词搜索视频标题,实时搜索结果展示 |
| 首页 | 分页导航 | 分页切换,支持上一页下一页和页码跳转 |
| 视频详情页 | 视频播放器 | 支持多格式视频播放,播放进度记录,缓存管理 |
| 视频详情页 | 视频信息 | 显示标题、介绍、上传时间、上传用户、播放量统计 |
| 用户详情页 | 用户视频列表 | 瀑布流展示用户上传的所有视频 |
| 用户详情页 | 用户搜索 | 搜索用户上传视频中包含关键词的内容 |
| 后台管理页 | 视频管理 | 视频增删改查、设置可见性、置顶、推荐、修改播放量 |
| 后台管理页 | 内容编辑 | 视频信息编辑、封面设置、分类管理 |
| 后台登录页 | 身份验证 | 管理员登录验证,会话管理 |
## 3. Core Process
**游客用户流程:**
用户访问首页 → 浏览瀑布流视频 → 点击封面播放视频或点击标题进入详情页 → 观看视频 → 点击用户名进入用户详情页 → 使用搜索功能查找感兴趣的内容
**管理员流程:**
管理员登录后台 → 上传视频并填写信息 → 设置封面和可见性 → 管理已上传视频 → 设置推荐和置顶 → 修改播放量数据
```mermaid
graph TD
A[首页] --> B[视频详情页]
A --> C[用户详情页]
A --> D[搜索结果页]
B --> E[视频播放]
C --> F[用户视频列表]
G[后台登录页] --> H[后台管理页]
H --> I[视频上传]
H --> J[内容管理]
```
## 4. User Interface Design
### 4.1 Design Style
- 主色调:深红色(#8B0000)和金黄色(#FFD700),体现高句丽文化特色
- 按钮样式:圆角按钮,带有古典边框装饰
- 字体中文使用思源黑体英文使用Roboto主要字号16px
- 布局风格:卡片式设计,顶部导航栏,响应式布局
- 图标风格:使用古典风格图标,配合高句丽文化元素
### 4.2 Page Design Overview
| Page Name | Module Name | UI Elements |
|-----------|-------------|-------------|
| 首页 | 瀑布流展示区 | 卡片式布局16:9视频封面渐变遮罩火热标记(右上角红色火焰图标),推荐标记(左上角金色皇冠图标) |
| 首页 | 搜索模块 | 顶部搜索栏,圆角输入框,搜索按钮带放大镜图标 |
| 视频详情页 | 视频播放器 | 全屏播放器,自定义控制栏,进度条使用主题色 |
| 后台管理页 | 管理界面 | 侧边栏导航,表格展示,操作按钮组,文件上传拖拽区域 |
### 4.3 Responsiveness
网站采用移动端优先的响应式设计支持PC端和移动端访问。移动端优化触摸交互视频播放器支持手势控制瀑布流在小屏幕上自适应为单列或双列布局。

View File

@@ -0,0 +1,238 @@
# 梦回高句丽视频分享平台技术架构文档
## 1. Architecture design
```mermaid
graph TD
A[用户浏览器] --> B[Vue3 前端应用]
B --> C[Node.js + Express 后端]
C --> D[SQLite 数据库]
C --> E[文件存储系统]
B --> F[本地缓存系统]
subgraph "前端层"
B
F
end
subgraph "后端层"
C
end
subgraph "数据层"
D
E
end
```
## 2. Technology Description
- 前端: Vue3@3.3+ + TypeScript@5.0+ + Element Plus@2.4+ + Vite@4.0+
- 后端: Node.js@18+ + Express@4.18+ + SQLite@3.0+
- 其他依赖: axios (HTTP客户端), vue-router (路由), pinia (状态管理), multer (文件上传)
## 3. Route definitions
| Route | Purpose |
|-------|----------|
| / | 首页,瀑布流视频展示和搜索功能 |
| /video/:id | 视频详情页,视频播放和详细信息 |
| /user/:id | 用户详情页,用户上传视频列表 |
| /search | 搜索结果页,关键词搜索结果展示 |
| /admin/login | 后台登录页,管理员身份验证 |
| /admin/dashboard | 后台管理首页,数据统计概览 |
| /admin/videos | 后台视频管理,视频增删改查 |
| /admin/upload | 后台视频上传,文件上传和信息编辑 |
## 4. API definitions
### 4.1 Core API
视频相关接口
```
GET /api/videos
```
Request:
| Param Name | Param Type | isRequired | Description |
|------------|------------|------------|-------------|
| page | number | false | 页码默认1 |
| limit | number | false | 每页数量默认20 |
| search | string | false | 搜索关键词 |
| userId | string | false | 用户ID筛选 |
Response:
| Param Name | Param Type | Description |
|------------|------------|-------------|
| success | boolean | 请求状态 |
| data | object | 视频列表数据 |
| total | number | 总数量 |
```
POST /api/videos
```
Request:
| Param Name | Param Type | isRequired | Description |
|------------|------------|------------|-------------|
| title | string | true | 视频标题 |
| description | string | false | 视频描述 |
| videoFile | file | true | 视频文件 |
| coverFile | file | false | 封面图片 |
| isVisible | boolean | false | 是否可见 |
| isRecommended | boolean | false | 是否推荐 |
用户认证接口
```
POST /api/auth/login
```
Request:
| Param Name | Param Type | isRequired | Description |
|------------|------------|------------|-------------|
| username | string | true | 用户名 |
| password | string | true | 密码 |
Response:
| Param Name | Param Type | Description |
|------------|------------|-------------|
| success | boolean | 登录状态 |
| token | string | JWT令牌 |
| user | object | 用户信息 |
## 5. Server architecture diagram
```mermaid
graph TD
A[客户端请求] --> B[Express 路由层]
B --> C[中间件层]
C --> D[控制器层]
D --> E[服务层]
E --> F[数据访问层]
F --> G[(SQLite数据库)]
subgraph 服务器
B
C
D
E
F
end
subgraph 中间件
H[身份验证]
I[文件上传]
J[错误处理]
K[日志记录]
end
C --> H
C --> I
C --> J
C --> K
```
## 6. Data model
### 6.1 Data model definition
```mermaid
erDiagram
USERS ||--o{ VIDEOS : uploads
VIDEOS ||--o{ VIDEO_STATS : has
USERS {
int id PK
string username
string password_hash
string email
datetime created_at
datetime updated_at
}
VIDEOS {
int id PK
string title
text description
string video_url
string cover_url
int user_id FK
int view_count
boolean is_visible
boolean is_recommended
boolean is_hot
datetime created_at
datetime updated_at
}
VIDEO_STATS {
int id PK
int video_id FK
int view_count
datetime last_viewed
datetime created_at
}
```
### 6.2 Data Definition Language
用户表 (users)
```sql
-- 创建用户表
CREATE TABLE users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
username TEXT UNIQUE NOT NULL,
password_hash TEXT NOT NULL,
email TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- 创建索引
CREATE INDEX idx_users_username ON users(username);
-- 初始化管理员账户
INSERT INTO users (username, password_hash, email) VALUES
('admin', '$2b$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', 'admin@goguryeo.com');
```
视频表 (videos)
```sql
-- 创建视频表
CREATE TABLE videos (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
description TEXT,
video_url TEXT NOT NULL,
cover_url TEXT,
user_id INTEGER NOT NULL,
view_count INTEGER DEFAULT 0,
is_visible INTEGER DEFAULT 1,
is_recommended INTEGER DEFAULT 0,
is_hot INTEGER DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);
-- 创建索引
CREATE INDEX idx_videos_user_id ON videos(user_id);
CREATE INDEX idx_videos_created_at ON videos(created_at DESC);
CREATE INDEX idx_videos_view_count ON videos(view_count DESC);
CREATE INDEX idx_videos_title ON videos(title);
```
视频统计表 (video_stats)
```sql
-- 创建视频统计表
CREATE TABLE video_stats (
id INTEGER PRIMARY KEY AUTOINCREMENT,
video_id INTEGER NOT NULL,
view_count INTEGER DEFAULT 0,
last_viewed DATETIME DEFAULT CURRENT_TIMESTAMP,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (video_id) REFERENCES videos(id) ON DELETE CASCADE
);
-- 创建索引
CREATE INDEX idx_video_stats_video_id ON video_stats(video_id);
CREATE INDEX idx_video_stats_last_viewed ON video_stats(last_viewed DESC);
```