批量删除的三种实现方式

vue+springboot实现批量删除的三种实现方式

1.Post请求方式

前端代码

//参数封装
handleSelectionChange(val){
     this.multipleSelection = val;
     this.ids = this.multipleSelection.map(item =>
         item.id
     )
   },
//Api封装
export function batchDelete(ids){
    return request({
        url: '/system/config/pos/batchDelete',
        method: 'post',
        data: ids
    })
}

后端代码

//使用@RequestBody注解
@PostMapping("/batchDelete")
    public ResultMap deletePositionByIds(@RequestBody Integer[] ids) {
        if (positionService.removeByIds(Arrays.asList(ids))) {
            return ResultMap.success("删除成功!");
        }
        return ResultMap.error("删除失败!");
    }

2.Delete请求方式一

//参数封装
let ids='';
 for(let i=0;i<this.multipleSelection.length;i++){
   if (i===this.ids.length-1){
     ids+=this.ids[i];
   }else {
     ids+=this.ids[i]+',';
   }
 }
//Api封装
export function batchDelete(ids){
    return request({
        url: '/system/config/pos/batchDelete',
        method: 'delete',
        params: {ids:ids}
    })
}

后端代码

@DeleteMapping("/batchDelete")
    public ResultMap deletePositionByIds(@RequestParam Integer[] ids) {
        if (positionService.removeByIds(Arrays.asList(ids))) {
            return ResultMap.success("删除成功!");
        }
        return ResultMap.error("删除失败!");
    }

3.Delete请求方式二

前端代码

//参数封装
let ids='';
this.multipleSelection.forEach(item =>{
        ids += 'ids=' + item.id +'&'
      })
    
//Api封装
export function batchDelete(ids){
    return request({
        url: '/system/config/pos/batchDelete'+ids,
        method: 'delete'
    })
}

后端代码

@DeleteMapping("/batchDelete")
    public ResultMap deletePositionByIds(Integer[] ids) {
        if (positionService.removeByIds(Arrays.asList(ids))) {
            return ResultMap.success("删除成功!");
        }
        return ResultMap.error("删除失败!");
    }