javascript - Node.js/Express-路由多于一个表单发布

我正在处理具有两个单独表单以及两个单独表单动作的网页。我可以使用一种表格，但不能同时使用两种表格。如果我将其中之一更改为router，则我有发布路由router.post（'/ direct-user'，...）和发布路由router.post（'/ other-user'，...）。 post（'/'，...）然后就可以了。

我怀疑我的app.js路由声明中有问题，但我无法弄清楚。

任何指导都会很棒。

我的应用程序结构如下所示：

/project
    /routes
        index.js
        requser.js
    /views
        error.hbs
        index.hbs
        layout.hbs
        requser.hbs
    app.js
    package.json

这是我的主应用程序文件，其中包含我的模块导入，路由位置和错误处理。
app.js

// Module imports //
var express = require('express');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var morgan = require('morgan');
var path = require('path');
var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(validator());
app.use(express.static(path.join(__dirname, 'public')));


// Routes and views //
app.use('/', require('./routes/index'));
app.use('/user/:id', require('./routes/user'));
app.use('/user-update', require('./routes/user'));
app.use('/requser', require('./routes/requser'));
app.use('/direct-user', require('./routes/requser'));
app.use('/other-user', require('./routes/requser'));


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

// Development error handler; will print stacktrace //
if (app.get('env') === 'development') {
        app.use(function(err, req, res, next) {
                res.status(err.status || 500);
                res.render('error', {
                        message: err.message,
                        error: err
                });
        });
}

// Production error handler; no stacktraces leaked to user //
app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
                message: err.message,
                error: {}
        });
});

module.exports = app;

这是我的requser文件，其中包括一个获取路由以加载空表单，以及两个发布路由以处理来自两种表单之一的输入。
requser.js

// Module imports //
var express = require('express');
var router = express.Router();


// GET request user form //
router.get('/', function(req, res, next) {
    res.render('requser', {
        title: 'User Request'
    });
});


// POST /direct-user //
router.post('/direct-user', function(req, res) {
    // Validate form contents
    // ...

    // Assuming all is well
    console.log('Direct user requested');
    res.send('cool');
});

// POST other-user //
router.post('/other-user', function(req, res) {
    // Validate form contents
    // ...

    // Assuming all is well
    console.log('Other user requested');
    res.send('cool');
});

module.exports = router;

最后，我的表单视图/模板。
requser.hbs

<div class="container">
<h1>User Request</h1>

<!-- Start of direct user creation form //////////////////////////////// -->
<form method="post" action="/direct-user">
    <!-- First name, last name -->
    <!-- ... -->

    <!-- Submit button -->
    <div class="row">
        <div class="col-md-11">
            <div class="form-group">
                <button type="submit" class="btn btn-custom">Submit</button>
            </div>
        </div>
    </div> <!-- End row -->
</form> <!-- End form -->


<!-- Start of other user creation form //////////////////////////////// -->
<form method="post" action="/other-user">
    <!-- First name, last name -->
    <!-- ... -->

    <!-- Submit button -->
    <div class="row">
        <div class="col-md-11">
            <div class="form-group">
                <button type="submit" class="btn btn-custom">Submit</button>
            </div>
        </div>
    </div>
</div> <!-- End container -->

最佳答案

您使用路由中间件的方式不正确。

app.use('/user/:id', require('./routes/user'));
app.use('/user-update', require('./routes/user'));
app.use('/requser', require('./routes/requser'));
app.use('/direct-user', require('./routes/requser'));
app.use('/other-user', require('./routes/requser'));

这些线是有问题的。

让我们以其中一个为例，第三个为例，因为一个本身足以应付/direct-user和/other-user端点。

该行告诉Express要做的是：


  当请求到达路径以/ requser开头的服务器时，将该请求传递给requser路由器中间件，它将处理其余的请求。


假设您的请求指向路径/requser/direct-user。该请求将传递给requser中间件，并且该中间件将匹配其余部分（/direct-user）并正确调用相关的回调。

不知道您的表单在何处发布数据，我无法为您提供进一步的帮助。但是，您应该检查两个表单是否将其数据分别发布到/requser/direct-user和/requser/other-user并可以正常工作。