1、后端编写

1.1 Service服务层编写

  1. package com.gmw.musicserver.service;
  3. import com.gmw.musicserver.entity.Singer;
  4. import com.baomidou.mybatisplus.extension.service.IService;
  6. import java.util.List;
  8. /**
  9.  * <p>
  10.  * 歌手表 服务类
  11.  * </p>
  12.  *
  13.  * @author 未进化的程序猿
  14.  * @since 2022-01-26
  15.  */
  16. public interface SingerService extends IService<Singer> {
  17.     /**
  18.      *增加
  19.      */
  20.     public boolean insertSinger(Singer singer);
  22.     /**
  23.      *修改
  24.      */
  25.     public boolean updateSinger(Singer singer);
  27.     /**
  28.      * 删除
  29.      */
  30.     public boolean deleteSinger(Integer id);
  32.     /**
  33.      * 根据主键查询整个对象
  34.      */
  35.     public Singer selectByPrimaryKey(Integer id);
  37.     /**
  38.      * 查询所有歌手
  39.      */
  40.     public List<Singer> allSinger();
  42.     /**
  43.      * 根据歌手名字模糊查询列表
  44.      */
  45.     public List<Singer> singerOfName(String name);
  47.     /**
  48.      * 根据性别查询
  49.      */
  50.     public List<Singer> singerOfSex(Integer sex);
  51. }
  1. package com.gmw.musicserver.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.gmw.musicserver.entity.Singer;
  5. import com.gmw.musicserver.mapper.SingerMapper;
  6. import com.gmw.musicserver.service.SingerService;
  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 SingerServiceImpl extends ServiceImpl<SingerMapper, Singer> implements SingerService {
  23.     /**
  24.      * 添加歌手
  25.      * @param singer
  26.      * @return
  27.      */
  28.     @Override
  29.     public boolean insertSinger(Singer singer) {
  30.         int insert = this.baseMapper.insert(singer);
  31.         return insert > 0;
  32.     }
  34.     /**
  35.      * 更新歌手
  36.      * @param singer
  37.      * @return
  38.      */
  39.     @Override
  40.     public boolean updateSinger(Singer singer) {
  41.         return this.baseMapper.updateById(singer) > 0;
  42.     }
  44.     /**
  45.      * 删除歌手
  46.      * @param id
  47.      * @return
  48.      */
  49.     @Override
  50.     public boolean deleteSinger(Integer id) {
  51.         return this.baseMapper.deleteById(id) > 0;
  52.     }
  54.     /**
  55.      * 根据主键ID查询歌手
  56.      * @param id
  57.      * @return
  58.      */
  59.     @Override
  60.     public Singer selectByPrimaryKey(Integer id) {
  61.         return this.baseMapper.selectById(id);
  62.     }
  64.     /**
  65.      * 查询所有的歌手
  66.      * @return
  67.      */
  68.     @Override
  69.     public List<Singer> allSinger() {
  70.         return this.baseMapper.selectList(null);
  71.     }
  73.     /**
  74.      * 根据歌手的名称，模糊查询所有歌手
  75.      * @param name
  76.      * @return
  77.      */
  78.     @Override
  79.     public List<Singer> singerOfName(String name) {
  80.         QueryWrapper<Singer> queryWrapper = new QueryWrapper<>();
  81.         queryWrapper.like("name",name);
  82.         return this.baseMapper.selectList(queryWrapper);
  83.     }
  85.     /**
  86.      * 根据性别查询所有的歌手
  87.      * @param sex
  88.      * @return
  89.      */
  90.     @Override
  91.     public List<Singer> singerOfSex(Integer sex) {
  92.         QueryWrapper<Singer> queryWrapper = new QueryWrapper<>();
  93.         queryWrapper.eq("sex",sex);
  94.         return this.baseMapper.selectList(queryWrapper);
  95.     }
  96. }

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.service.SingerService;
  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.*;
  11. import org.springframework.web.multipart.MultipartFile;
  13. import javax.servlet.http.HttpServletRequest;
  14. import java.io.File;
  15. import java.io.IOException;
  16. import java.text.DateFormat;
  17. import java.text.ParseException;
  18. import java.text.SimpleDateFormat;
  19. import java.util.Date;
  20. import java.util.List;
  22. /**
  23.  * <p>
  24.  * 歌手表 前端控制器
  25.  * 歌手管理
  26.  * </p>
  27.  *
  28.  * @author 未进化的程序猿
  29.  * @since 2022-01-26
  30.  */
  31. @RestController
  32. @RequestMapping("/musicserver/singer")
  33. public class SingerController {
  35.     public static final Logger logger = LoggerFactory.getLogger(SingerController.class);
  37.     @Autowired
  38.     public SingerService singerService;
  40.     /**
  41.      * 添加歌手
  42.      */
  43.     @PostMapping(value = "/addSinger")
  44.     public R addSinger(HttpServletRequest request){
  45.         String name = request.getParameter("name").trim();      //姓名
  46.         String sex = request.getParameter("sex").trim();        //性别
  47.         String pic = request.getParameter("pic").trim();        //头像
  48.         String birth = request.getParameter("birth").trim();    //生日
  49.         String location = request.getParameter("location").trim();//地区
  50.         String introduction = request.getParameter("introduction").trim();//简介
  51.         //把生日转换成Date格式
  52.         DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
  53.         Date birthDate = new Date();
  54.         try {
  55.             birthDate = dateFormat.parse(birth);
  56.         } catch (ParseException e) {
  57.             e.printStackTrace();
  58.         }
  59.         //保存到歌手的对象中
  60.         Singer singer = new Singer();
  61.         singer.setName(name);
  62.         singer.setSex(Integer.parseInt(sex));
  63.         singer.setBirth(birthDate);
  64.         singer.setLocation(location);
  65.         singer.setIntroduction(introduction);
  66.         singer.setPic("/img/singerPic/hhh.jpg");
  67.         logger.info("歌手对象: {}",singer);
  68.         boolean flag = this.singerService.insertSinger(singer);
  69.         if(flag){
  70.             return R.ok().message("添加歌手成功!!");
  71.         }
  72.         return R.error().message("添加歌手失败!!");
  73.     }
  75.     /**
  76.      * 修改歌手
  77.      */
  78.     @PostMapping(value = "/updateSinger")
  79.     public R updateSinger(HttpServletRequest request){
  80.         String id = request.getParameter("id").trim();          //主键
  81.         String name = request.getParameter("name").trim();      //姓名
  82.         String sex = request.getParameter("sex").trim();        //性别
  83.         String birth = request.getParameter("birth").trim();    //生日
  84.         String location = request.getParameter("location").trim();//地区
  85.         String introduction = request.getParameter("introduction").trim();//简介
  86.         //把生日转换成Date格式
  87.         DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
  88.         Date birthDate = new Date();
  89.         try {
  90.             birthDate = dateFormat.parse(birth);
  91.         } catch (ParseException e) {
  92.             e.printStackTrace();
  93.         }
  94.         //保存到歌手的对象中
  95.         Singer singer = new Singer();
  96.         singer.setId(Integer.parseInt(id));
  97.         singer.setName(name);
  98.         singer.setSex(Integer.parseInt(sex));
  99.         singer.setBirth(birthDate);
  100.         singer.setLocation(location);
  101.         singer.setIntroduction(introduction);
  104.         logger.info("歌手对象: {}",singer);
  105.         boolean flag = this.singerService.updateSinger(singer);
  107.         if(flag){
  108.             return R.ok().message("修改歌手成功!!");
  109.         }
  110.         return R.error().message("修改歌手失败!!");
  111.     }
  114.     /**
  115.      * 删除歌手
  116.      */
  117.     @GetMapping(value = "/deleteSinger")
  118.     public R deleteSinger(HttpServletRequest request){
  119.         Integer id = Integer.parseInt(request.getParameter("id"));
  121.         //删除歌手之前，也需要删除歌手的图片
  122.         //通过ID主键查询歌手对象
  123.         Singer singer = this.singerService.selectByPrimaryKey(id);
  124.         //获取歌手图片
  125.         String singerPic = singer.getPic();
  126.         logger.info("歌手图片: {}",singerPic);
  128.         //获取歌手保存的文件目录
  129.         String singerPath = System.getProperty("user.dir") + singerPic;
  130.         logger.info("获取歌手保存的文件目录: {}",singerPath);
  132.         File file = new File(singerPath);
  134.         if(file.isFile()){
  135.             //判断如果是文件的话，就删除文件
  136.             boolean isDelete = file.delete();
  137.             logger.info("是否删除成功: {}",isDelete);
  138.             if(!isDelete){
  139.                 return R.error().message("删除歌手失败!!");
  140.             }
  141.         }
  143.         boolean flag = this.singerService.deleteSinger(id);
  144.         if(flag){
  145.             return R.ok().message("删除歌手成功!!");
  146.         }
  147.         return R.error().message("删除歌手失败!!");
  148.     }
  150.     /**
  151.      * 根据主键查询整个对象
  152.      */
  153.     @GetMapping(value = "/selectByPrimaryKey")
  154.     public R selectByPrimaryKey(HttpServletRequest request){
  155.         Integer id = Integer.parseInt(request.getParameter("id"));
  156.         Singer singer = this.singerService.selectByPrimaryKey(id);
  157.         return R.ok().data("singer",singer);
  158.     }
  160.     /**
  161.      * 查询所有歌手
  162.      */
  163.     @GetMapping(value = "/allSinger")
  164.     public R allSinger(){
  165.         List<Singer> singerList = this.singerService.allSinger();
  166.         logger.info("查询所有歌手: {}",singerList);
  167.         return R.ok().data("list",singerList);
  168.     }
  170.     /**
  171.      * 根据歌手名字模糊查询列表
  172.      */
  173.     @GetMapping(value = "/singerOfName")
  174.     public R singerOfName(HttpServletRequest request){
  175.         String name = request.getParameter("name");
  176.         logger.info("歌手名称: {}",name);
  177.         List<Singer> singerList = this.singerService.singerOfName(name);
  179.         return R.ok().data("list",singerList);
  180.     }
  182.     /**
  183.      * 根据性别查询
  184.      */
  185.     @GetMapping(value = "/singerOfSex")
  186.     public R singerOfSex(HttpServletRequest request){
  187.         Integer sex = Integer.parseInt(request.getParameter("sex"));
  188.         List<Singer> singerList = this.singerService.singerOfSex(sex);
  190.         return R.ok().data("list",singerList);
  191.     }
  193.     /**
  194.      * 更新歌手图片
  195.      */
  196.     @PostMapping(value = "/updateSingerPic")
  197.     public R updateSingerPic(@RequestParam("file")MultipartFile file,@RequestParam("id") Integer id){
  198.         logger.info("歌手ID: {}",id);
  199.         //判断上传的图片是否为空
  200.         if(file.isEmpty()){
  201.             logger.info("上传图片失败");
  202.             return R.error().message("上传图片失败!!");
  203.         }
  204.         //文件名=当前时间到毫秒+原来的文件名
  205.         String fileName = System.currentTimeMillis() + file.getOriginalFilename();
  206.         logger.info("文件名: {}",fileName);
  207.         //上传文件保存路径
  208.         String filePath = System.getProperty("user.dir")
  209.                 + System.getProperty("file.separator") + "img"
  210.                 + System.getProperty("file.separator") + "singerPic";
  211.         logger.info("上传文件保存路径: {}" ,filePath);
  212.         //如果文件路径不存在，新增该路径
  213.         File file1 = new File(filePath);
  214.         if (!file1.exists()){
  215.             file1.mkdir();
  216.         }
  217.         //实际的文件地址
  218.         String fileDest = filePath + System.getProperty("file.separator") + fileName;
  219.         logger.info("实际文件地址: {}",fileDest);
  220.         File dest = new File(fileDest);
  221.         //存储到数据库里的相对文件地址
  222.         String storeAvatorPath = "/img/singerPic/" + fileName;
  223.         logger.info("存储到数据库里的相对文件地址: {}",storeAvatorPath);
  224.         try {
  225.             //上传
  226.             file.transferTo(dest);
  227.             //上传成功后，根据ID，修改歌手图片
  228.             Singer singer = new Singer();
  229.             singer.setId(id); //歌手ID
  230.             singer.setPic(storeAvatorPath); //歌手图片
  232.             boolean flag = this.singerService.updateSinger(singer);
  234.             if (flag){
  235.                 return R.ok().message("图片上传成功!!");
  236.             }else {
  237.                 return R.error().message("图片上传失败!!");
  238.             }
  240.         } catch (IOException e) {
  241.             logger.info("文件上传失败: {}",e.getMessage());
  242.             return R.error().message("图片上传失败!!" + e.getMessage());
  243.         }
  245.     }
  248. }

