基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程——多条件搜索并分页展示

在SpringBoot+Vue+ElementUI+MyBatis前后分离管理系统中，我们经常需要处理多条数据的操作，比如批量删除、批量导入等。这里我们以批量删除为例，给出一个简单的实现方法。

后端代码示例：

@Controller
@RequestMapping("/api/user")
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @PostMapping("/delete/batch")
    @ResponseBody
    public ResponseResult deleteBatch(@RequestBody List<Integer> userIds) {
        if (userIds == null || userIds.isEmpty()) {
            return ResponseResult.errorResult("userIds不能为空");
        }
        userService.deleteBatch(userIds);
        return ResponseResult.okResult("批量删除成功");
    }
}

前端代码示例：

// Vue组件中的methods部分
methods: {
    // 批量删除用户
    batchDeleteUsers() {
        let userIds = this.multipleSelection.map(user => user.id); // 获取选中用户的ID列表
        this.$http.post('/api/user/delete/batch', userIds)
            .then(response => {
                if (response.data.code === 200) {
                    this.$message.success(response.data.message);
                    this.loadUsers(); // 重新加载用户列表
                } else {
                    this.$message.error(response.data.message);
                }
            })
            .catch(error => {
                console.error("Error:", error);
                this.$message.error("批量删除失败");
            });
    }
}

在这个示例中，我们首先在前端获取用户选中的ID列表，然后通过POST请求发送到后端的批量删除接口。后端接收到请求后，遍历ID列表执行删除操作。操作成功后返回成功响应，前端根据响应结果加载新的用户列表。

注意：这里的ResponseResult是一个自定义的响应结果封装类，用于统一API的响应格式。实际项目中，你可能会使用Spring的ResponseEntity或其他类似工具来封装响应。