项目：Bilibili Pro

  • 从0到1写一个仿B站写的一个项目，采用前后端分离，人不分离的方式来开发
  • Web端分为客户端和后台管理，项目也写了PC端，采用Electron 23开发，均由当前最新版Vite搭建
  • 预览地址： https://www.bilibili.com/video/BV1nF411y7Pc/

技术栈

  • 前端（Web端）
    • Vue3 + TypeScript + Vue-Router + Pinia（Vuex） + Naive UI + Tailwindcss + Scss + Echarts等
  • 后端（服务端）
    • SpringBoot + Mybatis-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页面