1.3 定位头像的地址

因为当客户端浏览器访问http://127.0.0.1:8888/img/singerPic/hhh.jpg的时候，会找不到这个静态资源，所以需要我们手动的去映射；

image.png

创建一个配置类，实现WebMvcConfig接口

  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 SingerPicConfig implements WebMvcConfigurer {
  12.     @Override
  13.     public void addResourceHandlers(ResourceHandlerRegistry registry) {
  14.         registry.addResourceHandler("/img/singerPic/**")
  15.                 .addResourceLocations(
  16.                         "file:" + System.getProperty("user.dir") + System.getProperty("file.separator")
  17.                         + "img" + System.getProperty("file.separator")
  18.                         + "singerPic" + System.getProperty("file.separator")
  19.                 );
  20.     }
  21. }

1.4 更新歌手的图片

  1.   /**
  2.      * 更新歌手图片
  3.      */
  4. @PostMapping(value = "/updateSingerPic")
  5. public R updateSingerPic(@RequestParam("file")MultipartFile file,@RequestParam("id") Integer id){
  6.     logger.info("歌手ID: {}",id);
  7.     //判断上传的图片是否为空
  8.     if(file.isEmpty()){
  9.         logger.info("上传图片失败");
  10.         return R.error().message("上传图片失败!!");
  11.     }
  12.     //文件名=当前时间到毫秒+原来的文件名
  13.     String fileName = System.currentTimeMillis() + file.getOriginalFilename();
  14.     logger.info("文件名: {}",fileName);
  15.     //上传文件保存路径
  16.     String filePath = System.getProperty("user.dir")
  17.         + System.getProperty("file.separator") + "img"
  18.         + System.getProperty("file.separator") + "singerPic";
  19.     logger.info("上传文件保存路径: {}" ,filePath);
  20.     //如果文件路径不存在，新增该路径
  21.     File file1 = new File(filePath);
  22.     if (!file1.exists()){
  23.         file1.mkdir();
  24.     }
  25.     //实际的文件地址
  26.     String fileDest = filePath + System.getProperty("file.separator") + fileName;
  27.     logger.info("实际文件地址: {}",fileDest);
  28.     File dest = new File(fileDest);
  29.     //存储到数据库里的相对文件地址
  30.     String storeAvatorPath = "/img/singerPic/" + fileName;
  31.     logger.info("存储到数据库里的相对文件地址: {}",storeAvatorPath);
  32.     try {
  33.         //上传
  34.         file.transferTo(dest);
  35.         //上传成功后，根据ID，修改歌手图片
  36.         Singer singer = new Singer();
  37.         singer.setId(id); //歌手ID
  38.         singer.setPic(storeAvatorPath); //歌手图片
  40.         boolean flag = this.singerService.updateSinger(singer);
  42.         if (flag){
  43.             return R.ok().message("图片上传成功!!");
  44.         }else {
  45.             return R.error().message("图片上传失败!!");
  46.         }
  48.     } catch (IOException e) {
  49.         logger.info("文件上传失败: {}",e.getMessage());
  50.         return R.error().message("图片上传失败!!" + e.getMessage());
  51.     }
  53. }

