搭建个人音乐网站！一个基于 SpringBoot + Vue 的音乐网站！ ...

大家好，我是 Java陈序员。
今天，给大家先容一个基于 SpringBoot + Vue 的音乐网站！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目先容

music-website —— 一个基于 SpringBoot + Vue 的音乐网站，包含网站的客户端和管理端！
功能特色：

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

技能栈：

• 后端：SpringBoot + MyBatis + Redis + Minio
  
• 前端：Vue3.0 + TypeScript + Vue-Router + Vuex + Axios + ElementPlus + Echarts
  
• 部署：Docker
  

项目预览

客户端

管理端

快速上手

开辟环境

• JDK1.8
  
• MySQL5.7
  
• Redis
  
• Node14
  
• MinIO
  
• IDE：IntelliJ IDEA、VSCode
  

前期准备

1、克隆代码

1. git clone https://github.com/Yin-Hongwei/music-website.git

复制代码

假如你想使用 vue2.0 的版本，在下载代码后，可以切到 vue@2.0 的分支，默认是使用 vue3.0.

2、创建数据库

1. CREATE DATABASE tp_music CHARACTER SET utf8 COLLATE utf8_general_ci;

复制代码

3、执行 music-website/music-server/sql/tp_music.sql 脚本，初始化数据库数据
启动后端服务

1、将 music-server 目次以 Maven 项目的情势导入到 IDEA 中
2、修改配置文件 music-server/src/main/resources/application.properties、music-server/src/main/resources/application-dev.properties 中的 Redis、MySQL、MinIO 毗连配置信息
3、执行主启动类 com.example.yin.YinMusicApplication 启动项目
启动客户端

1. # 1、进入到客户端目录
2. cd music-client
4. # 2、安装依赖
5. npm install
7. # 3、启动客户端
8. npm run serve
10. # 4、浏览器访问
11. http://localhost:8080/

复制代码

启动管理端

1. # 1、进入到管理端目录
2. cd music-manage
4. # 2、安装依赖
5. npm install
7. # 3、启动管理端
8. npm run serve
10. # 4、浏览器访问
11. http://localhost:8080/

复制代码

music-website 支持 Docker 部署，项目提供了 docker-compose.yaml、dockerfile 文件举行部署服务端、客户端和管理端。

music-website 可以说基本上实现了一个音乐网站的功能，是一个值得学习交流的开源项目！快去试试吧~

1. 项目地址：https://github.com/Yin-Hongwei/music-website

复制代码

最后

推荐的开源项目已经收录到 GitHub 项目，接待 Star：

1. https://github.com/chenyl8848/great-open-source-project

复制代码

或者访问网站，举行在线欣赏：

1. https://chencoding.top:8090/#/

复制代码

大家的点赞、收藏和评论都是对作者的支持，如文章对你有资助还请点赞转发支持下，谢谢！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。