Vue.js+Axios开发待办列表无法删除MySQL中存储数据问题求助

前端排查点 #

• 确认APP.js中删除方法的Axios请求配置是否正确
  • 检查请求方法是否为DELETE，部分服务器默认不支持DELETE方法，可改用POST传action=delete参数兼容
  • 检查传参是否正确：是否正确携带待删除任务的唯一主键（通常为id字段），可在删除方法第一行加console.log('待删除任务ID:', taskId)确认参数存在且数值正确
  • 检查请求路径是否和后端删除接口路径完全一致，拼写错误、路径前缀缺失都会导致请求404
  • 打开浏览器控制台「网络」标签，触发删除操作后查看对应请求的状态码、请求参数、返回值：4xx状态码代表请求本身存在问题，5xx状态码代表后端服务报错
• 确认删除请求完成后是否触发了列表刷新：部分场景下删除请求已经生效，但前端未重新拉取最新任务列表，视觉上表现为删除未生效，需要在Axios删除请求的then回调中主动调用拉取任务列表的方法

后端（db.php）排查点 #

• 确认参数接收方式和前端传参逻辑匹配
  • 若前端用DELETE方法传JSON格式参数，PHP无法通过$_POST获取参数，需要用file_get_contents('php://input')解析JSON获取参数
  • 可在PHP代码开头加var_dump(file_get_contents('php://input')); exit;，触发删除请求后验证是否能正常拿到传过来的任务ID
• 检查SQL删除语句逻辑
  • 确认删除条件的字段名和MySQL表的实际字段名一致，避免出现表字段为task_id但代码中写为id的错误
  • 可把拼接好的SQL语句打印出来echo $sql; exit;，复制到MySQL客户端手动执行，验证是否能正常删除数据，同时排查SQL语法错误
  • 执行删除后通过mysqli_affected_rows($conn)判断实际删除的行数：返回0代表没有匹配到对应ID的记录，返回≥1代表删除成功，可把该结果返回给前端简化排查流程
• 确认数据库操作账号拥有对应表的删除权限，部分场景下数据库账号仅开通了查询、写入权限，未开通删除权限也会导致删除无报错但不生效

快速兼容方案 #

若排查后确认是服务器不支持DELETE请求，可改用POST请求实现删除逻辑：前端将请求方法改为POST，参数中新增op_type: 'delete'和对应任务ID，后端通过$_POST接收参数后判断处理即可。

内容的提问来源于stack exchange，提问作者M K