2、前端编写

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="singer-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="name" label="歌手" width="120" align="center"></el-table-column>
  24.             <el-table-column label="性别" width="50" align="center">
  25.                 <template slot-scope="scope">
  26.                     {{changeSex(scope.row.sex)}}
  27.                 </template>
  28.             </el-table-column>
  29.             <el-table-column label="生日" width="120" align="center">
  30.                 <template slot-scope="scope">
  31.                     {{attachBirth(scope.row.birth)}}
  32.                 </template>
  33.             </el-table-column>
  34.             <el-table-column prop="location" label="地区" width="100" align="center"></el-table-column>
  35.             <el-table-column label="简介">
  36.                 <template slot-scope="scope">
  37.                     <p style="height:100px;overflow:scroll">{{scope.row.introduction}}</p>
  38.                 </template>
  39.             </el-table-column>
  40.             <el-table-column label="歌曲管理" width="110" align="center">
  41.                 <template slot-scope="scope">
  42.                     <el-button size="mini" @click="songEdit(scope.row.id,scope.row.name)">歌曲管理</el-button>
  43.                 </template>
  44.             </el-table-column>
  45.             <el-table-column label="操作" width="150" align="center">
  46.                 <template slot-scope="scope">
  47.                     <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
  48.                     <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> 
  49.                 </template>
  50.             </el-table-column>
  51.         </el-table>
  52.         <div class="pagination">
  53.             <el-pagination
  54.                 background
  55.                 layout = "total,prev,pager,next"
  56.                 :current-page="currentPage"
  57.                 :page-size="pageSize"
  58.                 :total="tableData.length"
  59.                 @current-change="handleCurrentChange"
  60.                 >
  61.             </el-pagination>
  62.         </div>
  64.         <el-dialog title="添加歌手" :visible.sync="centerDialogVisible" width="400px" center>
  65.             <el-form :model="registerForm" ref="registerForm" label-width="80px">
  66.                 <el-form-item prop="name" label="歌手名" size="mini">
  67.                     <el-input v-model="registerForm.name" placeholder="歌手名"></el-input>
  68.                 </el-form-item>
  69.                 <el-form-item label="性别" size="mini">
  70.                     <el-radio-group v-model="registerForm.sex">
  71.                         <el-radio :label="0">女</el-radio>
  72.                         <el-radio :label="1">男</el-radio>
  73.                         <el-radio :label="2">组合</el-radio>
  74.                         <el-radio :label="3">不明</el-radio>                        
  75.                     </el-radio-group>
  76.                 </el-form-item>
  77.                 <el-form-item prop="birth" label="生日" size="mini">
  78.                     <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth" style="width:100%"></el-date-picker>
  79.                 </el-form-item>
  80.                 <el-form-item prop="location" label="地区" size="mini">
  81.                     <el-input v-model="registerForm.location" placeholder="地区"></el-input>
  82.                 </el-form-item>
  83.                 <el-form-item prop="introduction" label="简介" size="mini">
  84.                     <el-input v-model="registerForm.introduction" placeholder="简介" type="textarea"></el-input>
  85.                 </el-form-item>                
  86.             </el-form>
  87.             <span slot="footer">
  88.                 <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
  89.                 <el-button size="mini" @click="addSinger">确定</el-button>                
  90.             </span>
  91.         </el-dialog>
  93.         <el-dialog title="修改歌手" :visible.sync="editVisible" width="400px" center>
  94.             <el-form :model="form" ref="form" label-width="80px">
  95.                 <el-form-item prop="name" label="歌手名" size="mini">
  96.                     <el-input v-model="form.name" placeholder="歌手名"></el-input>
  97.                 </el-form-item>
  98.                 <el-form-item label="性别" size="mini">
  99.                     <el-radio-group v-model="form.sex">
  100.                         <el-radio :label="0">女</el-radio>
  101.                         <el-radio :label="1">男</el-radio>
  102.                         <el-radio :label="2">组合</el-radio>
  103.                         <el-radio :label="3">不明</el-radio>                        
  104.                     </el-radio-group>
  105.                 </el-form-item>
  106.                 <el-form-item label="生日" size="mini">
  107.                     <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width:100%"></el-date-picker>
  108.                 </el-form-item>
  109.                 <el-form-item prop="location" label="地区" size="mini">
  110.                     <el-input v-model="form.location" placeholder="地区"></el-input>
  111.                 </el-form-item>
  112.                 <el-form-item prop="introduction" label="简介" size="mini">
  113.                     <el-input v-model="form.introduction" placeholder="简介" type="textarea"></el-input>
  114.                 </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 {setSinger, getAllSinger,updateSinger,delSinger} from '../api/singer/index';
  134. import { mixin } from '../mixins/index';
  135. export default {
  136.     mixins: [mixin],
  137.     data(){
  138.         return{
  139.             centerDialogVisible: false, //添加弹窗是否显示
  140.             editVisible: false,         //编辑弹窗是否显示
  141.             delVisible: false,          //删除弹窗是否显示
  142.             registerForm:{      //添加框
  143.                 name: '',
  144.                 sex: '',
  145.                 birth: '',
  146.                 location: '',
  147.                 introduction: ''
  148.             },
  149.             form:{      //编辑框
  150.                 id: '',
  151.                 name: '',
  152.                 sex: '',
  153.                 birth: '',
  154.                 location: '',
  155.                 introduction: ''
  156.             },
  157.             tableData: [],
  158.             tempData: [],
  159.             select_word: '',
  160.             pageSize: 5,    //分页每页大小
  161.             currentPage: 1,  //当前页
  162.             idx: -1,          //当前选择项
  163.             multipleSelection: []   //哪些项已经打勾
  164.         }
  165.     },
  166.     computed:{
  167.         //计算当前搜索结果表里的数据
  168.         data(){
  169.             return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize)
  170.         }
  171.     },
  172.     watch:{
  173.         //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
  174.         select_word: function(){
  175.             if(this.select_word == ''){
  176.                 this.tableData = this.tempData;
  177.             }else{
  178.                 this.tableData = [];
  179.                 for(let item of this.tempData){
  180.                     if(item.name.includes(this.select_word)){
  181.                         this.tableData.push(item);
  182.                     }
  183.                 }
  184.             }
  185.         }
  186.     },
  187.     created(){
  188.         this.getData();
  189.     },
  190.     methods:{
  191.         //获取当前页
  192.         handleCurrentChange(val){
  193.             this.currentPage = val;
  194.         },
  195.         //查询所有歌手
  196.         getData(){
  197.             this.tempData = [];
  198.             this.tableData = [];
  199.             getAllSinger().then(res => {
  200.                 this.tempData = res.data.list;
  201.                 this.tableData = res.data.list;
  202.             })
  203.         },
  204.         //添加歌手
  205.         addSinger(){
  206.             let d = this.registerForm.birth;
  207.             let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  208.             let params = new URLSearchParams();
  209.             params.append('name',this.registerForm.name);
  210.             params.append('sex',this.registerForm.sex);
  211.             params.append('pic','/img/singerPic/hhh.jpg');
  212.             params.append('birth',datetime);
  213.             params.append('location',this.registerForm.location);
  214.             params.append('introduction',this.registerForm.introduction);
  216.             setSinger(params)
  217.             .then(res => {
  218.                 if(res.code == 20000){
  219.                     this.getData();
  220.                     this.notify("添加成功","success");
  221.                 }else{
  222.                     this.notify("添加失败","error");
  223.                 }
  224.             })
  225.             .catch(err => {
  226.                 console.log(err);
  227.             });
  228.             this.centerDialogVisible = false;
  229.         },
  230.         //弹出编辑页面
  231.         handleEdit(row){
  232.             this.editVisible = true;
  233.             this.form = {
  234.                 id: row.id,
  235.                 name: row.name,
  236.                 sex: row.sex,
  237.                 birth: row.birth,
  238.                 location: row.location,
  239.                 introduction: row.introduction
  240.             }
  241.         },
  242.         //保存编辑页面修改的数据
  243.         editSave(){
  244.             let d = new Date(this.form.birth);
  245.             let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  246.             let params = new URLSearchParams();
  247.             params.append('id',this.form.id);
  248.             params.append('name',this.form.name);
  249.             params.append('sex',this.form.sex);
  250.             params.append('birth',datetime);
  251.             params.append('location',this.form.location);
  252.             params.append('introduction',this.form.introduction);
  254.             updateSinger(params)
  255.             .then(res => {
  256.                 if(res.code == 20000){
  257.                     this.getData();
  258.                     this.notify("修改成功","success");
  259.                 }else{
  260.                     this.notify("修改失败","error");
  261.                 }
  262.             })
  263.             .catch(err => {
  264.                 console.log(err);
  265.             });
  266.             this.editVisible = false;
  267.         },
  268.         //更新图片
  269.         uploadUrl(id){
  270.             return `${this.$store.state.HOST}/musicserver/singer/updateSingerPic?id=${id}`
  271.         },
  272.         //删除一名歌手
  273.         deleteRow(){
  274.             delSinger(this.idx)
  275.             .then(res => {
  276.                 if(res){
  277.                     this.getData();
  278.                     this.notify("删除成功","success");
  279.                 }else{
  280.                     this.notify("删除失败","error");
  281.                 }
  282.             })
  283.             .catch(err => {
  284.                 console.log(err);
  285.             });
  286.             this.delVisible = false;
  287.         },
  288.         //转向歌曲管理页面
  289.         songEdit(id,name){
  290.             this.$router.push({path:`/Song`,query:{id,name}});
  291.         }
  292.     }
  293. }
  294. </script>
  296. <style scoped>
  297.     .handle-box{
  298.         margin-bottom: 20px;
  299.     }
  300.     .singer-img{
  301.         width: 100%;
  302.         height: 80px;
  303.         border-radius: 5px;
  304.         margin-bottom: 5px;
  305.         overflow: hidden;
  306.     }
  307.     .handle-input{
  308.         width: 300px;
  309.         display: inline-block;
  310.     }
  311.     .pagination{
  312.         display: flex;
  313.         justify-content: center;
  314.     }
  315. </style>

