Question

我试图从本地主机上运行的网页（收集用户信息的注册表单）中收集数据但是当我按下提交按钮时，我得到了

404错误：找不到页面，表格中的数据未被收集和输出。

我正在使用带有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 }); module.exports = app; // 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); // 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'); }); 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}); });的webstorm并表达，我希望使用正文解析器收集和解析注册页面中的用户输入。很多这些代码已经在预制的Nodejs Express App项目中。

这是我的 app.js 文件：

404 error: page not found

我可以在服务器运行时看到网页上的表单，我可以输入信息，但是当我点击提交按钮时，它会转到app.get并且信息不是＆＃39; t打印到我的控制台日志。

我不确定问题是什么，因为在添加<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>行之前，我能够输入信息并提交表单（虽然它没有做任何事情 - 只是刷新到一个新的空白表格。）

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

这是html文件的一部分：

<?php
$mysqli = new mysqli("localhost", "root", "fakepassword", "fakedbname");

$result = $mysqli->query("SELECT * FROM testtable");
$datas = array();

if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_array($result)) {
        $datas[] = $row;
    }
}

foreach ($datas[0] as $data) {
    echo $data . "<br>";
    }

?>

<?php mysqli_free_result($result);
?>

Answer 1

在检查路线之前，您正在处理错误。所以它总是会出现404错误

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;

Answer 2

除了Nitin Goyal的回答，快递中间件的顺序很重要。因为在您的应用程序中，您在其他中间件之前定义了错误中间件（错误中间件总是有四个参数err，res，req，next）。

当express中发生错误时（通常使用new Error参数调用next时）表示它会查找下一个错误中间件。然后，您可以通过在没有参数的情况下调用next()来退出此错误中间件。现在快递查找下一个正常（有2-3个args）中间件并跳过所有错误中间件（带4个args）。

This post很好地解释了。

使用nodejs和express继续获得404错误

2 个答案: