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

接上期，本次实现了我的音乐模块的展示，并且新增了添加歌曲为我喜欢、收藏歌单功能，先展示成果界面。

 

可以看到左边为两个模块，一个为自建歌单，一个为收藏歌单，自建歌单就是用户自己新建的歌单，收藏歌单就是收藏别人的歌单，我喜欢模块参考酷狗音乐为默认歌单，可以通过点击歌曲列表的爱心符号实现收藏。

为了实现查询歌曲列表时同时判断用户是否添加歌曲为我喜欢，这样就要涉及一个关联表，这个关联表用于存放歌曲ID与用户ID的映射关系：

usersong_table：

 

在SQL查询语句进行查询时，我们接上期的查询语句，只需要根据当前用户ID左连接一个usersong表即可：

    
        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,
	        us.usersong_userId AS song_likeUserId
        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
	        LEFT JOIN usersong_table AS us ON so.song_id = us.usersong_songId AND us.usersong_userId = #{user_id}
        WHERE
	        song_id IN ( SELECT sl.songlist_songId FROM songlist_table AS sl WHERE sl.songlist_sheetId = #{sheet_id})
    

其中song_likeUserId就是用来锁定当前歌曲列表是否被用户添加进我喜欢，我的音乐对应的controller语句为：

@GetMapping(path = "myMusic")
    public String myMusic(Model model,@Param("sheet_userId")Integer sheet_userId,@Param("sheet_Id")Integer sheet_id,HttpServletRequest req){
        HttpSession session = req.getSession();
        User user1 = (User) session.getAttribute("LoginUser");
        Sheet sheet = new Sheet();
        List songList = new ArrayList<>();
        if(sheet_id==0){
            //默认歌单：我喜欢
            sheet = new Sheet(0,"我喜欢","/images/background/我喜欢.png",0,sheet_userId,"默认歌单");
            songList = songService.findSongByUserAndSong(user1.getUser_id());
        }else {
            //自建歌单
            sheet = sheetService.findSheetById(sheet_id);
            songList = songService.findSongBySheetId(sheet_id,user1.getUser_id());
        }
        List mySheetList = sheetService.findSheetByUserId(user1.getUser_id());
        User user = userService.findUserById(sheet.getSheet_userId());
        List colSheetList = sheetService.findColSheetByUserId(user1.getUser_id());
        model.addAttribute("mySheetList",mySheetList);
        model.addAttribute("songList",songList);
        model.addAttribute("colSheetList",colSheetList);
        model.addAttribute("user",user);
        model.addAttribute("sheet",sheet);
        return "reception/index/myMusic";
    }

添加与删除歌曲映射的controller语句为：

    @GetMapping(path = "addUserAndSong")
    public String addUserAndSong(@Param("usersong_songId")Integer usersong_songId,@Param("usersong_userId")Integer usersong_userId,
                                 @Param("sheet_id")Integer sheet_id,@Param("status")String status){
        if(!songService.addUserAndSong(usersong_songId,usersong_userId)){
            System.out.println("添加歌曲与用户映射关系失败");
        }
        if(status.equals("info")){
            return "redirect:info?page=1&sheet_id="+sheet_id;
        }
        if(status.equals("myMusic")){
            return "redirect:myMusic?sheet_userId="+usersong_userId+"&sheet_id="+sheet_id;
        }
        return "redirect:info?page=1&sheet_id="+sheet_id;
    }

    @GetMapping(path = "delUserAndSong")
    public String delUserAndSong(@Param("usersong_songId")Integer usersong_songId,@Param("usersong_userId")Integer usersong_userId,
                                 @Param("sheet_id")Integer sheet_id,@Param("status")String status){
        if(!songService.delUserAndSong(usersong_songId,usersong_userId)){
            System.out.println("删除歌曲与用户映射关系失败");
        }
        if(status.equals("info")){
            return "redirect:info?page=1&sheet_id="+sheet_id;
        }
        if(status.equals("myMusic")){
            return "redirect:myMusic?sheet_userId="+usersong_userId+"&sheet_id="+sheet_id;
        }
        return "redirect:info?page=1&sheet_id="+sheet_id;
    }

前端实现：

    
    






    
        
            
                
                    
自建歌单
                    

                    
                        
                    
                    
                        
                        
                        
                    
                
                
                    
收藏歌单


                    

                    
                        
                        
                        
                    
                
            
            
                
                    

                        

                            

                        
                        
创建者:
                        

                    
                
                
                    播放全部
                    
歌曲列表
                    
                        

                            

                            

                                

                                
封面
                                
歌曲名
                                
歌手
                                
专辑
                            
                            
                            

                            

                                

                                    
                                        
                                    
                                    
                                        
                                    
                                
                                

                                

                                

                                

                            
                            
                        
                    
                
            
        
    

我们来实验一下，看看点击添加我喜欢能否成功，首先点击自己的收藏歌单里，去找没有添加我喜欢的歌曲：

可以看到Style这首歌还没有添加进我喜欢，此时点击爱心：

 查看我喜欢列表：

可以看到Style已经添加进我喜欢列表里，并且它的爱心是实心的，实现成功。 

还实现了一个热门歌手模块：

不过还没添加啥歌手，也没有进行排版优化，会在下一期进行介绍。