计算机专业毕业设计 - 基于Vue+ SpringBoot+MyBatis 实现的音乐网站

淩亂°似流年 2023-09-29 18:58 9阅读 0赞

[源码下载地址][Link 1]

### 项目说明 ###

本音乐网站的开发主要利用 VUE 框架开发前台和后台，后端接口用 Spring Boot + MyBatis 来实现，数据库使用的是 MySQL。实现思路可以看这里。

### 功能说明 ###

*  音乐播放
 *  用户登录注册
 *  用户信息编辑、头像修改
 *  歌曲、歌单搜索
 *  歌单打分
 *  歌单、歌曲评论
 *  歌单列表、歌手列表分页显示
 *  歌词同步显示
 *  音乐收藏、下载、拖动控制
 *  后台对用户、歌曲、歌手、歌单信息的管理

### 技术栈 ###

##### 后端 #####

SpringBoot + MyBatis

##### 前端 #####

Vue + Vue-Router + Vuex + Axios + ElementUI

### 项目截图 ###

> 前台截图预览

![图片][572daf0fb7f504dd0040d5b092d3975a.jpeg]

![图片][3647bac3d800470ff7a0e733001ae230.jpeg]

![图片][2f9b5e146670c2176ae22523e468fa32.jpeg]

![图片][0cbf0e37c15bd7ec3ee8907d3a625dbc.jpeg]

![图片][362cec9a1147cd6aa49c5bf188abd300.jpeg]

![图片][6eede56897f03678f9fd6b904a2a0cf4.jpeg]

![图片][980d35f3ca1b291cd3bd68bef61355db.jpeg]

![图片][8f7d5b1af8e62593ff309ce5583d4515.jpeg]

![图片][ecb7124c9b8504f521a3e285cc5f610d.jpeg]

![图片][1f7cb2defe86050560c9f2afc86f543d.jpeg]

> 后台截图预览

![图片][96fd81df5a3174aaceaac45cfe17279c.jpeg]

![图片][d6d5ed306056b4e1b9754aacd33f4c3f.jpeg]

![图片][b0582df992dce65c20240df39c166c44.jpeg]

![图片][95ed39d667068407226bb1f94e6e12fb.jpeg]

![图片][eaaf47f5420b68e27ecfa62be0539de1.jpeg]

![图片][5f100179855d6aa55843ff98ad76af92.jpeg]

### 安装 ###

##### 1、下载项目到本地 #####

[源码下载地址][Link 1]

##### 2、下载数据库中记录的资源 #####

去【链接: https://pan.baidu.com/s/1Qv0ohAIPeTthPK\_CDwpfWg 提取码: gwa4 】下载网站依赖的歌曲及图片，将 data 夹里的文件直接放到 music-server 文件夹下。

![图片][9577ceb40fb33644380e5c329a1c9780.jpeg]

##### 3、修改 #####

1）数据库：将sql文件夹中的 tp\_music.sql 文件导入数据库。

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\\”）

![图片][d9adf457c5c90ccb3f2aa4d729faec96.jpeg]

##### 4、启动项目 #####

music-server 是本项目的后端，用于监听前端发来的请求，提供接口。music-client 和 music-manage 都是本项目的前端部分，前者是前台，后者是后台。运行时后端必须启动，两个前端项目可以都启动，也可以只启动其中一个，他们是独立的。

然后进入 music-server 文件夹，运行下面命令启动服务器

// 方法一
    ./mvnw spring-boot:run
    
    // 方法二
    mvn spring-boot:run // 前提装了 maven

进入 music-client 文件夹，运行下面命令启动前台项目

npm install // 安装依赖
    
    npm run dev // 启动前台项目

进入 music-manage 文件夹，运行下面命令启动后台管理项目

npm install // 安装依赖
    
    npm run dev // 启动后台管理项目

### 下载地址： ###

[源码下载地址][Link 1]

[Link 1]: https://download.csdn.net/download/gdutxiaoxu/87435768
[572daf0fb7f504dd0040d5b092d3975a.jpeg]: https://img-blog.csdnimg.cn/img_convert/572daf0fb7f504dd0040d5b092d3975a.jpeg
[3647bac3d800470ff7a0e733001ae230.jpeg]: https://img-blog.csdnimg.cn/img_convert/3647bac3d800470ff7a0e733001ae230.jpeg
[2f9b5e146670c2176ae22523e468fa32.jpeg]: https://img-blog.csdnimg.cn/img_convert/2f9b5e146670c2176ae22523e468fa32.jpeg
[0cbf0e37c15bd7ec3ee8907d3a625dbc.jpeg]: https://img-blog.csdnimg.cn/img_convert/0cbf0e37c15bd7ec3ee8907d3a625dbc.jpeg
[362cec9a1147cd6aa49c5bf188abd300.jpeg]: https://img-blog.csdnimg.cn/img_convert/362cec9a1147cd6aa49c5bf188abd300.jpeg
[6eede56897f03678f9fd6b904a2a0cf4.jpeg]: https://img-blog.csdnimg.cn/img_convert/6eede56897f03678f9fd6b904a2a0cf4.jpeg
[980d35f3ca1b291cd3bd68bef61355db.jpeg]: https://img-blog.csdnimg.cn/img_convert/980d35f3ca1b291cd3bd68bef61355db.jpeg
[8f7d5b1af8e62593ff309ce5583d4515.jpeg]: https://img-blog.csdnimg.cn/img_convert/8f7d5b1af8e62593ff309ce5583d4515.jpeg
[ecb7124c9b8504f521a3e285cc5f610d.jpeg]: https://img-blog.csdnimg.cn/img_convert/ecb7124c9b8504f521a3e285cc5f610d.jpeg
[1f7cb2defe86050560c9f2afc86f543d.jpeg]: https://img-blog.csdnimg.cn/img_convert/1f7cb2defe86050560c9f2afc86f543d.jpeg
[96fd81df5a3174aaceaac45cfe17279c.jpeg]: https://img-blog.csdnimg.cn/img_convert/96fd81df5a3174aaceaac45cfe17279c.jpeg
[d6d5ed306056b4e1b9754aacd33f4c3f.jpeg]: https://img-blog.csdnimg.cn/img_convert/d6d5ed306056b4e1b9754aacd33f4c3f.jpeg
[b0582df992dce65c20240df39c166c44.jpeg]: https://img-blog.csdnimg.cn/img_convert/b0582df992dce65c20240df39c166c44.jpeg
[95ed39d667068407226bb1f94e6e12fb.jpeg]: https://img-blog.csdnimg.cn/img_convert/95ed39d667068407226bb1f94e6e12fb.jpeg
[eaaf47f5420b68e27ecfa62be0539de1.jpeg]: https://img-blog.csdnimg.cn/img_convert/eaaf47f5420b68e27ecfa62be0539de1.jpeg
[5f100179855d6aa55843ff98ad76af92.jpeg]: https://img-blog.csdnimg.cn/img_convert/5f100179855d6aa55843ff98ad76af92.jpeg
[9577ceb40fb33644380e5c329a1c9780.jpeg]: https://img-blog.csdnimg.cn/img_convert/9577ceb40fb33644380e5c329a1c9780.jpeg
[d9adf457c5c90ccb3f2aa4d729faec96.jpeg]: https://img-blog.csdnimg.cn/img_convert/d9adf457c5c90ccb3f2aa4d729faec96.jpeg