2.1 添加歌手

image.png

  1. <el-button type="primary" size="mini" @click="centerDialogVisible = true">添加歌手</el-button>
  1. <el-dialog title="添加歌手" :visible.sync="centerDialogVisible" width="400px" center>
  2.   <el-form :model="registerForm" ref="registerForm" label-width="80px">
  3.     <el-form-item prop="name" label="歌手名" size="mini">
  4.       <el-input v-model="registerForm.name" placeholder="歌手名"></el-input>
  5.     </el-form-item>
  6.     <el-form-item label="性别" size="mini">
  7.       <el-radio-group v-model="registerForm.sex">
  8.         <el-radio :label="0">女</el-radio>
  9.         <el-radio :label="1">男</el-radio>
  10.         <el-radio :label="2">组合</el-radio>
  11.         <el-radio :label="3">不明</el-radio>                        
  12.       </el-radio-group>
  13.     </el-form-item>
  14.     <el-form-item prop="birth" label="生日" size="mini">
  15.       <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth" style="width:100%"></el-date-picker>
  16.     </el-form-item>
  17.     <el-form-item prop="location" label="地区" size="mini">
  18.       <el-input v-model="registerForm.location" placeholder="地区"></el-input>
  19.     </el-form-item>
  20.     <el-form-item prop="introduction" label="简介" size="mini">
  21.       <el-input v-model="registerForm.introduction" placeholder="简介" type="textarea"></el-input>
  22.     </el-form-item>                
  23.   </el-form>
  24.   <span slot="footer">
  25.     <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
  26.     <el-button size="mini" @click="addSinger">确定</el-button>                
  27.   </span>
  28. </el-dialog>

