一款基于SpringBoot + MyBatis + Vue 的音乐网站项目

项目说明

本音乐网站的客户端和管理端使用 VUE 框架来实现,服务端使用 Spring Boot + MyBatis 来实现,数据库使用了 MySQL。

项目功能

  • 音乐播放

  • 用户登录注册

  • 用户信息编辑、头像修改

  • 歌曲、歌单搜索

  • 歌单打分

  • 歌单、歌曲评论

  • 歌单列表、歌手列表分页显示

  • 歌词同步显示

  • 音乐收藏、下载、拖动控制、音量控制

  • 后台对用户、歌曲、歌手、歌单信息的管理

技术栈

后端

SpringBoot + MyBatis

前端

Vue + Vue-Router + Vuex + Axios +  ElementUI

开发环境

JDK:jdk-8u141

mysql:mysql-5.7.21-1-macos10.13-x86_64

node:v12.4.0

IDE:IntelliJ IDEA 2018、VSCode

下载后的资源包如下所示:

71e0eef341c6740995a83791e5700d41.png

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

将上一步下载好的的歌曲及图片,将 data 夹里的文件按照下面的截图存放。

a78376fffb8abb606f141c319dc98aff.png

3、修改配置文件

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

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

3)修改资源路径

修改 music-server/src/main/java/com/example/yin/constant/Constants.java 文件中的 RESOURCE_PATH,否则资源加载不了。

eee2b9a44b493ff3f00b0c6be82566b7.png

4、启动项目

  • 启动 music-server

  • 启动 music-manage

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

npm install // 安装依赖

npm run dev // 启动前台项目

项目预览

前台截图预览

ab80c7dba4eae147c1a1d18e4e52ae65.png d8fc5425c1dc06fad1650f0a89c8afb6.png 419742f8ed5d85d905d1e45d66d5f919.png 8de8089104ad1f22b0cdd7db3bc2cfaa.png acad90a62d76ec1d4670a30da8d09d12.png 80ad644853e136ca74676992366204da.png c506a78acfc661ff512ec178ecf4994d.png 757c597cddb816475eff6081cfb8cec5.png e6b8348d7a0eb5c2f5746606368c5301.png 468338061b73ee0357253dc1d0c685ad.png

后台截图预览

d88dc61eb7413be8f8c66bb223dddf72.png f2378ec63f6883e707c20231c449b277.png 1eb84e109a9689752dc5f2cbfd9cefc7.png 7950d680e93f7ab60660e1b06c035cb0.png f6707a9394455464e029afa085148684.png f140c73bf4466be7cd680019065658e6.png
源码获取
点击下面的公众号卡片
后台回复【123】即可获取

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值