基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十)
接上期我们想要实现一个歌单内容显示，我们实现了歌单的歌曲列表和其他热门歌单推荐，后续还需要实现评论。
先看成果展示：
原理：我么们通过点击前台的歌单推荐里的歌单，后会跳转到这个页面，实现原理就是通过歌单id，将歌单的信息从数据库中找出来，并且通过歌单与歌曲的关联表，将歌曲列表也找出来，并且将歌曲的歌手ID与专辑ID转化为其他两张表的name属性，看似平常的信息展示，还显示了创建者的用户名，实则是五个表的关联查询，右边区域还有个随机歌单推荐，其中这三部分的mybatis的sql语句如下：
查找歌单信息的SQL语句：
查找歌单信息里的歌单列表的SQL语句：
随机歌单推荐SQL语句：
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语句：
也是一个关联查询，因为我们想要查询到外键关联就必须得用这个。
执行的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：
排名
封面
歌曲名
热度
歌手
专辑
![]()
这样两个页面就已经完成，当然我们还要实现点击歌曲列表可以播放，这个放在最后处理，接下来可以去实现我的音乐主页面的内容，规划是展示个人信息、个人收藏歌单列表、个人收藏歌曲列表、还可以考虑加入个人动态的部分。