1、后端编写

1.1 Service服务层

  1. package com.gmw.musicserver.service;
  3. import com.gmw.musicserver.entity.Song;
  4. import com.baomidou.mybatisplus.extension.service.IService;
  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 SongService extends IService<Song> {
  19.     /**
  20.      *增加
  21.      */
  22.     public boolean insertSong(Song song);
  24.     /**
  25.      *修改
  26.      */
  27.     public boolean updateSong(Song song);
  29.     /**
  30.      * 删除
  31.      */
  32.     public boolean deleteSong(Integer id);
  34.     /**
  35.      * 根据主键查询整个对象
  36.      */
  37.     public Song selectByPrimaryKey(Integer id);
  39.     /**
  40.      * 查询所有歌曲
  41.      */
  42.     public List<Song> allSong();
  44.     /**
  45.      * 根据歌名模糊查询列表
  46.      */
  47.     public List<Song> songOfName(String name);
  49.     /**
  50.      * 根据歌手id查询
  51.      */
  52.     public List<Song> songOfSingerId(Integer singerId);
  53. }
  1. package com.gmw.musicserver.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.gmw.musicserver.entity.Song;
  5. import com.gmw.musicserver.mapper.SongMapper;
  6. import com.gmw.musicserver.service.SongService;
  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 SongServiceImpl extends ServiceImpl<SongMapper, Song> implements SongService {
  23.     /**
  24.      * 添加歌曲
  25.      * @param song
  26.      * @return
  27.      */
  28.     @Override
  29.     public boolean insertSong(Song song) {
  30.         return this.baseMapper.insert(song) > 0;
  31.     }
  33.     /**
  34.      * 更新歌曲
  35.      * @param song
  36.      * @return
  37.      */
  38.     @Override
  39.     public boolean updateSong(Song song) {
  40.         return this.baseMapper.updateById(song) > 0;
  41.     }
  43.     /**
  44.      * 删除歌曲
  45.      * @param id
  46.      * @return
  47.      */
  48.     @Override
  49.     public boolean deleteSong(Integer id) {
  50.         return this.baseMapper.deleteById(id) > 0;
  51.     }
  53.     /**
  54.      * 根据主键id查询歌曲对象
  55.      * @param id
  56.      * @return
  57.      */
  58.     @Override
  59.     public Song selectByPrimaryKey(Integer id) {
  60.         return this.baseMapper.selectById(id);
  61.     }
  63.     /**
  64.      * 查询所有的歌曲
  65.      * @return
  66.      */
  67.     @Override
  68.     public List<Song> allSong() {
  69.         return this.baseMapper.selectList(null);
  70.     }
  72.     /**
  73.      * 根据歌曲名称模糊查询所有的歌曲
  74.      * @param name
  75.      * @return
  76.      */
  77.     @Override
  78.     public List<Song> songOfName(String name) {
  79.         QueryWrapper<Song> queryWrapper = new QueryWrapper<>();
  80.         queryWrapper.like("name",name);
  81.         return this.baseMapper.selectList(queryWrapper);
  82.     }
  84.     /**
  85.      * 根据歌手名称查询所有的歌曲
  86.      * @param singerId
  87.      * @return
  88.      */
  89.     @Override
  90.     public List<Song> songOfSingerId(Integer singerId) {
  91.         QueryWrapper<Song> queryWrapper = new QueryWrapper<>();
  92.         queryWrapper.eq("singer_id",singerId);
  93.         return this.baseMapper.selectList(queryWrapper);
  94.     }
  95. }

