推荐一个 Spring Boot + MyBatis + Vue 音乐网站

今天推荐一个奈斯的音乐网站项目,前端技术栈基于 Vue.js 开发前台页面和后台管理,后端基于SSM(Spring  Boot + MyBatis ),数据存储层使用的是 MySQL。

该系统包含音乐网站基本功能:在线音乐播放、网站用户管理、歌库管理、歌单管理、歌手信息、歌词显示、音乐播放相关功能、后台管理,功能截图如下。


前台页面展示

8167380dad87dda4d4765f7ec4d3bc5d.png

d6b2a5bf9517df2a183b0665a6c2c85e.png

1a2ebe5a00ce1eec23260f180af9b7a0.png

ecc8e0c230600c85be9157a5f0b8808c.png

2a8352ed9e7b40e5bceb501a014e874d.png

e6bf9bf87008f7cc4b83a9314591e8ab.png

946f7a72236447bdf6669f1c4e9c1a01.png

b496102b439161272f952af158d6cdba.png

后台管理页面

57b0eda3cd1b16dde679ceb8d703b87b.png

6c52d39531a6c6c86a2b3ea142e63650.png

56ed4f196266a223674e92ee6f8c38e1.png

8a0e0058355ee2d7b25387d1e3552604.png

523264c8182ff5bd0d1efaf64fe7f8b7.png


02. 部署方式 

1. git下载项目到本地

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

使用上述 git 命令或者网站下载:

7a090c0803fe579aa69c8ee00d686e00.png

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. 修改资源加载路径,否则资源加载不了。

0d6142f084da0cde0a9c3ec7761c2f70.png

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

技术学习交流群

 「架构君」建立了读者群,可以添加我微信拉你进群

2a1899f191d6e39410d022e3965f2517.png

添加时可以备注城市+职位+年限】

分享一套家庭理财系统(附源码)

2021-09-20

a6846cde759306af0b26b6eaeb6f3ebf.png

推荐一套开源通用后台管理系统(附源码)

2021-08-21

0456584f95e41825dc4b00fad6b6ad11.png

推荐一个酷炫的监控系统

2021-08-07

b08025eff06339f8cea1cb0007c074db.png

从朋友那里搞了 20 个实战项目,速领!

2021-06-14

0282bab242721c322271984ffd20d4ab.png

推荐一个完善的停车管理系统,物联网项目springboot,附源码

2021-05-30

60a21fba5a36d9f128e40d0a1efe186f.png

推荐一个互联网企业级别的开源支付系统

2021-09-04

a1821f02e87328ed05a6bc7a241d3861.png

一款神仙接私活儿软件,吊到不行!

2021-07-31

116382e6c43a07c94ef1eaa132193806.png

推荐 10 款超实用的企业级开源应用!

2021-10-17

2a441fc432313d06fda5105726aec7b9.png

开放平台 SDK 设计实践!

2021-10-13

6551fc4c70af1193c2c0e66328803dcf.png

“淘宝” 开放平台接口设计思路

2021-10-07

b1a9667719a1fd96e4e9b8cd1192b713.png

Spring中经典的9种设计模式

2021-10-05

504d9e66c01c39e953cce05b523be975.png

9e8e09264e398584e7b7c0c04cd83c73.png

如有收获,点个在看,诚挚感谢f9bda07513412a4c9cc7be8838154e04.png

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值