項目：Bilibili Pro

• 從0到1寫一個仿B站寫的一個項目，采用前后端分離，人不分離的方式來開發(fā)

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

• 項目會繼續(xù)完善維護，后續(xù)會抽時間把直播、番劇、影視劇、游戲中心、漫畫等頁面寫完

• 預覽地址： https://www.bilibili.com/video/BV1nF411y7Pc/

技術(shù)棧

• 前端（Web端）

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

• 后端（服務端）

• SpringBoot + Myabtis-Plus + WebSocket + JWT等

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

• MySql + Redis

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

• NodeJs: 16.15.0 + JDK: 1.8.2

項目預覽視頻

項目功能

首頁

• 首頁視頻推薦、 Banner、 推薦類型

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

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

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

• 消息標記、 彩色圖標

• 收藏夾、 收藏視頻展示

• 歷史觀看視頻展示

• 用戶登陸、 注冊

視頻頁

• 視頻播放、 預覽、 點贊、 收藏

• 視頻評論、 二級評論

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

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

• 視頻描述、 標簽

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

• 彈幕列表（虛擬列表）

搜索（推薦）頁

• 視頻模糊搜索、 分頁

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

歷史記錄頁

• 查看視頻觀看歷史記錄

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

動態(tài)頁

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

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

• 動態(tài)評論、 動態(tài)點贊

消息中心頁

• 回復我的： 同步所有相關回復（視頻回復、 動態(tài)回復、 二級評論回復）

• 收到的贊： 同步所有相關點贊（視頻點贊、 動態(tài)點贊）

• 系統(tǒng)通知

• 我的消息： 實時通信私聊

• 消息通知、 提醒

• 消息已讀、 未讀

• 消息標記

• 歷史消息查看

個人中心頁（TA人中心頁）

• 我的視頻、 我的收藏夾

• 我的動態(tài)、 個人資料

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

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

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

• 關注、 粉絲、 動態(tài)數(shù)

• 查看關注用戶、 特別關注、 悄悄關注

• 查看粉絲用戶

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

• 視頻上傳、 封面上傳

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

后臺

• 展示用戶項目進度、 動態(tài)、 代辦事項（todolist）

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

• 視頻審核、 增刪改查

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

• 文件上傳、 導入、 導出

• 單表增上改查、 分頁模糊查詢

額外功能

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

• JWT身份驗證攔截

• Axios二次封裝請求、 Naive UI組件二次封裝

• CSS原子化、 使用Tailwind復用樣式

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

• 500、 403、 404頁面

項目截圖