今天推荐一个奈斯的音乐网站项目,前端技术栈基于 Vue.js 开发前台页面和后台管理,后端基于SSM(Spring Boot + MyBatis ),数据存储层使用的是 MySQL。
该系统包含音乐网站基本功能:在线音乐播放、网站用户管理、歌库管理、歌单管理、歌手信息、歌词显示、音乐播放相关功能、后台管理,功能截图如下。
前台页面展示
后台管理页面
02. 部署方式
1. git下载项目到本地
git clone https://github.com/Yin-Hongwei/music-website.git
使用上述 git 命令或者网站下载:
2. 下载资源
该项目中的静态资源需要自己下载,包括网站依赖的歌库及歌曲封面,将 data 夹里的文件直接放到 music-server 文件夹下。
这一块可以其实可以爬取网上的音乐信息,做一个自己的数据库或者调用开放的 Api,静态资源已上传到百度云。
链接: https://pan.baidu.com/s/1Qv0ohAIPeTthPK_CDwpfWg 提取码: gwa4
3. 修改配置文件
创建数据库:将 music-website/music-server/sql 文件夹中的 tp_music.sql 文件使用 idea 或者 navcat 导入数据库。
修改后端配置文件:
1. 修改数据源用户名和密码配置
2. 修改资源加载路径,否则资源加载不了。
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 // 启动后台管理项目
项目源码
点击下方卡片
关注后回复【1818】获取
END
技术学习交流群
「架构君」建立了读者群,可以添加我微信拉你进群
添加时可以备注【城市+职位+年限】
![a6846cde759306af0b26b6eaeb6f3ebf.png](https://i-blog.csdnimg.cn/blog_migrate/e92baea9d9e2f85ac4bdb2962d547f62.png)
![0456584f95e41825dc4b00fad6b6ad11.png](https://i-blog.csdnimg.cn/blog_migrate/966bcd436662a611c73afd47d8e53479.png)
![b08025eff06339f8cea1cb0007c074db.png](https://i-blog.csdnimg.cn/blog_migrate/f27f1ae436dbaabc8c9a614d265240ba.png)
![0282bab242721c322271984ffd20d4ab.png](https://i-blog.csdnimg.cn/blog_migrate/e599b35f1babb8cd801402f321c1239d.png)
推荐一个完善的停车管理系统,物联网项目springboot,附源码
![60a21fba5a36d9f128e40d0a1efe186f.png](https://i-blog.csdnimg.cn/blog_migrate/bc73be833f4f3d6b3ef43f348954782e.png)
![a1821f02e87328ed05a6bc7a241d3861.png](https://i-blog.csdnimg.cn/blog_migrate/a25b27162128d8afd292a56b40ad24fc.png)
![116382e6c43a07c94ef1eaa132193806.png](https://i-blog.csdnimg.cn/blog_migrate/14a35ebff06ce0b269e2b3489d3d1f8b.png)
![2a441fc432313d06fda5105726aec7b9.png](https://i-blog.csdnimg.cn/blog_migrate/2651176ec6f4c3ec034c71de50b4aeb8.png)
![6551fc4c70af1193c2c0e66328803dcf.png](https://i-blog.csdnimg.cn/blog_migrate/bd6b901f96f1eb160fe7eaa8e6278e2d.png)
![b1a9667719a1fd96e4e9b8cd1192b713.png](https://i-blog.csdnimg.cn/blog_migrate/88911c62578dc9c84b5683014e9a8ab1.png)
![504d9e66c01c39e953cce05b523be975.png](https://i-blog.csdnimg.cn/blog_migrate/150f6f49ca19fd6be55376410c15ef7e.png)
如有收获,点个在看,诚挚感谢