# VideoWebsite

**Repository Path**: camphora335/video-website

## Basic Information

- **Project Name**: VideoWebsite
- **Description**: No description available
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-09
- **Last Updated**: 2025-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎬 VideoWeb - 弹幕视频网站

> 一个基于Spring Boot + Vue 3的弹幕视频分享网站，支持视频上传、播放、弹幕互动和评论功能

[![Spring Boot](https://img.shields.io/badge/Spring%20Boot-2.7.0-brightgreen.svg)](https://spring.io/projects/spring-boot)
[![MySQL](https://img.shields.io/badge/MySQL-8.0-blue.svg)](https://www.mysql.com/)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## 📋 项目概述

VideoWeb 是一个功能完整的弹幕视频网站，采用前后端分离架构开发。用户可以上传视频、观看视频、发送弹幕、评论互动，提供类似哔哩哔哩的完整用户体验。

### ✨ 主要特性

- 🎥 **视频系统**: 支持大文件上传、自动缩略图生成、视频管理
- 🎮 **弹幕系统**: 实时弹幕显示、多种样式、匿名支持  
- 💬 **评论系统**: 用户评论、实时显示、身份验证
- 👤 **用户系统**: 注册登录、个人资料、权限管理
- 📱 **响应式设计**: 完美适配PC和移动设备
- 🔒 **安全保障**: 多层安全防护机制

## 🛠️ 技术架构

### 后端技术栈
- **框架**: Spring Boot 2.7.0
- **数据库**: MySQL 8.0 + MyBatis-Plus ORM
- **安全**: Spring Security + Session认证
- **文件处理**: Spring Multipart (支持1GB大文件)
- **视频处理**: FFmpeg (自动缩略图生成)
- **API**: RESTful API设计

### 前端技术栈
- **界面**: Bootstrap 5.1.3 响应式设计
- **交互**: 原生JavaScript + Axios HTTP客户端
- **图标**: Font Awesome 6.0
- **视频播放**: HTML5 Video API
- **弹幕系统**: Canvas弹幕引擎

## 🎯 功能展示

### 🏠 主页
- 视频列表展示和缩略图预览
- 视频搜索和分类筛选
- 用户登录状态显示
- 响应式网格布局

### 📺 视频播放
- HTML5视频播放器
- 实时弹幕显示和发送
- 弹幕样式自定义（滚动/顶部/底部）
- 视频评论区

### ⬆️ 视频上传
- 拖拽式文件上传
- 视频信息编辑
- 上传进度显示
- 文件格式验证

### 👤 用户管理
- 用户注册/登录
- 个人资料管理
- 个人视频库
- 视频删除功能

## 📁 项目结构

```
VideoWeb2/
├── src/main/
│   ├── java/com/videoweb/
│   │   ├── controller/          # REST API控制器
│   │   │   ├── VideoController.java
│   │   │   ├── UserController.java
│   │   │   ├── DanmakuController.java
│   │   │   └── CommentController.java
│   │   ├── service/             # 业务逻辑层
│   │   ├── model/               # 数据模型
│   │   ├── mapper/              # MyBatis数据访问层
│   │   ├── config/              # 配置类
│   │   └── VideoWebApplication.java
│   └── resources/
│       ├── static/              # 前端静态资源
│       │   ├── *.html          # 页面文件
│       │   ├── js/             # JavaScript文件
│       │   └── css/            # 样式文件
│       ├── application.properties
│       └── schema.sql          # 数据库表结构
├── uploads/                     # 视频文件存储目录
└── pom.xml                     # Maven配置文件
```

## 🚀 快速开始

### 环境要求
- JDK 11+
- MySQL 8.0+
- Maven 3.6+
- FFmpeg (可选，用于视频缩略图生成)

### 安装步骤

1. **克隆项目**
```bash
git https://gitee.com/camphora335/video-website.git
cd videoWebsite
```

2. **配置数据库**
```bash
# 创建数据库
mysql -u root -p
CREATE DATABASE videoweb DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# 导入表结构
mysql -u root -p videoweb < src/main/resources/schema.sql
```

3. **配置应用**
编辑 `src/main/resources/application.properties`:
```properties
# 数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/videoweb?useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true&useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=your_password	
```

4. **安装FFmpeg (可选)**
```bash
# Windows (使用winget)
winget install ffmpeg

# macOS (使用Homebrew)
brew install ffmpeg

# Ubuntu/Debian
sudo apt update
sudo apt install ffmpeg
```

5. **启动应用**
```bash
mvn spring-boot:run
```

6. **访问应用**
打开浏览器访问：http://localhost:8080

## 📖 API文档

### 视频API
- `GET /api/videos/public` - 获取所有视频
- `POST /api/videos/upload` - 上传视频 (需要登录)
- `GET /api/videos/{id}` - 获取视频详情
- `GET /api/videos/{id}/thumbnail` - 获取视频缩略图
- `DELETE /api/videos/{id}` - 删除视频 (需要登录)

### 用户API
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
- `GET /api/auth/user` - 获取当前用户信息
- `POST /api/auth/logout` - 用户登出

### 弹幕API
- `GET /api/danmaku/video/{videoId}` - 获取视频弹幕
- `POST /api/danmaku` - 发送弹幕

### 评论API
- `GET /api/comments/video/{videoId}` - 获取视频评论
- `POST /api/comments` - 发表评论 (需要登录)

## 🛡️ 安全特性

- **SQL注入防护**: MyBatis参数化查询
- **XSS防护**: 输入内容过滤和转义
- **CSRF防护**: Spring Security CSRF保护
- **文件上传安全**: 文件类型和大小限制
- **权限控制**: 基于用户身份的API访问控制

## 🔧 配置说明

### 文件上传配置
```properties
# 最大文件大小
spring.servlet.multipart.max-file-size=1GB
spring.servlet.multipart.max-request-size=1GB
```

### 数据库配置
```properties
# MySQL连接配置
spring.datasource.url=jdbc:mysql://localhost:3306/videoweb?useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true&useUnicode=true&characterEncoding=utf8
```

### 字符编码配置
```properties
# UTF-8编码设置
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.force=true
```

## 🎖️ 项目亮点

1. **完整的视频网站功能**: 从上传到播放的完整生态
2. **实时弹幕系统**: 弹幕引擎，流畅的动画效果
3. **智能缩略图生成**: FFmpeg自动处理，支持fallback机制
4. **用户体验优化**: 现代化UI设计，全中文界面
5. **安全性保障**: 多层安全防护机制
6. **扩展性设计**: 模块化架构，易于功能扩展

## 🎯 适用场景

- **学习项目**: 全栈开发技术学习
- **毕业设计**: 计算机专业毕业设计项目
- **企业内部**: 企业内部视频分享平台
- **二次开发**: 视频网站功能定制开发
- **技术演示**: 面试作品集展示

## 🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系方式

如有问题或建议，欢迎联系：

- 项目地址: https://gitee.com/camphora335/video-website
- 问题反馈: https://gitee.com/camphora335/video-website/issues

## 🙏 致谢

感谢以下开源项目为本项目提供支持：

- [Spring Boot](https://spring.io/projects/spring-boot)
- [Bootstrap](https://getbootstrap.com/)
- [MyBatis-Plus](https://baomidou.com/)
- [Font Awesome](https://fontawesome.com/)

## Vue 3 迁移说明

### 迁移概览
本项目已完成从原生JavaScript到Vue 3的全面迁移，采用Vue 3的Composition API和现代化开发模式。

### 主要改进

1. **响应式数据管理**
   - 使用Vue 3的`ref`和`reactive`管理组件状态
   - 统一的认证状态管理
   - 自动UI更新机制

2. **组件化架构**
   - 每个页面都是独立的Vue组件
   - 使用Composition API组织逻辑
   - 更好的代码复用和维护性

3. **模块化导入**
   - 使用ES6 modules和import maps
   - 从CDN导入Vue 3
   - 模块化的认证系统

4. **现代化特性**
   - 声明式UI更新
   - 事件处理优化
   - 更好的错误处理

### 文件变更

#### 保留并升级的文件
- `auth.js` - 升级为Vue 3响应式认证模块
- 所有HTML文件 - 重写为Vue 3组件

#### 删除的文件
- `main.js` - 功能整合到`index.html`
- `register.js` - 功能整合到`register.html`
- `upload.js` - 功能整合到`upload.html`
- `player.js` - 功能整合到`player.html`
- `profile.js` - 功能整合到`profile.html`

### 核心功能对比

| 功能 | 原生JS | Vue 3 |
|------|--------|-------|
| 状态管理 | 全局变量 | Reactive state |
| DOM操作 | 手动操作 | 声明式绑定 |
| 事件处理 | addEventListener | @事件指令 |
| 数据绑定 | innerHTML/textContent | v-model/插值 |
| 条件渲染 | if/else + DOM | v-if/v-show |
| 列表渲染 | 循环 + DOM | v-for |

### 技术亮点

1. **认证系统**
   ```javascript
   // Vue 3响应式认证状态
   export const authState = reactive({
       currentUser: null,
       isCheckingAuth: false,
       isAuthenticated: false
   });
   ```

2. **弹幕系统**
   - 保持原有弹幕管理器类
   - Vue 3生命周期集成
   - 更好的性能优化

3. **视频上传**
   - 拖拽功能优化
   - 进度显示改进
   - 错误处理增强

### 兼容性保证

- 保持所有API调用不变
- UI/UX完全一致
- 功能100%兼容
- 性能显著提升

## 安装与运行

### 前置要求
- Java 17+
- MySQL 8.0+
- Maven 3.6+
- 现代浏览器 (支持ES6 modules)

### 运行步骤

1. 克隆项目
```bash
git clone [repository-url]
cd VideoWeb2
```

2. 配置数据库
```bash
# 创建数据库
mysql -u root -p
CREATE DATABASE videoweb;

# 导入初始化脚本
mysql -u root -p videoweb < database_init.sql
```

3. 配置应用
```properties
# 编辑 src/main/resources/application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/videoweb
spring.datasource.username=your_username
spring.datasource.password=your_password
```

4. 运行应用
```bash
mvn spring-boot:run
```

5. 访问应用
- 打开浏览器访问: http://localhost:8080
- 首次运行会自动创建数据表

## API接口

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

### 视频相关
- `GET /api/videos/public` - 获取公开视频列表
- `GET /api/videos/user` - 获取用户视频列表
- `POST /api/videos/upload` - 上传视频
- `GET /api/videos/{id}` - 获取视频详情
- `DELETE /api/videos/{id}` - 删除视频

### 弹幕相关
- `GET /api/danmaku/video/{videoId}` - 获取视频弹幕
- `POST /api/danmaku` - 发送弹幕

### 评论相关
- `GET /api/comments/video/{videoId}` - 获取视频评论
- `POST /api/comments` - 发表评论

## 部署说明

### 生产环境配置
1. 修改数据库配置为生产环境
2. 配置文件上传路径
3. 设置合适的JVM参数
4. 配置反向代理（如Nginx）

### Docker部署（可选）
```dockerfile
FROM openjdk:17-jdk-slim
COPY target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "/app.jar"]
```

## 贡献指南

1. Fork项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启Pull Request

## 许可证

本项目采用MIT许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系方式

如有问题或建议，欢迎联系：

- 项目地址: https://gitee.com/camphora335/video-website
- 问题反馈: https://gitee.com/camphora335/video-website/issues

## 🙏 致谢

感谢以下开源项目为本项目提供支持：

- [Spring Boot](https://spring.io/projects/spring-boot)
- [Bootstrap](https://getbootstrap.com/)
- [MyBatis-Plus](https://baomidou.com/)
- [Font Awesome](https://fontawesome.com/)