我正在处理其上有两个单独表单的网页,其中包含两个单独的表单操作。我可以让一个表格起作用,但我无法让两者都起作用。我有路由 router.post('/ direct-user',...)和路径 router.post('/ other-user',...)< / em>,如果我将其中一个更改为router.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文件,其中包含一个加载空表单的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;
最后,我的表单视图/模板。 的 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 -->
答案 0 :(得分:1)
您正在以不正确的方式使用路由中间件。
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
端点。
该行告诉明确的是:
当请求命中路径以/ requser开头的服务器时,将该请求传递给requser路由器中间件,它将处理其余的。
假设您的请求是/requser/direct-user
路径。该请求将传递给requser
中间件,该中间件将匹配剩余部分(/direct-user
)并正确调用相关的回调。
在不知道表单发布数据的位置的情况下,我无法帮助您。但是,您应该检查两个表单是否分别将数据发布到/requser/direct-user
和/requser/other-user
,它应该可以正常工作。
答案 1 :(得分:0)
router.post('/direct-user', function(req, res) {
// Validate form contents
// ...
// Assuming all is well
console.log('Direct user requested');
res.send('cool');
});
所有这些代码都告诉您的应用使用&#39; / user /:id&#39;来使用从该文件导出的路由。作为前缀。因此,如果您要使用该文件中的所有路线,则所有路线现在都以&#39; / users /:id&#39;开头。 +您在文件中创建的路线。
让我们说你有以下路线
{{1}}
那么您的真实路线将是&#39; / users /:id / direct-user&#39;