image.png

:visible.sync=”centerDialogVisible” 表示当centerDialogVisible属性为true时才会弹出文本框，false隐藏文本框

定义属性变量
image.png
编写请求后端接口方法
image.png

  1. import {get,post} from '../http'
  2. //查询歌手
  3. export const getAllSinger =() => get(`musicserver/singer/allSinger`);
  4. //添加歌手
  5. export const setSinger = (params) => post(`musicserver/singer/addSinger`,params);
  6. //编辑歌手
  7. export const updateSinger = (params) => post(`musicserver/singer/updateSinger`,params);
  8. //删除歌手
  9. export const delSinger = (id) => get(`musicserver/singer/deleteSinger?id=${id}`);

image.png
编写添加歌手的方法
image.png

  1.  //添加歌手
  2. addSinger(){
  3.   let d = this.registerForm.birth;
  4.   let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  5.   let params = new URLSearchParams();
  6.   params.append('name',this.registerForm.name);
  7.   params.append('sex',this.registerForm.sex);
  8.   params.append('pic','/img/singerPic/hhh.jpg');
  9.   params.append('birth',datetime);
  10.   params.append('location',this.registerForm.location);
  11.   params.append('introduction',this.registerForm.introduction);
  13.   setSinger(params)
  14.     .then(res => {
  15.     if(res.code == 20000){
  16.       this.getData();
  17.       this.notify("添加成功","success");
  18.     }else{
  19.       this.notify("添加失败","error");
  20.     }
  21.   })
  22.     .catch(err => {
  23.     console.log(err);
  24.   });
  25.   //添加歌手成功后，将弹出文本框隐藏
  26.   this.centerDialogVisible = false;
  27. },

