項(xiàng)目：Bilibili Pro

• 從0到1寫(xiě)一個(gè)仿B站寫(xiě)的一個(gè)項(xiàng)目，采用前后端分離，人不分離的方式來(lái)開(kāi)發(fā)

• Web端分為客戶端和后臺(tái)管理，項(xiàng)目也寫(xiě)了PC端，采用Electron 23開(kāi)發(fā)，均由當(dāng)前最新版Vite搭建

• 預(yù)覽地址： https://www.bilibili.com/video/BV1nF411y7Pc/

技術(shù)棧

• 前端（Web端）

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

• 后端（服務(wù)端）

• SpringBoot + Myabtis-Plus + WebSocket + JWT等

• 數(shù)據(jù)庫(kù)

• MySql + Redis

• 開(kāi)發(fā)環(huán)境

• NodeJs：16.15.0 + JDK：1.8.2

項(xiàng)目預(yù)覽視頻

項(xiàng)目功能

首頁(yè)

• 首頁(yè)視頻推薦、 Banner、 推薦類型

• 滾動(dòng)分頁(yè)、 骨架屏優(yōu)化加載

• 搜索框獲取熱搜、 搜索歷史、 熱搜統(tǒng)計(jì)

• 視頻動(dòng)態(tài)、 綜合動(dòng)態(tài)展示

• 消息標(biāo)記、 彩色圖標(biāo)

• 收藏夾、 收藏視頻展示

• 歷史觀看視頻展示

• 用戶登陸、 注冊(cè)

視頻頁(yè)

• 視頻播放、 預(yù)覽、 點(diǎn)贊、 收藏

• 視頻評(píng)論、 二級(jí)評(píng)論

• 視頻倍速播放、 比例調(diào)整、 網(wǎng)頁(yè)全屏、 全屏、 畫(huà)中畫(huà)播放（摸魚(yú)模式）

• 視頻音量控制、 進(jìn)度條控制、 清晰度調(diào)整（1080P、 720P）、 視頻快捷鍵

• 視頻描述、 標(biāo)簽

• 視頻彈幕發(fā)射、 彩色彈幕、 彈幕開(kāi)關(guān)、 透明度、 顯示范圍等

• 彈幕列表（虛擬列表）

搜索（推薦）頁(yè)

• 視頻模糊搜索、 分頁(yè)

• 視頻排序（最多播放、 最多收藏、 最新發(fā)布）

歷史記錄頁(yè)

• 查看視頻觀看歷史記錄

• 記錄模糊搜索、 記錄清楚

動(dòng)態(tài)頁(yè)

• 動(dòng)態(tài)發(fā)布

• 視頻動(dòng)態(tài)、 文本動(dòng)態(tài)、 話題動(dòng)態(tài)

• 動(dòng)態(tài)評(píng)論、 動(dòng)態(tài)點(diǎn)贊

消息中心頁(yè)

• 回復(fù)我的： 同步所有相關(guān)回復(fù)（視頻回復(fù)、 動(dòng)態(tài)回復(fù)、 二級(jí)評(píng)論回復(fù)）

• 收到的贊： 同步所有相關(guān)點(diǎn)贊（視頻點(diǎn)贊、 動(dòng)態(tài)點(diǎn)贊）

• 系統(tǒng)通知

• 我的消息： 實(shí)時(shí)通信私聊

• 消息通知、 提醒

• 消息已讀、 未讀

• 消息標(biāo)記

• 歷史消息查看

個(gè)人中心頁(yè)（TA人中心頁(yè)）

• 我的視頻、 我的收藏夾

• 我的動(dòng)態(tài)、 個(gè)人資料

• 我的投稿、 投稿視頻排序

• 查看、 編輯、 刪除、 新增收藏夾

• 收藏夾視頻查詢、 搜索、 排序

• 關(guān)注、 粉絲、 動(dòng)態(tài)數(shù)

• 查看關(guān)注用戶、 特別關(guān)注、 悄悄關(guān)注

• 查看粉絲用戶

視頻投稿（創(chuàng)造中心）

• 視頻上傳、 封面上傳

• 視頻類型選擇、 視頻描述、 投稿上架時(shí)間

后臺(tái)

• 展示用戶項(xiàng)目進(jìn)度、 動(dòng)態(tài)、 代辦事項(xiàng)（todolist）

• 主控臺(tái)，數(shù)據(jù)可視化（Echarts）

• 視頻審核、 增刪改查

• 基于RBAC的權(quán)限模型（可分配角色和菜單權(quán)限）

• 文件上傳、 導(dǎo)入、 導(dǎo)出

• 單表增上改查、 分頁(yè)模糊查詢

額外功能

• 多頁(yè)面/單頁(yè)面架構(gòu)框架

• JWT身份驗(yàn)證攔截

• Axios二次封裝請(qǐng)求、 Naive UI組件二次封裝

• CSS原子化、 使用Tailwind復(fù)用樣式

• 集成Redis緩存、 代碼生成器、 模板化

• 500、 403、 404頁(yè)面