Node/Express BodyParser 不从输入字段返回数据或返回“未定义”

Question

我有一个基本的快递设置。我正在尝试做一些在教程上看起来很简单但对我来说根本不起作用的事情。我正在尝试捕获用户在两个输入中输入的数据，一个文本输入和一个下拉输入。

我的 app.js 文件如下所示：

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var pug = require('pug');

// initialize express
var app = express();

// set up port
var port = process.env.PORT || 1337;

// setting up bodyParser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));

// setting up views
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));

// initial homepage get
app.get('/', function(req, res) {
    res.render('index');
});

app.post('/', function(req, res) {
    var input = req.body.userInput;
    var quantity = req.body.quantity;

    console.log("input is: " + input);
    console.log("quantity is: " + quantity);
});

// listening on port
app.listen(port, function(err) {
    if (err) throw err;
    console.log("Server is running on port " + port);
});

我的 pug 文件格式如下：

.card
   .card-body
     form(action='/', method="POST")
       .form-row
          input.form-control(type='text', placeholder="Search for an item by its id", name="userInput")
       .form-row.mt-2
          .form-group
             select.form-control(name="quantity")
                option(value='1') Qty: 1
                option(value='2') Qty: 2
                option(value='3') Qty: 3
                option(value='4') Qty: 4
                option(value='5') Qty: 5
   .card-footer
        button.btn.btn-outline-secondary(type='submit')
           i.fas.fa-shopping-cart.mr-2
           | Add to my cart

一切都正确渲染。我为我拥有的每个表单输入提供了一个“名称”字段，并尝试从 app.js 文件中的 req.body.(name) 获取该数据。但是当我运行它并输入数据时，控制台日志中什么也没有显示。

Answer 1

问题不在于body-parser，而在于您的 HTML。如果您从开发人员控制台检查，您会看到单击按钮时没有执行任何请求，那是因为该按钮不在表单内，因此什么也不做。

取出.card-footer 以在表单中添加按钮，您将收到带有参数的请求。请求将挂起，因为post 处理程序不返回任何内容，但您会在控制台中看到该参数。