1、后端编写

1.1 Service服务层编写

  1. package com.gmw.musicserver.service;
  3. import com.gmw.musicserver.entity.Consumer;
  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 ConsumerService extends IService<Consumer> {
  18.     /**
  19.      *增加用户
  20.      */
  21.     public boolean insertConsumer(Consumer consumer);
  23.     /**
  24.      *修改用户
  25.      */
  26.     public boolean updateConsumer(Consumer consumer);
  28.     /**
  29.      * 删除用户
  30.      */
  31.     public boolean deleteConsumer(Integer id);
  33.     /**
  34.      * 根据主键查询整个对象
  35.      */
  36.     public Consumer selectByPrimaryKey(Integer id);
  38.     /**
  39.      * 查询所有用户
  40.      */
  41.     public List<Consumer> allConsumer();
  43.     /**
  44.      * 修改密码
  45.      */
  46.     public boolean verifyPassword(String username,String password);
  48.     /**
  49.      * 根据账号查询
  50.      */
  51.     public Consumer getByUsername(String username);
  52. }
  1. package com.gmw.musicserver.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.gmw.musicserver.entity.Consumer;
  5. import com.gmw.musicserver.mapper.ConsumerMapper;
  6. import com.gmw.musicserver.service.ConsumerService;
  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 ConsumerServiceImpl extends ServiceImpl<ConsumerMapper, Consumer> implements ConsumerService {
  23.     /**
  24.      * 增加用户
  25.      *
  26.      * @param consumer
  27.      */
  28.     @Override
  29.     public boolean insertConsumer(Consumer consumer) {
  30.         return this.baseMapper.insert(consumer) > 0;
  31.     }
  33.     /**
  34.      * 修改用户
  35.      *
  36.      * @param consumer
  37.      */
  38.     @Override
  39.     public boolean updateConsumer(Consumer consumer) {
  40.         return this.baseMapper.updateById(consumer) > 0;
  41.     }
  43.     /**
  44.      * 删除用户
  45.      *
  46.      * @param id
  47.      */
  48.     @Override
  49.     public boolean deleteConsumer(Integer id) {
  50.         return this.baseMapper.deleteById(id) > 0;
  51.     }
  53.     /**
  54.      * 根据主键查询整个对象
  55.      *
  56.      * @param id
  57.      */
  58.     @Override
  59.     public Consumer selectByPrimaryKey(Integer id) {
  60.         return this.baseMapper.selectById(id);
  61.     }
  63.     /**
  64.      * 查询所有用户
  65.      */
  66.     @Override
  67.     public List<Consumer> allConsumer() {
  68.         return this.baseMapper.selectList(null);
  69.     }
  71.     /**
  72.      * 修改密码
  73.      *
  74.      * @param username
  75.      * @param password
  76.      */
  77.     @Override
  78.     public boolean verifyPassword(String username, String password) {
  79.         QueryWrapper<Consumer> queryWrapper = new QueryWrapper<>();
  80.         queryWrapper.eq("username",username);
  81.         queryWrapper.eq("password",password);
  83.         return this.baseMapper.selectCount(queryWrapper) > 0;
  84.     }
  86.     /**
  87.      * 根据账号查询
  88.      *
  89.      * @param username
  90.      */
  91.     @Override
  92.     public Consumer getByUsername(String username) {
  93.         QueryWrapper<Consumer> queryWrapper = new QueryWrapper<>();
  94.         queryWrapper.eq("username",username);
  95.         return this.baseMapper.selectOne(queryWrapper);
  96.     }
  97. }

