1、后端编写

1.1 歌单服务模块编写

1）Service服务层编写

  1. package com.gmw.musicserver.service;
  3. import com.gmw.musicserver.entity.SongList;
  4. import com.gmw.musicserver.entity.SongSheet;
  5. import com.baomidou.mybatisplus.extension.service.IService;
  7. import java.util.List;
  9. /**
  10.  * <p>
  11.  * 歌单表 服务类
  12.  * </p>
  13.  *
  14.  * @author 未进化的程序猿
  15.  * @since 2022-01-26
  16.  */
  17. public interface SongSheetService extends IService<SongSheet> {
  18.     /**
  19.      *增加歌单
  20.      */
  21.     public boolean insertSongSheet(SongSheet songSheet);
  23.     /**
  24.      *修改歌单
  25.      */
  26.     public boolean updateSongSheet(SongSheet songSheet);
  28.     /**
  29.      * 删除歌单
  30.      */
  31.     public boolean deleteSongSheet(Integer id);
  33.     /**
  34.      * 根据主键查询整个对象
  35.      */
  36.     public SongSheet selectByPrimaryKey(Integer id);
  38.     /**
  39.      * 查询所有歌单
  40.      */
  41.     public List<SongSheet> allSongList();
  43.     /**
  44.      * 根据标题精确查询歌单列表
  45.      */
  46.     public List<SongSheet> songListOfTitle(String title);
  48.     /**
  49.      * 根据标题模糊查询歌单列表
  50.      */
  51.     public List<SongSheet> likeTitle(String title);
  53.     /**
  54.      * 根据风格模糊查询歌单列表
  55.      */
  56.     public List<SongSheet> likeStyle(String style);
  57. }
  1. package com.gmw.musicserver.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.gmw.musicserver.entity.SongSheet;
  5. import com.gmw.musicserver.mapper.SongSheetMapper;
  6. import com.gmw.musicserver.service.SongSheetService;
  7. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  8. import org.springframework.stereotype.Service;
  10. import java.util.List;
  12. /**
  13.  * <p>
  14.  * 歌单表 服务实现类
  15.  * </p>
  16.  *
  17.  * @author 未进化的程序猿
  18.  * @since 2022-01-26
  19.  */
  20. @Service
  21. public class SongSheetServiceImpl extends ServiceImpl<SongSheetMapper, SongSheet> implements SongSheetService {
  23.     /**
  24.      * 增加歌单
  25.      *
  26.      * @param songSheet
  27.      */
  28.     @Override
  29.     public boolean insertSongSheet(SongSheet songSheet) {
  30.         return this.baseMapper.insert(songSheet) > 0;
  31.     }
  33.     /**
  34.      * 修改歌单
  35.      *
  36.      * @param songSheet
  37.      */
  38.     @Override
  39.     public boolean updateSongSheet(SongSheet songSheet) {
  40.         return this.baseMapper.updateById(songSheet) > 0;
  41.     }
  43.     /**
  44.      * 删除歌单
  45.      *
  46.      * @param id
  47.      */
  48.     @Override
  49.     public boolean deleteSongSheet(Integer id) {
  50.         return this.baseMapper.deleteById(id) > 0;
  51.     }
  53.     /**
  54.      * 根据主键查询整个对象
  55.      *
  56.      * @param id
  57.      */
  58.     @Override
  59.     public SongSheet selectByPrimaryKey(Integer id) {
  60.         return this.baseMapper.selectById(id);
  61.     }
  63.     /**
  64.      * 查询所有歌单
  65.      */
  66.     @Override
  67.     public List<SongSheet> allSongList() {
  68.         return this.baseMapper.selectList(null);
  69.     }
  71.     /**
  72.      * 根据标题精确查询歌单列表
  73.      *
  74.      * @param title
  75.      */
  76.     @Override
  77.     public List<SongSheet> songListOfTitle(String title) {
  78.         QueryWrapper<SongSheet> queryWrapper = new QueryWrapper<>();
  79.         queryWrapper.eq("title",title);
  80.         return this.baseMapper.selectList(queryWrapper);
  81.     }
  83.     /**
  84.      * 根据标题模糊查询歌单列表
  85.      *
  86.      * @param title
  87.      */
  88.     @Override
  89.     public List<SongSheet> likeTitle(String title) {
  90.         QueryWrapper<SongSheet> queryWrapper = new QueryWrapper<>();
  91.         queryWrapper.like("title",title);
  92.         return this.baseMapper.selectList(queryWrapper);
  93.     }
  95.     /**
  96.      * 根据风格模糊查询歌单列表
  97.      *
  98.      * @param style
  99.      */
  100.     @Override
  101.     public List<SongSheet> likeStyle(String style) {
  102.         QueryWrapper<SongSheet> queryWrapper = new QueryWrapper<>();
  103.         queryWrapper.like("style",style);
  104.         return this.baseMapper.selectList(queryWrapper);
  105.     }
  106. }

