Vue + SpringBoot + MyBatis 音樂網站

項目地址

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

 

項目說明

本音樂網站的開發主要利用前端框架 Vue 開發客戶端和管理端，后端接口用 SpringBoot 來實現，數據持久化用的是 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 // 啟動后台管理項目

[查看更多](https://github.com/Yin-Hongwei/music-website)