完结撒花,基于React+Vue+NodeJs+MySQL的在线视频网站

235 阅读2分钟

经过几个月的奋斗,利用闲暇时间做的在线视频网站终于完结了。在此记录一下。后段接口来源于node + mySQL,不依赖于任何第三方开源接口,数据全部本地上传。客户端基于React+TypeScript,管理员端基于Vue+TypeScript,服务端基于Express(Nodejs)+MySQL

该项目本意是练习大文件分片上传功能,实现完毕后,逐渐将系统完善为一个完整的视频网站,原意是仿照youtube实现,后来时间实在不多了。就实现了一下简单的功能。

主要实现的功能(以及其它的简单的增删改查)

  • 视频上传 (大文件分片上传,合并,视频转m3u8,在线按需加载)
  • 在线聊天 (websocket多人在线聊天,其实就是私信功能)
  • 播放列表
  • 视频分类
  • 订阅内容
  • 历史记录
  • 消息通知

1. 客户端

image.png

  • 首页就显示了系统的基本功能,推荐模块展示了系统播放量较高的视频列表,显示视频基本信息,如视频名称,创建者,播放量,用户可以将视频添加至播放列表,稍后观看等。

image.png

  • 探索模块则是记录了系统中的体育,学习,新闻,音乐等模块,用户可以订阅相关模块,查看探索模块下的集合中的视频。其实探索模块就是特定的用户。

image.png

  • 订阅模块则是展示用户订阅的用户,最近发布的作品,分为本月和更早模块。可以通过管理,查看订阅用户

image.png

  • 媒体库则是显示历史记录和稍后观看。以及用户的订阅数量,上传数量,以及简略的用户个人信息

image.png

  • 播放列表则是现实用户创建的播放列表以及收集的精彩视频,用户可以收藏播放列表

image.png

  • 视频详情页显示视频的详细信息,以及相关视频

image.png

  • 用户详情页则是显示社区,简介,上传的视频,创建的播放列表,订阅的频道等信息

image.png

  • 评论则显示用户对于视频,动态的所有评论以及回复

image.png
用户个人中心则是可以看到用户的所有数据
2. 管理员端

image.png
3. 服务端

image.png
所有数据都来源于本地,管理员角色通过管理员端添加系统数据。查看系统数据
4. 持续更新中

记录我第一个完整的系统 系统演示地址www.bilibili.com/video/BV1er…