1.2 Controller控制层

  1. package com.gmw.musicserver.controller;
  4. import com.gmw.musicserver.commonutils.R;
  5. import com.gmw.musicserver.entity.Singer;
  6. import com.gmw.musicserver.entity.Song;
  7. import com.gmw.musicserver.service.SongService;
  8. import org.slf4j.Logger;
  9. import org.slf4j.LoggerFactory;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. 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/song")
  30. public class SongController {
  32.     private static final Logger logger = LoggerFactory.getLogger(SongController.class);
  34.     @Autowired
  35.     public SongService songService;
  37.     @PostMapping(value = "/addSong")
  38.     public R addSong(HttpServletRequest request, @RequestParam("file")MultipartFile file){
  39.         //获取前端传来的参数
  40.         String singerId = request.getParameter("singerId").trim();  //所属歌手id
  41.         String name = request.getParameter("name").trim();          //歌名
  42.         String introduction = request.getParameter("introduction").trim();          //简介
  43.         String pic = "/img/songPic/tubiao.jpg";                     //默认图片
  44.         String lyric = request.getParameter("lyric").trim();     //歌词
  45.         //上传歌曲文件
  46.         //先判断上传的文件是否为空
  47.         if(file.isEmpty()){
  48.             return R.error().message("歌曲上传失败!!");
  49.         }
  50.         //文件名=当前时间到毫秒+原来的文件名
  51.         String fileName = System.currentTimeMillis() + file.getOriginalFilename();
  52.         logger.info("文件名: {}",fileName);
  53.         //上传歌曲的文件路径
  54.         String filePath = System.getProperty("user.dir") + System.getProperty("file.separator")
  55.                 + "audio" + System.getProperty("file.separator") + "song";
  56.         logger.info("上传歌曲的文件地址: {}",filePath);
  57.         //如果文件路径不存在，新增该路径
  58.         File file1 = new File(filePath);
  59.         if(!file1.exists()){
  60.             file1.mkdir();
  61.         }
  62.         //实际的文件地址
  63.         String fileDist = filePath + System.getProperty("file.separator") + fileName;
  64.         logger.info("实际保存歌曲的文件地址: {}",fileDist);
  65.         File fileDest = new File(fileDist);
  66.         //存储到数据库里的相对文件地址
  67.         String storeUrlPath = "/audio/song/"+fileName;
  68.         logger.info("存储到数据库里的相对文件地址: {}",storeUrlPath);
  70.         try {
  71.             //保存上传图片
  72.             file.transferTo(fileDest);
  73.             //上传图片之后，保存歌曲的信息
  74.             Song song = new Song();
  75.             song.setSingerId(Integer.parseInt(singerId)); //歌手的ID
  76.             song.setName(name); //歌曲的名称
  77.             song.setIntroduction(introduction); //歌曲的专辑
  78.             song.setPic(pic); //歌曲的图片
  79.             song.setLyric(lyric); //歌曲的歌词
  80.             song.setUrl(storeUrlPath); //歌曲的播放地址
  82.             logger.info("歌曲对象: {}",song);
  84.             boolean flag = this.songService.insertSong(song);
  86.             if(flag){
  87.                 return R.ok().message("添加歌曲成功!!").data("storeUrlPath",storeUrlPath);
  88.             }else {
  89.                 return R.error().message("添加歌曲失败!!");
  90.             }
  92.         } catch (IOException e) {
  93.             return R.error().message("添加歌曲失败!!");
  94.         }
  95.     }
  97.     /**
  98.      * 根据歌手id查询歌曲
  99.      */
  100.     @GetMapping(value = "/singer/detail")
  101.     public R songOfSingerId(HttpServletRequest request){
  102.         String singerId = request.getParameter("singerId");
  103.         List<Song> songList = this.songService.songOfSingerId(Integer.parseInt(singerId));
  104.         logger.info("根据歌手id查询歌曲: {}",songList);
  105.         return R.ok().data("list",songList);
  106.     }
  108.     /**
  109.      * 修改歌曲
  110.      */
  111.     @PostMapping(value = "/updateSong")
  112.     public Object updateSong(HttpServletRequest request){
  113.         String id = request.getParameter("id").trim();          //主键
  114.         String name = request.getParameter("name").trim();      //歌名
  115.         String introduction = request.getParameter("introduction").trim();//专辑
  116.         String lyric = request.getParameter("lyric").trim();    //歌词
  118.         //保存到歌手的对象中
  119.         Song song = new Song();
  120.         song.setId(Integer.parseInt(id));
  121.         song.setName(name);
  122.         song.setIntroduction(introduction);
  123.         song.setLyric(lyric);
  124.         logger.info("编辑歌曲对象: {}",song);
  125.         boolean flag = this.songService.updateSong(song);
  126.         if(flag){   //保存成功
  127.            return R.ok().message("歌曲修改成功!!");
  128.         }
  130.         return R.error().message("歌曲修改失败!!");
  131.     }
  133.     /**
  134.      * 删除歌曲
  135.      */
  136.     @GetMapping(value = "/deleteSong")
  137.     public R deleteSong(HttpServletRequest request){
  138.         String id = request.getParameter("id").trim();          //主键
  139.         //-TODO 先查询到数据库中对应的文件地址，删除掉它再进行下面的代码
  141.         //通过ID主键查询歌手对象
  142.         Song song = this.songService.selectByPrimaryKey(Integer.parseInt(id));
  143.         //获取歌曲图片
  144.         String songPic = song.getPic();
  145.         logger.info("歌曲图片: {}",songPic);
  147.         //如果文件的相对路径是/img/songPic/tubiao.jpg就没必要删除
  148.         //因为它是当作默认相对路径的，需要用到
  149.         if(!songPic.equals("/img/songPic/tubiao.jpg")){
  150.             //获取歌曲保存的文件目录
  151.             String songPath = System.getProperty("user.dir") + songPic;
  152.             logger.info("获取歌曲保存的文件目录: {}",songPath);
  154.             File file = new File(songPath);
  156.             if(file.isFile()){
  157.                 //判断如果是文件的话，就删除文件
  158.                 boolean isDelete = file.delete();
  159.                 logger.info("是否删除成功: {}",isDelete);
  160.                 if(!isDelete){
  161.                     return R.error().message("删除歌曲失败!!");
  162.                 }
  163.             }
  164.         }
  165.         //获取歌曲播放地址
  166.         String songUrl = song.getUrl();
  167.         logger.info("获取歌曲播放地址: {}",songUrl);
  168.         //获取歌曲保存的文件目录
  169.         String fileSongUrlPath = System.getProperty("user.dir") + songUrl;
  170.         logger.info("获取歌曲播放地址: {}",fileSongUrlPath);
  172.         File delUrlFile = new File(fileSongUrlPath);
  174.         if(delUrlFile.isFile()){
  175.             //判断如果是文件的话，就删除文件
  176.             boolean isDelete = delUrlFile.delete();
  177.             logger.info("是否删除成功: {}",isDelete);
  178.             if(!isDelete){
  179.                 return R.error().message("删除歌曲失败!!");
  180.             }
  181.         }
  183.         boolean flag = this.songService.deleteSong(Integer.parseInt(id));
  184.         if(flag){
  185.             return R.ok().message("删除歌曲成功!!");
  186.         }
  187.         return R.error().message("删除歌曲失败!!");
  188.     }
  190.     /**
  191.      * 更新歌曲图片
  192.      */
  193.     @PostMapping(value = "/updateSongPic")
  194.     public R updateSongPic(@RequestParam("file") MultipartFile file, @RequestParam("id")int id){
  196.         /**
  197.          * 更新歌曲之前，必须把原来的歌曲图片删除掉
  198.          */
  199.         //通过ID主键查询歌手对象
  200.         Song song = this.songService.selectByPrimaryKey(id);
  201.         //获取歌曲图片
  202.         String songPic = song.getPic();
  203.         logger.info("歌曲图片: {}",songPic);
  205.         //如果文件的相对路径是/img/songPic/tubiao.jpg就没必要删除
  206.         //因为它是当作默认相对路径的，需要用到
  207.         if(!songPic.equals("/img/songPic/tubiao.jpg")){
  208.             //获取歌曲保存的文件目录
  209.             String songPath = System.getProperty("user.dir") + songPic;
  210.             logger.info("获取歌曲保存的文件目录: {}",songPath);
  212.             File file1 = new File(songPath);
  214.             if(file1.isFile()){
  215.                file1.delete();
  216.             }
  217.         }
  219.         //开始更新歌曲图片
  220.         if(file.isEmpty()){
  221.             return R.error().message("上传歌曲失败!!");
  222.         }
  224.         //文件名=当前时间到毫秒+原来的文件名
  225.         String fileName = System.currentTimeMillis()+file.getOriginalFilename();
  226.         //文件路径
  227.         String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")+"img"
  228.                 +System.getProperty("file.separator")+"songPic";
  229.         //如果文件路径不存在，新增该路径
  230.         File file1 = new File(filePath);
  231.         if(!file1.exists()){
  232.             file1.mkdir();
  233.         }
  234.         //实际的文件地址
  235.         File dest = new File(filePath+System.getProperty("file.separator")+fileName);
  236.         //存储到数据库里的相对文件地址
  237.         String storeAvatorPath = "/img/songPic/"+fileName;
  238.         try {
  239.             file.transferTo(dest);
  240.             Song song1 = new Song();
  241.             song1.setId(id); //歌曲ID
  242.             song1.setPic(storeAvatorPath); //歌曲图片相对地址
  243.             boolean flag = this.songService.updateSong(song1);
  244.             if(flag){
  245.                 return R.ok().message("更新歌曲图片成功!!");
  246.             }else {
  247.                 return R.error().message("更新歌曲图片失败!!");
  248.             }
  250.         } catch (IOException e) {
  251.             return R.error().message("更新歌曲图片失败!!");
  252.         }
  253.     }
  256.     /**
  257.      * 更新歌曲
  258.      */
  259.     @PostMapping(value = "/updateSongUrl")
  260.     public R updateSongUrl(@RequestParam("file") MultipartFile avatorFile, @RequestParam("id")int id){
  261.         /**
  262.          * 更新歌曲之前，必须把原来的歌曲文件删除掉
  263.          */
  264.         //通过ID主键查询歌手对象
  265.         Song song = this.songService.selectByPrimaryKey(id);
  266.         //获取歌曲播放地址
  267.         String songUrl = song.getUrl();
  268.         logger.info("获取歌曲播放地址: {}",songUrl);
  269.         //获取歌曲保存的文件目录
  270.         String fileSongUrlPath = System.getProperty("user.dir") + songUrl;
  271.         logger.info("获取歌曲播放地址: {}",fileSongUrlPath);
  273.         File delUrlFile = new File(fileSongUrlPath);
  275.         if(delUrlFile.isFile()){
  276.             delUrlFile.delete();
  277.         }
  279.         //开始文件上传
  281.         if(avatorFile.isEmpty()){
  282.            return R.error().message("文件上传失败!!");
  283.         }
  284.         //文件名=当前时间到毫秒+原来的文件名
  285.         String fileName = System.currentTimeMillis()+avatorFile.getOriginalFilename();
  286.         //文件路径
  287.         String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")
  288.                 + "audio" + System.getProperty("file.separator") + "song";
  289.         //如果文件路径不存在，新增该路径
  290.         File file1 = new File(filePath);
  291.         if(!file1.exists()){
  292.             file1.mkdir();
  293.         }
  294.         //实际的文件地址
  295.         File dest = new File(filePath+System.getProperty("file.separator")+fileName);
  296.         //存储到数据库里的相对文件地址
  297.         String storeAvatorPath = "/audio/song/"+fileName;
  298.         try {
  299.             avatorFile.transferTo(dest);
  300.             Song song1 = new Song();
  301.             song1.setId(id);
  302.             song1.setUrl(storeAvatorPath);
  303.             boolean flag = this.songService.updateSong(song1);
  304.             if(flag){
  305.                 return R.ok().message("更新歌曲播放文件成功!!");
  306.             }else {
  307.                 return R.error().message("更新歌曲播放文件失败!!");
  308.             }
  309.         } catch (IOException e) {
  310.             return R.error().message("更新歌曲播放文件失败!!");
  311.         }
  312.     }
  313. }

