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

本文链接：https://blog.youkuaiyun.com/qq_46418539/article/details/124452128

本文详细描述了在歌曲管理系统中，通过歌手ID查询歌曲列表以减轻数据库压力，以及如何通过歌手名转换ID、处理外键约束，实现添加、修改和删除歌曲的功能。后续还将涉及文件合法性检查、存储优化及SQL查询优化等话题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天着手写歌曲部分，歌曲部分后台的增删查改，由于歌曲表有两个外键，所以在进行写的时候需要提前把歌手、专辑表的逻辑进行实现，之后只贴部分代码实现：

跳转歌曲列表界面，如果直接用全部歌手进行跳转的话，加上外键的查询，数据量一大，那对MYSQL是不小的压力，先未进行SQL优化的前提下，采用歌手分类的方法查询歌曲列表就显得比较轻便，数据量再大也不会超过几百条，对于mysql来说轻而易举。

那么就要采取通过歌手ID来寻找歌曲列表，由于歌手ID在歌手表中为外键，而且需要传参加入，那么在第一次访问时可以将其设置为1，之后进行调用时再传递响应的ID值，代码实现如下:

跳转歌曲列表界面：

/**
     * 跳转歌曲列表界面
     * @param page 页数
     * @return 页面地址
     */
    @GetMapping(path = "list")
    public String list(Model model,String page,Integer singer_id){
        PageHelper.startPage(Integer.parseInt(page),20);
        List<Song> songList = songService.findSongBySingerId(singer_id);
        List<Album> albumList = albumService.findAllAlbum();
        List<Singer> singerList = singerService.findAllSinger();
        PageInfo<Song> pageInfo = new PageInfo<>(songList);
        model.addAttribute("songList",pageInfo.getList());
        model.addAttribute("albumList",albumList);
        model.addAttribute("singerList",singerList);
        model.addAttribute("pageTool",pageInfo);
        return "backstage/song/list";
    }

song/list.html 前台列表界面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台歌曲列表</title>
</head>
<body>
<form th:action="@{/song/sel}" method="post">
    歌手:<input type="text" name="singer_name" placeholder="周杰伦">
    <input type="submit" value="查询">
</form>
<a th:href="@{/song/add}">添加歌手</a>
<table>
    <tr>
        <td>名称</td>
        <td>歌曲ID</td>
        <td>歌手</td>
        <td>专辑</td>
        <td>歌曲文件路径</td>
        <td>点赞数</td>
        <td>歌曲分类</td>
        <td>操作</td>
    </tr>
    <tr th:each="song:${songList}">
        <td th:text="${song.getSong_name()}"></td>
        <td th:text="${song.getSong_id()}"></td>
        <td><p th:each="singer:${singerList}" th:if="${singer.getSinger_id()} eq ${song.getSong_singerId()}" th:text="${singer.getSinger_name()}"></p></td>
        <td><p th:each="album:${albumList}" th:if="${album.getAlbum_id()} eq ${song.getSong_albumId()}" th:text="${album.getAlbum_name()}"></p></td>
        <td th:text="${song.getSong_mp3Url()}"></td>
        <td th:text="${song.getSong_thumbsNum()}"></td>
        <td th:text="${song.getSong_classify()}"></td>
        <td>
            <a type="button" th:href="@{/song/update(song_id=${song.getSong_id()})}">修改</a>
            <a type="button" th:href="@{/song/del(song_id=${song.getSong_id()})}">删除</a>
        </td>
    </tr>
</table>
</body>
</html>

前台设置了一个搜索框，对应查询歌手的名字，但后台格式为歌手的ID，所以需要借助另一个控制器来实施转换，将歌手名转换为歌手ID，然后传参给列表进行查询：