2.2 查询歌手

image.png

  1. <el-table size="mini" ref="multipleTable" border style="width:100%" height="680px" :data="data" @selection-change="handleSelectionChange">
  2.   <el-table-column type="selection" width="40"></el-table-column>
  3.   <el-table-column label="歌手图片" width="110" align="center">
  4.     <template slot-scope="scope">
  5. <div class="singer-img">
  6.   <img :src="getUrl(scope.row.pic)" style="width:100%"/>
  7.       </div>
  8. <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload" 
  9.            :on-success="handleAvatorSuccess">
  10.   <el-button size="mini">更新图片</el-button>
  11.       </el-upload>
  12.     </template>
  13.   </el-table-column>
  14.   <el-table-column prop="name" label="歌手" width="120" align="center"></el-table-column>
  15.   <el-table-column label="性别" width="50" align="center">
  16.     <template slot-scope="scope">
  17. {{changeSex(scope.row.sex)}}
  18.     </template>
  19.   </el-table-column>
  20.   <el-table-column label="生日" width="120" align="center">
  21.     <template slot-scope="scope">
  22. {{attachBirth(scope.row.birth)}}
  23.     </template>
  24.   </el-table-column>
  25.   <el-table-column prop="location" label="地区" width="100" align="center"></el-table-column>
  26.   <el-table-column label="简介">
  27.     <template slot-scope="scope">
  28. <p style="height:100px;overflow:scroll">{{scope.row.introduction}}</p>
  29.     </template>
  30.   </el-table-column>
  31.   <el-table-column label="歌曲管理" width="110" align="center">
  32.     <template slot-scope="scope">
  33. <el-button size="mini" @click="songEdit(scope.row.id,scope.row.name)">歌曲管理</el-button>
  34.     </template>
  35.   </el-table-column>
  36.   <el-table-column label="操作" width="150" align="center">
  37.     <template slot-scope="scope">
  38. <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
  39. <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> 
  40.     </template>
  41.   </el-table-column>
  42. </el-table>

处理性别的方法
image.png

  1.  //获取性别中文
  2. changeSex(value){
  3.   if(value == 0){
  4.     return '女';
  5.   }
  6.   if(value == 1){
  7.     return '男';
  8.   }
  9.   if(value == 2){
  10.     return '组合';
  11.   }
  12.   if(value == 3){
  13.     return '不明';
  14.   }
  15.   return value;
  16. },

