Node.js中基于单选框选择删除SQLite数据库记录的问题

嘿，我仔细看了你的代码，你猜的没错——问题核心就是GET请求不会把表单数据放到req.body里，而且你的代码逻辑里还有个小问题：你在渲染页面的时候就直接执行了删除操作，这时候用户还没来得及选择任何单选框呢！咱们一步步来修复：

问题拆解 #

1. GET请求的局限：GET请求的参数是拼在URL里的，不会存入req.body，所以你根本拿不到单选框的选中值。
2. 逻辑顺序错误：你在渲染用户列表的同时就执行了DELETE语句，这时候用户还没操作，自然拿不到有效ID。
3. 缺少表单包裹：你的删除按钮没有放在<form>里，点击按钮时根本不会提交任何数据到服务器。

修复步骤 #

1. 给页面添加表单，改用POST提交 #

在渲染页面的时候，把表格和删除按钮放到<form>标签里，指定method="POST"和action="/delete"，这样点击删除按钮时，才会把选中的单选框值发送到服务器。

2. 拆分路由职责 #

• 保留GET /delete路由，只负责渲染用户列表页面，不要在这里处理删除逻辑。
• 新增POST /delete路由，专门处理删除请求，从req.body里获取选中的单选框值，然后执行SQL删除操作。

3. 简化选中值的获取 #

因为单选框的name属性都是optradio，用户选中后，req.body.optradio直接就是对应的ID值，不需要用findIndex去遍历数组了。

修改后的完整代码 #

var express = require('express');
var app = express();
var bodyParser = require("body-parser")
var path = require('path');
var sqlite3 = require("sqlite3").verbose();

// Open persistent file database "loginDB"
let db = new sqlite3.Database('./loginDB', sqlite3.OPEN_READWRITE, (err) => {
  if (err) {
    console.error(err.message);
  }
  console.log('Connected to the user database.');
});

// Route files in public
app.use(express.static('public'));

// Configure to use body-parser
app.use(bodyParser.urlencoded({extended: false}));

// 1. GET路由：只负责渲染用户列表页面
app.get("/delete", function(req, res, next) {
  // Query database to retrieve records
  db.all(`SELECT * FROM UserLogin`, function(err, rows) {
    if (err) {
      console.error(err.message);
      return res.send("获取用户数据失败");
    };

    // Generate table with user data
    res.write('<html><head>');
    res.write('<meta charset="utf-8">');
    res.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">');
    res.write('<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>');
    res.write("</head><body>");
    res.write("<h2> The User Information Table</h2><br>");
    // 把表格和按钮放到form里，指定POST提交到/delete
    res.write('<form method="POST" action="/delete">');
    res.write("<table class = 'table table-bordered table-striped'><thead><tr>");
    res.write("<strong><th> </th>");
    res.write("<th>ID</th>");
    res.write("<th>Username</th>");
    res.write("<th>Password</th></strong></tr></thead><tbody>");
    
    rows.forEach(function(row) {
      res.write(`<tr><td><input type='radio' value='${row.ID}' id='optradio-${row.ID}' name='optradio'></td><td>` +row.ID+ `</td><td>` +row.Username+ `</td><td>` +row.Password+ `</td></tr>`);
    });
    
    res.write("</tbody></table>");
    res.write(`<button class="btn btn-default" type="submit" value="delete" class="btn btn-primary">Delete</button>`);
    res.write('</form>'); // 闭合form标签
    res.write("</body></html>");
    res.send();
  });
});

// 2. POST路由：处理删除请求
app.post("/delete", function(req, res) {
  const selectedId = req.body.optradio;
  if (!selectedId) {
    return res.send("请先选择一条记录再删除");
  }

  // 执行删除操作
  db.run(`DELETE FROM UserLogin WHERE ID = ?`, selectedId, function(err) {
    if (err) {
      console.error(err.message);
      return res.send("删除失败：" + err.message);
    }
    console.log("Deleted ID " + selectedId);
    // 删除后重定向回列表页面，让用户看到更新后的结果
    res.redirect("/delete");
  });
});

app.listen(3000, function() {
  console.log("Web server running at: http://localhost:3000");
  console.log("Type Ctrl+C to shut down the web server");
});

关键改动说明 #

• 把删除按钮和表格包裹在<form>中，指定POST方法，确保选中的单选框数据能被提交到服务器。
• 拆分了路由：GET /delete负责展示页面，POST /delete负责处理删除逻辑，逻辑更清晰。
• 在POST路由里直接从req.body.optradio获取选中的ID，不需要复杂的数组遍历。
• 删除成功后用res.redirect跳回列表页面，用户能立即看到删除后的结果。

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