1.3 配置图片、音频定位各种文件或头像地址

image.png

  1. package com.gmw.musicserver.config;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  7. /**
  8.  * 定位各种文件或头像地址
  9.  */
  10. @Configuration
  11. public class FileConfig implements WebMvcConfigurer {
  13.     @Override
  14.     public void addResourceHandlers(ResourceHandlerRegistry registry) {
  15.         /**
  16.          * 歌手头像地址
  17.          */
  18.         registry.addResourceHandler("/img/singerPic/**")
  19.                 .addResourceLocations(
  20.                         "file:" + System.getProperty("user.dir") + System.getProperty("file.separator")
  21.                         + "img" + System.getProperty("file.separator")
  22.                         + "singerPic" + System.getProperty("file.separator")
  23.                 );
  24.         /**
  25.          * 歌单图片地址
  26.          */
  27.         registry.addResourceHandler("/img/songListPic/**")
  28.                 .addResourceLocations(
  29.                         "file:" + System.getProperty("user.dir") + System.getProperty("file.separator")
  30.                         + "img" + System.getProperty("file.separator")
  31.                         + "songListPic" + System.getProperty("file.separator")
  32.                 );
  34.         /**
  35.          * 歌曲图片地址
  36.          */
  37.         registry.addResourceHandler("/img/songPic/**")
  38.                 .addResourceLocations(
  39.                         "file:" + System.getProperty("user.dir") + System.getProperty("file.separator")
  40.                         + "img" + System.getProperty("file.separator")
  41.                         + "songPic" + System.getProperty("file.separator")
  42.                 );
  44.         /**
  45.          * 歌曲播放地址
  46.          */
  47.         registry.addResourceHandler("/audio/song/**")
  48.                 .addResourceLocations(
  49.                   "file:" + System.getProperty("user.dir") + System.getProperty("file.separator")
  50.                   + "audio" + System.getProperty("file.separator")
  51.                   + "song" + System.getProperty("file.separator")
  52.                 );
  53.     }
  54. }

