一個基於 SpringBoot + Vue 復刻高仿B站的影片網站！

Java陈序员發表於2024-07-29
Spring BootVue網站

大家好，我是 Java陳序員。

今天，給大家介紹一個開源的影片網站，復刻高仿B站！

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

Teriteri —— 一個採用前後端分離的模式，參考 Bilibili PC 端，基於 SpringBoot + Vue3 實現的彈幕影片網站。

目前實現的功能：

  • 首頁影片隨機推薦
  • 使用者註冊登入
  • 個人中心資訊修改
  • 影片投稿
  • 影片稽核
  • 內容搜尋（影片 + 使用者）
  • 影片詳情頁（觀看 + 點贊 + 收藏 + 彈幕 + 評論）
  • 訊息系統（聊天等）
  • 個人空間（使用者作品 + 收藏夾等）

暫停開發的功能：

  • 影片分割槽
  • 使用者動態
  • 觀看歷史
  • 熱門排行
  • 資料統計
  • 推薦演算法

技術棧：

  • 前端：Vue3 + Element-Plus
  • 後端：SpringBoot + MyBatis-Plus + JWT + Netty
  • 資料庫：MySQL + Redis + ElasticSearch

專案截圖

前臺首頁

影片播放

影片搜尋

影片投稿

影片稽核

影片稽核是後臺管理中的功能，後臺管理目前只開發了影片稽核功能。

個人中心

個人空間

聊天對話

快速上手

開發環境：

  • JDK 1.8
  • ElasticSearch 7.17.16
  • 阿里雲OSS
  • NodeJs 16.16.0

服務端

1、克隆程式碼

git clone https://github.com/xunlu129/teriteri-backend.git

2、建立資料庫 teriteri

CREATE DATABASE `teriteri` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;

3、在建立好的資料庫中，執行 teriteri-backend/database/teriteri.sql 初始化資料庫表

4、將專案以 Maven 的形式匯入到 IDEA 中

5、將 resources 中的 application 檔案加上字尾 .yml,並修改資料庫、Redis、Oss、ElasticSearch 的配置資訊

需要根據自己伺服器資訊填寫好其中帶 *** 號的配置資訊，注意個人資訊洩露風險！！！

6、執行主啟動類 com.teriteri.backend.BackendApplication 啟動專案

前臺 Web 端

1、克隆程式碼

git clone https://github.com/xunlu129/teriteri-client.git

2、安裝依賴

npm install

3、啟動專案

npm run serve

4、啟動成功後瀏覽器訪問 http://localhost:8787

後臺管理 Web 端

1、克隆程式碼

git clone https://github.com/xunlu129/teriteri-admin.git

2、安裝依賴

npm install

3、啟動專案

npm run serve

4、啟動成功後瀏覽器訪問 http://localhost:8788

5、管理員的賬號密碼需要在前臺 Web 端進行註冊，同時需要修改 user 表的 role 屬性為 1 或者 2，該使用者就是管理員了，這樣就可以登入管理員端了。

Teriteri 作為一個影片網站，目前實現了大部分的功能，可以說完美復刻了B站，可惜還有一些功能沒開發。但是瑕不掩瑜，仍是一個非常好的開源專案，部署也很簡單，大家快去圍觀體驗吧~

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章