完结撒花,基于React+Vue+NodeJs+MySQL的在线视频网站
经过几个月的奋斗,利用闲暇时间做的在线视频网站终于完结了。在此记录一下。后段接口来源于node + mySQL,不依赖于任何第三方开源接口,数据全部本地上传。客户端基于React+TypeScript,管理员端基于Vue+TypeScript,服务端基于Express(Nodejs)+MySQL
该项目本意是练习大文件分片上传功能,实现完毕后,逐渐将系统完善为一个完整的视频网站,原意是仿照youtube实现,后来时间实在不多了。就实现了一下简单的功能
主要实现的功能(以及其它的简单的增删改查)
- 视频上传 (大文件分片上传,合并,视频转m3u8,在线按需加载)
- 在线聊天 (websocket多人在线聊天,其实就是私信功能)
- 播放列表
- 视频分类
- 订阅内容
- 历史记录
- 消息通知
1. 客户端
-
首页就显示了系统的基本功能,推荐模块展示了系统播放量较高的视频列表,显示视频基本信息,如视频名称,创建者,播放量,用户可以将视频添加至播放列表,稍后观看等
-
首页就显示了系统的基本功能,推荐模块展示了系统播放量较高的视频列表,显示视频基本信息,如视频名称,创建者,播放量,用户可以将视频添加至播放列表,稍后观看等
-
探索模块则是记录了系统中的体育,学习,新闻,音乐等模块,用户可以订阅相关模块,查看探索模块下的集合中的视频。其实探索模块就是特定的用户
-
订阅模块则是展示用户订阅的用户,最近发布的作品,分为本月和更早模块。可以通过管理,查看订阅用户
-
媒体库则是显示历史记录和稍后观看。以及用户的订阅数量,上传数量,以及简略的用户个人信息
-
播放列表则是现实用户创建的播放列表以及收集的精彩视频,用户可以收藏播放列表
-
视频详情页显示视频的详细信息,以及相关视频
2. 管理员端
3. 服务端
4.结语
所有数据都来源于本地,管理员角色通过管理员端添加系统数据。查看系统数据。记录我第一个完整的系统 系统演示地址
项目准确演示地址(获源私)