2）Controller控制层编写

  1. package com.gmw.musicserver.controller;
  4. import com.gmw.musicserver.commonutils.R;
  5. import com.gmw.musicserver.entity.Song;
  6. import com.gmw.musicserver.entity.SongSheet;
  7. import com.gmw.musicserver.service.SongSheetService;
  8. import io.swagger.models.auth.In;
  9. import org.slf4j.Logger;
  10. import org.slf4j.LoggerFactory;
  11. import org.springframework.beans.factory.annotation.Autowired;
  12. import org.springframework.web.bind.annotation.*;
  13. import org.springframework.web.multipart.MultipartFile;
  15. import javax.servlet.http.HttpServletRequest;
  16. import java.io.File;
  17. import java.io.IOException;
  18. import java.util.List;
  20. /**
  21.  * <p>
  22.  * 歌单表 前端控制器
  23.  * </p>
  24.  *
  25.  * @author 未进化的程序猿
  26.  * @since 2022-01-26
  27.  */
  28. @RestController
  29. @RequestMapping("/musicserver/songSheet")
  30. public class SongSheetController {
  32.     public static final Logger logger = LoggerFactory.getLogger(SongSheetController.class);
  34.     @Autowired
  35.     public SongSheetService songSheetService;
  37.     /**
  38.      * 添加歌单
  39.      */
  40.     @PostMapping(value = "/addSongSheet")
  41.     public R addSongSheet(HttpServletRequest request){
  43.         String title = request.getParameter("title").trim();      //标题
  44.         String pic = request.getParameter("pic").trim();        //歌单图片
  45.         String introduction = request.getParameter("introduction").trim();//简介
  46.         String style = request.getParameter("style").trim();    //风格
  48.         //保存到歌单的对象中
  49.         SongSheet songSheet = new SongSheet();
  50.         songSheet.setTitle(title);
  51.         songSheet.setPic(pic);
  52.         songSheet.setIntroduction(introduction);
  53.         songSheet.setStyle(style);
  55.         logger.info("保存的歌单对象: {}",songSheet);
  57.         boolean flag = this.songSheetService.insertSongSheet(songSheet);
  58.         if(flag){   //保存成功
  59.            return R.ok().message("保存歌单成功!!");
  60.         }
  61.        return R.error().message("保存歌单失败!!");
  62.     }
  64.     /**
  65.      * 修改歌单
  66.      */
  67.     @PostMapping(value = "/updateSongSheet")
  68.     public R updateSongSheet(HttpServletRequest request){
  69.         String id = request.getParameter("id").trim();          //主键
  70.         String title = request.getParameter("title").trim();      //标题
  71.         String introduction = request.getParameter("introduction").trim();//简介
  72.         String style = request.getParameter("style").trim();    //风格
  73.         //保存到歌单的对象中
  74.         SongSheet songSheet = new SongSheet();
  75.         songSheet.setId(Integer.parseInt(id));
  76.         songSheet.setTitle(title);
  77.         songSheet.setIntroduction(introduction);
  78.         songSheet.setStyle(style);
  80.         logger.info("修改歌单保存的歌单对象: {}",songSheet);
  81.         boolean flag = this.songSheetService.updateSongSheet(songSheet);
  82.         if(flag){   //保存成功
  83.             return R.ok().message("修改歌单成功!!");
  84.         }
  85.         return R.error().message("修改歌单失败!!");
  86.     }
  89.     /**
  90.      * 删除歌单
  91.      */
  92.     @GetMapping(value = "/deleteSongSheet")
  93.     public R deleteSongSheet(HttpServletRequest request){
  94.         String id = request.getParameter("id").trim();          //主键
  95.         //-TODO 先查询到数据库中对应的文件地址，删除掉它再进行下面的代码
  97.         //通过ID主键查询歌手对象
  98.         SongSheet songSheet = this.songSheetService.selectByPrimaryKey(Integer.parseInt(id));
  99.         //获取歌曲图片
  100.         String songPic = songSheet.getPic();
  101.         logger.info("歌单图片: {}",songPic);
  103.         //如果文件的相对路径是/img/songListPic/123.jpg就没必要删除
  104.         //因为它是当作默认相对路径的，需要用到
  105.         if(!songPic.equals("/img/songListPic/123.jpg")){
  106.             //获取歌曲保存的文件目录
  107.             String songPath = System.getProperty("user.dir") + songPic;
  108.             logger.info("获取歌单保存的文件目录: {}",songPath);
  110.             File file = new File(songPath);
  112.             if(file.isFile()){
  113.                 //判断如果是文件的话，就删除文件
  114.                 boolean isDelete = file.delete();
  115.                 logger.info("是否删除成功: {}",isDelete);
  116.                 if(!isDelete){
  117.                     return R.error().message("删除歌曲失败!!");
  118.                 }
  119.             }
  120.         }
  122.         boolean flag = this.songSheetService.deleteSongSheet(Integer.parseInt(id));
  123.         if(flag) {
  124.             return R.ok().message("删除歌单成功!!");
  125.         }
  126.         return R.error().message("删除歌单失败!!");
  127.     }
  129.     /**
  130.      * 根据主键查询整个对象
  131.      */
  132.     @GetMapping(value = "/selectByPrimaryKey")
  133.     public R selectByPrimaryKey(HttpServletRequest request){
  134.         String id = request.getParameter("id").trim();          //主键
  135.         SongSheet songSheet = this.songSheetService.selectByPrimaryKey(Integer.parseInt(id));
  136.         return R.ok().data("songSheet",songSheet);
  137.     }
  139.     /**
  140.      * 查询所有歌单
  141.      */
  142.     @GetMapping(value = "/allSongSheet")
  143.     public R allSongSheet(HttpServletRequest request){
  144.         List<SongSheet> songSheetList = this.songSheetService.allSongList();
  145.         logger.info("查询所有的歌单: {}",songSheetList);
  146.         return R.ok().data("list",songSheetList);
  147.     }
  149.     /**
  150.      * 根据标题精确查询歌单列表
  151.      */
  152.     @GetMapping(value = "/songListOfTitle")
  153.     public R songListOfName(HttpServletRequest request){
  154.         String title = request.getParameter("title").trim();          //歌单标题
  155.         List<SongSheet> songSheetList = this.songSheetService.songListOfTitle(title);
  156.         return R.ok().data("list",songSheetList);
  157.     }
  159.     /**
  160.      * 根据标题模糊查询歌单列表
  161.      */
  162.     @GetMapping(value = "/likeTitle")
  163.     public R likeTitle(HttpServletRequest request){
  164.         String title = request.getParameter("title").trim();          //歌单标题
  165.         List<SongSheet> songSheetList = this.songSheetService.likeTitle(title);
  166.         return R.ok().data("list",songSheetList);
  167.     }
  169.     /**
  170.      * 根据风格模糊查询歌单列表
  171.      */
  172.     @GetMapping(value = "/likeStyle")
  173.     public Object likeStyle(HttpServletRequest request){
  174.         String style = request.getParameter("style").trim();          //歌单风格
  175.         List<SongSheet> songSheetList = this.songSheetService.likeStyle(style);
  176.         return R.ok().data("list",songSheetList);
  177.     }
  179.     /**
  180.      * 更新歌单图片
  181.      */
  182.     @PostMapping(value = "/updateSongSheetPic")
  183.     public R updateSongSheetPic(@RequestParam("file") MultipartFile file, @RequestParam("id")int id){
  185.         /**
  186.          * 更新歌单图片之前，必须把原来的歌单图片删除掉
  187.          */
  188.         //通过ID主键查询歌单对象
  189.         SongSheet songSheet = this.songSheetService.selectByPrimaryKey(id);
  190.         //获取歌曲图片
  191.         String pic = songSheet.getPic();
  192.         logger.info("歌单图片: {}",pic);
  194.         //如果文件的相对路径是/img/songListPic/123.jpg就没必要删除
  195.         //因为它是当作默认相对路径的，需要用到
  196.         if(!pic.equals("/img/songListPic/123.jpg")){
  197.             //获取歌曲保存的文件目录
  198.             String songPath = System.getProperty("user.dir") + pic;
  199.             logger.info("获取歌单保存的文件目录: {}",songPath);
  201.             File file1 = new File(songPath);
  203.             if(file1.isFile()){
  204.                 file1.delete();
  205.             }
  206.         }
  208.         //开始更新歌曲图片
  209.         if(file.isEmpty()){
  210.             return R.error().message("图片上传失败!!");
  211.         }
  212.         //文件名=当前时间到毫秒+原来的文件名
  213.         String fileName = System.currentTimeMillis()+file.getOriginalFilename();
  214.         //文件路径
  215.         String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")+"img"
  216.                 +System.getProperty("file.separator")+"songListPic";
  217.         //如果文件路径不存在，新增该路径
  218.         File file1 = new File(filePath);
  219.         if(!file1.exists()){
  220.             file1.mkdir();
  221.         }
  222.         //实际的文件地址
  223.         File dest = new File(filePath+System.getProperty("file.separator")+fileName);
  224.         //存储到数据库里的相对文件地址
  225.         String storeAvatorPath = "/img/songListPic/"+fileName;
  226.         try {
  227.             file.transferTo(dest);
  228.             SongSheet songSheet1 = new SongSheet();
  229.             songSheet1.setId(id);
  230.             songSheet1.setPic(storeAvatorPath);
  232.             boolean flag = this.songSheetService.updateSongSheet(songSheet1);
  233.             if(flag){
  234.                 return R.ok().message("图片上传成功!!");
  235.             }else {
  236.                 return R.error().message("图片上传失败!!");
  237.             }
  239.         } catch (IOException e) {
  240.             return R.error().message("图片上传失败!!");
  241.         }
  242.     }
  243. }

1.2 歌单包含歌曲服务模块编写

1）Service服务层编写

  1. package com.gmw.musicserver.service;
  3. import com.baomidou.mybatisplus.extension.service.IService;
  4. import com.gmw.musicserver.entity.SongList;
  6. import java.util.List;
  8. /**
  9.  * <p>
  10.  * 歌单包含歌曲列表 服务类
  11.  * 歌单里面的歌曲service接口
  12.  * </p>
  13.  *
  14.  * @author 未进化的程序猿
  15.  * @since 2022-01-26
  16.  */
  17. public interface SongListService extends IService<SongList> {
  18.     /**
  19.      *增加歌单里面的歌曲
  20.      */
  21.     public boolean insertSongList(SongList songList);
  23.     /**
  24.      *修改歌单里面的歌曲
  25.      */
  26.     public boolean updateSongList(SongList songList);
  28.     /**
  29.      * 删除歌单里面的歌曲
  30.      */
  31.     public boolean deleteSongList(Integer id);
  33.     /**
  34.      * 根据歌曲id和歌单id删除
  35.      */
  36.     public boolean deleteBySongIdAndSongListId(Integer songId,Integer songListId);
  38.     /**
  39.      * 根据主键查询整个对象
  40.      */
  41.     public SongList selectByPrimaryKey(Integer id);
  43.     /**
  44.      * 查询所有歌单里面的歌曲
  45.      */
  46.     public List<SongList> allSongList();
  48.     /**
  49.      * 根据歌单id查询所有的歌曲
  50.      */
  51.     public List<SongList> listSongOfSongListId(Integer songListId);
  55. }
  1. package com.gmw.musicserver.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.gmw.musicserver.entity.SongList;
  5. import com.gmw.musicserver.mapper.SongListMapper;
  6. import com.gmw.musicserver.service.SongListService;
  7. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  8. import org.springframework.stereotype.Service;
  10. import java.util.List;
  12. /**
  13.  * <p>
  14.  * 歌单包含歌曲列表 服务实现类
  15.  * </p>
  16.  *
  17.  * @author 未进化的程序猿
  18.  * @since 2022-01-26
  19.  */
  20. @Service
  21. public class SongListServiceImpl extends ServiceImpl<SongListMapper, SongList> implements SongListService {
  23.     /**
  24.      * 增加歌单里面的歌曲
  25.      *
  26.      * @param songList
  27.      */
  28.     @Override
  29.     public boolean insertSongList(SongList songList) {
  30.         return this.baseMapper.insert(songList) > 0;
  31.     }
  33.     /**
  34.      * 修改歌单里面的歌曲
  35.      *
  36.      * @param songList
  37.      */
  38.     @Override
  39.     public boolean updateSongList(SongList songList) {
  40.         return this.baseMapper.updateById(songList) > 0;
  41.     }
  43.     /**
  44.      * 删除歌单里面的歌曲
  45.      *
  46.      * @param id
  47.      */
  48.     @Override
  49.     public boolean deleteSongList(Integer id) {
  50.         return this.baseMapper.deleteById(id) > 0;
  51.     }
  53.     /**
  54.      * 根据歌曲id和歌单id删除
  55.      *
  56.      * @param songId
  57.      * @param songListId
  58.      */
  59.     @Override
  60.     public boolean deleteBySongIdAndSongListId(Integer songId, Integer songListId) {
  61.         QueryWrapper<SongList> queryWrapper = new QueryWrapper<>();
  62.         queryWrapper.eq("song_id",songId);
  63.         queryWrapper.eq("song_sheet_id",songListId);
  64.         return this.baseMapper.delete(queryWrapper) > 0;
  65.     }
  67.     /**
  68.      * 根据主键查询整个对象
  69.      *
  70.      * @param id
  71.      */
  72.     @Override
  73.     public SongList selectByPrimaryKey(Integer id) {
  74.         return this.baseMapper.selectById(id);
  75.     }
  77.     /**
  78.      * 查询所有歌单里面的歌曲
  79.      */
  80.     @Override
  81.     public List<SongList> allSongList() {
  82.         return this.baseMapper.selectList(null);
  83.     }
  85.     /**
  86.      * 根据歌单id查询所有的歌曲
  87.      *
  88.      * @param songListId
  89.      */
  90.     @Override
  91.     public List<SongList> listSongOfSongListId(Integer songListId) {
  92.         QueryWrapper<SongList> queryWrapper = new QueryWrapper<>();
  93.         queryWrapper.eq("song_sheet_id",songListId);
  94.         return this.baseMapper.selectList(queryWrapper);
  95.     }
  96. }

2）Controller控制层编写

  1. package com.gmw.musicserver.controller;
  4. import com.gmw.musicserver.commonutils.R;
  5. import com.gmw.musicserver.entity.SongList;
  6. import com.gmw.musicserver.service.SongListService;
  7. import org.slf4j.Logger;
  8. import org.slf4j.LoggerFactory;
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.web.bind.annotation.GetMapping;
  11. import org.springframework.web.bind.annotation.PostMapping;
  12. import org.springframework.web.bind.annotation.RequestMapping;
  14. import org.springframework.web.bind.annotation.RestController;
  16. import javax.servlet.http.HttpServletRequest;
  17. import java.util.List;
  19. /**
  20.  * <p>
  21.  * 歌单包含歌曲列表 前端控制器
  22.  * </p>
  23.  *
  24.  * @author 未进化的程序猿
  25.  * @since 2022-01-26
  26.  */
  27. @RestController
  28. @RequestMapping("/musicserver/songList")
  29. public class SongListController {
  31.     public static final Logger logger = LoggerFactory.getLogger(SongListController.class);
  33.     @Autowired
  34.     public SongListService songListService;
  36.     /**
  37.      * 给歌单添加歌曲
  38.      */
  39.     @PostMapping(value = "/addListSong")
  40.     public R addListSong(HttpServletRequest request){
  41.         //获取前端传来的参数
  42.         String songId = request.getParameter("songId").trim();  //歌曲id
  43.         String songListId = request.getParameter("songListId").trim(); //歌单id
  44.         SongList songList = new SongList();
  46.         songList.setSongId(Integer.parseInt(songId));
  47.         songList.setSongSheetId(Integer.parseInt(songListId));
  49.         logger.info("歌单添加歌曲对象: {}",songList);
  51.         boolean flag = this.songListService.insertSongList(songList);
  52.         if(flag){
  53.             return R.ok().message("添加歌单歌曲成功!!");
  54.         }
  55.         return R.error().message("添加歌单歌曲失败!!");
  57.     }
  59.     /**
  60.      * 根据歌单id查询歌曲
  61.      */
  62.     @GetMapping(value = "/detail")
  63.     public R detail(HttpServletRequest request){
  64.         String songListId = request.getParameter("songListId");
  65.         List<SongList> lists = this.songListService.listSongOfSongListId(Integer.parseInt(songListId));
  66.         return R.ok().data("list",lists);
  67.     }
  69.     /**
  70.      * 删除歌单里的歌曲
  71.      */
  72.     @GetMapping(value = "/delete")
  73.     public Object delete(HttpServletRequest request){
  74.         String songId = request.getParameter("songId").trim();                 //歌曲id
  75.         String songListId = request.getParameter("songListId").trim();        //歌单id
  77.         boolean flag = this.songListService.deleteBySongIdAndSongListId(Integer.parseInt(songId),Integer.parseInt(songListId));
  79.         if (flag){
  80.             return R.ok().message("删除歌单歌曲成功!!");
  81.         }
  82.         return R.error().message("删除歌单歌曲失败!!");
  83.     }
  84. }

