如何实现HTML按钮调用Node.js删除MySQL表中当前登录用户记录

浏览器端的HTML/JS和服务端Node.js是完全隔离的运行环境，没法直接跨环境调用函数，通过HTTP接口做前后端交互是标准实现方式，整体分3步落地：

第一步：Node.js侧编写删除用户的服务端接口 #

先安装必要依赖（如果还没装的话）：
npm i express mysql2 cors

接口逻辑里绝对不能直接信任前端传来的用户ID，必须从服务端保存的登录态（Session、解析后的JWT）里取当前登录用户的标识，防止越权删除其他用户账号，参考代码如下：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());

// 初始化MySQL连接
const db = mysql.createConnection({
  host: '你的数据库地址',
  user: '你的数据库账号',
  password: '你的数据库密码',
  database: '你的业务库名'
});

// 登录态校验中间件，替换成你自己现有的鉴权逻辑即可
const authCheck = (req, res, next) => {
  // 比如从请求Cookie里读Session、解析Header里的JWT，校验失败直接返回401
  req.user = { id: 1 }; // 示例值，实际取校验通过的当前登录用户ID
  next();
};

// 注销账户接口
app.delete('/api/user/delete', authCheck, (req, res) => {
  const currentUserId = req.user.id;
  // 用?做参数占位，不要拼接SQL字符串，防止SQL注入
  const deleteSql = `DELETE FROM users WHERE id = ?`;
  db.query(deleteSql, [currentUserId], (err, result) => {
    if (err) {
      return res.status(500).json({ code: 500, msg: '服务异常，删除失败' });
    }
    if (result.affectedRows === 0) {
      return res.status(404).json({ code: 404, msg: '用户不存在' });
    }
    // 删除成功后记得作废当前登录凭证（清Session、把Token加入黑名单等）
    res.json({ code: 200, msg: '账户删除成功' });
  });
});

app.listen(3000, () => {
  console.log('服务运行在3000端口');
});

注意：SQL语句必须用上面示例的参数化占位写法，禁止直接把变量拼接到SQL字符串里，避免SQL注入风险。

第二步：HTML页面添加按钮和前端请求逻辑 #

页面里放置删除按钮，绑定点击事件，触发时给上面写好的Node.js接口发请求即可，用原生fetch实现不需要额外引入第三方库：

<!-- 删除账户按钮 -->
<button id="deleteAccountBtn">永久注销当前账户</button>

<script>
const deleteBtn = document.getElementById('deleteAccountBtn');
deleteBtn.addEventListener('click', async () => {
  // 加二次确认，防止用户误点
  const confirmRes = confirm('确定要永久删除账户吗？操作不可恢复！');
  if (!confirmRes) return;

  try {
    const res = await fetch('http://你的Node服务地址:3000/api/user/delete', {
      method: 'DELETE',
      // 如果用Cookie存登录态，必须加这行才能跨域带上凭证
      credentials: 'include'
    });
    const data = await res.json();
    if (data.code === 200) {
      alert('账户已注销，即将跳转到登录页');
      location.href = '/login.html';
    } else {
      alert(`删除失败：${data.msg}`);
    }
  } catch (err) {
    alert('网络异常，请稍后重试');
  }
});
</script>

必须注意的几个坑 #

• 永远不要信任前端传参里的用户ID，所有涉及当前用户的操作，都要从服务端侧的登录态里取用户标识，否则攻击者改个请求参数就能删掉任意用户账号
• 删除类高危操作一定要加二次确认，避免用户误触造成数据损失
• 用户删除成功后必须立刻作废对应的登录凭证，防止出现账号删了但登录态还有效的异常情况

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