/**
     * 后台处理搜索转化
     * @param singer_name 歌手名字
     * @return 页面地址
     */
    @PostMapping(path = "sel")
    public String sel(@Param("singer_name")String singer_name){
        List<Singer> singerList = singerService.findSingerBySingerName(singer_name);
        if(singerList.size()==0) {
            return "redirect:list?page=1&singer_id=0";
        }
        return "redirect:list?page=1&singer_id="+singerList.get(0).getSinger_id();
    }

接下来实施添加歌曲的功能，由于有两个外键，所以也固定了添加歌曲的歌手与专辑必须是在数据库存在的才行，所以这里跳转添加界面需要进行一定的参数设置：

/**
     * 跳转添加歌曲界面
     * @return 页面地址
     */
    @GetMapping(path = "add")
    public String addBef(Model model){
        List<Singer> singerList = singerService.findAllSinger();
        List<Album> albumList = albumService.findAllAlbum();
        model.addAttribute("singerList",singerList);
        model.addAttribute("albumList",albumList);
        return "backstage/song/add";
    }

song/add.html ,这样对应添加界面就可以查询数据库中存在的歌手与专辑让管理员进行选择添加（注：因为传输文件会变成二进制上传，所以要改变参数上传的方式）：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加歌曲界面</title>
</head>
<body>
    <form th:action="@{/song/add}" method="post" enctype="multipart/form-data" onsubmit="return validForm(this)">
        歌曲名:<input type="text" name="song_name">
        歌手:<select name="song_singerId">
                <option th:each="singer:${singerList}" th:text="${singer.getSinger_name()}" th:value="${singer.getSinger_id()}"></option>
            </select>
        专辑:<select name="song_albumId">
                <option th:each="album:${albumList}" th:text="${album.getAlbum_name()}" th:value="${album.getAlbum_id()}"></option>
            </select>
        歌曲文件:<input type="file" name="file">
        歌曲时长:<input type="text" name="song_time">
        歌曲分类:<input type="text" name="song_classify">
        <input type="submit" value="提交">
        <input type="button" value="返回">
    </form>
</body>
<script>
    function validForm(fm) {
        fm.action=fm.action+"?song_name="+fm['song_name'].value+"&song_singerId="+fm['song_singerId'].value+"&song_albumId="+fm['song_albumId'].value
            +"&song_time="+fm['song_time'].value+"&song_classify="+fm['song_classify'].value;
        return true;
    }
</script>
</html>

后台处理添加逻辑也很简单，不用过多介绍：

/**
     * 后台添加界面
     * @param song_singerId 歌手ID
     * @param song_albumId 专辑ID
     * @param song_name 歌曲名字
     * @param file mp3文件
     * @param song_time 歌曲时长
     * @param song_classify 歌曲分类
     * @return 页面地址
     * @throws ParseException
     * @throws IOException
     */
    @PostMapping(path = "add")
    public String add(@Param("song_singerId") Integer song_singerId, @Param("song_albumId") Integer song_albumId,
                      @Param("song_name")String song_name, @Param("song_mp3Url") MultipartFile file, @Param("song_time")String song_time,
                      @Param("song_classify")String song_classify) throws ParseException, IOException {
        String path="F:\\桌面程序\\编程\\javaEE学习\\期末项目\\crash_music\\src\\main\\resources\\static\\music\\"+file.getOriginalFilename();
        File newFile = new File(path);
        if(!newFile.exists()){
            file.transferTo(newFile);
        }
        if(!songService.addSong(new Song(song_singerId,song_albumId,song_name,"/music/"+file.getOriginalFilename(),song_time,0,song_classify))){
            System.out.println("添加失败");
            return "backstage/song/add";
        }
        return "redirect:list?page=1&singer_id="+song_singerId;
    }

跳转修改跟跳转添加一个道理，不过要将修改的歌曲对象传进去：

