項目地址
https://github.com/Yin-Hongwei/music-website
項目說明
本音樂網站的開發主要利用前端框架VUE開發客戶端和管理端,後端接口用Spring Boot來實現,數據持久化用的是 MyBatis,數據用MySQL來進行存儲。
項目截圖
前臺模塊
後臺模塊
功能
-
WEB 端音樂播放
-
用戶登錄註冊
-
用戶信息編輯
-
歌曲、歌單搜索
-
歌單打分
-
歌單、歌曲評論
-
分頁顯示
-
歌詞同步顯示
-
音樂收藏、下載、拖動控制
-
後臺對用戶、歌曲、歌手、歌單信息的管理
技術棧
後端
spring boot + MyBatis
前端
vue + vue-router + vuex + axios + element-ui
安裝
1、下載項目到本地
git clone https://github.com/Yin-Hongwei/music-website.git
2、下載數據庫中記錄的資源
去【鏈接: https://pan.baidu.com/s/1Qv0ohAIPeTthPK_CDwpfWg 提取碼: gwa4 】下載網站依賴的歌曲及圖片,將 data 夾裏的文件直接放到 music-server 文件夾下。
3、修改
1)數據庫:將sql文件夾中的 tp_music.sql 文件導入數據庫。(mysql 版本不能低於5.7)
2)music-server:啓動後端服務之前,有一些地方需要修改,先去 /music-website/music-server/src/main/resources 這個目錄下的文件裏修改自己的 spring.datasource.username 和 spring.datasource.password,並且修改下面藍色顯示的文件名中 MyPicConfig 類下的 addResourceLocations方法中的路徑,否則資源加載不了。(Mac 和 win 下路徑有些差異,我的是Mac上的路徑,win 上 需要在 file:後標明是哪個盤,例如:"file:C:\\user\\XXX\\")
4、啓動項目
然後進入 music-server 文件夾,運行下面命令啓動服務器
./mvnw spring-boot:run
進入 music-client 文件夾,運行下面命令啓動前臺項目
npm install // 安裝依賴
npm run dev // 啓動前臺項目
進入 music-manage 文件夾,運行下面命令啓動後臺管理項目
npm install // 安裝依賴
npm run dev // 啓動後臺管理項目