Springboot后端接收数组(多选删除)

文章介绍了在开发中如何实现批量删除功能,重点在于后端如何接收和处理由前端传递的ID数组,通过使用@PathVariable注解和特定的路由设计,避免了字符串拼接和分割的操作。同时,前端只需简单拼接URL即可发送请求。接口测试工具可用于验证功能的正确性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求

在做删除功能时,我们需要一次删除多个项目,一般根据id来删除,这样就需要后端能够接收数组。在此记录一种方法,避免字符串拼接和分割

后端代码

@RestController
@RequestMapping("/test")
public class TestController {
    @GetMapping("/delete/{ids}")
    public AjaxResult testDel(@PathVariable Long[] ids){
        log.info(Arrays.toString(ids));
        return AjaxResult.success();
    }
}

重要的部分有两个,路由中的{ids}需要和方法中的参数名称一致,@PathVariable注解表明这是一个路径参数。另外,参数类型也决定了从前端传递来的参数类型要匹配。

前端代码

export function delProject(id) {
  return request({
    url: '/yanan/project/' + id,
    method: 'delete'
  })
}

前端代码非常简单,就是拼接即可,如果id是一个数组,拼接完的结果如下:
在这里插入图片描述

接口测试工具

也可以在接口测试工具中自行测试
在这里插入图片描述再次提醒,后端方法中的参数类型决定了前端传递的参数类型,如果类型不匹配接收就会出错。

要实现批量删除,可以按照以下步骤进行: 1. 前端页面中,勾需要删除的数据,点击“删除”按钮,将所数据的id封装成一个数组,通过axios发送到后端。 2. 后端接收前端传来的id数组,根据id数组中的id,从数据库中删除对应数据。 3. 在SpringBoot中,可以使用@DeleteMapping注解来接收前端发送的DELETE请求,并在方法体中实现删除操作。在MyBatisPlus中,可以使用wrapper进行批量删除操作。 4. 最后,后端返回删除结果给前端。 下面是一个简单的代码示例: 前端代码: ``` <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> <el-table-column fixed="right" label="操作"> <template slot-scope="scope"> <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-button type="danger" @click="batchDelete">批量删除</el-button> </div> </template> <script> import axios from 'axios'; export default { data() { return { tableData: [], // 表格数据 multipleSelection: [], // 数组 }; }, methods: { // 删除单条数据 handleDelete(id) { axios.delete('/api/delete/' + id).then((res) => { this.getTableData(); }); }, // 批量删除 batchDelete() { const ids = this.multipleSelection.map((item) => item.id); axios.delete('/api/batchDelete', { data: ids, }).then((res) => { this.getTableData(); this.multipleSelection = []; }); }, // 获取表格数据 getTableData() { axios.get('/api/getTableData').then((res) => { this.tableData = res.data; }); }, }, created() { this.getTableData(); }, }; </script> ``` 后端代码: ``` @RestController @RequestMapping("/api") public class UserController { @Autowired private UserService userService; // 删除单条数据 @DeleteMapping("/delete/{id}") public boolean delete(@PathVariable("id") Long id) { return userService.removeById(id); } // 批量删除 @DeleteMapping("/batchDelete") public boolean batchDelete(@RequestBody List<Long> ids) { return userService.removeByIds(ids); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值