1.2 Controller控制层编写

  1. package com.gmw.musicserver.controller;
  4. import com.gmw.musicserver.commonutils.R;
  5. import com.gmw.musicserver.entity.Consumer;
  6. import com.gmw.musicserver.entity.Song;
  7. import com.gmw.musicserver.service.ConsumerService;
  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.text.DateFormat;
  19. import java.text.ParseException;
  20. import java.text.SimpleDateFormat;
  21. import java.util.Date;
  22. import java.util.List;
  24. /**
  25.  * <p>
  26.  * 用户表 前端控制器
  27.  * </p>
  28.  *
  29.  * @author 未进化的程序猿
  30.  * @since 2022-01-26
  31.  */
  32. @RestController
  33. @RequestMapping("/musicserver/consumer")
  34. public class ConsumerController {
  36.     public static final Logger logger = LoggerFactory.getLogger(ConsumerController.class);
  38.     @Autowired
  39.     private ConsumerService consumerService;
  41.     /**
  42.      * 添加前端用户
  43.      */
  44.     @PostMapping(value = "/addConsumer")
  45.     public R addConsumer(HttpServletRequest request){
  46.         String username = request.getParameter("username").trim();     //账号
  47.         String password = request.getParameter("password").trim();     //密码
  48.         String sex = request.getParameter("sex").trim();               //性别
  49.         String phoneNum = request.getParameter("phoneNum").trim();     //手机号
  50.         String email = request.getParameter("email").trim();           //电子邮箱
  51.         String birth = request.getParameter("birth").trim();           //生日
  52.         String introduction = request.getParameter("introduction").trim();//签名
  53.         String location = request.getParameter("location").trim();      //地区
  54.         String avator = request.getParameter("avator").trim();          //头像地址
  56.         if(username==null||username.equals("")){
  57.            return R.error().message("用户名不能为空!!");
  58.         }
  59.         if(password==null||password.equals("")){
  60.             return R.error().message("密码不能为空!!");
  61.         }
  63.         //把生日转换成Date格式
  64.         DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
  65.         Date birthDate = new Date();
  66.         try {
  67.             birthDate = dateFormat.parse(birth);
  68.         } catch (ParseException e) {
  69.             e.printStackTrace();
  70.         }
  72.         //保存到前端用户的对象中
  73.         Consumer consumer = new Consumer();
  74.         consumer.setUsername(username);
  75.         consumer.setPassword(password);
  76.         consumer.setSex(Integer.parseInt(sex));
  77.         consumer.setPhoneNum(phoneNum);
  78.         consumer.setEmail(email);
  79.         consumer.setBirth(birthDate);
  80.         consumer.setIntroduction(introduction);
  81.         consumer.setLocation(location);
  82.         consumer.setAvator(avator);
  84.         logger.info("保存前端用户对象: {}",consumer);
  86.         boolean flag = this.consumerService.insertConsumer(consumer);
  87.         if(flag){   //保存成功
  88.             return R.ok().message("添加成功!!");
  89.         }else {
  90.             return R.error().message("添加失败!!");
  91.         }
  92.     }
  94.     /**
  95.      * 修改前端用户
  96.      */
  97.     @PostMapping(value = "/updateConsumer")
  98.     public R updateConsumer(HttpServletRequest request){
  99.         String id = request.getParameter("id").trim();          //主键
  100.         String username = request.getParameter("username").trim();     //账号
  101.         String password = request.getParameter("password").trim();     //密码
  102.         String sex = request.getParameter("sex").trim();               //性别
  103.         String phoneNum = request.getParameter("phoneNum").trim();     //手机号
  104.         String email = request.getParameter("email").trim();           //电子邮箱
  105.         String birth = request.getParameter("birth").trim();           //生日
  106.         String introduction = request.getParameter("introduction").trim();//签名
  107.         String location = request.getParameter("location").trim();      //地区
  109.         if(username==null||username.equals("")){
  110.             return R.error().message("用户名不能为空!!");
  111.         }
  112.         if(password==null||password.equals("")){
  113.             return R.error().message("密码不能为空!!");
  114.         }
  115.         //把生日转换成Date格式
  116.         DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
  117.         Date birthDate = new Date();
  118.         try {
  119.             birthDate = dateFormat.parse(birth);
  120.         } catch (ParseException e) {
  121.             e.printStackTrace();
  122.         }
  123.         //保存到前端用户的对象中
  124.         Consumer consumer = new Consumer();
  125.         consumer.setId(Integer.parseInt(id));
  126.         consumer.setUsername(username);
  127.         consumer.setPassword(password);
  128.         consumer.setSex(Integer.parseInt(sex));
  129.         consumer.setPhoneNum(phoneNum);
  130.         consumer.setEmail(email);
  131.         consumer.setBirth(birthDate);
  132.         consumer.setIntroduction(introduction);
  133.         consumer.setLocation(location);
  135.         logger.info("保存前端用户修改对象: {}",consumer);
  137.         boolean flag = this.consumerService.updateConsumer(consumer);
  138.         if(flag){   //保存成功
  139.             return R.ok().message("修改成功!!");
  140.         }else {
  141.             return R.error().message("修改失败!!");
  142.         }
  143.     }
  146.     /**
  147.      * 删除前端用户
  148.      */
  149.     @GetMapping(value = "/deleteConsumer")
  150.     public R deleteConsumer(HttpServletRequest request){
  151.         String id = request.getParameter("id").trim();          //主键
  153.         //-TODO 先查询到数据库中对应的文件地址，删除掉它再进行下面的代码
  155.         //通过ID主键查询用户对象
  156.         Consumer consumer = this.consumerService.selectByPrimaryKey(Integer.parseInt(id));
  157.         //获取用户图片
  158.         String avator = consumer.getAvator();
  159.         logger.info("获取用户图片: {}",avator);
  161.         //如果文件的相对路径是/img/avatorImages/user.jpg就没必要删除
  162.         //因为它是当作默认相对路径的，需要用到
  163.         if(!avator.equals("/img/avatorImages/user.jpg")){
  164.             //获取用户图片保存的文件目录
  165.             String avatorPath = System.getProperty("user.dir") + avator;
  166.             logger.info("获取用户图片保存的文件目录: {}",avatorPath);
  168.             File file = new File(avatorPath);
  170.             if(file.isFile()){
  171.                 //判断如果是文件的话，就删除文件
  172.                 boolean isDelete = file.delete();
  173.                 logger.info("是否删除成功: {}",isDelete);
  174.                 if(!isDelete){
  175.                     return R.error().message("删除用户失败!!");
  176.                 }
  177.             }
  178.         }
  180.         boolean flag = this.consumerService.deleteConsumer(Integer.parseInt(id));
  181.         if(flag){
  182.             return R.ok().message("删除成功!!");
  183.         }
  184.         return R.error().message("删除失败!!");
  185.     }
  187.     /**
  188.      * 根据主键查询整个对象
  189.      */
  190.     @GetMapping(value = "/selectByPrimaryKey")
  191.     public R selectByPrimaryKey(HttpServletRequest request){
  192.         String id = request.getParameter("id").trim();          //主键
  193.         Consumer consumer = this.consumerService.selectByPrimaryKey(Integer.parseInt(id));
  194.         return R.ok().data("consumer",consumer);
  195.     }
  197.     /**
  198.      * 查询所有前端用户
  199.      */
  200.     @GetMapping(value = "/allConsumer")
  201.     public R allConsumer(HttpServletRequest request){
  202.         List<Consumer> consumers = this.consumerService.allConsumer();
  203.         return R.ok().data("list",consumers);
  204.     }
  206.     /**
  207.      * 更新前端用户图片
  208.      */
  209.     @PostMapping(value = "/updateConsumerPic")
  210.     public R updateConsumerPic(@RequestParam("file") MultipartFile avatorFile, @RequestParam("id")int id){
  212.         /**
  213.          * 更新用户图片之前，必须把原来的用户图片删除掉
  214.          */
  215.         //通过ID主键查询用户对象
  216.         Consumer consumer1 = this.consumerService.selectByPrimaryKey(id);
  217.         //获取用户图片
  218.         String avator = consumer1.getAvator();
  219.         logger.info("获取用户图片: {}",avator);
  221.         //如果文件的相对路径是/img/avatorImages/user.jpg就没必要删除
  222.         //因为它是当作默认相对路径的，需要用到
  223.         if(!avator.equals("/img/avatorImages/user.jpg")){
  224.             //获取用户图片保存的文件目录
  225.             String avatorPath = System.getProperty("user.dir") + avator;
  226.             logger.info("获取用户图片保存的文件目录: {}",avator);
  228.             File file1 = new File(avator);
  230.             if(file1.isFile()){
  231.                 file1.delete();
  232.             }
  233.         }
  235.         //开始更新用户图片
  236.         if(avatorFile.isEmpty()){
  237.             return R.error().message("文件上传失败!!");
  238.         }
  239.         //文件名=当前时间到毫秒+原来的文件名
  240.         String fileName = System.currentTimeMillis()+avatorFile.getOriginalFilename();
  241.         //文件路径
  242.         String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")
  243.                 + "img" + System.getProperty("file.separator") + "avatorImages";
  244.         //如果文件路径不存在，新增该路径
  245.         File file1 = new File(filePath);
  246.         if(!file1.exists()){
  247.             file1.mkdir();
  248.         }
  249.         //实际的文件地址
  250.         File dest = new File(filePath+System.getProperty("file.separator")+fileName);
  251.         //存储到数据库里的相对文件地址
  252.         String storeAvatorPath = "/img/avatorImages/"+fileName;
  253.         try {
  254.             avatorFile.transferTo(dest);
  255.             Consumer consumer = new Consumer();
  256.             consumer.setId(id);
  257.             consumer.setAvator(storeAvatorPath);
  259.             boolean flag = this.consumerService.updateConsumer(consumer);
  260.             if(flag){
  261.                 return R.ok().message("文件上传成功!!");
  262.             }else {
  263.                 return R.error().message("文件上传失败!!");
  264.             }
  265.         } catch (IOException e) {
  266.            return R.error().message("文件上传失败!! "+ e.getMessage());
  267.         }
  268.     }
  269. }

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="consumer-img">
  15.                         <img :src="getUrl(scope.row.avator)" 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="username" 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 prop="phoneNum" label="手机号" width="120" align="center"></el-table-column>
  30.             <el-table-column prop="email" label="电子邮箱" width="240" align="center"></el-table-column>
  31.             <el-table-column label="生日" width="120" align="center">
  32.                 <template slot-scope="scope">
  33.                     {{attachBirth(scope.row.birth)}}
  34.                 </template>
  35.             </el-table-column>
  36.             <el-table-column prop="introduction" label="签名" align="center"></el-table-column>
  37.             <el-table-column prop="location" label="地区" width="100" align="center"></el-table-column>            
  38.             <el-table-column label="操作" width="150" align="center">
  39.                 <template slot-scope="scope">
  40.                     <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
  41.                     <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> 
  42.                 </template>
  43.             </el-table-column>
  44.         </el-table>
  45.         <div class="pagination">
  46.             <el-pagination
  47.                 background
  48.                 layout = "total,prev,pager,next"
  49.                 :current-page="currentPage"
  50.                 :page-size="pageSize"
  51.                 :total="tableData.length"
  52.                 @current-change="handleCurrentChange"
  53.                 >
  54.             </el-pagination>
  55.         </div>
  57.         <el-dialog title="添加新用户" :visible.sync="centerDialogVisible" width="400px" center>
  58.             <el-form :model="registerForm" ref="registerForm" label-width="80px" :rules="rules">
  59.                 <el-form-item prop="username" label="用户名" size="mini">
  60.                     <el-input v-model="registerForm.username" placeholder="用户名"></el-input>
  61.                 </el-form-item>
  62.                 <el-form-item prop="password" label="密码" size="mini">
  63.                     <el-input type="password" v-model="registerForm.password" placeholder="密码"></el-input>
  64.                 </el-form-item>
  65.                 <el-form-item label="性别" size="mini">
  66.                     <input type="radio" name="sex" value="0" v-model="registerForm.sex">&nbsp;女&nbsp;&nbsp;
  67.                     <input type="radio" name="sex" value="1" v-model="registerForm.sex">&nbsp;男
  68.                 </el-form-item>
  69.                 <el-form-item prop="phoneNum" label="手机号" size="mini">
  70.                     <el-input v-model="registerForm.phoneNum" placeholder="手机号"></el-input>
  71.                 </el-form-item>
  72.                 <el-form-item prop="email" label="电子邮箱" size="mini">
  73.                     <el-input v-model="registerForm.email" placeholder="电子邮箱"></el-input>
  74.                 </el-form-item>
  75.                 <el-form-item prop="birth" label="生日" size="mini">
  76.                     <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth" style="width:100%"></el-date-picker>
  77.                 </el-form-item>
  78.                 <el-form-item prop="introduction" label="签名" size="mini">
  79.                     <el-input v-model="registerForm.introduction" placeholder="签名"></el-input>
  80.                 </el-form-item>      
  81.                 <el-form-item prop="location" label="地区" size="mini">
  82.                     <el-input v-model="registerForm.location" placeholder="地区"></el-input>
  83.                 </el-form-item>          
  84.             </el-form>
  85.             <span slot="footer">
  86.                 <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
  87.                 <el-button size="mini" @click="addConsumer">确定</el-button>                
  88.             </span>
  89.         </el-dialog>
  91.         <el-dialog title="修改用户" :visible.sync="editVisible" width="400px" center>
  92.             <el-form :model="form" ref="form" label-width="80px" :rules="rules">
  93.                 <el-form-item prop="username" label="用户名" size="mini">
  94.                     <el-input v-model="form.username" placeholder="用户名"></el-input>
  95.                 </el-form-item>
  96.                 <el-form-item prop="password" label="密码" size="mini">
  97.                     <el-input type="password" v-model="form.password" placeholder="密码"></el-input>
  98.                 </el-form-item>
  99.                 <el-form-item label="性别" size="mini">
  100.                     <input type="radio" name="sex" value="0" v-model="form.sex">&nbsp;女&nbsp;&nbsp;
  101.                     <input type="radio" name="sex" value="1" v-model="form.sex">&nbsp;男
  102.                 </el-form-item>
  103.                 <el-form-item prop="phoneNum" label="手机号" size="mini">
  104.                     <el-input v-model="form.phoneNum" placeholder="手机号"></el-input>
  105.                 </el-form-item>
  106.                 <el-form-item prop="email" label="电子邮箱" size="mini">
  107.                     <el-input v-model="form.email" placeholder="电子邮箱"></el-input>
  108.                 </el-form-item>
  109.                 <el-form-item prop="birth" label="生日" size="mini">
  110.                     <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width:100%"></el-date-picker>
  111.                 </el-form-item>
  112.                 <el-form-item prop="introduction" label="签名" size="mini">
  113.                     <el-input v-model="form.introduction" placeholder="签名"></el-input>
  114.                 </el-form-item>      
  115.                 <el-form-item prop="location" label="地区" size="mini">
  116.                     <el-input v-model="form.location" placeholder="地区"></el-input>
  117.                 </el-form-item> 
  118.             </el-form>
  119.             <span slot="footer">
  120.                 <el-button size="mini" @click="editVisible = false">取消</el-button>
  121.                 <el-button size="mini" @click="editSave">确定</el-button>                
  122.             </span>
  123.         </el-dialog>
  125.         <el-dialog title="删除用户" :visible.sync="delVisible" width="300px" center>
  126.             <div align="center">删除不可恢复，是否确定删除？</div>
  127.             <span slot="footer">
  128.                 <el-button size="mini" @click="delVisible = false">取消</el-button>
  129.                 <el-button size="mini" @click="deleteRow">确定</el-button>                
  130.             </span>
  131.         </el-dialog>
  132.     </div>
  133. </template>
  135. <script>
  136. import {getAllConsumer,setConsumer,updateConsumer,delConsumer} from '../api/consumer/index';
  137. import { mixin } from '../mixins/index';
  138. export default {
  139.     mixins: [mixin],
  140.     data(){
  141.         return{
  142.             centerDialogVisible: false, //添加弹窗是否显示
  143.             editVisible: false,         //编辑弹窗是否显示
  144.             delVisible: false,          //删除弹窗是否显示
  145.             registerForm:{      //添加框
  146.                 username: '',
  147.                 password: '',
  148.                 sex: '1',
  149.                 phoneNum: '',
  150.                 email: '',
  151.                 birth: '',
  152.                 introduction: '',
  153.                 location: ''
  154.             },
  155.             form:{      //编辑框
  156.                 id: '',
  157.                 username: '',
  158.                 password: '',
  159.                 sex: '',
  160.                 phoneNum: '',
  161.                 email: '',
  162.                 birth: '',
  163.                 introduction: '',
  164.                 location: ''
  165.             },
  166.             tableData: [],
  167.             tempData: [],
  168.             select_word: '',
  169.             pageSize: 5,    //分页每页大小
  170.             currentPage: 1,  //当前页
  171.             idx: -1,          //当前选择项
  172.             multipleSelection: [],   //哪些项已经打勾
  173.             rules: {
  174.                 username: [
  175.                     {required: true,message: '请输入用户名',trigger: 'blur'}
  176.                 ],
  177.                 password: [
  178.                     {required: true,message: '请输入密码',trigger: 'blur'}
  179.                 ],
  180.                 phoneNum: [
  181.                     {required: true,message: '请输入手机号',trigger: 'blur'}
  182.                 ],
  183.                 email: [
  184.                     {required: true,message: '请输入电子邮箱',trigger: 'blur'},
  185.                     {type: 'email',message:'请输入正确的电子邮箱地址',trigger:['blur','change']}
  186.                 ],
  187.                 introduction: [
  188.                     {required: true,message: '请输入签名',trigger: 'blur'}
  189.                 ],
  190.                 location: [
  191.                     {required: true,message: '请输入地区',trigger: 'blur'}
  192.                 ]                
  193.             }
  194.         }
  195.     },
  196.     computed:{
  197.         //计算当前搜索结果表里的数据
  198.         data(){
  199.             return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize)
  200.         }
  201.     },
  202.     watch:{
  203.         //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
  204.         select_word: function(){
  205.             if(this.select_word == ''){
  206.                 this.tableData = this.tempData;
  207.             }else{
  208.                 this.tableData = [];
  209.                 for(let item of this.tempData){
  210.                     if(item.username.includes(this.select_word)){
  211.                         this.tableData.push(item);
  212.                     }
  213.                 }
  214.             }
  215.         }
  216.     },
  217.     created(){
  218.         this.getData();
  219.     },
  220.     methods:{
  221.         //获取当前页
  222.         handleCurrentChange(val){
  223.             this.currentPage = val;
  224.         },
  225.         //查询所有用户
  226.         getData(){
  227.             this.tempData = [];
  228.             this.tableData = [];
  229.             getAllConsumer().then(res => {
  230.                 this.tempData = res.data.list;
  231.                 this.tableData = res.data.list;
  232.                 this.currentPage = 1;
  233.             })
  234.         },
  235.         //添加用户
  236.         addConsumer(){
  237.             this.$refs['registerForm'].validate(valid =>{
  238.                 if(valid){
  239.                     let d = this.registerForm.birth;
  240.                     let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  241.                     let params = new URLSearchParams();
  242.                     params.append('username',this.registerForm.username);
  243.                     params.append('password',this.registerForm.password);
  244.                     params.append('sex',this.registerForm.sex);
  245.                     params.append('phoneNum',this.registerForm.phoneNum);            
  246.                     params.append('email',this.registerForm.email);
  247.                     params.append('birth',datetime);
  248.                     params.append('introduction',this.registerForm.introduction);
  249.                     params.append('location',this.registerForm.location);
  250.                     params.append('avator','/img/avatorImages/user.jpg');
  251.                     setConsumer(params)
  252.                     .then(res => {
  253.                         if(res.code == 20000){
  254.                             this.getData();
  255.                             this.notify("添加成功","success");
  256.                         }else{
  257.                             this.notify("添加失败","error");
  258.                         }
  259.                     })
  260.                     .catch(err => {
  261.                         console.log(err);
  262.                     });
  263.                     this.centerDialogVisible = false;
  264.                 }
  265.             })
  267.         },
  268.         //弹出编辑页面
  269.         handleEdit(row){
  270.             this.editVisible = true;
  271.             this.form = {
  272.                 id: row.id,
  273.                 username: row.username,
  274.                 password: row.password,
  275.                 sex: row.sex,
  276.                 phoneNum: row.phoneNum,
  277.                 email: row.email,
  278.                 birth: row.birth,
  279.                 introduction: row.introduction,
  280.                 location: row.location
  281.             }
  282.         },
  283.         //保存编辑页面修改的数据
  284.         editSave(){
  285.             this.$refs['form'].validate(valid =>{
  286.                 if(valid){
  287.                     let d = new Date(this.form.birth);
  288.                     let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  289.                     let params = new URLSearchParams();
  290.                     params.append('id',this.form.id);
  291.                     params.append('username',this.form.username);
  292.                     params.append('password',this.form.password);
  293.                     params.append('sex',this.form.sex);
  294.                     params.append('phoneNum',this.form.phoneNum);
  295.                     params.append('email',this.form.email);
  296.                     params.append('birth',datetime);
  297.                     params.append('introduction',this.form.introduction);
  298.                     params.append('location',this.form.location);
  300.                     updateConsumer(params)
  301.                     .then(res => {
  302.                         if(res.code == 20000){
  303.                             this.getData();
  304.                             this.notify("修改成功","success");
  305.                         }else{
  306.                             this.notify("修改失败","error");
  307.                         }
  308.                     })
  309.                     .catch(err => {
  310.                         console.log(err);
  311.                     });
  312.                     this.editVisible = false;
  313.                 }
  314.             })
  315.         },
  316.         //更新图片
  317.         uploadUrl(id){
  318.             return `${this.$store.state.HOST}/musicserver/consumer/updateConsumerPic?id=${id}`
  319.         },
  320.         //删除一名用户
  321.         deleteRow(){
  322.             delConsumer(this.idx)
  323.             .then(res => {
  324.                 if(res.code == 20000){
  325.                     this.getData();
  326.                     this.notify("删除成功","success");
  327.                 }else{
  328.                     this.notify("删除失败","error");
  329.                 }
  330.             })
  331.             .catch(err => {
  332.                 console.log(err);
  333.             });
  334.             this.delVisible = false;
  335.         }
  336.     }
  337. }
  338. </script>
  340. <style scoped>
  341.     .handle-box{
  342.         margin-bottom: 20px;
  343.     }
  344.     .consumer-img{
  345.         width: 100%;
  346.         height: 80px;
  347.         border-radius: 5px;
  348.         margin-bottom: 5px;
  349.         overflow: hidden;
  350.     }
  351.     .handle-input{
  352.         width: 300px;
  353.         display: inline-block;
  354.     }
  355.     .pagination{
  356.         display: flex;
  357.         justify-content: center;
  358.     }
  359. </style>

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

import {get,post} from '../http'
//============用户相关================
//查询用户
export const getAllConsumer =() => get(`musicserver/consumer/allConsumer`);
//添加用户
export const setConsumer = (params) => post(`musicserver/consumer/addConsumer`,params);
//编辑用户
export const updateConsumer = (params) => post(`musicserver/consumer/updateConsumer`,params);
//删除用户
export const delConsumer = (id) => get(`musicserver/consumer/deleteConsumer?id=${id}`);

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