Node.js / Express - 路由多个表单帖子

I'm working on webpage that has two separate forms on it, with two separate form actions. I can get one form to work, but I can't get both to work. I've got post route router.post('/direct-user',...) and post route router.post('/other-user', ...), if I change one of those to just router.post('/',...) then it works just fine.

我正在网页上有两个单独的表单,有两个单独的表单操作。我可以得到一个表格,但我不能两个都工作。我有后路由router.post('/ direct-user',...)和后路由router.post('/ other-user',...),如果我将其中一个更改为路由器。发帖('/',...)然后就可以了。

I suspect there's something wrong in my app.js route declarations, but I can't figure it out.

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

Any guidance would be super awesome.

任何指导都会非常棒。

My app structure looks like this:

我的app结构如下所示:

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

And here's my main app file which has my module imports, route locations, and error handling. app.js

这是我的主应用程序文件,其中包含模块导入,路径位置和错误处理。 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;

Here's my requser file which includes one get route to load the empty form, and two post routes to handle the input from one of the two forms. requser.js

这是我的requser文件,其中包括一个加载空表单的get路由,以及两个post路由来处理来自两个表单之一的输入。 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;

And lastly, my form view/template. requser.hbs

最后,我的表单视图/模板。 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 -->

2 个解决方案

#1

You are using the routing middleware in an incorrect way.

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

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

These lines are the problematic ones.

这些线是有问题的。

Let's take one of these as an example, the third one, as that one by itself is enough to take care of the /direct-user and /other-user endpoints.

让我们以其中一个为例,第三个,因为它本身足以照顾/ direct-user和/ other-user端点。

What that line tells express to do is:

该行告诉快递要做的是:

When a request hits the server whose path starts with /requser, pass that request to the requser router middleware and it will handle the rest.

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

Let's say that your request is to the path /requser/direct-user. That request will be passed to the requser middleware and that middleware will than match the remaining part (/direct-user) and correctly invoke the relevant callback.

假设您的请求是路径/ requser / direct-user。该请求将被传递给requser中间件,该中间件将匹配剩余部分(/ direct-user)并正确调用相关的回调。

Without knowing where your form posts the data, I can't help you further. But you should check that both forms post their data to /requser/direct-user and /requser/other-user, respectively and it should work.

如果不知道表单发布数据的位置,我无法帮助您。但是你应该检查两个表单分别将它们的数据发布到/ requser / direct-user和/ requser / other-user,它应该可以工作。

#2

app.use('/user/:id', require('./routes/user'));

All those line of codes are telling your app to use the routes exported from that file using '/user/:id' as prefix. So, if you want to use all routes in that file, all routes now start with '/users/:id' + the route you created in the file.

所有这些代码行都告诉您的应用使用'/ user /:id'作为前缀从该文件导出的路由。因此,如果要使用该文件中的所有路由,则所有路径现在都以'/ users /:id'+您在文件中创建的路径开头。

Let's say you have the following route

假设你有以下路线

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

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

Then your real route will be '/users/:id/direct-user'

然后你的真实路线将是'/ users /:id / direct-user'