今天通过SSM(Mybatis、Spring、SpringMvc)框架制作一个小DEMO,尝试模拟一下网易云音乐!
效果展示
简述
声明:本次测试版的音乐播放器,只要是用于自发测试娱乐,并未上线,并非恶意抄袭!
该音乐播放器主要通过Tomcat作为模拟服务器进行数据交互,通过Tomcat将数据库与后端代码以及前端页面相互连接,从而实现最基本的播放、上一首、下一首、以及基本的增删改查等基本功能。如有冒犯,还请多多指教!
环境准备
数据库建表,导入基础数据
CREATE DATABASE wyy_music;
USE wyy_music;
DROP TABLE IF EXISTS `tb_music`;
CREATE TABLE `tb_music` (
`music_id` INT(11) PRIMARY KEY NOT NULL AUTO_INCREMENT, -- 歌曲ID
`music_name` VARCHAR(255) NOT NULL, -- 歌曲名称
`music_album_name` VARCHAR(255) NOT NULL, -- 专辑名称
`music_album_picUrl` VARCHAR(255) NOT NULL, -- 专辑图片路径
`music_mp3Url` VARCHAR(255) NOT NULL, -- 歌曲播放路径
`music_artist_name` VARCHAR(255) NOT NULL, -- 歌手名称
`sheet_id` INT(11) DEFAULT NULL -- 对应的歌单ID
) ENGINE=INNODB DEFAULT CHARSET=utf8;
INSERT INTO tb_music VALUES ('1', '光年之外', '光年之外', 'https://imgessl.kugou.com/stdmusic/20161229/20161229233400375274.jpg', 'https://webfs.tx.kugou.com/202109061310/31fb3f36e2048b2172a70e327bbfc8e3/KGTX/CLTX001/f87095bff0de7c636c3a3b8aac702d76.mp3', 'G.E.M.邓紫棋','1');
INSERT INTO tb_music VALUES ('2', '夜空中最亮的星', '世界', 'https://imgessl.kugou.com/stdmusic/20150719/20150719010047203836.jpg', 'https://webfs.ali.kugou.com/202109061306/1b30ae27a5749debd602507b3bf1fea6/G202/M04/1B/13/aocBAF55G0-ADd0HAD2Y88Efqbw072.mp3', '逃跑计划','1');
INSERT INTO tb_music VALUES ('3', '只要平凡', '只要平凡', 'https://imgessl.kugou.com/stdmusic/20180622/20180622194005815458.jpg', 'https://webfs.ali.kugou.com/202109061309/edb2e89d90e66b9d125950dba107e9eb/KGTX/CLTX001/38aead7ed546b0736791ebb25c3a3951.mp3', '张杰/张碧晨','2');
DROP TABLE IF EXISTS `tb_sheet`;
CREATE TABLE `tb_sheet` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`sheet_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
INSERT INTO tb_sheet VALUES ('1', '热歌榜');
INSERT INTO tb_sheet VALUES ('2', '新歌榜');
INSERT INTO tb_sheet VALUES ('3', '原创榜');
创建MavenWeb工程,导入依赖
<dependencies>
<!-- spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.23</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.3.23</version>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.9.9.1</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>5.3.23</version>
</dependency>
<!-- mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.9</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>2.0.7</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.29</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.9</version>
</dependency>
<!-- 其他相关依赖 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.24</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>ja