Question

我有一个简单的node.js应用程序，它显示存储在SQLite数据库中的用户登录信息，每行中都有一个单选按钮。当用户选择记录并单击删除按钮时，应删除相应的记录。

问题似乎是我无法弄清楚如何返回所选单选按钮的值，它们都显示为'undefined'。我已经尝试了很多不同的方法，并且我在圈子里走来走去。帮助赞赏！

编辑：我认为问题是我正在使用一个GET方法，所以req.body是空的。不知道怎么解决它！

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}));

// Function to check if radio button is selected
function checkSelected(item) {
    return item != "undefined";
}

// Function to identify ID of record selected for deletion
function getSelected(selections) {
    var userID = selections.findIndex(checkSelected);
    return userID;
}

// REST endpoint for displaying data
app.get("/delete", function(req, res, next) {

    var radioArray = [];

    // Query database to retrieve records
    db.all(`SELECT * FROM UserLogin`, function(err, rows) {
        if (err) {
            console.error(err.message);
        };

        // 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>");
        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' name='optradio'></td><td>` +row.ID+ `</td><td>` +row.Username+ `</td><td>` +row.Password+ `</td></tr>`);
            radioArray.push(req.body.optradio);
        });

        res.write("</tbody></table></body></html><br>");
        res.write(`<button class="btn btn-default" type="submit" value="delete" class="btn btn-primary">Delete</button>`);

        var whichRadio = getSelected(radioArray);

        db.run(`DELETE FROM UserLogin WHERE ID = ?`, whichRadio, function(err) {
            if (err) {
                return console.error(err.message);
            } console.log("Deleted ID " + whichRadio);

        });   

        res.send(); 
    });
});

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

Answer 1

我发布了一个问题的答案，以帮助其他人解决同样的问题。添加表单标签并设置单独的POST方法允许我摆脱我用来尝试检索单选按钮值的不整洁代码，因此最终结果更整洁。

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.');
  });


db.serialize(function() {
    db.run(`SELECT * FROM UserLogin`); 
});

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

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

// REST endpoint for displaying data
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);
        };

        // 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>");
        res.write(`<form id="deleteUserForm" action="/inputForm" method="POST"</form>`);
        res.write("<table class='table table-bordered table-striped'><thead><tr><strong>");
        res.write("<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' form="deleteUserForm" value='${row.ID}' id='optradio' name='optradio'></td><td>` +row.ID+ `</td><td>` +row.Username+ `</td><td>` +row.Password+ `</td></tr>`);            
        });

        res.write("</tbody></table><br>");

        res.write(`<button class="btn btn-default" type="submit" form="deleteUserForm" value="delete" class="btn btn-primary">Delete</button>`);
        res.write(`</body></html>`);

        res.send(); 
    });
});

// REST endpoint for getting value of selected record ID and deleting the user
app.post('/inputForm', function(req, res) {
    //res.send(req.body.optradio);
    var userToDelete = req.body.optradio;

    db.run(`DELETE FROM UserLogin WHERE ID = ?`, userToDelete, function(err) {
        if (err) {
            return console.error(err.message);
        } res.redirect('/delete');      //Redirect to user information page      
    }); 
});

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

Node.js根据单选按钮选择从SQLite数据库中删除记录

1 个答案: