javascript - 无法使用 node.js 和 express 从网页收集用户输入

Question

我使用 Node.js 和 Express 在本地服务器上运行网页，该网页收集用户信息以将他们“注册”为用户。

I'm using body-parser but when I submit the form with user data, nothing prints to my console.

最终项目是拥有一个使用 MYSQL 将用户数据提交到数据库的功能性网页。许多此类代码已经在预制的 Nodejs Express App 项目中。

这是我的App.js 文件:

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var registration = require('./routes/registration');

var app = express();

var urlencodedParser = bodyParser.urlencoded({ extended: true });

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/registration', registration);

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

app.get('/registration', function(req, res) {
   res.render('registration', {qs: req.query});
});

app.post('/registration', urlencodedParser, function(req, res) {
   console.log(req.body);
   res.render('registration', {qs: req.query});
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
   var err = new Error('Not Found');
   err.status = 404;
   next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
   res.locals.message = err.message;
   res.locals.error = req.app.get('env') === 'development' ? err : {};

   // render the error page
   res.status(err.status || 500);
   res.render('error');
});

module.exports = app;

Am I missing something in my html file that allows users to submit data or am I using body-parser incorrectly?

数据收集发生在注册页面。

这是我的 registration.ejs

的一部分

<form id="registration-info" method="POST" action="/registration">
    <div class="container">
    <div class="py-5 text-center”>
        <h2>Registration Form</h2>

    <div class="row justify-content-center">

        <div class="col-md-8 order-md-1">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="firstName">First name</label>
                    <input type="text" class="form-control" value="" required>
                    <div class="invalid-feedback">
                        Valid first name is required.
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="lastName">Last name</label>
                    <input type="text" class="form-control" value="" required>
                    <div class="invalid-feedback">
                        Valid last name is required.
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-5 mb-3">
                    <label for="birthmonth">Birthday</label>
                    <select class="custom-select d-block w-100" required>
                        <option value="">Month</option>
                        <option>January</option>
                        <option>February</option>
                        <option>March</option>
                        <option>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                    </select>
                    <div class="invalid-feedback">
                        Please select a valid month.
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <label for="birthday">Day</label>
                    <input type="text" class="form-control" required>
                    <div class="invalid-feedback">
                        Day is required.
                    </div>

                </div>
                <div class="col-md-3 mb-3">
                    <label for="birthyear">Year</label>
                    <input type="text" class="form-control" required>
                    <div class="invalid-feedback">
                        Year is required.
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label for="password">Password</label>
                <input type="password" class="form-control" >
                <div class="invalid-feedback">
                    Please enter a password.
                </div>
            </div>

            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
        </div>
    </div>
</div>
</form>

我遵循了本教程:https://www.youtube.com/watch?v=rin7gb9kdpk&t=137s

解决方法:改变app.post和app.get的顺序。此外，需要在 html 文件中为从用户收集的每条信息定义一个名称变量

Answer 1

您需要关心您的 express 中间件的顺序。如果你调用 res.render 一个响应被发送并且你正在终止脚本。还要注意，如果您不在中间件中调用中间件 next() 方法，您的脚本将不会转到下一个中​​间件函数。

这个顺序更好，因为现在您先记录它，然后发送响应。

app.post('/registration', urlencodedParser, function(req, res) {
   console.log(req.body);
   res.render('registration', {qs: req.query});
});

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

app.get('/registration', function(req, res) {
   res.render('registration', {qs: req.query});
});

若想this article将帮助您编写适当的中间件；)

例子:

这是快速路由:如果有 GET 请求，回调将被调用(app.get 如果 app.post 这个函数将被 POST 请求调用)。然后执行回调。 next()表示转到下一个中​​间件。

中间件函数按顺序执行，每次调用 next 时都会转到下一个中​​间件函数。

app.get('/', function logger(req,res,next){
  console.log(new Date(), req.method, req.url);
  next();
});

尝试谷歌 express4 路由和中间件。例如:

express 上的文件routing

express 上的文件middleware