需求
批量删除
分析
- 前端提交数组（一组数据），后端采用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 = [] } } },