1.3 在歌曲管理模块Controller控制层中添加（根据歌曲id查询歌曲对象/根据歌手id查询歌曲）

  1.    /**
  2.      * 根据歌曲id查询歌曲对象
  3.      */
  4.     @GetMapping(value = "/detail")
  5.     public R detail(HttpServletRequest request){
  6.         String songId = request.getParameter("songId");
  7.         Song song = this.songService.selectByPrimaryKey(Integer.parseInt(songId));
  8.         return R.ok().data("song",song);
  9.     }
  11.     /**
  12.      * 根据歌手名称查询歌曲
  13.      */
  14.     @GetMapping(value = "/songOfSongName")
  15.     public R songOfSongName(HttpServletRequest request){
  16.         String songName = request.getParameter("songName");
  17.         List<Song> songList = this.songService.songOfName(songName);
  18.         return R.ok().data("list",songList);
  19.     }

2、前端编写

2.1 歌单管理模块

image.png

  1. <template>
  2.     <div class="table">
  3.         <div class="container">
  4.             <div class="handle-box">
  5.                 <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
  6.                 <el-input v-model="select_word" size="mini" placeholder="筛选关键字" class="handle-input"></el-input>
  7.                 <el-button type="primary" size="mini" @click="centerDialogVisible = true">添加歌单</el-button>
  8.             </div>
  9.         </div>
  10.         <el-table size="mini" ref="multipleTable" border style="width:100%" height="680px" :data="data" @selection-change="handleSelectionChange">
  11.             <el-table-column type="selection" width="40"></el-table-column>
  12.             <el-table-column label="歌单图片" width="110" align="center">
  13.                 <template slot-scope="scope">
  14.                     <div class="songList-img">
  15.                         <img :src="getUrl(scope.row.pic)" style="width:100%"/>
  16.                     </div>
  17.                     <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload" 
  18.                         :on-success="handleAvatorSuccess">
  19.                         <el-button size="mini">更新图片</el-button>
  20.                     </el-upload>
  21.                 </template>
  22.             </el-table-column>
  23.             <el-table-column prop="title" label="标题" width="120" align="center"></el-table-column>     
  24.             <el-table-column label="简介">
  25.                 <template slot-scope="scope">
  26.                     <p style="height:100px;overflow:scroll">{{scope.row.introduction}}</p>
  27.                 </template>
  28.             </el-table-column>
  29.             <el-table-column prop="style" label="风格" width="120" align="center"></el-table-column> 
  30.             <el-table-column label="歌曲管理" width="110" align="center">
  31.                 <template slot-scope="scope">
  32.                     <el-button size="mini" @click="songEdit(scope.row.id)">歌曲管理</el-button>
  33.                 </template>
  34.             </el-table-column>
  35.             <el-table-column label="操作" width="150" align="center">
  36.                 <template slot-scope="scope">
  37.                     <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
  38.                     <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> 
  39.                 </template>
  40.             </el-table-column>
  41.         </el-table>
  42.         <div class="pagination">
  43.             <el-pagination
  44.                 background
  45.                 layout = "total,prev,pager,next"
  46.                 :current-page="currentPage"
  47.                 :page-size="pageSize"
  48.                 :total="tableData.length"
  49.                 @current-change="handleCurrentChange"
  50.                 >
  51.             </el-pagination>
  52.         </div>
  54.         <el-dialog title="添加歌单" :visible.sync="centerDialogVisible" width="400px" center>
  55.             <el-form :model="registerForm" ref="registerForm" label-width="80px">
  56.                 <el-form-item prop="title" label="标题" size="mini">
  57.                     <el-input v-model="registerForm.title" placeholder="标题"></el-input>
  58.                 </el-form-item>
  59.                 <el-form-item prop="introduction" label="简介" size="mini">
  60.                     <el-input v-model="registerForm.introduction" placeholder="简介" type="textarea"></el-input>
  61.                 </el-form-item>
  62.                 <el-form-item prop="style" label="风格" size="mini">
  63.                     <el-input v-model="registerForm.style" placeholder="风格"></el-input>
  64.                 </el-form-item>
  65.             </el-form>
  66.             <span slot="footer">
  67.                 <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
  68.                 <el-button size="mini" @click="addSongList">确定</el-button>                
  69.             </span>
  70.         </el-dialog>
  72.         <el-dialog title="修改歌单" :visible.sync="editVisible" width="400px" center>
  73.             <el-form :model="form" ref="form" label-width="80px">
  74.                 <el-form-item prop="title" label="标题" size="mini">
  75.                     <el-input v-model="form.title" placeholder="标题"></el-input>
  76.                 </el-form-item>
  77.                 <el-form-item prop="introduction" label="简介" size="mini">
  78.                     <el-input v-model="form.introduction" placeholder="简介" type="textarea"></el-input>
  79.                 </el-form-item>    
  80.                 <el-form-item prop="style" label="风格" size="mini">
  81.                     <el-input v-model="form.style" placeholder="风格"></el-input>
  82.                 </el-form-item>
  83.             </el-form>
  84.             <span slot="footer">
  85.                 <el-button size="mini" @click="editVisible = false">取消</el-button>
  86.                 <el-button size="mini" @click="editSave">确定</el-button>                
  87.             </span>
  88.         </el-dialog>
  90.         <el-dialog title="删除歌单" :visible.sync="delVisible" width="300px" center>
  91.             <div align="center">删除不可恢复，是否确定删除？</div>
  92.             <span slot="footer">
  93.                 <el-button size="mini" @click="delVisible = false">取消</el-button>
  94.                 <el-button size="mini" @click="deleteRow">确定</el-button>                
  95.             </span>
  96.         </el-dialog>
  97.     </div>
  98. </template>
  100. <script>
  101. import {getAllSongList,setSongList,updateSongList,delSongList} from '../api/songsheet/index';
  102. import { mixin } from '../mixins/index';
  103. export default {
  104.     mixins: [mixin],
  105.     data(){
  106.         return{
  107.             centerDialogVisible: false, //添加弹窗是否显示
  108.             editVisible: false,         //编辑弹窗是否显示
  109.             delVisible: false,          //删除弹窗是否显示
  110.             registerForm:{      //添加框
  111.                 title: '',
  112.                 introduction: '',
  113.                 style: ''
  114.             },
  115.             form:{      //编辑框
  116.                 id: '',
  117.                 title: '',
  118.                 introduction: '',
  119.                 style: ''
  120.             },
  121.             tableData: [],
  122.             tempData: [],
  123.             select_word: '',
  124.             pageSize: 5,    //分页每页大小
  125.             currentPage: 1,  //当前页
  126.             idx: -1,          //当前选择项
  127.             multipleSelection: []   //哪些项已经打勾
  128.         }
  129.     },
  130.     computed:{
  131.         //计算当前搜索结果表里的数据
  132.         data(){
  133.             return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize)
  134.         }
  135.     },
  136.     watch:{
  137.         //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
  138.         select_word: function(){
  139.             if(this.select_word == ''){
  140.                 this.tableData = this.tempData;
  141.             }else{
  142.                 this.tableData = [];
  143.                 for(let item of this.tempData){
  144.                     if(item.title.includes(this.select_word)){
  145.                         this.tableData.push(item);
  146.                     }
  147.                 }
  148.             }
  149.         }
  150.     },
  151.     created(){
  152.         this.getData();
  153.     },
  154.     methods:{
  155.         //获取当前页
  156.         handleCurrentChange(val){
  157.             this.currentPage = val;
  158.         },
  159.         //查询所有歌单
  160.         getData(){
  161.             this.tempData = [];
  162.             this.tableData = [];
  163.             getAllSongList().then(res => {
  164.                 this.tempData = res.data.list;
  165.                 this.tableData = res.data.list;
  166.                 this.currentPage = 1;
  167.             })
  168.         },
  169.         //添加歌单
  170.         addSongList(){
  171.             var _this = this;
  172.             let params = new URLSearchParams();
  173.             params.append('title',this.registerForm.title);
  174.             params.append('pic','/img/songListPic/123.jpg');
  175.             params.append('introduction',this.registerForm.introduction);
  176.             params.append('style',this.registerForm.style);
  178.             setSongList(params)
  179.             .then(res => {
  180.                 if(res.code == 20000){
  181.                     this.getData();
  182.                     this.notify("添加成功","success");
  183.                     //添加成功后删除文本框里面的值
  184.                     _this.registerForm = {}
  185.                 }else{
  186.                     this.notify("添加失败","error");
  187.                     _this.registerForm = {}
  188.                 }
  189.             })
  190.             .catch(err => {
  191.                 console.log(err);
  192.             });
  193.             this.centerDialogVisible = false;
  194.         },
  195.         //弹出编辑页面
  196.         handleEdit(row){
  197.             this.editVisible = true;
  198.             this.form = {
  199.                 id: row.id,
  200.                 title: row.title,
  201.                 introduction: row.introduction,
  202.                 style: row.style
  203.             }
  204.         },
  205.         //保存编辑页面修改的数据
  206.         editSave(){
  207.             let params = new URLSearchParams();
  208.             params.append('id',this.form.id);
  209.             params.append('title',this.form.title);
  210.             params.append('introduction',this.form.introduction);
  211.             params.append('style',this.form.style);
  213.             updateSongList(params)
  214.             .then(res => {
  215.                 if(res.code == 20000){
  216.                     this.getData();
  217.                     this.notify("修改成功","success");
  218.                 }else{
  219.                     this.notify("修改失败","error");
  220.                 }
  221.             })
  222.             .catch(err => {
  223.                 console.log(err);
  224.             });
  225.             this.editVisible = false;
  226.         },
  227.         //更新图片
  228.         uploadUrl(id){
  229.             return `${this.$store.state.HOST}/musicserver/songSheet/updateSongSheetPic?id=${id}`
  230.         },
  231.         //删除一个歌单
  232.         deleteRow(){
  233.             delSongList(this.idx)
  234.             .then(res => {
  235.                 if(res.code == 20000){
  236.                     this.getData();
  237.                     this.notify("删除成功","success");
  238.                 }else{
  239.                     this.notify("删除失败","error");
  240.                 }
  241.             })
  242.             .catch(err => {
  243.                 console.log(err);
  244.             });
  245.             this.delVisible = false;
  246.         },
  247.         //转向歌曲管理页面,id表示歌单的ID
  248.         songEdit(id){
  249.             this.$router.push({path:`/ListSong`,query:{id}});
  250.         }
  251.     }
  252. }
  253. </script>
  255. <style scoped>
  256.     .handle-box{
  257.         margin-bottom: 20px;
  258.     }
  259.     .songList-img{
  260.         width: 100%;
  261.         height: 80px;
  262.         border-radius: 5px;
  263.         margin-bottom: 5px;
  264.         overflow: hidden;
  265.     }
  266.     .handle-input{
  267.         width: 300px;
  268.         display: inline-block;
  269.     }
  270.     .pagination{
  271.         display: flex;
  272.         justify-content: center;
  273.     }
  274. </style>

