yin-hongwei / music-website

🎧 Vue + SpringBoot + MyBatis 音乐网站

music-website

声明

这项目我一直作为技术分享，不做收费（版权归我个人独有，大家拿来学习交流随时欢迎，拒绝商用）。希望大家可以尊重下我的劳动成果，谢谢。

项目说明

本音乐网站的客户端和管理端使用 Vue 框架来实现，服务端使用 Spring Boot + MyBatis 来实现，数据库使用了 MySQL。实现思路可以看 这里；项目启动方法看文章末尾。

项目预览

前台截图预览

后台截图预览

项目功能

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

技术栈

后端

SpringBoot + MyBatis + Redis

部署

docker

前端

Vue3.0 + TypeScript + Vue-Router + Vuex + Axios + ElementPlus + Echarts

开发环境

JDK： jdk-8u141

mysql：mysql-5.7.21-1-macos10.13-x86_64（或者更高版本）

redis：5.0.8

node：14.17.3

IDE：IntelliJ IDEA 2018、VSCode

下载运行

1、下载项目到本地

git clone [email protected]:Yin-Hongwei/music-website.git

# 上面下载慢可以用下面这个
git clone [email protected]:Yin-hongwei/music-website.git

如果你想使用 vue2.0 的版本，在下载代码后，可以切到 [email protected] 的分支，默认是使用的vue3.0。

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

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

注意：资源整理了一下，按照下面的截图存放。

3、修改配置文件

1）创建数据库 将 music-website/music-server/sql 文件夹中的 tp_music.sql 文件导入数据库。

2）修改用户名密码 修改 music-website/music-server/src/main/resources/application.properties 文件里的 spring.datasource.username 和 spring.datasource.password；

4、启动项目

• 启动管理端：进入 music-server 文件夹，运行下面命令启动服务器

// 方法一
./mvnw spring-boot:run

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

• 启动 redis：直接在终端输入下面命令

redis-server

下载地址：https://redis.io/

Mac 安装使用示例：https://www.jianshu.com/p/ce27d9ab4f8c

• 启动客户端：进入 music-client 目录，运行下面命令

npm install // 安装依赖

npm run serve // 启动前台项目

• 启动管理端：进入 music-manage 目录，运行下面命令

npm install // 安装依赖

npm run serve // 启动后台管理项目

5、常见问题

1、图片、音乐加载失败 把 music-website/music-server 目录下的 img、song 目录移动到 music-website 目录。

2、音乐播放不了 可能是音乐损毁了，重新更换一下音乐资源。

6、部署在linux上，用 docker【本地运行可以忽略】

将以下东西存储到Linux服务器上：

还有编译好的jar包，都放到同一目录里面，如下：

docker compose up --build

运行结果：

赞助

如果此项目对你确实有帮助，欢迎给我打赏一杯咖啡～😄

License

Copyright (c) 2018 Yin-Hongwei

music-website's Issues

跳转失败

用户端登录后 跳转主页失败，交换了两行代码顺序好像可以了。也可能是我电脑问题/music-client/src/pages/LoginIn.vue

怎么在idea上启动项目

你好 我想知道这项目是怎么启动的 怎么在idea上启动

sv \\'d

music_client注册与登录问题

1.music_client注册用户，点击确定，页面没有反应，控制台出现如下错误：
TypeError: Cannot read property 'status' of undefined
at eval (http.js?616e:35)

2.music_client登录用户，点击确定，页面和控制台都没有反应

数据库表collect是用来干啥的，求解

项目成功运行，但无法获取到图片及音乐资源

您好，当我同时运行前、后端以及数据库服务时，出现的问题为：无法正确获取到音乐以及图片资源。
错误描述：当我进入 client 页面时，无法载入图片资源；当我点击播放任意歌曲时，无法载入音乐资源；
我已经尝试过修改：music-server/src/main/java/com.example.demo.controller 中对应的资源路径位置，如：file:C:\\img\\songPic ，但似乎没有效果。

