音乐平台开发记录
关注
分享
扫一扫
文章平均质量分 64
很菜的小jiang
好好学习，天天向上
展开
-
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十四)--audio控件重写音乐播放
本次花了很大精力去完成了播放界面，虽然歌词同步这里没完成，但后续还是可以完善的，这次我重写了audio控件，让audio是自己想要的样式，先看成果图。这个界面参考的是酷狗音乐网页版的布局，感觉自己还原的还不错。我看网上都没有详细介绍audio控件的重写，这次我花费了挺多经历去了解这个，所以我决定详细介绍一下。先看我的布局，播放控件布局如下：这个布局就不介绍了，自己用div嵌套或表格就可以完成这个效果。先介绍audio的属性：src属性<！--用于告诉video标签..原创 2022-05-21 23:53:18 · 7829 阅读 · 12 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十三)
本次添加了鼠标移动到歌曲列表时相应位置出现播放键、添加进播放列表键、下载键、添加到歌单键，还实现了简单的评论功能，由于主要功能不是评论，所以没有写回复功能，后面也可以添加这个功能，毕竟博客系统写过。成果展示：先展示鼠标指到歌曲列表时出现四个键：这里我们的鼠标指向的是第一个，因为这个截图原因所以没有出现鼠标，可以看到我们歌曲列表出现了四个键，其中第一个是播放和第二个添加播放列表我们还没实现，所以先展示第三个按钮，点击下载 ：可以看到我们直接进行了下载，这个实现原理简单，之后进行讲..原创 2022-05-19 17:33:44 · 378 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十二)
上期说到歌手部分，当时还添加啥歌手以及专辑与歌曲，所以不能体现分类模块，花了一两天搜集了一百多张专辑和三百多首歌曲添加了进去，先看歌手模块部分。这是未分类的模块，我们点击推荐男歌手：再点击一个华语男歌手：点击欧美歌手：更多的分类就不用展示了，做完这个模块之后还添加了歌手详情页面，点击头像或歌曲列表名称都可以点进歌手详情界面：点击周杰伦头像：这个单曲列表，我们还可以点击专辑：点击任意一张专辑进入专辑详情：可以在这个界面点击任意的该歌手...原创 2022-05-18 12:02:45 · 384 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十一)
接上期，本次实现了我的音乐模块的展示，并且新增了添加歌曲为我喜欢、收藏歌单功能，先展示成果界面。可以看到左边为两个模块，一个为自建歌单，一个为收藏歌单，自建歌单就是用户自己新建的歌单，收藏歌单就是收藏别人的歌单，我喜欢模块参考酷狗音乐为默认歌单，可以通过点击歌曲列表的爱心符号实现收藏。为了实现查询歌曲列表时同时判断用户是否添加歌曲为我喜欢，这样就要涉及一个关联表，这个关联表用于存放歌曲ID与用户ID的映射关系：usersong_table：在SQL查询语句进行查询时，我们接上...原创 2022-05-15 13:17:29 · 771 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十)
接上期我们想要实现一个歌单内容显示，我们实现了歌单的歌曲列表和其他热门歌单推荐，后续还需要实现评论。先看成果展示：原理：我么们通过点击前台的歌单推荐里的歌单，后会跳转到这个页面，实现原理就是通过歌单id，将歌单的信息从数据库中找出来，并且通过歌单与歌曲的关联表，将歌曲列表也找出来，并且将歌曲的歌手ID与专辑ID转化为其他两张表的name属性，看似平常的信息展示，还显示了创建者的用户名，实则是五个表的关联查询，右边区域还有个随机歌单推荐，其中这三部分的mybatis的sql语句如下：查找歌.原创 2022-05-13 12:07:11 · 2139 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志九)
今天将歌单功能完善，之前说过如果是后台添加歌单的话，是以酷心音乐官方添加的，所以我们只用在添加那里将歌单所属ID设置为酷心音乐官方的ID就行，添加歌单的过程不做介绍，就是普通的添加，那么歌单里面肯定还有歌曲，我们如何从后台添加歌曲进歌单呢，这是一个值得思考的问题，我首先便想到了关联表。因为一个歌单可以由多首歌曲组成，而一首歌曲也可以被多个歌单所收藏，这两个实体类的关系就要借助关联表来实现，关联表songlist建表如下：·这样我们只需...原创 2022-05-10 11:30:50 · 532 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志八)
写了前台后，需要一个新的歌单表，并且也发现其他表都有点不完善，于是重新完善了一下数据表。评论表：歌单表：专辑表：其他几个表没有太大改动，还加了几个关联表，但是还没有开始应用。那么后台界面也要跟着改变一下，这里展示结果：优先添加歌手：通过搜索歌手来查看已经添加的专辑：专辑里可以点击查看具体的歌曲，当然我没有设置里面更改与删除，因为这是歌曲管理的功能：通过搜索歌手名字可以查询该歌手的歌曲信息：这里的专辑与歌手选择都是要存在才能选择，...原创 2022-05-09 13:27:54 · 266 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志七)
中间隔了有一段时间，因为去学了一些其他东西，加上还有课程，今天专门用了大半天来写前台界面与登录注册的UI设计，网上的模板我都不太想用，我就用框架来自己搭建前台，我参考了三大音乐网站的首页设计，基本都是分为导航栏、二级导航栏、轮播图（QQ音乐没有）、下面就是歌单啥的了，就按照这个进行设计。先进行今天写的页面展示，只写了登录注册、引导首页、网站首页：登录注册：...原创 2022-05-07 23:34:55 · 1213 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志六)
今天的目标是利用bootstrap整合一下页面，后续会改成vue的方式。整合了一天，整合的结果如下：用户管理模块：歌曲管理模块：歌手管理模块：评论管理模块：专辑管理模块：添加与修改界面拿歌曲部分举例：添加歌曲界面：修改歌曲界面：代码模块，首先是公共html，也就是导航栏：<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org">...原创 2022-04-29 21:13:19 · 1806 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志五)
完成了所有后台的增删查改，包括歌曲表、歌手表、专辑表、评论表，这部分增删查改代码因逻辑重复就不用再贴上来了。给一个后台整体的测试流程：歌曲管理模块：进行了根据歌手分类的，想查找歌曲先得搜索歌手才行，这样不仅加快了读取速度，也使得管理员更好的维护。点击修改点赞为200：点击提交：测试成功通过！点击歌手管理模块：当前页面为华语板块歌手点击添加英文板块的歌手：点击提交并查看英文板块的歌手：点击修改泰勒粉丝数为3000w：点击提交，修改成功，.原创 2022-04-28 21:40:55 · 1372 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志四)
这两天着手写歌曲部分，歌曲部分后台的增删查改，由于歌曲表有两个外键，所以在进行写的时候需要提前把歌手、专辑表的逻辑进行实现，之后只贴部分代码实现：跳转歌曲列表界面，如果直接用全部歌手进行跳转的话，加上外键的查询，数据量一大，那对MYSQL是不小的压力，先未进行SQL优化的前提下，采用歌手分类的方法查询歌曲列表就显得比较轻便，数据量再大也不会超过几百条，对于mysql来说轻而易举。那么就要采取通过歌手ID来寻找歌曲列表，由于歌手ID在歌手表中为外键，而且需要传参加入，那么在第一次访问时可以将其设置为1原创 2022-04-27 15:44:19 · 344 阅读 · 0 评论 -
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志三)
因为分了前后台功能，那就来分析一下，前台是用户自己登陆，那么他可以点进自己个人信息界面，那么他可以进行修改自己的信息，但一般不具备删除个人信息的功能，那么在后台，管理员一般也没有权限自己去改用户的信息，这是不被允许的，也不能自己添加用户，因为用户都是自己注册添加的，不能由后台去添加生成，但后台管理员可以进行封号删除的操作，所以总结下来，前台具备查增改，后台具备查删功能。接到上回对UserController.java的进一步补充及完善，我们删除上次写的用户后台修改功能，添加用户后台查看以及删除功能,其中原创 2022-04-24 21:39:25 · 1129 阅读 · 0 评论 -
基于springboot+vue(layui)+mysql下的自创音乐网站平台--CrushMusic(开发日志二)
基于springboot+vue(layui)+mysql下的自创音乐网站平台--CrushMusic(开发日志二)原创 2022-04-22 10:06:34 · 348 阅读 · 0 评论 -
基于springboot+vue(layui)+mysql下的自创音乐网站平台--CrushMusic(开发日志一)
本人是一名大三学生，最近学习完springboot，打算从今天开始，自己尝试写一个音乐平台，由于之前已经写过博客与管理系统，于是自己这次选择写一个新的东西，自己没有尝试过的一种类型，水平有限，自己只是将博客平台记录自己的成长，大佬见谅。运行环境：jdk、idea、navicat管理下的mysql。自己先花了一点时间，初步定了个简略的思维方向，初始的功能不能想太多，不然会影响自己的思路，先将整体的框架想出来，后期完成了再添加不同的功能，如下图。思维导图：我先只想到了建立这些表，后面根据原创 2022-04-11 10:18:34 · 1584 阅读 · 0 评论