编写请求后端服务接口方法
image.png

import {get,post} from '../http'

//============歌单相关================
//查询歌单
export const getAllSongList =() => get(`musicserver/songSheet/allSongSheet`);
//添加歌单
export const setSongList = (params) => post(`musicserver/songSheet/addSongSheet`,params);
//编辑歌单
export const updateSongList = (params) => post(`musicserver/songSheet/updateSongSheet`,params);
//删除歌单
export const delSongList = (id) => get(`musicserver/songSheet/deleteSongSheet?id=${id}`);

引入请求后端接口方法
image.png

2.2 歌单包含歌曲模块列表

image.png
image.png

歌曲模块列表展示
image.png

<template>
    <div class="table">
        <div class="crumbs">
            <i class="el-icon-tickets"></i>歌单歌曲信息
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
                <el-input v-model="select_word" size="mini" placeholder="请输入歌曲名" class="handle-input"></el-input>
                <el-button type="primary" size="mini" @click="centerDialogVisible = true">添加歌曲</el-button>
            </div>
        </div>
        <el-table size="mini" ref="multipleTable" border style="width:100%" height="680px" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>            
            <el-table-column prop="name" label="歌手-歌名" align="center"></el-table-column>            
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> 
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加歌曲" :visible.sync="centerDialogVisible" width="400px" center>
            <el-form :model="registerForm" ref="registerForm" label-width="80px" action="" id="tf">
                <el-form-item prop="singerName" label="歌手名字" size="mini">
                    <el-input v-model="registerForm.singerName" placeholder="歌手名字"></el-input>
                </el-form-item> 
                <el-form-item prop="songName" label="歌曲名字" size="mini">
                    <el-input v-model="registerForm.songName" placeholder="歌曲名字"></el-input>
                </el-form-item>  
            </el-form>
            <span slot="footer">
                <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
                <el-button size="mini" @click="getSongId">确定</el-button>                
            </span>
        </el-dialog>
        <el-dialog title="删除歌曲" :visible.sync="delVisible" width="300px" center>
            <div align="center">删除不可恢复，是否确定删除？</div>
            <span slot="footer">
                <el-button size="mini" @click="delVisible = false">取消</el-button>
                <el-button size="mini" @click="deleteRow">确定</el-button>                
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mixin } from '../mixins/index';
import {listSongDetail,listSongAdd,delListSong} from '../api/songlist/index';
import {songOfSongId,songOfSongName} from '../api/song/index'

