项目：Bilibili Pro

• 从0到1写一个仿B站写的一个项目，采用前后端分离，人不分离的方式来开发

• Web端分为客户端和后台管理，项目也写了PC端，采用Electron 23开发，均由当前最新版Vite搭建

• 预览地址： https://www.bilibili.com/video/BV1nF411y7Pc/

技术栈

• 前端（Web端）

• Vue3.3 + TypeScript + Vue-Router + Pinia（Vuex） + Naive UI + Tailwindcss + Scss + Echarts等

• 后端（服务端）

• SpringBoot + Myabtis-Plus + WebSocket + JWT等

• 数据库

• MySql + Redis

• 开发环境

• NodeJs：16.15.0 + JDK：1.8.2

项目预览视频

项目功能

首页

• 首页视频推荐、 Banner、 推荐类型

• 滚动分页、 骨架屏优化加载

• 搜索框获取热搜、 搜索历史、 热搜统计

• 视频动态、 综合动态展示

• 消息标记、 彩色图标

• 收藏夹、 收藏视频展示

• 历史观看视频展示

• 用户登陆、 注册

视频页

• 视频播放、 预览、 点赞、 收藏

• 视频评论、 二级评论

• 视频倍速播放、 比例调整、 网页全屏、 全屏、 画中画播放（摸鱼模式）

• 视频音量控制、 进度条控制、 清晰度调整（1080P、 720P）、 视频快捷键

• 视频描述、 标签

• 视频弹幕发射、 彩色弹幕、 弹幕开关、 透明度、 显示范围等

• 弹幕列表（虚拟列表）

搜索（推荐）页

• 视频模糊搜索、 分页

• 视频排序（最多播放、 最多收藏、 最新发布）

历史记录页

• 查看视频观看历史记录

• 记录模糊搜索、 记录清楚

动态页

• 动态发布

• 视频动态、 文本动态、 话题动态

• 动态评论、 动态点赞

消息中心页

• 回复我的： 同步所有相关回复（视频回复、 动态回复、 二级评论回复）

• 收到的赞： 同步所有相关点赞（视频点赞、 动态点赞）

• 系统通知

• 我的消息： 实时通信私聊

• 消息通知、 提醒

• 消息已读、 未读

• 消息标记

• 历史消息查看

个人中心页（TA人中心页）

• 我的视频、 我的收藏夹

• 我的动态、 个人资料

• 我的投稿、 投稿视频排序

• 查看、 编辑、 删除、 新增收藏夹

• 收藏夹视频查询、 搜索、 排序

• 关注、 粉丝、 动态数

• 查看关注用户、 特别关注、 悄悄关注

• 查看粉丝用户

视频投稿（创造中心）

• 视频上传、 封面上传

• 视频类型选择、 视频描述、 投稿上架时间

后台

• 展示用户项目进度、 动态、 代办事项（todolist）

• 主控台，数据可视化（Echarts）

• 视频审核、 增删改查

• 基于RBAC的权限模型（可分配角色和菜单权限）

• 文件上传、 导入、 导出

• 单表增上改查、 分页模糊查询

额外功能

• 多页面/单页面架构框架

• JWT身份验证拦截

• Axios二次封装请求、 Naive UI组件二次封装

• CSS原子化、 使用Tailwind复用样式

• 集成Redis缓存、 代码生成器、 模板化

• 500、 403、 404页面