基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志九)

本文链接：https://blog.csdn.net/qq_46418539/article/details/124682307

今天将歌单功能完善，之前说过如果是后台添加歌单的话，是以酷心音乐官方添加的，所以我们只用在添加那里将歌单所属ID设置为酷心音乐官方的ID就行，添加歌单的过程不做介绍，就是普通的添加，那么歌单里面肯定还有歌曲，我们如何从后台添加歌曲进歌单呢，这是一个值得思考的问题，我首先便想到了关联表。

因为一个歌单可以由多首歌曲组成，而一首歌曲也可以被多个歌单所收藏，这两个实体类的关系就要借助关联表来实现，关联表songlist建表如下：·

这样我们只需要在添加歌曲进歌单时，将二者关系加进这张表，要查询的时候读出来即可，同理，想要一首歌曲添加进多个歌单也可以通过这张表进行呈现，这就是关联表的作用。

这里我们来实现后台添加歌曲进歌单，先展示歌单管理的界面：

（注意：在上一节中，前台展示的歌单列表是静态的，现在有了歌单管理部分，我们将其存储进数据库，前台进行读取展示）

可以看到，除了基本的增删查改（增删查改不再介绍），我们还多了一个按钮，这个按钮就是管理歌曲列表，由于当前页面展开的话，面积太小，不利于我们后续的列表展示，我们点击后可以进入一个新界面，界面如下：

可以看到我将其分为了三部分，第一部分为搜索歌曲，第二部分为搜索歌曲列表，第三部分为当前歌单的歌曲列表，这里我已经添加了三首歌进入这个歌单，这三首歌都是在歌曲列表里存在的才可以搜索出来进行添加，下面我来演示添加第四首歌进入歌单：

点击文本框，输入“反方向的钟”，点击搜索：

可以看到后台已经帮我们查出来了搜索结果，这个时候点击添加：

可以发现已经添加进去了，这个时候我们查看数据库的songlist关联表：

可以发现刚才ID为15的歌曲《反方向的钟》已经与ID为5的歌单《周王林陶R&B歌王之争》进行了绑定添加，二者映射关系就此建立。

我们也可以对歌单搜索列表与歌单歌曲列表进行分页处理，这里就不展示了。

接下来我们将后台添加的歌单在前台进行展示，只需要进入首页时进行分页查询即可，此时的歌单不再是静态的，而是根据数据库的信息来的，因此之后可以进行点击进入查看歌曲，并且播放。