我究竟是哪里做错了？

以下是我的错误截图：

以下我的项目结构：

以下是我的路径配置

并且当我查看 mvn 的界面时，提示信息为：

• WARN 20796 --- [nio-8888-exec-4] o.s.w.s.resource.PathResourceResolver : Resource path "a32415ca9a21f6f9a1d99b2731f224b5d319c424.jpg" was successfully resolved but resource "file:C:/music-server/img/a32415ca9a21f6f9a1d99b2731f224b5d319c424.jpg" is neither under the current location "file:C:/music-server/img/songListPic" nor under any of the allowed locations [URL [file:C:/music-website/music-server/img/songListPic]]
• java.lang.ArithmeticException: / by zero

Linux环境下 music-clinet目录下 npm install 失败

windows 试了 很顺利。
但是linux系统下 一直卡在 运行 npm install 或 npm install node-sass 就会一直卡在
reify:element-ui timing reifyNode:node_modules/core-js
最后导致 node-sass安装失败 可以分享一下 linux系统下生成的 node_modules吗

客户端出问题啦

你好，我部署项目的时候，客户端出错了，如上图
我的node版本：v14.17.0；npm版本：6.14.13
music-manager和music-server都正常
同时，music-client也是可以运行的

但是就是无法点击内容，导航栏也丢失了

歌曲的上传下载功能怎么使用 好像没有

歌曲的上传下载功能怎么使用 好像没有

后台xml文件SQL语句处理问题

您好，请问您的SQL语句是通过mybatis生成的还是手动编写的呢。因为在xml内发现了自动生成的注释说明，如果要手动修改需要怎么处理。

建议写个详细的开发文档

项目确实不错，要是怕别人倒卖可以别上传数据库，整个线上的演示，没有文档学起来还是很不方便

为什么我后端项目启动会抱这个错，求解答

Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:2.1.1.RELEASE:run (default-cli) on project demo: An exception occurred while running. null: InvocationTargetException: Connector configured to listen on port 8888 failed to start -> [Help 1]

页面无法正常显示数据 后台管理也进不去

大佬能加个qq聊聊吗 为啥我npm run build --report会出这样的错误，而且我页面没有数据，后台点击登录页面也没有反应

怎样将VUE前端项目部署在apache 服务器呢? 由于对于VUE不是很熟悉，还请帮助下。

music-client 项目中.我修改了如下，music是我新建的目录
config/index.js


src/router/index.js 配置如下：

部署后出现如下这样问题：

后端的项目接口是可以调用的：

带时间轴的歌词在哪弄的呀

请问楼主Search组件中handleChangeView方法后面传递的数字有什么作用吗？

handleChangeView('Songs', 0)
handleChangeView('SongLists', 1)

这个0和1有什么意义呢？

ConsumerService少个conmentUser函数

图片传不上来，您看一下吧，在LoginController的第234行显示函数丢失，

执行sql报了一个[Err] 1064

