需求

批量删除

分析

• 前端提交数组（一组数据），后端采用List接收，并遍历依次删除

后端

  

   

    

     

    
    

     

      post http://localhost:8888/student/batchDelete
     
    
   

    

     

    
    

     

      ['s001','s002']
     
    
  
 

• 步骤：

  • 步骤1：编写service，获得所有id，遍历依次删除（拼条件 where sid in ('s001','s002')）

  • 步骤2：编写controller，使用List接收json数组

• 步骤1：编写service，获得所有id，遍历依次删除（拼条件 where sid in ('s001','s002')）

  • 接口

  

   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 批量删除
     
    
   

    

     

    
    

     

       * @param ids
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public void batchDelete(List<String> ids);
     
    
  
 

• 实现类

  

   

    

     

    
    

     
    @Override
     
    
   

    

     

    
    

     
    public void batchDelete(List<String> ids) {
     
    
   

    

     

    
    

     
        // 遍历，依次删除
     
    
   

    

     

    
    

     

              ids.forEach(id -> {
     
    
   

    

     

    
    

     

                  studentMapper.deleteByPrimaryKey(id);
     
    
   

    

     

    
    

     

              });
     
    
   

    

     

    
    

     

          }
     
    
  
 

步骤2：编写controller，使用List接收json数组

  

   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 批量删除
     
    
   

    

     

    
    

     

       * @param ids
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    @PostMapping("/batchDelete")
     
    
   

    

     

    
    

     
    public BaseResult batchDelete(@RequestBody List<String> ids) {
     
    
   

    

     

    
    

     
        try {
     
    
   

    

     

    
    

     
            // 删除
     
    
   

    

     

    
    

     

                  studentService.batchDelete(ids);
     
    
   

    

     

    
    

     
            // 提示
     
    
   

    

     

    
    

     
            return BaseResult.ok("删除成功");
     
    
   

    

     

    
    

     

              } catch (Exception e) {
     
    
   

    

     

    
    

     

                  e.printStackTrace();
     
    
   

    

     

    
    

     
            return BaseResult.error(e.getMessage());
     
    
   

    

     

    
    

     

              }
     
    
  
 

• 测试

前端

• 步骤：

  • 步骤1：声明变量deleteIds:[]

  • 步骤2：变量与复选框绑定

  • 步骤3：点击按钮进行删除

• 步骤1：声明变量deleteIds:[]

• 步骤2：变量与复选框绑定  

• 步骤3：点击按钮进行删除  

  

   

    

     

    
    

     
    // 8.3.2 批量删除函数
     
    
   

    

     

    
    

     
    async batchDeleteStudent() {
     
    
   

    

     

    
    

     
      // 1)询问
     
    
   

    

     

    
    

     
      if(!confirm('您确定要删除么？')) {
     
    
   

    

     

    
    

     
        return;
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     
      // 2)ajax
     
    
   

    

     

    
    

     
      let {data:baseResult} = await axios.post('http://localhost:8888/student/batchDelete', this.deleteIds)
     
    
   

    

     

    
    

     
      // 3)提示
     
    
   

    

     

    
    

     
      if(baseResult.code == 20000) {
     
    
   

    

     

    
    

     
        // 3.1)成功 -- 重新查询
     
    
   

    

     

    
    

     
        this.condition(1)
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        // 3.2)失败
     
    
   

    

     

    
    

     
        alert(baseResult.message)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          },
     
    
  
 

删除

• 思路：

  • 步骤1：将需要删除的sid，添加到批量删除的变量数组中

  • 步骤2：调用批量删除的功能

• 步骤1：将需要删除的sid，添加到批量删除的变量数组中

步骤2：调用批量删除的功能

  

   

    

     

    
    

     

          deleteStudent(sid) {
     
    
   

    

     

    
    

     
      // 将sid添加到批量删除的数组中
     
    
   

    

     

    
    

     
      this.deleteIds.push(sid)
     
    
   

    

     

    
    

     
      // 调用批量删除
     
    
   

    

     

    
    

     
      this.batchDeleteStudent()
     
    
   

    

     

    
    

     
      // 清空数据
     
    
   

    

     

    
    

     
      this.deleteIds = []
     
    
   

    

     

    
    

     

          }
     
    
  
 

全选按钮

效果

效果1：全选按钮，控制列表项

• 全选选中，列表都选中

• 全选不选中，列表都不选中  

步骤2：列表项，控制全选按钮

• 最后一个列表选中了，全选要选中

• 任意一个列表不选中，全选不选中  

效果1：全选按钮，控制列表项

• 步骤1：变量 allChecked，并绑定到全选按钮上

步骤2：vue监听机制 watch。如果是true将列表中的所有id添加到批量删除数组中，如果是false赋值空数组

  

   

    

     

    
    

     
  watch: {
     
    
   

    

     

    
    

     
    allChecked(newValue,oldValue) {
     
    
   

    

     

    
    

     
      //如果是true将列表中的所有id添加到批量删除数组中，如果是false赋值空数组
     
    
   

    

     

    
    

     
      if(newValue) {
     
    
   

    

     

    
    

     
        // 全选
     
    
   

    

     

    
    

     
        //this.deleteIds = this.pageInfo.list.map(student => {return student.sid})
     
    
   

    

     

    
    

     
        this.deleteIds = this.pageInfo.list.map(student => student.sid) //箭头函数的省略
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        // 全不选
     
    
   

    

     

    
    

     
        this.deleteIds = []
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
  
 

文章来源: blog.csdn.net，作者：陶然同学，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_45481821/article/details/123239406