/**
     * 后台跳转修改界面
     * @param song_id 歌曲ID
     * @return 页面地址
     * @throws ParseException
     */
    @GetMapping(path = "update")
    public String updateBef(@Param("song_id") Integer song_id,Model model) throws ParseException {
        Song song = songService.findSongById(song_id);
        List<Singer> singerList = singerService.findAllSinger();
        List<Album> albumList = albumService.findAllAlbum();
        model.addAttribute("song",song);
        model.addAttribute("singerList",singerList);
        model.addAttribute("albumList",albumList);
        return "backstage/song/update";
    }

song/update.html 修改界面，要通过判断歌曲中默认的歌手与专辑，进行默认值设置：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>歌曲修改页面</title>
</head>
<body>
    <form th:action="@{/song/update}" method="post" enctype="multipart/form-data" onsubmit="return validForm(this)">
        歌曲ID:<input type="text" name="song_id" th:value="${song.getSong_id()}">
        歌曲名:<input type="text" name="song_name" th:value="${song.getSong_name()}">
        歌手:<select name="song_singerId">
                <option th:each="singer:${singerList}" th:if="${song.getSong_singerId()} eq ${singer.getSinger_id()}"
                        th:text="${singer.getSinger_name()}" th:value="${singer.getSinger_id()}"></option>
            </select>
        专辑:<select name="song_albumId">
                <option th:each="album:${albumList}" th:if="${song.getSong_albumId()} eq ${album.getAlbum_id()}"
                        th:text="${album.getAlbum_name()}" th:value="${album.getAlbum_id()}"></option>
            </select>
        歌曲文件:<input type="file" name="file">
        歌曲时长:<input type="text" name="song_time" th:value="${song.getSong_time()}">
        歌曲分类:<input type="text" name="song_classify" th:value="${song.getSong_classify()}">
        <input type="submit" value="提交">
        <input type="button" value="返回">
    </form>
</body>
<script>
    function validForm(fm) {
        fm.action=fm.action+"?song_id="+fm['song_id'].value+"&song_name="+fm['song_name'].value+"&song_singerId="+fm['song_singerId'].value+"&song_albumId="+fm['song_albumId'].value
            +"&song_time="+fm['song_time'].value+"&song_classify="+fm['song_classify'].value;
        return true;
    }
</script>
</html>

后台处理修改歌曲：

/**
     * 后台处理修改歌曲
     * @param song_id 歌曲ID
     * @param song_singerId 歌手ID
     * @param song_albumId 专辑ID
     * @param song_name 歌曲名字
     * @param file mp3文件
     * @param song_time 歌曲时长
     * @param song_classify 歌曲分类
     * @return 页面地址
     * @throws ParseException
     * @throws IOException
     */
    @PostMapping(path = "update")
    public String update(@Param("song_id")Integer song_id,@Param("song_singerId") Integer song_singerId,@Param("song_albumId") Integer song_albumId,
                         @Param("song_name")String song_name,@Param("song_mp3Url") MultipartFile file,@Param("song_time")String song_time,
                         @Param("song_thumbsNum")int song_thumbsNum,@Param("song_classify")String song_classify) throws ParseException, IOException {
        String path="F:\\桌面程序\\编程\\javaEE学习\\期末项目\\crash_music\\src\\main\\resources\\static\\music\\"+file.getOriginalFilename();
        File newFile = new File(path);
        if(!newFile.exists()){
            file.transferTo(newFile);
        }
        if(!songService.modSong(new Song(song_id,song_singerId,song_albumId,song_name,"/music/"+file.getOriginalFilename(),song_time,song_thumbsNum,song_classify))){
            System.out.println("修改失败");
        }
        return "redirect:list?page=1&singer_id="+song_singerId;
    }

后台处理删除歌曲：

/**
     * 后台处理删除歌曲
     * @param song_id
     * @return
     */
    @GetMapping(path = "del")
    public String del(@Param("song_id")Integer song_id){
        if(!songService.delSong(song_id)){
            System.out.println("删除失败");
        }
        return "redirect:list?page=1&singer_id=1";
    }

那么歌曲的增删查改就已经写完了，但这只是个基本功能，后面去完善的时候还要考虑很多事情：

比如：