【项目实战】mybatis +vue.js 前后端交互批量删除

た入场券 2022-11-06 05:53 190阅读 0赞

单个删除功能已经实现了，批量删除弄了很久也没弄好，来试一下。弄了很久终于把批量删除实现了！  
结果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 1]  
点击确认后，将看见表中已经少了两条数据。  
实现的关键是：1.正确传递数据给后端的js语句  
2.后端接收的方式，为json类型时需要进行解析  
3.接收到的是一个字符串，可以转为list类型，在sql语句中注意collection的参数要与自定义的类型相匹配  
4.在dao接口中的参数要与xml中实际传递的参数匹配  
5.前端设置一个多选框选项数组，每选中一个就把这个加入到数组中。  
关键代码：  
js:

multipleSelection: [],
    
      deleteHandler(id) { 
          this.$confirm("确定删除题目吗？删除后无法恢复","Warning",{ 
            confirmButtonText: '确定删除',
            cancelButtonText: '算了,留着吧',
            type: 'danger'
          }).then(()=> {  //确认删除
            this.$axios({ 
              url: `/deleteerror/${ id}`,
              method: 'delete',
            }).then(res => { 
              this.initJls();
            })
          }).catch(() => { 
    
          })
          },
     deleteMany() { 
          this.$confirm('此操作将永久删除【' + this.multipleSelection.length
              + '】条记录, 是否继续?', '提示', { 
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
            let ids = '?';
            var nums = new Array();
            this.multipleSelection.forEach(item => { 
             // ids += 'ids=' + item.id + '&';
              nums.push(item.id)
            })
            var wNums=nums.toString()
            console.log(wNums)
            this.$axios({ 
              url: `/deletemany`,
              method: 'post',
    
                data : { id:wNums},
    
            }).then(res => { 
              this.initJls();
            })
          }).catch(() => { 
            this.$message({ 
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        handleSelectionChange(val) { 
          this.multipleSelection = val;
        }, //处理选中多选框

要注意这句:  
data : \{id:wNums\},  
发现当id为其他字符（如num)时，无法批量删除自己增加的错题，可能是因为这个id须与后端数据库的id字段相同才能正确删除。

elementui渲染：  
（包含单个删除部分）

<el-table-column type="selection" width="55">
            </el-table-column>
       <el-table-column （这样写之后第一列会出现选择框) label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="small" @click="showEditView(scope.row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteHandler(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
    
     <el-button type="danger" size="small" style="margin-top: 10px" :disabled="multipleSelection.length==0" @click="deleteMany">批量删除
          </el-button>

java处理：  
xml:

<delete id="delete" parameterType="java.lang.Integer">
            delete from errorbook where id=#{id}
        </delete>
     <delete id="doRemoveeMore" parameterType="java.util.List">
            
            
    
            delete from errorbook
            where id in
            <foreach collection="list" item="item" index="index" open="(" close=")" separator=",">
                #{item}
            </foreach>
        </delete>

接口:

public int delete(Integer id);
        public boolean doRemoveeMore(List<String> arr);

controller:

@DeleteMapping("/deleteerror/{id}")
        public String deleteUser( @PathVariable("id")Integer id){ 
            System.out.println(id);
            int i = errorBookDao.delete(id);
            String str = i >0?"success":"error";
            return str;
        }
     @PostMapping("/deletemany")
    
        public boolean deletebatch(@RequestBody String nums) { 
            System.out.println(nums);
            Map<String, Object> jsonMap = JSON.parseObject(nums);
            System.out.println(jsonMap.get("id"));
          //class m =jsonMap.get("id").getClass();
    
    // System.out.println(object.getJSONObject("id"));
         // int wNums = errorBook.getId();
        String[] ns=jsonMap.get("id").toString().split(",");
            List<String> wNums=new ArrayList<String>();
            for(int i=0;i<ns.length;i++){ 
                wNums.add(ns[i]);
            }
    // System.out.println(wNums);
      boolean doremove=errorBookDao.doRemoveeMore(wNums);
         
           return true;
        }

bean层:

public class ErrorBook { 
        private Integer id;
    
        //private String datee;
        private String content;
        private String answer;
        private String reason;
        private String master;
        private String subject;}//省略了getter setter

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]: /images/20221023/bbfde17e50ab4ea08577d14b9f239178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 1]: /images/20221023/f29faa82fd0d4c2f81ea9460a55abbfe.png