搭建個人音樂網站！一個基於 SpringBoot + Vue 的音樂網站！

Java陈序员發表於2024-10-08
網站Spring BootVue

大家好，我是 Java陳序員。

今天，給大家介紹一個基於 SpringBoot + Vue 的音樂網站！

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

專案介紹

music-website —— 一個基於 SpringBoot + Vue 的音樂網站，包含網站的客戶端和管理端！

功能特色：

  • 音樂播放
  • 使用者登入註冊
  • 使用者資訊編輯、頭像修改
  • 歌曲、歌單搜尋
  • 歌單打分
  • 歌單、歌曲評論
  • 歌單列表、歌手列表分頁顯示
  • 歌詞同步顯示
  • 音樂收藏、下載、拖動控制、音量控制
  • 後臺對使用者、歌曲、歌手、歌單資訊的管理

技術棧：

  • 後端：SpringBoot + MyBatis + Redis + Minio
  • 前端：Vue3.0 + TypeScript + Vue-Router + Vuex + Axios + ElementPlus + Echarts
  • 部署：Docker

專案預覽

客戶端

管理端

快速上手

開發環境

  • JDK1.8
  • MySQL5.7
  • Redis
  • Node14
  • MinIO
  • IDE：IntelliJ IDEA、VSCode

前期準備

1、克隆程式碼

git clone https://github.com/Yin-Hongwei/music-website.git

如果你想使用 vue2.0 的版本，在下載程式碼後，可以切到 vue@2.0 的分支，預設是使用 vue3.0.

2、建立資料庫

CREATE DATABASE tp_music CHARACTER SET utf8 COLLATE utf8_general_ci;

3、執行 music-website/music-server/sql/tp_music.sql 指令碼，初始化資料庫資料

啟動後端服務

1、將 music-server 目錄以 Maven 專案的形式匯入到 IDEA 中

2、修改配置檔案 music-server/src/main/resources/application.properties、music-server/src/main/resources/application-dev.properties 中的 Redis、MySQL、MinIO 連線配置資訊

3、執行主啟動類 com.example.yin.YinMusicApplication 啟動專案

啟動客戶端

# 1、進入到客戶端目錄
cd music-client

# 2、安裝依賴
npm install

# 3、啟動客戶端
npm run serve

# 4、瀏覽器訪問
http://localhost:8080/

啟動管理端

# 1、進入到管理端目錄
cd music-manage

# 2、安裝依賴
npm install

# 3、啟動管理端
npm run serve

# 4、瀏覽器訪問
http://localhost:8080/

music-website 支援 Docker 部署，專案提供了 docker-compose.yaml、dockerfile 檔案進行部署服務端、客戶端和管理端。

music-website 可以說基本上實現了一個音樂網站的功能，是一個值得學習交流的開源專案！快去試試吧~

專案地址：https://github.com/Yin-Hongwei/music-website

最後

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

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

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

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

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

相關文章