sql语句：SELECT sum(score) as score from rank where songListId =5
报错：[Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'rank where songListId =5' at line 1
帮忙看下什么问题导致的，谢谢啦

请问有没有稍微详细点的文档呢，我本地已经部署成功，想学习下前端代码，感觉有点困难呢，可以有偿购买！

请问有没有稍微详细点的文档呢，我本地已经部署成功，想学习下前端代码，感觉有点困难呢，可以有偿购买！

项目都能运行，但是图片音乐资源都加载不出来

路径也改了
"file:G:\Study\IntellijIDEA\MusicProgram\new\music-website-master\music-website-master\music-server\img\songListPic"

无法登入管理界面和播放歌曲

数据库的配置信息已经修改为本机 按照您的文件结构将data下载解压后放入了项目 歌单歌曲啥的都能加载出来 就是无法播放 而且用数据库中有的管理员账号admin 密码123点击登录没有反应 请问是怎么一回事呢

Song返回中文url乱码问题-新人学习

嗨大佬，我这边在Centos7上部署了你的项目
在点击播放歌曲的时候，返回中文及空格字符变为了乱码，导致无法找到歌曲，进而无法播放
请问大佬该如何解决呢？

楼主，用户前台音乐收藏后无法取消收藏

在播放栏那里点击爱心的标志可以收藏，再次点击的时候就会提示已收藏。看了下楼主更新的记录，说是取消了取消收藏的bug，应该是有实现取消收藏的业务才对。。。

请问 TheHeader组件中的图标是 svg 画出来的吗？新人如何学习？

哥们 是打包成jar吗，部署的话用什么运行？

关于用别的数据库做该项目页面无法歌曲内容的问题。

楼主你好，我现在用的是另外一个数据库（opengauss，表已经导入了）实现该项目，然后发现页面无法显示内容，所以想向你请教一下是什么原因？
我对源代码做的改动只有以下的地方，其他均无改动：
1.修改application.properties里数据库的信息

2.以及generatorConfig.xml里关于数据库的信息

<jdbcConnection driverClass="org.postgresql.Driver" connectionURL="jdbc:postgresql://......./postgresql?serverTimezone=Asia/Shanghai&amp;nullCatalogMeansCurrent=true" userId="abcd" password="abcdefg"/>

这段信息
3.pom里增加依赖：

4.Controller,里也修改了ConsumerController等图片来源地址

结果是页面无法显示歌单歌曲等，我用Mysql可以实现,请问是什么原因呢。

修改头像后无法显示

是不是也是路径的问题？按照楼主给的步骤部署ok后，歌单歌手图片都显示正常

启动客户端问题

1.运行完npm install，再运行npm run dev时候报错了。
内容如下：
ERROR Failed to compile with 29 errors 10:31:36
error in ./src/assets/css/index.scss

Module build failed: Error: ENOENT: no such file or directory, scandir 'E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\vendor'
at Object.readdirSync (fs.js:872:3)
at Object.getInstalledBinaries (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\extensions.js:133:13)
at foundBinariesList (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:20:15)
at foundBinaries (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:15:5)
at Object.module.exports.missingBinary (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:45:5)
at module.exports (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\binding.js:15:30) at Object. (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at getDefaultSassImpl (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\sass-loader\dist\index.js:198:10)
at Object.loader (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\sass-loader\dist\index.js:80:29)
@ ./src/assets/css/index.scss 4:14-207 13:3-17:5 14:22-215
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error in ./src/pages/404.vue

Module build failed: Error: ENOENT: no such file or directory, scandir 'E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\vendor'
at Object.readdirSync (fs.js:872:3)
at Object.getInstalledBinaries (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\extensions.js:133:13)
at foundBinariesList (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:20:15)
at foundBinaries (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:15:5)
at Object.module.exports.missingBinary (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:45:5)
at module.exports (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\binding.js:15:30) at Object. (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at getDefaultSassImpl (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\sass-loader\dist\index.js:198:10)
at Object.loader (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\sass-loader\dist\index.js:80:29)
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-d989eb38","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/404.vue 4:14-368 13:3-17:5 14:22-376
@ ./src/pages/404.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error in ./src/App.vue

Module build failed: Error: ENOENT: no such file or directory, scandir 'E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\vendor'
at Object.readdirSync (fs.js:872:3)
at Object.getInstalledBinaries (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\extensions.js:133:13)
at foundBinariesList (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:20:15)
at foundBinaries (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:15:5)
at Object.module.exports.missingBinary (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\errors.js:45:5)
at module.exports (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\binding.js:15:30) at Object. (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at getDefaultSassImpl (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\sass-loader\dist\index.js:198:10)
at Object.loader (E:\写程序软件\node.js\node\node_modules\music-client\node_modules\sass-loader\dist\index.js:80:29)
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-356 13:3-17:5 14:22-364
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

。。。。。。。。。。。。。。。。。。。。。。。。。内容还好多。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

2.启动之后，进入首页的地址是多少？

为什么我前端没有东西，各种功能都无法实现，后台管理也进不了

@Yin-Hongwei 我刚运行，然后看到前端的页面基本上是一片空白的，没歌没图片没声音，注册不行，登录不行。后台管理页面也一直登录不了。现在不知道哪里出了问题。

歌词如何显示的问题

您好，请问您项目中的歌词滚动显示功能应该如何使用，我这边其它的功能都能正常使用，就是没有找到歌词滚动显示功能应该如何使用，前端没有看到相关的接口。

建议

管理员界面好像不用登录就可以通过路径访问

MyBatis Generator生成了mapper文件之后，有些查询的方法是之后加进去的吗？

自己尝试了下MyBatis Generator这个包运行效果，有些需要的查询方法没有生成出来，想请问下楼主，所有的查询方法都是通过MyBatis Generator生成的吗？还是说有一部分方法是MyBatis Generator生成后再手动写进mapper里的？

修改头像后，头像变为透明

设置中，修改头像后，头像变为透明。
而且，我已经按照read配置好了资源路径，前台图片还是显示不出来。

路径有中文会影响吗

关于跨域问题

为啥会出现跨域问题
Access to XMLHttpRequest at 'http://localhost:8888/singer' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
webpack-internal:///./node_modules/_babel-loader@7.1.5@babel-loader/lib/index.js!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/pages/Home.vue:55 TypeError: Cannot read property 'status' of undefined
at eval (webpack-internal:///./src/api/http.js:43)

关于音乐取消收藏问题

楼主，我看了一下后端代码有取消收藏的功能，但是前端没有相关取消收藏功能的按钮

请问一下作者，后台功能问题

后台系统歌单管理里面的歌单是不能添加歌曲是吗？

博主你好，我在csdn发现了一个类似于贩卖你的项目的人，虽然没有十足的证据，但是他那一篇博客只贴了一堆图片，如果真的是学习这有什么必要记录，我已经联系了他删除文章，您最好再去告知一下他，这是地址https://blog.csdn.net/meng851392528/article/details/106019887

music-client运行不起来

您好，我在music-client目录下运行npm install安装了所有的依赖包，但是尝试npm run dev的时候报这样的错误。
错误：

These dependencies were not found:

• vue-router/types in ./src/main.js
• vue/types in ./src/main.js
• vuex/types in ./src/main.js, ./src/mixins/index.js

这几个包我看了以下是已经安装在node_modules文件夹下面的，

不知道为什么vue没办法识别并成功引入呢？

运行前端后，网页上只有Cannot GET /

这里挂侵权地址，有发现的欢迎补充，谢谢

新增用户同时上传头像

楼主请教下，如何再新增用户时，可以让用户上传头像，这个逻辑怎么实现呢？

更新图片问题

前台和后台更新图片都有问题,前台是更新完显示上传成功,但图片没了
后台一直上传不成功

构建失败

你好，我能加您一下，请教您一些问题嘛，我麻了，连构建项目都没有成功

后台管理 歌曲信息那里刷不出歌

给了这个提示
vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: Cannot read property 'forEach' of null"

found in

--->

at src\components\page\SongPage.vue
at src\components\common\Home.vue
at src\App.vue

有个问题请教哈，就是随着播放是如何定位到歌词位置的呢？

新人来学习，请这个就是前后端分离吗？

之前看到博主有令一个链接，就是有讲原理的，超详细，不知道为什么打不开了，凭记忆好像是前后端分开的，算是前后端分离吗？谢谢啦

运行环境问题

你好，想问下，你开发这个音乐网站 用的软件（需要下载什么软件，软件版本），越详细越好，麻烦你了

项目很不错，但是后端那块需要重构的比较多。

比如，使用SpringBoot开发的话，你接受参数用@requestbody 、@RequestParam、@PathVariable 比较多。然后，Controller 不能太多业务逻辑。

搜索栏一直无法查询到歌曲