項(xiàng)目地址
https://github.com/Yin-Hongwei/music-website
項(xiàng)目說(shuō)明
本音樂(lè)網(wǎng)站的開(kāi)發(fā)主要利用前端框架 Vue 開(kāi)發(fā)客戶端和管理端，后端接口用 SpringBoot 來(lái)實(shí)現(xiàn)，數(shù)據(jù)持久化用的是 MyBatis，數(shù)據(jù)庫(kù)使用的是 MySQL。實(shí)現(xiàn)思路可以參考這里。
項(xiàng)目截圖
客戶端
管理端
功能
- WEB 端音樂(lè)播放
- 用戶登錄注冊(cè)
- 用戶信息編輯
- 歌曲、歌單搜索
- 歌單打分
- 歌單、歌曲評(píng)論
- 分頁(yè)顯示
- 歌詞同步顯示
- 音樂(lè)收藏、下載、拖動(dòng)控制
- 后臺(tái)對(duì)用戶、歌曲、歌手、歌單信息的管理
技術(shù)棧
后端
SpringBoot + MyBatis
前端
Vue + Vue-Router + Vuex + Axios + ElementUI
安裝
1、下載項(xiàng)目到本地
git clone https://github.com/Yin-Hongwei/music-website.git
2、下載數(shù)據(jù)庫(kù)中記錄的資源
去【鏈接: https://pan.baidu.com/s/1Qv0ohAIPeTthPK_CDwpfWg 提取碼: gwa4 】下載網(wǎng)站依賴的歌曲及圖片，將 data 夾里的文件直接放到 music-server 文件夾下。
3、修改
1）數(shù)據(jù)庫(kù)：將sql文件夾中的 tp_music.sql 文件導(dǎo)入數(shù)據(jù)庫(kù)。（mysql 版本不能低于5.7）
2）music-server：?jiǎn)?dòng)后端服務(wù)之前，有一些地方需要修改，先去 /music-website/music-server/src/main/resources 這個(gè)目錄下的文件里修改自己的 spring.datasource.username 和 spring.datasource.password，并且修改下圈出來(lái)的的文件中 MyPicConfig 類下的 addResourceLocations方法中的路徑，否則資源加載不了。（Mac 和 win 下路徑有些差異，我的是Mac上的路徑，win 上 需要在 file:后標(biāo)明是哪個(gè)盤，例如："file:C:\\user\\XXX\\"）
4、啟動(dòng)項(xiàng)目
然后進(jìn)入 music-server 文件夾，運(yùn)行下面命令啟動(dòng)服務(wù)器
./mvnw spring-boot:run
進(jìn)入 music-client 文件夾，運(yùn)行下面命令啟動(dòng)前臺(tái)項(xiàng)目
npm install // 安裝依賴
npm run dev // 啟動(dòng)前臺(tái)項(xiàng)目
進(jìn)入 music-manage 文件夾，運(yùn)行下面命令啟動(dòng)后臺(tái)管理項(xiàng)目
npm install // 安裝依賴
npm run dev // 啟動(dòng)后臺(tái)管理項(xiàng)目