2、前端编写

  1. <template>
  2.     <div class="table">
  3.         <div class="crumbs">
  4.             <i class="el-icon-tickets"></i>歌曲信息
  5.         </div>
  6.         <div class="container">
  7.             <div class="handle-box">
  8.                 <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
  9.                 <el-input v-model="select_word" size="mini" placeholder="请输入歌曲名" class="handle-input"></el-input>
  10.                 <el-button type="primary" size="mini" @click="centerDialogVisible = true">添加歌曲</el-button>
  11.             </div>
  12.         </div>
  13.         <el-table size="mini" ref="multipleTable" border style="width:100%" height="680px" :data="data" @selection-change="handleSelectionChange">
  14.             <el-table-column type="selection" width="40"></el-table-column>
  15.             <el-table-column label="歌曲图片" width="110" align="center">
  16.                 <template slot-scope="scope">
  17.                     <div class="song-img">
  18.                         <img :src="getUrl(scope.row.pic)" style="width:100%"/>
  19.                     </div>
  20.                     <div class="play" @click="setSongUrl(scope.row.url,scope.row.name)">
  21.                         <div v-if="toggle == scope.row.name">
  22.                             <svg class="icon">
  23.                                 <use xlink:href="#icon-zanting"></use>
  24.                             </svg>
  25.                         </div>
  26.                         <div v-if="toggle != scope.row.name">
  27.                             <svg class="icon">
  28.                                 <use xlink:href="#icon-bofanganniu"></use>
  29.                             </svg>
  30.                         </div>
  31.                     </div>
  32.                 </template>
  33.             </el-table-column>
  34.             <el-table-column prop="name" label="歌手-歌名" width="120" align="center"></el-table-column>
  35.             <el-table-column prop="introduction" label="专辑" width="150" align="center"></el-table-column>
  36.             <el-table-column label="歌词" align="center">
  37.                 <template slot-scope="scope">
  38.                     <ul style="height:100px;overflow:scroll;">
  39.                         <li v-for="(item,index) in parseLyric(scope.row.lyric)" :key="index">
  40.                             {{item}}
  41.                         </li>
  42.                     </ul>
  43.                 </template>
  44.             </el-table-column>
  45.             <el-table-column label="资源更新" align="center" width="100">
  46.                 <template slot-scope="scope">
  47.                     <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload" 
  48.                         :on-success="handleAvatorSuccess">
  49.                         <el-button size="mini">更新图片</el-button>
  50.                     </el-upload>
  51.                     <br/>
  52.                     <el-upload :action="uploadSongUrl(scope.row.id)" :before-upload="beforeSongUpload" 
  53.                         :on-success="handleSongSuccess">
  54.                         <el-button size="mini">更新歌曲</el-button>
  55.                     </el-upload>
  56.                 </template>
  57.             </el-table-column>
  59.             <el-table-column label="操作" width="150" align="center">
  60.                 <template slot-scope="scope">
  61.                     <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
  62.                     <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> 
  63.                 </template>
  64.             </el-table-column>
  65.         </el-table>
  66.         <div class="pagination">
  67.             <el-pagination
  68.                 background
  69.                 layout = "total,prev,pager,next"
  70.                 :current-page="currentPage"
  71.                 :page-size="pageSize"
  72.                 :total="tableData.length"
  73.                 @current-change="handleCurrentChange"
  74.                 >
  75.             </el-pagination>
  76.         </div>
  78.         <el-dialog title="添加歌曲" :visible.sync="centerDialogVisible" width="400px" center>
  79.             <el-form :model="registerForm" ref="registerForm" label-width="80px" action="" id="tf">
  80.                 <div>
  81.                     <label>歌名</label>
  82.                     <el-input type="text" name="name"></el-input>
  83.                 </div>
  84.                 <div>
  85.                     <label>专辑</label>
  86.                     <el-input type="text" name="introduction"></el-input>
  87.                 </div>
  88.                 <div>
  89.                     <label>歌词</label>
  90.                     <el-input type="textarea" name="lyric"></el-input>
  91.                 </div>
  92.                 <div>
  93.                     <label>歌曲上传</label>
  94.                     <input type="file" name="file">
  95.                 </div>
  96.             </el-form>
  97.             <span slot="footer">
  98.                 <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
  99.                 <el-button size="mini" @click="addSong">确定</el-button>                
  100.             </span>
  101.         </el-dialog>
  103.         <el-dialog title="修改歌曲" :visible.sync="editVisible" width="400px" center>
  104.             <el-form :model="form" ref="form" label-width="80px">
  105.                 <el-form-item prop="name" label="歌手-歌名" size="mini">
  106.                     <el-input v-model="form.name" placeholder="歌手-歌名"></el-input>
  107.                 </el-form-item>                
  108.                 <el-form-item prop="introduction" label="专辑" size="mini">
  109.                     <el-input v-model="form.introduction" placeholder="专辑"></el-input>
  110.                 </el-form-item> 
  111.                 <el-form-item prop="lyric" label="歌词" size="mini">
  112.                     <el-input v-model="form.lyric" placeholder="歌词" type="textarea"></el-input>
  113.                 </el-form-item> 
  115.             </el-form>
  116.             <span slot="footer">
  117.                 <el-button size="mini" @click="editVisible = false">取消</el-button>
  118.                 <el-button size="mini" @click="editSave">确定</el-button>                
  119.             </span>
  120.         </el-dialog>
  122.         <el-dialog title="删除歌曲" :visible.sync="delVisible" width="300px" center>
  123.             <div align="center">删除不可恢复，是否确定删除？</div>
  124.             <span slot="footer">
  125.                 <el-button size="mini" @click="delVisible = false">取消</el-button>
  126.                 <el-button size="mini" @click="deleteRow">确定</el-button>                
  127.             </span>
  128.         </el-dialog>
  129.     </div>
  130. </template>
  132. <script>
  133. import { mixin } from '../mixins/index';
  134. import {mapGetters} from 'vuex';
  135. import '@/assets/js/iconfont.js';
  136. import {songOfSingerId,updateSong,delSong} from '../api/song/index';
  138. export default {
  139.     mixins: [mixin],
  140.     data(){
  141.         return{
  142.             singerId: '',               //歌手id
  143.             singerName: '',             //歌手名
  144.             centerDialogVisible: false, //添加弹窗是否显示
  145.             editVisible: false,         //编辑弹窗是否显示
  146.             delVisible: false,          //删除弹窗是否显示
  147.             registerForm:{      //添加框
  148.                 name: '',
  149.                 singerName: '',                
  150.                 introduction: '',
  151.                 lyric: ''
  152.             },
  153.             form:{      //编辑框
  154.                 id: '',
  155.                 name: '',
  156.                 introduction: '',
  157.                 lyric: ''
  158.             },
  159.             tableData: [],
  160.             tempData: [],
  161.             select_word: '',
  162.             pageSize: 5,    //分页每页大小
  163.             currentPage: 1,  //当前页
  164.             idx: -1,          //当前选择项
  165.             multipleSelection: [],   //哪些项已经打勾
  166.             toggle: false           //播放器的图标状态
  167.         }
  168.     },
  169.     computed:{
  170.         ...mapGetters([
  171.             'isPlay'
  172.         ]),
  173.         //计算当前搜索结果表里的数据
  174.         data(){
  175.             return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize)
  176.         }
  177.     },
  178.     watch:{
  179.         //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
  180.         select_word: function(){
  181.             if(this.select_word == ''){
  182.                 this.tableData = this.tempData;
  183.             }else{
  184.                 this.tableData = [];
  185.                 for(let item of this.tempData){
  186.                     if(item.name.includes(this.select_word)){
  187.                         this.tableData.push(item);
  188.                     }
  189.                 }
  190.             }
  191.         }
  192.     },
  193.     created(){
  194.         this.singerId = this.$route.query.id;
  195.         this.singerName = this.$route.query.name;
  196.         this.getData();
  197.     },
  198.     destroyed() {
  199.         this.$store.commit('setIsPlay',false);
  200.     },
  201.     methods:{
  202.         //获取当前页
  203.         handleCurrentChange(val){
  204.             this.currentPage = val;
  205.         },
  206.         //查询所有歌手
  207.         getData(){
  208.             this.tempData = [];
  209.             this.tableData = [];
  210.             songOfSingerId(this.singerId).then(res => {
  211.                 this.tempData = res.data.list;
  212.                 this.tableData = res.data.list;
  213.                 this.currentPage = 1;
  214.             })
  215.         },
  216.         //添加歌手
  217.         addSong(){
  218.             let _this = this;
  219.             var form = new FormData(document.getElementById('tf'));
  220.             form.append('singerId',this.singerId);
  221.             form.set('name',this.singerName+'-'+form.get('name'));
  222.             if(!form.get('lyric')){
  223.                 form.set('lyric','[00:00:00]暂无歌词');
  224.             }
  225.             var req = new XMLHttpRequest();
  226.             req.onreadystatechange = function(){
  227.                 //req.readyState == 4 获取到返回的完整数据
  228.                 //req.status == 200 和后台正常交互完成
  229.                 if(req.readyState == 4 && req.status == 200){
  230.                     let res = JSON.parse(req.response);
  231.                     if(res.code){
  232.                         _this.getData();
  233.                         _this.registerForm = {};
  234.                         _this.notify(res.msg,'success');
  235.                     }else{
  236.                          _this.notify('保存失败','error');
  237.                     }
  238.                 }
  239.             }
  240.             req.open('post',`${_this.$store.state.HOST}/musicserver/song/addSong`,false);
  241.             req.send(form);
  242.             _this.centerDialogVisible = false;
  243.         },
  244.         //弹出编辑页面
  245.         handleEdit(row){
  246.             this.editVisible = true;
  247.             this.form = {
  248.                 id: row.id,
  249.                 name: row.name,
  250.                 introduction: row.introduction,
  251.                 lyric: row.lyric
  252.             }
  253.         },
  254.         //保存编辑页面修改的数据
  255.         editSave(){
  256.             let params = new URLSearchParams();
  257.             params.append('id',this.form.id);
  258.             params.append('name',this.form.name);
  259.             params.append('introduction',this.form.introduction);
  260.             params.append('lyric',this.form.lyric);
  262.             updateSong(params)
  263.             .then(res => {
  264.                 if(res.code == 20000){
  265.                     this.getData();
  266.                     this.notify("修改成功","success");
  267.                 }else{
  268.                     this.notify("修改失败","error");
  269.                 }
  270.             })
  271.             .catch(err => {
  272.                 console.log(err);
  273.             });
  274.             this.editVisible = false;
  275.         },
  276.         //更新图片
  277.         uploadUrl(id){
  278.             return `${this.$store.state.HOST}/musicserver/song/updateSongPic?id=${id}`
  279.         },
  280.         //删除一名歌手
  281.         deleteRow(){
  282.             delSong(this.idx)
  283.             .then(res => {
  284.                 if(res.code == 20000){
  285.                     this.getData();
  286.                     this.notify("删除成功","success");
  287.                 }else{
  288.                     this.notify("删除失败","error");
  289.                 }
  290.             })
  291.             .catch(err => {
  292.                 console.log(err);
  293.             });
  294.             this.delVisible = false;
  295.         },
  296.         //解析歌词
  297.         parseLyric(text){
  298.             let lines = text.split("\n");
  299.             let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g;
  300.             let result = [];
  301.             for(let item of lines){
  302.                 let value = item.replace(pattern,'');
  303.                 result.push(value);
  304.             }
  305.             return result;
  306.         },
  307.         //上传歌曲之前的校验
  308.         beforeSongUpload(file){
  309.             var testMsg = file.name.substring(file.name.lastIndexOf('.') + 1);
  310.             if(testMsg!='mp3'){
  311.                 this.$message({
  312.                     message: '上传文件只能是mp3格式',
  313.                     type: 'error'
  314.                 });
  315.                 return false;
  316.             }
  317.             return true;
  318.         },
  319.         //上传歌曲成功之后要做的工作
  320.         handleSongSuccess(res){
  321.             let _this = this;
  322.             if(res.code == 20000){
  323.                 _this.getData();
  324.                 _this.$notify({
  325.                     title: '上传成功',
  326.                     type: 'success'
  327.                 });
  328.             }else{
  329.                 _this.$notify({
  330.                     title: '上传失败',
  331.                     type: 'error'
  332.                 });
  333.             }
  334.         },
  335.         //更新歌曲url
  336.         uploadSongUrl(id){
  337.             return `${this.$store.state.HOST}/musicserver/song/updateSongUrl?id=${id}`
  338.         },
  339.         //切换播放歌曲
  340.         setSongUrl(url,name) {
  341.             this.toggle = name;
  342.             this.$store.commit('setUrl',this.$store.state.HOST + url);
  343.             if(this.isPlay){
  344.                 this.$store.commit('setIsPlay',false);
  345.             }else{
  346.                 this.$store.commit('setIsPlay',true);
  347.             }
  348.         }
  349.     }   
  350. }
  351. </script>
  353. <style scoped>
  354.     .handle-box{
  355.         margin-bottom: 20px;
  356.     }
  357.     .song-img{
  358.         width: 100%;
  359.         height: 80px;
  360.         border-radius: 5px;
  361.         margin-bottom: 5px;
  362.         overflow: hidden;
  363.     }
  364.     .handle-input{
  365.         width: 300px;
  366.         display: inline-block;
  367.     }
  368.     .pagination{
  369.         display: flex;
  370.         justify-content: center;
  371.     }
  372.     .play {
  373.         position: absolute;
  374.         z-index: 100;
  375.         width: 80px;
  376.         height: 80px;
  377.         display: flex;
  378.         align-items: center;
  379.         justify-content: center;
  380.         cursor: pointer;
  381.         top: 18px;
  382.         left: 15px;
  383.     }
  385.     .icon {
  386.         width: 2em;
  387.         height: 2em;
  388.         color: white;
  389.         fill: currentColor;
  390.         overflow: hidden;
  391.     }
  392. </style>

2.1 添加歌曲

image.png
image.png

<el-dialog title="添加歌曲" :visible.sync="centerDialogVisible" width="400px" center>
  <el-form :model="registerForm" ref="registerForm" label-width="80px" action="" id="tf">
    <div>
      <label>歌名</label>
      <el-input type="text" name="name"></el-input>
    </div>
    <div>
      <label>专辑</label>
      <el-input type="text" name="introduction"></el-input>
    </div>
    <div>
      <label>歌词</label>
      <el-input type="textarea" name="lyric"></el-input>
    </div>
    <div>
      <label>歌曲上传</label>
      <input type="file" name="file">
    </div>
  </el-form>
  <span slot="footer">
    <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
    <el-button size="mini" @click="addSong">确定</el-button>                
  </span>
</el-dialog>

image.png

:visible.sync=”centerDialogVisible” 当centerDialogVisible为true时，会弹出文本输入框，否则隐藏

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

import {get,post} from '../http'
//============歌曲相关================
//根据歌手id查询歌曲
export const songOfSingerId =(id) => get(`musicserver/song/singer/detail?singerId=${id}`);
//编辑歌曲
export const updateSong = (params) => post(`musicserver/song/updateSong`,params);
//删除歌曲
export const delSong = (id) => get(`musicserver/song/deleteSong?id=${id}`);

编写添加歌曲方法
image.png
image.png

 //添加歌手
addSong(){
  let _this = this;
  var form = new FormData(document.getElementById('tf'));
  form.append('singerId',this.singerId); //添加歌手的id到form中
  form.set('name',this.singerName+'-'+form.get('name')); //设置歌曲的名称格式为：歌手名称-歌曲名称
  if(!form.get('lyric')){
    form.set('lyric','[00:00:00]暂无歌词');
  }
  var req = new XMLHttpRequest();
  req.onreadystatechange = function(){
    //req.readyState == 4 获取到返回的完整数据
    //req.status == 200 和后台正常交互完成
    if(req.readyState == 4 && req.status == 200){
      let res = JSON.parse(req.response);
      if(res.code){
        _this.getData();
        _this.registerForm = {};
        _this.notify(res.msg,'success');
      }else{
        _this.notify('保存失败','error');
      }
    }
  }
  req.open('post',`${_this.$store.state.HOST}/musicserver/song/addSong`,false);
  req.send(form);
  _this.centerDialogVisible = false;
},

2.2 查询/修改/删除跟歌手管理模块一样（省略）

2.3 歌词显示

image.png
解析歌词（歌词前面带有[00:00.22]格式的替换为空字符串）

//解析歌词
parseLyric(text){
  let lines = text.split("\n");
  let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g; //歌词前面带有[00:00.22]格式的替换为空字符串
  let result = [];
  for(let item of lines){
    let value = item.replace(pattern,'');
    result.push(value);
  }
  return result;
},

进行歌词的解析
image.png

2.4 更新歌曲图片/更新歌曲文件

image.png
image.png

<el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload" 
           :on-success="handleAvatorSuccess">
  <el-button size="mini">更新图片</el-button>
</el-upload>
<br/>
<el-upload :action="uploadSongUrl(scope.row.id)" :before-upload="beforeSongUpload" 
           :on-success="handleSongSuccess">
  <el-button size="mini">更新歌曲</el-button>
</el-upload>

1）更新歌曲图片

:action=”uploadUrl(scope.row.id)” 表示要访问的后台地址，并携带歌曲的id，通过id修改歌曲图像
image.png

//更新图片
uploadUrl(id){
  return `${this.$store.state.HOST}/musicserver/song/updateSongPic?id=${id}`
},

:before-upload=”beforeAvatorUpload” 表示文件上传之前，进行哪些操作，比如：上传的文件类型、大小都可以做限制；

 //上传图片之前的校验
beforeAvatorUpload(file){
  const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');
  if(!isJPG){
    this.$message.error('上传头像图片只能是jpg或png格式');
    return false;
  }
  const isLt2M = (file.size / 1024 /1024) < 2;
  if(!isLt2M){
    this.$message.error('上传头像图片大小不能超过2MB');
    return false;
  }
  return true;
},

:on-success=”handleAvatorSuccess” 表示上传成功后需要进行哪些操作，比如：提示上传成功或者失败

//上传图片成功之后要做的工作
handleAvatorSuccess(res){
  let _this = this;
  if(res.code == 20000){
    _this.getData();
    _this.$notify({
      title: '上传成功',
      type: 'success'
    });
  }else{
    _this.$notify({
      title: '上传失败',
      type: 'error'
    });
  }
},

2）更新歌曲文件

:action=”uploadSongUrl(scope.row.id)” 表示要访问的后台地址，并携带歌曲的id，通过id修改歌曲图像
image.png

//更新歌曲url
uploadSongUrl(id){
  return `${this.$store.state.HOST}/musicserver/song/updateSongUrl?id=${id}`
},

:before-upload=”beforeSongUpload” 表示文件上传之前，进行哪些操作，比如：上传的文件类型、大小都可以做限制；

//上传歌曲之前的校验
beforeSongUpload(file){
  var testMsg = file.name.substring(file.name.lastIndexOf('.') + 1);
  if(testMsg!='mp3'){
    this.$message({
      message: '上传文件只能是mp3格式',
      type: 'error'
    });
    return false;
  }
  return true;
},

:on-success=”handleSongSuccess” 表示上传成功后需要进行哪些操作，比如：提示上传成功或者失败

//上传歌曲成功之后要做的工作
handleSongSuccess(res){
  let _this = this;
  if(res.code == 20000){
    _this.getData();
    _this.$notify({
      title: '上传成功',
      type: 'success'
    });
  }else{
    _this.$notify({
      title: '上传失败',
      type: 'error'
    });
  }
},

2.5 页面播放歌曲

1）设置全局共享属性：id、url、isPlay

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        HOST: 'http://127.0.0.1:8888',
        isPlay: false,          //是否播放中
        url: '',                //歌曲地址
        id: ''                  //歌曲id
    },
    getters: { //获取共享属性的方法
        isPlay: state => state.isPlay,
        url: state => state.url,
        id: state => state.id
    },
    mutations: { //设置共享属性的方法
        setIsPlay: (state,isPlay) => {state.isPlay = isPlay},
        setUrl: (state,url) => {state.url = url},
        setId: (state,id) => {state.id = id}
    }
})

export default store

2）创建SongAudio.vue组件，专门用来播放音乐

<template>
    <div class="song-audio">
        <audio id="player" 
            :src="url" 
            controls = "controls" 
            preload = "true"
            @canplay="startPlay" 
            @ended="ended"
        ></audio>
    </div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
    name: 'song-audio',
    computed: {
        ...mapGetters([
            'id',
            'url',
            'isPlay'
        ])
    },
    watch:{
        //监听播放还是暂停
        isPlay: function(){
            this.togglePlay();
        }
    },
    methods:{
        //获取链接后准备播放
        startPlay(){
            let player = document.querySelector('#player');
            //开始播放
            player.play();
        },
        //播放完成之后触发
        ended(){
           this.isPlay = false
        },
        //开始、暂停
        togglePlay() {
            let player = document.querySelector('#player');
            if(this.isPlay){
                player.play();
            }else{
                player.pause();
            }
        }
    }
}
</script>

<style>
    .song-audio {
        display: none;
    }
</style>

3）在App.vue页面中，引入该组件

<template>
  <div id="app">
    <SongAudio />
    <router-view></router-view>
  </div>
</template>

<script>
import SongAudio from './components/SongAudio';
export default {
  name: 'App',
  components: {
    SongAudio
  }
}
</script>

<style>
</style>

4）在SongPage.vue歌曲页面中进行参数的设置
image.png
image.png
image.png

  //切换播放歌曲
setSongUrl(url,name) {
  this.toggle = name;
  this.$store.commit('setUrl',this.$store.state.HOST + url);
  if(this.isPlay){
    this.$store.commit('setIsPlay',false);
  }else{
    this.$store.commit('setIsPlay',true);
  }
}