处理日期的方法
image.png

  1. //获取生日
  2. attachBirth(val){
  3.   return String(val).substr(0,10);
  4. },

编写请求后端查询接口
image.png
定义临时变量，接收后端传过来的值
image.png
查询所有歌手
image.png

2.3 定位头像的地址

image.png
在mixins.js工具类中，编写访问歌手图片的方法
image.png

  1. export const mixin = {
  2.     methods:{
  3.         //提示信息
  4.         notify(title,type){
  5.             this.$notify({
  6.                 title: title,
  7.                 type: type
  8.             })
  9.         },
  10.         //根据相对地址获取绝对地址
  11.         getUrl(url){
  12.             return `${this.$store.state.HOST}/${url}`
  13.         },
  14.         //获取性别中文
  15.         changeSex(value){
  16.             if(value == 0){
  17.                 return '女';
  18.             }
  19.             if(value == 1){
  20.                 return '男';
  21.             }
  22.             if(value == 2){
  23.                 return '组合';
  24.             }
  25.             if(value == 3){
  26.                 return '不明';
  27.             }
  28.             return value;
  29.         },
  30.         //获取生日
  31.         attachBirth(val){
  32.             return String(val).substr(0,10);
  33.         },
  34.         //上传图片之前的校验
  35.         beforeAvatorUpload(file){
  36.             const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');
  37.             if(!isJPG){
  38.                 this.$message.error('上传头像图片只能是jpg或png格式');
  39.                 return false;
  40.             }
  41.             const isLt2M = (file.size / 1024 /1024) < 2;
  42.             if(!isLt2M){
  43.                 this.$message.error('上传头像图片大小不能超过2MB');
  44.                 return false;
  45.             }
  46.             return true;
  47.         },
  48.         //上传图片成功之后要做的工作
  49.         handleAvatorSuccess(res){
  50.             let _this = this;
  51.             if(res.code == 20000){
  52.                 _this.getData();
  53.                 _this.$notify({
  54.                     title: '上传成功',
  55.                     type: 'success'
  56.                 });
  57.             }else{
  58.                 _this.$notify({
  59.                     title: '上传失败',
  60.                     type: 'error'
  61.                 });
  62.             }
  63.         },
  64.         //弹出删除窗口
  65.         handleDelete(id){
  66.             this.idx = id;
  67.             this.delVisible = true;
  68.         },
  69.         //把已经选择的项赋值给multipleSelection
  70.         handleSelectionChange(val){
  71.             this.multipleSelection = val;
  72.         },
  73.         //批量删除已经选择的项
  74.         delAll(){
  75.             for(let item of this.multipleSelection){
  76.                 this.handleDelete(item.id);
  77.                 this.deleteRow();
  78.             }
  79.             this.multipleSelection = [];
  80.         }
  81.     }
  82. }

image.png
编写全局共享属性Vuex.Store
image.png

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  5. const store = new Vuex.Store({
  6.     state:{
  7.         HOST: 'http://127.0.0.1:8888'
  8.     }
  9. })
  11. export default store

访问通过，this.$store.state.HOST,就能访问到全局共享的属性值

2.4 更新歌手图片

image.png
image.png

  1. <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload" 
  2.            :on-success="handleAvatorSuccess">
  3.   <el-button size="mini">更新图片</el-button>
  4. </el-upload>

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

  1.  //更新图片
  2. uploadUrl(id){
  3.   return `${this.$store.state.HOST}/musicserver/singer/updateSingerPic?id=${id}`
  4. },

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

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

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

  1. //上传图片成功之后要做的工作
  2. handleAvatorSuccess(res){
  3.   let _this = this;
  4.   if(res.code == 20000){
  5.     _this.getData();
  6.     _this.$notify({
  7.       title: '上传成功',
  8.       type: 'success'
  9.     });
  10.   }else{
  11.     _this.$notify({
  12.       title: '上传失败',
  13.       type: 'error'
  14.     });
  15.   }
  16. },

2.5 根据歌手名搜索

image.png
image.png

核心：

根据watch监听，当输入歌名的文本框上的select_word属性值发生改变时，就会出发watch监听方法。先定义一个临时的变量tempDate[]，当文本框为空时，将临时变量的值赋值给tableDate[]，例如：tableDate = tempDate;
否则，清空tableDate = []，遍历临时变量的值，判断临时变量集合是否包含文本框的值select_word，包含的话，将满足条件的值，放到tableDate[]集合中去；

image.png
image.png

  1.  watch:{
  2.    //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
  3.    select_word: function(){
  4.      if(this.select_word == ''){
  5.        this.tableData = this.tempData;
  6.      }else{
  7.        this.tableData = [];
  8.        for(let item of this.tempData){
  9.          if(item.name.includes(this.select_word)){
  10.            this.tableData.push(item);
  11.          }
  12.        }
  13.      }
  14.    }
  15.  },

2.6 列表分页功能

image.png

  1. <div class="pagination">
  2.   <el-pagination
  3.                  background
  4.                  layout = "total,prev,pager,next"
  5.                  :current-page="currentPage"
  6.                  :page-size="pageSize"
  7.                  :total="tableData.length"
  8.                  @current-change="handleCurrentChange"
  9.                  >
  10.   </el-pagination>
  11. </div>

