springboot 批量删除 vue 前端axios

你可以在Vue前端使用Axios发送HTTP请求来与后端的Spring Boot应用进行通信，实现批量删除的功能。以下是一个简单的示例：

在Vue组件中，可以使用Axios发送DELETE请求来批量删除数据。首先，确保你已经在项目中安装了Axios依赖：

npm install axios

然后，在Vue组件中，你可以通过以下方式使用Axios发送DELETE请求：

<template>
  <div>
    <button @click="deleteData">批量删除</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    deleteData() {
      // 获取要删除的数据的ID列表
      const ids = [1, 2, 3]; // 假设这里是要删除的数据的ID列表

      // 发送DELETE请求
      axios.delete('/api/data', {
        data: { ids: ids }, // 将ID列表作为请求体发送给后端
      })
        .then(response => {
          // 处理删除成功的逻辑
        })
        .catch(error => {
          // 处理删除失败的逻辑
        });
    },
  },
};
</script>

在后端的Spring Boot应用中，你可以编写一个接口来处理这个DELETE请求，并实现批量删除的逻辑。以下是一个简单的示例：

@RestController
@RequestMapping("/api")
public class DataController {

  @DeleteMapping("/data")
  public ResponseEntity<String> deleteData(@RequestBody Map<String, List<Integer>> request) {
    List<Integer> ids = request.get("ids");
    // 根据ID列表执行批量删除操作
    // ...

    return ResponseEntity.ok("删除成功");
  }
}

这个示例中，我们使用了`@DeleteMapping`注解来处理DELETE请求，并通过`@RequestBody`注解来接收前端发送的请求体数据。在方法中，我们可以根据ID列表执行批量删除的逻辑。

当删除操作完成后，可以返回一个合适的响应给前端，表示删除成功。在这个示例中，我们返回了一个包含"删除成功"消息的HTTP响应。

这就是使用Spring Boot和Vue前端结合Axios实现批量删除的基本步骤。当然，具体的实现可能因项目的需求而有所不同，你可以根据自己的情况进行相应的调整。