Vue + SpringBoot + MyBatis 音樂網站

項目地址

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 // 啓動後臺管理項目

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章