:current-page 表示当前页 :page-size 表示每页显示的条数 :total=”tableData.length” 表示总记录数 @current-change=”handleCurrentChange” 表示当选择某一页的时候，就会得到当前选中的页数

定义临时变量
image.png
通过计算属性，计算当前搜索结果表里的数据
image.png
在表格中设置:data属性值为，计算属性的data
image.png

2.7 修改歌手

image.png
image.png
弹出编辑页面

  1.  <el-dialog title="修改歌手" :visible.sync="editVisible" width="400px" center>
  2.    <el-form :model="form" ref="form" label-width="80px">
  3.      <el-form-item prop="name" label="歌手名" size="mini">
  4.        <el-input v-model="form.name" placeholder="歌手名"></el-input>
  5.      </el-form-item>
  6.      <el-form-item label="性别" size="mini">
  7.        <el-radio-group v-model="form.sex">
  8.          <el-radio :label="0">女</el-radio>
  9.          <el-radio :label="1">男</el-radio>
  10.          <el-radio :label="2">组合</el-radio>
  11.          <el-radio :label="3">不明</el-radio>                        
  12.        </el-radio-group>
  13.      </el-form-item>
  14.      <el-form-item label="生日" size="mini">
  15.        <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width:100%"></el-date-picker>
  16.      </el-form-item>
  17.      <el-form-item prop="location" label="地区" size="mini">
  18.        <el-input v-model="form.location" placeholder="地区"></el-input>
  19.      </el-form-item>
  20.      <el-form-item prop="introduction" label="简介" size="mini">
  21.        <el-input v-model="form.introduction" placeholder="简介" type="textarea"></el-input>
  22.      </el-form-item>                
  23.    </el-form>
  24.    <span slot="footer">
  25.      <el-button size="mini" @click="editVisible = false">取消</el-button>
  26.      <el-button size="mini" @click="editSave">确定</el-button>                
  27.    </span>
  28. </el-dialog>

:visible.sync=”editVisible” 表示当editVisible属性为true时才会弹出文本框，false隐藏文本框

  1.  //弹出编辑页面
  2. handleEdit(row){
  3.   this.editVisible = true; 
  4.   this.form = {
  5.     id: row.id,
  6.     name: row.name,
  7.     sex: row.sex,
  8.     birth: row.birth,
  9.     location: row.location,
  10.     introduction: row.introduction
  11.   }
  12. },

image.png
image.png
保存编辑页面修改的数据

  1. //保存编辑页面修改的数据
  2. editSave(){
  3.   let d = new Date(this.form.birth);
  4.   let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  5.   let params = new URLSearchParams();
  6.   params.append('id',this.form.id);
  7.   params.append('name',this.form.name);
  8.   params.append('sex',this.form.sex);
  9.   params.append('birth',datetime);
  10.   params.append('location',this.form.location);
  11.   params.append('introduction',this.form.introduction);
  13.   updateSinger(params)
  14.     .then(res => {
  15.     if(res.code == 20000){
  16.       this.getData();
  17.       this.notify("修改成功","success");
  18.     }else{
  19.       this.notify("修改失败","error");
  20.     }
  21.   })
  22.     .catch(err => {
  23.     console.log(err);
  24.   });
  25.   this.editVisible = false;
  26. },

2.8 删除歌手

image.png
image.png
定义临时变量
image.png
弹出删除窗口

  1.  //弹出删除窗口
  2. handleDelete(id){
  3.   this.idx = id;
  4.   this.delVisible = true;
  5. },
  1. <el-dialog title="删除歌手" :visible.sync="delVisible" width="300px" center>
  2.   <div align="center">删除不可恢复，是否确定删除？</div>
  3.   <span slot="footer">
  4.     <el-button size="mini" @click="delVisible = false">取消</el-button>
  5.     <el-button size="mini" @click="deleteRow">确定</el-button>                
  6.   </span>
  7. </el-dialog>

image.png
删除一名歌手

  1.  //删除一名歌手
  2. deleteRow(){
  3.   delSinger(this.idx)
  4.     .then(res => {
  5.     if(res){
  6.       this.getData();
  7.       this.notify("删除成功","success");
  8.     }else{
  9.       this.notify("删除失败","error");
  10.     }
  11.   })
  12.     .catch(err => {
  13.     console.log(err);
  14.   });
  15.   this.delVisible = false;
  16. },

2.9 批量删除歌手

image.png
image.png

@selection-change=”handleSelectionChange” 表示可以得到选中的一组数据的集合

定义一个变量集合用来存储
image.png
把已经选择的项赋值给multipleSelection

  1. //把已经选择的项赋值给multipleSelection
  2. handleSelectionChange(val){
  3.   this.multipleSelection = val;
  4. },

批量删除已经选择的项

  1. //批量删除已经选择的项
  2. delAll(){
  3.   for(let item of this.multipleSelection){
  4.     this.handleDelete(item.id);
  5.     this.deleteRow();
  6.   }
  7.   this.multipleSelection = [];
  8. }

2.10 跳转到歌曲页面

image.png
image.png
image.png

  1.  //转向歌曲管理页面
  2. songEdit(id,name){
  3.   this.$router.push({path:`/Song`,query:{id,name}});
  4. }