加需求的SpringBoot+Vue音乐网站

小熊学Java

发布于 2023-07-16 14:05:18

57000

代码可运行

文章被收录于专栏：全栈学习之路全栈学习之路

运行总次数：0

代码可运行

项目说明

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

项目预览

部分页面预览图片

项目功能

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

项目介绍

文件结构

 .
 ├── avatorImages // 用户头像
 ├── img
 │   ├── singerPic // 歌手图片
 │   ├── songListPic // 歌单图片
 │   └── songPic // 歌曲图片
 ├── song // 存放歌曲
 ├── src
 │   ├── main
 │   │   ├── java
 │   │   │   └── com.xiangli.yin
 │   │   │       ├── config // 配置（跨域）
 │   │   │       ├── controller // 控制层，接收请求返回响应
 │   │   │       ├── mapper // 数据操作层
 │   │   │       ├── domain // 实体类
 │   │   │       ├── service
 │   │   │       │   └── impl // Service 层的接口
 │   │   │       └── MusicApplicationTests.java // 项目入口
 │   │   └── resources
 │   │       ├── mapper // mapper.xml文件，操作数据库
 │   │       ├── static // 存放静态资源
 │   │       ├── templates
 │   │       ├── application.yml // 连接数据库
 │   └── test
 │       └── java
 │           └── com.xiangli.demo // 测试用的
 ├── pom.xml // 添加相关依赖和插件
 └── target

 .
 ├── build // webpack相关配置文件
 ├── config // vue基本配置文件
 ├── node_modules // 包
 ├── index.html // 入口页面
 ├── package.json // 管理包的依赖
 ├── src // 项目源码目录
 │   ├── assets  // 静态资源，图片、js、css 等
 │   ├── api  // 封装请求的 api
 │   ├── mixins // 公共方法
 │   ├── router // 路由
 │   ├── store // 管理数据
 │   ├── components
 │   │   ├── AlbumContent.vue // 展示歌单歌手包含的歌曲
 │   │   ├── Comment.vue // 评论
 │   │   ├── ContentList.vue // 展示歌单歌手区
 │   │   ├── LoginLogo.vue // 登录界面的logo
 │   │   ├── PlayBar.vue // 页面底部的播放控制区
 │   │   ├── ScrollTop.vue // 回到顶部
 │   │   ├── SongAudio.vue // 接收音乐并播放的位置
 │   │   ├── Swiper.vue // 轮播图
 │   │   ├── TheFooter.vue // 页脚
 │   │   ├── TheHeader.vue // 页头
 │   │   ├── TheAside.vue // 播放列表
 │   │   ├── Upload.vue // 修改头像
 │   │   ├── Info.vue // 个人信息区
 │   │   └── search // 搜索区
 │   │       ├── SearchSongLists.vue // 按歌单搜索
 │   │       └── SearchSongs.vue // 按歌手搜索
 │   ├── pages // 组件
 │   │   ├── 404.vue // 404
 │   │   ├── Home.vue // 首页
 │   │   ├── Setting.vue // 设置
 │   │   ├── Login.vue // 登录区
 │   │   ├── LoginUp.vue // 注册区
 │   │   ├── Lyric.vue // 歌词显示区
 │   │   ├── MyMusic.vue // 我的收藏区
 │   │   ├── Search.vue // 搜索区
 │   │   ├── Singer.vue // 歌手区
 │   │   ├── SingerAlbum.vue // 歌手详情
 │   │   ├── SongList.vue // 歌单区
 │   │   └── SongListAlbum.vue // 歌单详情
 │   ├── main.js // 入口js文件
 │   └── App.vue // 根组件
 ├── static // 存放静态资源 
 ├── test // 测试文件目录
 ├── .babelrc // bable 编译配置
 └── .gitignore // 提交忽略的文件配置

技术栈

后端

SpringBoot + MyBatis

前端

Vue + Vue-Router + Vuex + Axios + ElementUI

开发环境

JDK：jdk-8u141

mysql：mysql-5.7以上

node：v12.4.0

IDE：IntelliJ IDEA

项目运行

1、修改配置文件

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

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

3）修改资源路径

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

4、启动项目

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

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

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

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

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

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

项目获取

关注回复音乐网站即可！！！