SpringBoot + Vue 实现删除

SpringBoot + Vue 实现 “删除” 功能的核心逻辑是：前端发起删除请求（携带待删除数据的唯一标识，如 ID），后端接收请求后根据 ID 从数据库中删除对应记录，并返回操作结果给前端，前端再进行提示和页面刷新。删除功能需注意数据安全性（如二次确认）和操作幂等性（避免重复删除）。
一、核心流程拆解
前端触发删除并确认
用户点击 “删除” 按钮后，前端弹出确认提示（避免误操作），用户确认后携带 ID 发送删除请求。
后端接收并执行删除
SpringBoot 接收 ID 参数，验证数据是否存在，调用数据库 DELETE 语句删除对应记录。
返回结果与前端处理
后端返回删除成功 / 失败的结果，前端提示用户，并刷新列表数据（移除已删除项）。
二、前后端关键代码示例

1. 前端（Vue）核心代码

重点实现 “删除确认” 和 “发送删除请求”，并处理删除后的页面刷新。
vue

<template>
  <div class="user-list">
    <!-- 数据列表 -->
    <table>
      <thead>
        <tr><th>ID</th><th>姓名</th><th>操作</th></tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>
            <!-- 删除按钮：点击触发确认 -->
            <button @click="confirmDelete(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      userList: [] // 用户列表数据
    }
  },
  created() {
    this.fetchUserList() // 初始化加载列表
  },
  methods: {
    // 获取用户列表（复用查询功能的方法）
    fetchUserList() {
      axios.get('/api/user/list')
        .then(response => {
          this.userList = response.data.data.records
        })
    },
    // 确认删除弹窗
    confirmDelete(id) {
      if (window.confirm(`确定要删除ID为${id}的用户吗？`)) {
        this.deleteUser(id) // 用户确认后执行删除
      }
    },
    // 发送删除请求
    deleteUser(id) {
      axios.delete(`/api/user/delete/${id}`) // 使用DELETE请求（符合RESTful风格）
        .then(response => {
          if (response.data.success) {
            alert('删除成功！')
            this.fetchUserList() // 刷新列表，移除已删除项
          } else {
            alert('删除失败：' + response.data.msg)
          }
        })
        .catch(error => {
          console.error('删除请求出错：', error)
        })
    }
  }
}
</script>

1. 后端（SpringBoot）核心代码

基于分层架构，实现删除接口，包含参数校验和数据库操作。
Controller 层：接收删除 ID，调用 Service 处理
java
运行

@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserService userService;

    // 处理删除请求（通过URL路径传递ID）
    @DeleteMapping("/delete/{id}")
    public Result deleteUser(@PathVariable Long id) {
        // 校验ID是否合法
        if (id == null || id <= 0) {
            return Result.error("ID不合法");
        }
        // 调用Service执行删除
        boolean flag = userService.removeById(id);
        if (flag) {
            return Result.success("删除成功");
        } else {
            return Result.error("删除失败（可能数据不存在）");
        }
    }
}

Service 层：实现删除逻辑（可添加业务校验，如 “禁止删除关联数据”）
java
运行

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Autowired
    private OrderMapper orderMapper; // 假设用户关联了订单

    @Override
    public boolean removeById(Long id) {
        // 业务校验：如果用户有未完成的订单，禁止删除
        int orderCount = orderMapper.countByUserId(id);
        if (orderCount > 0) {
            return false; // 禁止删除，返回失败
        }
        // 执行删除（调用Dao层）
        return userMapper.deleteById(id) > 0;
    }
}

Dao 层（MyBatis 示例）：执行删除 SQL
java
运行

@Mapper
public interface UserMapper {
    // 根据ID删除
    int deleteById(Long id);
}
xml
<!-- UserMapper.xml -->
<delete id="deleteById" parameterType="Long">
    DELETE FROM user WHERE id = #{id}
</delete>

三、关键注意事项
删除前的二次确认前端必须添加确认弹窗（如 window.confirm），防止用户误操作删除重要数据，尤其对于不可恢复的删除操作。
RESTful 风格的请求方法推荐使用 DELETE 方法表示删除操作，与 GET（查询）、POST（新增）、PUT（修改）保持一致，使接口语义更清晰。
业务校验与数据关联性若删除的数据存在关联关系（如用户关联订单、角色关联权限），需先校验是否允许删除：
例：“如果用户有已创建的订单，禁止删除”，需在 Service 层查询关联表后再决定是否执行删除。
幂等性设计避免重复删除导致的异常（如用户连续点击删除按钮）：
后端删除接口应保证幂等性（多次调用结果一致），例如：删除不存在的 ID 时返回 “成功” 或 “数据不存在”，而非报错。
前端可在请求发送后禁用删除按钮，直到收到响应。
逻辑删除（软删除）替代物理删除重要数据建议使用逻辑删除（而非物理删除）：
数据库表添加 deleted 字段（0 = 未删除，1 = 已删除），删除时仅更新 deleted=1，查询时过滤 deleted=0 的数据。
优势：可恢复误删数据，保留数据历史记录。
实现（以 MyBatis-Plus 为例）：
java
运行
// 实体类添加注解

public class User {
    @TableLogic // 标记为逻辑删除字段
    private Integer deleted; // 0=未删除，1=已删除
}

此时调用 deleteById 会自动执行 UPDATE user SET deleted=1 WHERE id=?，无需修改 SQL。
通过以上实现，SpringBoot + Vue 可安全高效地完成删除功能，核心是前端确认、后端校验与执行删除、结果反馈与页面刷新。逻辑删除在实际开发中更常用，如需示例可进一步说明。