export default {
    mixins: [mixin],
    data(){
        return{
            centerDialogVisible: false, //添加弹窗是否显示
            delVisible: false,          //删除弹窗是否显示
            registerForm:{      //添加框
                singerName: '',     //歌手名字
                songName: ''        //歌曲名字
            },
            tableData: [],
            tempData: [],
            select_word: '',
            idx: -1,          //当前选择项
            multipleSelection: [],   //哪些项已经打勾
            songListId: ''          //歌单id
        }
    },
    watch:{
        //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
        select_word: function(){
            if(this.select_word == ''){
                this.tableData = this.tempData;
            }else{
                this.tableData = [];
                for(let item of this.tempData){
                    if(item.name.includes(this.select_word)){
                        this.tableData.push(item);
                    }
                }
            }
        }
    },
    created(){
        //获取歌单管理从路由传过来的歌单id
        this.songListId = this.$route.query.id;
        this.getData();
    },
    methods:{
        //查询所有歌手
        getData(){
            this.tempData = [];
            this.tableData = [];
            //通过歌单id，查询该歌单下的所有歌曲
            listSongDetail(this.songListId).then(res => {
                //通过每一项的歌曲id，获取到每一项的歌曲对象
                for(let item of res.data.list){
                    this.getSong(item.songId);
                }
            })
        },
        //根据歌曲id查询歌曲对象，放到tempData和tableData里面
        getSong(id){
            songOfSongId(id)
            .then(res => {
                this.tempData.push(res.data.song);
                this.tableData.push(res.data.song);
            })
            .catch(err => {
                console.log(err);
            });
        },
        //添加歌曲前的准备，获取到歌曲id        
        getSongId(){
            let _this = this;
            //添加歌曲之前，通过歌手名称+歌曲名称拼接，查找到歌曲对象，并获取到这个对象的歌曲id，然后，传送给后端保存
            var songOfName = _this.registerForm.singerName+"-"+_this.registerForm.songName;
            songOfSongName(songOfName).then(
                res => {
                    _this.addSong(res.data.list[0].id)
                }
            )
        },
        //添加歌曲
        addSong(songId){
            let _this = this;
            let params = new URLSearchParams();
            params.append('songId',songId);
            params.append('songListId',this.songListId);

            listSongAdd(params)
            .then(res => {
                if(res.code == 20000){
                    this.getData();
                    this.notify("添加成功","success");
                }else{
                    this.notify("添加失败","error");
                }
            })
            .catch(err => {
                console.log(err);
            });
            _this.centerDialogVisible = false;
        },
        //删除一条歌曲
        deleteRow(){
            delListSong(this.idx,this.songListId)
            .then(res => {
                if(res.code == 20000){
                    this.getData();
                    this.notify("删除成功","success");
                }else{
                    this.notify("删除失败","error");
                }
            })
            .catch(err => {
                console.log(err);
            });
            this.delVisible = false;
        }
    }   
}
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .song-img{
        width: 100%;
        height: 80px;
        border-radius: 5px;
        margin-bottom: 5px;
        overflow: hidden;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
    .pagination{
        display: flex;
        justify-content: center;
    }
    .play {
        position: absolute;
        z-index: 100;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        top: 18px;
        left: 15px;
    }

    .icon {
        width: 2em;
        height: 2em;
        color: white;
        fill: currentColor;
        overflow: hidden;
    }
</style>

添加歌曲
image.png
image.png
image.png

添加歌曲之前，通过歌手名称+歌曲名称拼接，查找到歌曲对象，并获取到这个对象的歌曲id，然后，传送给后端保存

image.png
调用请求后端服务接口的方法
image.png
image.png

//根据歌曲id查询歌曲对象
export const songOfSongId =(id) => get(`musicserver/song/detail?songId=${id}`);
//根据歌曲名获取歌曲对象
export const songOfSongName =(songName) => get(`musicserver/song/songOfSongName?songName=${songName}`);

image.png

import {get,post} from '../http'

//============歌单的歌曲相关============
//根据歌单id查询歌曲列表
export const listSongDetail = (songListId) => get(`musicserver/songList/detail?songListId=${songListId}`);
//给歌单增加歌曲
export const listSongAdd = (params) => post(`musicserver/songList/addListSong`,params);
//删除歌单的歌曲
export const delListSong = (songId,songListId) => get(`musicserver/songList/delete?songId=${songId}&songListId=${songListId}`);

引入请求后端接口方法
image.png
添加歌曲
image.png

删除歌曲
image.png
image.png
image.png
image.png
image.png