🎧 Vue + SpringBoot + MyBatis 音乐网站

Overview

music-website


license

声明

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


项目说明

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


项目截图

前台截图预览











后台截图预览







功能

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

技术栈

后端

SpringBoot + MyBatis

前端

Vue + Vue-Router + Vuex + Axios + ElementUI


安装

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)创建数据库 将 music-website/music-server/sql 文件夹中的 tp_music.sql 文件导入数据库。

2)修改后端配置文件 去 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 是本项目的后端,用于监听前端发来的请求,提供响应。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 // 启动后台管理项目

License

Copyright (c) 2018 Yin-Hongwei

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

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

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

    opened by liu347881922 31
  • 修改头像后,头像变为透明

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

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

    opened by axh2018 4
  • ConsumerService少个conmentUser函数

    ConsumerService少个conmentUser函数

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

    opened by wwwhahahaha 2
  • 请问一下作者,后台功能问题

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

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

    opened by Xw3C 2
  • 项目都能运行,但是图片音乐资源都加载不出来

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

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

    opened by Xw3C 2
  • Bump webpack-bundle-analyzer from 2.13.1 to 3.3.2 in /music-manage

    Bump webpack-bundle-analyzer from 2.13.1 to 3.3.2 in /music-manage

    Bumps webpack-bundle-analyzer from 2.13.1 to 3.3.2.

    Release notes

    Sourced from webpack-bundle-analyzer's releases.

    First test with Lerna monorepo

    th0r/webpack-bundle-analyzer#98

    Changelog

    Sourced from webpack-bundle-analyzer's changelog.

    3.3.2

    • Bug Fix
      • Fix regression with escaping internal assets (#264, fixes #263)

    3.3.1

    • Improvements

      • Use relative links for serving internal assets (#261, fixes #254)
      • Properly escape embedded JS/JSON (#262)
    • Bug Fix

      • Fix showing help message on -h flag (#260, fixes #239)

    3.3.0

    • New Feature

    • Internal

      • Updated dev dependencies

    3.2.0

    3.1.0

    3.0.4

    • Bug Fix
      • Make webpack's done hook wait until analyzer writes report or stat file (#247, @​mareolan)

    3.0.3

    • Bug Fix

    3.0.2

    ... (truncated)
    Commits
    • 345c3f5 v3.3.2
    • a615815 Merge pull request #264 from webpack-contrib/fix-escape-regression
    • 20f2b4c Fix regression with escaping internal assets
    • 9836649 v3.3.1
    • d1db526 Remove outdated item from troubleshooting section
    • ca34279 Merge pull request #261 from webpack-contrib/relative-links-to-assets
    • 99818f9 Fix changelog
    • 21722d2 Add changelog entry
    • ed99c32 Use relative links for serving internal assets
    • 3ce1b8c Merge pull request #262 from webpack-contrib/proper-js-escape
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • 增加分页功能,删除冗余代码、规范代码格式。

    增加分页功能,删除冗余代码、规范代码格式。

    增加分页功能,删除冗余代码、规范代码格式。

    opened by Yin-Hongwei 0
  • 增加分页功能,删除冗余代码、规范代码格式。

    增加分页功能,删除冗余代码、规范代码格式。

    增加分页功能,删除冗余代码、规范代码格式。

    opened by Yin-Hongwei 0
  • music-client里npm install发生报错

    music-client里npm install发生报错

    image 在npm install的时候发生报错,貌似是python版本的问题 请问python版本要多少呢?

    opened by 2w1nd 3
  • 百度网盘资源失效

    百度网盘资源失效

    静态资源获取不到,可以重新发一份连接吗

    opened by 2020-mmm-dev 5
  • 网页显示不出来

    网页显示不出来

    不知道您现在还能看见吗,我用您的代码项目执行了,然后也做了相关步骤,然后 1 后端运行spring命令的时候是一直在运行的状态 2前端的页面也打开了,但是没有数据是数据库连接的错误吗还是别的, 3然后项目后端的mapper文件idea识别不出来数据库表字段

    图1 f6c73c72bf91b7b4c68c5480a3cd3b0

    图2 f31fb7102a0e3c74519efc554b2d8fa

    图3 1b30b586d8538eae66d840ca3fdf68b 才上大一因为兴趣弄了一下,结果发现啥也不会 唉,希望您有空能看见

    opened by Hanyan179 1
  • 关于node-sass

    关于node-sass

    您好,我在启动client项目的时候遇到许多node-sass包的问题,大概描述如下 1、npm install 顺利没有报错,run 的时候 Error: Cannot find module 'node-sass',很长应该是好几处 2、使用npm安装node-sass出问题,使用cnpm安装,安装后再启动 Error: Node Sass version 6.0.0 is incompatible with ^4.0.0. 3、卸载node-sass,修改版本后,cnpm install [email protected],报错:

    在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。 生成启动时间为 2021/6/11 11:24:34。 MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 "4.0"。

    生成失败。

    MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 "4.0"。

    重新清理node_module后还是这样,请问可能是哪里我设置的不对?望回复,祝好!

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

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

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

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

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

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

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

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

    opened by ryan121099 4
  • 客户端出问题啦

    客户端出问题啦

    image 你好,我部署项目的时候,客户端出错了,如上图 我的node版本:v14.17.0;npm版本:6.14.13 music-manager和music-server都正常 同时,music-client也是可以运行的 image 但是就是无法点击内容,导航栏也丢失了

    opened by GHKosovo 1
  • 页面无法正常显示数据 后台管理也进不去

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

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

    opened by hh857 1
  • 跳转失败

    跳转失败

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

    opened by gz-j 2
  • 请问有没有稍微详细点的文档呢,我本地已经部署成功,想学习下前端代码,感觉有点困难呢,可以有偿购买!

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

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

    opened by Yitozu 2
🎧 Vue + SpringBoot + MyBatis 音乐网站

?? Vue + SpringBoot + MyBatis 音乐网站

尹宏伟 925 Jul 25, 2021
基于springboot和vue前后端分离的博客系统

Hi-Dream-Blog springboot+vue博客系统 项目前言 本项目目前还在完善中,功能也在不断优化中,前端页面编写花费时间较后端少,因为之前写了不少博客样式,有些拿来改改就行,Semantic UI 博客样式 这个是之前写的一个博客样式,本来想打算用springboot和thymel

dateolive 15 Jul 26, 2021
一个简单的权限管理系统,采用前后端分离体系,后端Spring全家桶,前端Vue全家桶,简单、易上手

介绍 一个简单的权限管理系统,采用前后端分离体系,后端Spring全家桶,前端Vue全家桶,简单、易上手。 预览地址。 软件架构 后端 Spring、SpringBoot、Spring MVC、MyBatis Plus、JWT。 前端 Vue、Vue Router、Vuex、I18N。

Lunhui 9 Jul 5, 2021
高仿小米商城管理端,包括商品上下架、商品图片管理、商品推荐、鉴定权限等部分。

tongyimall-admin 高仿小米商城管理端(分为管理前端(tongyimall-admin-vue)和管理后端(tongyimall-admin-api)两部分),是Vue + SpringBoot的前后端分离项目,基于 vue.js,使用 vue-cli3 脚手架,引用 Element

米咔米苏的零食 12 Jul 12, 2021
企业级流程中心(基于flowable和bpmn.js封装的流程引擎,采用Springboot,Mybatis-plus, Ehcache, Shiro 等框架技术,前端采用Vue3&Antd,Vben)

预览 企业数智化 - 流程中心 企业数智化 - 门户 操作演示 - 流程中心 操作演示 - 门户 码云 GitHub 流程后台 门户前台 后台安装 1、安装数据库 新建一个数据库flow 导入数据库脚本:docs/sql/flow.sql 2、配置数据源 修改flow-admin模块下的resour

bruce 95 Jul 25, 2021
🔥SSAFY 4기 FINAL 자율 PROJECT🔥

?? THXSTORE_Link ✌ Name 박대현 성정욱 박상우 최동식 황영준 Profile Position Frontend & UI/UX Frontend & UI/UX 팀장 & Backend Develop Backend Develop & CI/CD Backend De

Park Sangwoo 3 Jun 16, 2021
Lilishop 是一款Java开发,基于SpringBoot研发的B2B2C多用户商城,前端使用 Vue、uniapp开发 系统全端全部代码开源

lilishop是采用JAVA开发的B2B2C多用户商城系统。基于当前流行技术组合的前后端分离商城系统:后端使用 SpringBoot、MybatisPlus、SpringSecurity、redis、ES、mysql、mongodb等主流技术,前端使用vue框架iview、uniapp。支持分布式部署,分布式事务,支持docker、k8s

null 11 Jul 19, 2021
Lilishop 是一款Java开发,基于SpringBoot研发的B2B2C多用户商城,前端使用 Vue、uniapp开发 系统全端全部代码开源

lilishop ui(PC端)。lilishop是JAVA开发的B2B2C多用户商城系统。基于当前流行技术组合的前后端分离商城系统:后后端使用SpringBoot、MybatisPlus、SpringSecurity、redis、ES、mysql、mongodb等主流技术,前后端使用vue框架iview、uniapp。支持分布式部署,分布式事务,支持docker,k8s。

null 13 Jul 13, 2021
Config files for my GitHub profile.

Github太慢的话可以访问Gitee国内地址:https://gitee.com/chendark/chendark 前言 1.之前一直使用hexo做为博客引擎然后上传至github来做静态博客网站,后部署至gitee。但由于站内文章越来越多,导致自己需要一套轻松便捷的博客管理系统来进行管理。 2

Chen 4 Jun 25, 2021
Dckr是一款基于Docker的容器配置及编排的向导式构建工具。(支持Docker、Compose、Kubernets、Rancher的资源文件向导式构建)

Dckr (Docker+ Compose+Kubernets+Rancher) Dckr 是一款基于Docker的容器配置及编排的向导式构建工具。(支持Docker、Compose、Kubernets、Rancher的资源文件向导式构建) 通过它,你可以轻松完成以下操作: 借助语义化UI向导式构建

LiGenSheng 6 May 6, 2021
A Vue.js web application for Freedomotic Open IoT framework

fd-vue-webapp A Vue.js client for Freedomotic framework. Scope of the project This repository contains the implementation of a front end client for Fr

Freedomotic 54 Jul 24, 2021
It is a Vue port of the jQuery-based PivotTable.js

Vue Pivottable It is a Vue port of the jQuery-based PivotTable.js Live Demo link Run Demo $ git clone https://github.com/Seungwoo321/vue-pivottable.gi

null 68 Jul 14, 2021
CoreUI Vue is free Vue admin template based on Bootstrap 4

CoreUI Free Vue Bootstrap Admin Template Description Why we decided to create CoreUI? Please read this article: Jack of all trades, master of none. Wh

CoreUI 2.9k Jul 24, 2021