Java在线视频教育网+SpringBoot+VUE3+前后端分离

今天带来一款精品源码：”在线视频教育网“ ， 本文介绍了系统功能与部署安装步骤，如果您有任何问题，也请联系我.

此款作品由本人亲自开发，市面上没有，如有售卖视为侵权! 作品可用于毕设，不可用于商业。

项目视频演示

项目部分截图

功能介绍

这是一个基于 Spring Boot + Vue3 开发的在线视频教育系统，分为前台用户界面和后台管理两部分。前台支持用户观看视频、发送实时弹幕、评论互动、收藏等功能，并具有播放进度记录、观看历史等个性化服务。后台管理系统提供视频教程管理、用户管理、视频上传、运营数据统计等功能。系统采用前后端分离架构，整合了视频播放、弹幕系统、用户认证等多个模块，为用户提供流畅的观看体验。

视频弹幕，采用了websocket实现。

前端功能概述

1. 用户功能

• 用户注册/登录
• 个人中心
• 观看历史记录
• 收藏功能

2. 视频播放功能

• 在线视频播放
• 弹幕系统
• 播放进度记录
• 在线人数统计
• 弹幕设置（速度、透明度、字体大小等）

3. 互动功能

• 评论系统
• 实时弹幕发送
• 观看数据统计

4. 内容浏览

• 视频分类浏览
• 排行榜
• 搜索功能
• 视频详情展示

5. 播放器特性

• 自动保存播放进度
• 弹幕显示/隐藏控制
• 响应式布局
• 倍速播放等功能

管理后端功能概述

1. 类目管理

• 类目分为一级，二级类目，支持联动
• 支持类目的增删改查

2. 视频管理

• 视频基本信息的增删改查
• 视频分类管理
• 封面图片上传
• 评分和集数管理
• 受众类型设置

3. 单个视频的章节管理

• 视频上传和管理
• 章节信息编辑
• 视频时长自动获取
• 封面管理

4. 用户管理

• 用户信息查看
• 用户账号管理
• 用户权限控制

5. 评论管理

• 用户评论查看
• 用户评论删除

6. 网站统计

• 视频数，用户数，评论数，播放量统计
• 用户活跃度趋势统计
• 观看分类占比统计
• 播放量排行TOP10统计
• 评论数量趋势

6.首页推荐管理

• 根据视频id添加，删除，修改
• 显示到前端的首页顶部

二. 技术栈概述

后端技术栈：

• Spring Boot作为主要框架
• Spring Security实现认证和授权
• MySQL数据库 + MyBatis ORM框架
• Redis缓存
• WebSocket实现实时弹幕
• JWT实现token认证
• Swagger用于API文档

前端技术栈：

• Vue 3作为主要框架
• Vite作为构建工具
• Element Plus组件库
• Vue Router实现路由
• Pinia状态管理
• Axios处理HTTP请求
• ECharts图表库

三. 系统部署

前端部署

安装nodejs , v22.14.0， 自己到官网上面去下载安装就可以了。一定要安装这个版本

进入到管理后台项目anime-admin目录下， 右键，运行cmd，依次运行下面几个命令：

npm install --save-dev @vitejs/plugin-vue

npm install -D sass

npm install echarts --save

npm install

npm run dev

运行项目

进入到前端项目anime-web目录下， 右键，运行cmd，依次运行下面几个命令：

npm install

npm run dev

运行项目

到此前端项目部署完成。

执行sql

自己安装好数据库，注意，必须啊时mysql8 ，否则代码运行会出错。 然后执行 “wx_hadluo_bilibili.sql”

安装redis

项目需要连接redis ， 自己在网上下载一个windows版的redis启动就可以了。

启动后端项目

然后部署后端 ， 打开idea， 导入maven工程 hadluo-bilibili-server。

打开resources目录， 修改 application.yml 配置文件，主要修改下面几个信息：

1. 修改数据库

2. 修改文件上传，下载信息：

3. 邮件服务器信息（用于注册）：

4. 注册时，默认的头像和昵称：

然后启动 main 启动类 AnimeServerApplication：

四. 访问项目

后台管理：

http://localhost:3001/Dashboard

前端：

http://localhost:3000/

五. 结尾语

欢迎关注我，我是专门分享源码技术的老罗软件。有问题也请联系我！