音乐平台开发记录|基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十) boot|后端|java|spring

接上期我们想要实现一个歌单内容显示，我们实现了歌单的歌曲列表和其他热门歌单推荐，后续还需要实现评论。

先看成果展示：

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

文章图片

原理：我么们通过点击前台的歌单推荐里的歌单，后会跳转到这个页面，实现原理就是通过歌单id，将歌单的信息从数据库中找出来，并且通过歌单与歌曲的关联表，将歌曲列表也找出来，并且将歌曲的歌手ID与专辑ID转化为其他两张表的name属性，看似平常的信息展示，还显示了创建者的用户名，实则是五个表的关联查询，右边区域还有个随机歌单推荐，其中这三部分的mybatis的sql语句如下：
查找歌单信息的SQL语句：

select * from sheet_table where sheet_id=#{sheet_id}

查找歌单信息里的歌单列表的SQL语句：

SELECT so.song_id, so.song_singerId, so.song_albumId, so.song_name, so.song_mp3Url, so.song_thumbsNum, so.song_lyc, so.song_classify, si.singer_name as song_singerName, al.album_name as song_albumName, al.album_imgUrl as song_albumImgUrl FROM song_table AS so LEFT JOIN singers_table as si on so.song_singerId = si.singer_id LEFT JOIN album_table as al on so.song_albumId = al.album_id where song_id in(select sl.songlist_songId from songlist_table as sl where sl.songlist_sheetId=#{sheet_id})

随机歌单推荐SQL语句：

select * from sheet_table where 1=1 order by rand() desc limit 10

controller层的调用逻辑：（Song2为关联歌曲表，有两个外键的name属性）

/** * 前台跳转歌单详情 * @param sheet_id 歌单ID * @return 页面地址 */ @GetMapping(path = "info") public String sheetInfo(@Param("sheet_id")Integer sheet_id,Model model,String page){ Sheet sheet = sheetService.findSheetById(sheet_id); User user = userService.findUserById(sheet.getSheet_userId()); List sheetList = sheetService.findAllSheetByOrder(); PageHelper.startPage(Integer.parseInt(page),10); List songList = songService.findSongBySheetId(sheet_id); PageInfo pageInfo = new PageInfo<>(songList); model.addAttribute("sheetList",sheetList); model.addAttribute("user",user); model.addAttribute("sheet",sheet); model.addAttribute("songList",pageInfo.getList()); model.addAttribute("pageTool",pageInfo); model.addAttribute("statusInfo",2); return "reception/index/index"; }

前端页面实现关键代码：

文章图片创建者: 歌曲列表歌曲名歌手专辑首页上一页下一页尾页其他热门歌单文章图片换一批

那么这样就实现了歌单详情页面，我们接下来可以做一个热门歌曲推荐，首先进行页面展示

华语榜：

文章图片

热门榜：

文章图片

可以看到我将这个部分分为了两个模块，一个是侧边栏榜单导航，一个是歌曲列表，实现原理很简单，侧边栏就是根据类型来进行分类，因为我们添加歌曲的时候，我们是按照类型分类了的，所以在点击侧边栏时，直接根据相应的歌曲类别来寻找即可，采用了利用热度进行排序。
实现排行榜主要的sql语句：

SELECT so.song_id, so.song_singerId, so.song_albumId, so.song_name, so.song_mp3Url, so.song_thumbsNum, so.song_lyc, so.song_classify, si.singer_name as song_singerName, al.album_name as song_albumName, al.album_imgUrl as song_albumImgUrl FROM song_table AS so LEFT JOIN singers_table as si on so.song_singerId = si.singer_id LEFT JOIN album_table as al on so.song_albumId = al.album_id WHERE song_classify = #{song_classify} ORDER BY song_thumbsNum DESC LIMIT 30

也是一个关联查询，因为我们想要查询到外键关联就必须得用这个。
执行的controller层：

/** * 前台跳转热门歌曲榜单 * @return */ @GetMapping(path = "rank") public String rank(Model model,String song_classify){ List songList = new ArrayList<>(); if(song_classify.equals("热门")){ songList = songService.findAllSongByRank(); } else { songList = songService.findSongRankBySongClassify(song_classify); } model.addAttribute("songList",songList); model.addAttribute("song_classify",song_classify); return "reception/index/songRank"; }

前端页面关键代码：

热门榜单文章图片华语榜文章图片欧美榜文章图片韩语榜文章图片日语榜文章图片热门榜华语乐坛排行榜TOP30：欧美乐坛排行榜TOP30：韩语乐坛排行榜TOP30：日语乐坛排行榜TOP30：热门排行榜TOP30：排名封面歌曲名热度歌手专辑文章图片

【音乐平台开发记录|基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十)】这样两个页面就已经完成，当然我们还要实现点击歌曲列表可以播放，这个放在最后处理，接下来可以去实现我的音乐主页面的内容，规划是展示个人信息、个人收藏歌单列表、个人收藏歌曲列表、还可以考虑加入个人动态的部分。