Question

我刚刚尝试了以下express 4应用程序，该应用程序简单地将选定的水果从客户端发送到服务器，并且服务器假定响应该水果的名称。我从here得到了这个例子。原始示例使用Mozilla的模板引擎nunjucks。但是，我将它用于快递车。

// app.js
var express = require('express'),
    app = express(),
    engines = require('consolidate'),
    bodyParser = require('body-parser'),
        exphbs = require('express-handlebars');


    // view engine setup
app.engine('hbs', exphbs({extname: 'hbs', defaultLayout: 'main', layoutDir: __dirname + '/views/layouts/'}));
app.set('views', __dirname+'/views');
app.set('view engine', 'hbs');

//app.engine('html', engines.nunjucks);
//app.set('view engine', 'html');
//app.set('views', __dirname + '/views');
app.use(bodyParser.urlencoded({ extended: true })); 

// Handler for internal server errors
function errorHandler(err, req, res, next) {
    console.error(err.message);
    console.error(err.stack);
    res.status(500).render('error_template', { error: err });
}
app.use(errorHandler);

app.post('/favorite_fruit', function(req, res, next) {
//    res.redirect('/favorite_fruit');
    var favorite = req.body.fruit;
    console.log(favorite);
    if (typeof favorite == 'undefined') {
        next('Please choose a fruit!');
    }
    else {
        res.send("Your favorite fruit is " + favorite);
    }
});

app.get('/', function(req, res, next) {
    res.render('fruitPicker', { 'fruits' : [ 'apple', 'orange', 'banana', 'peach' ] });
});





var server = app.listen(3000, function() {
    var port = server.address().port;
    console.log('Express server listening on port %s.', port);
});

这是我的

<!--views/fruitPicker.hbs-->
<form action='/favorite_fruit' mehtod='POST'>

        <p>What is your favorite fruit?</p>
        {{#each fruits}}
        <p>
            <input type="radio" name="fruit" value="{{this}}"/>{{this}}
        </p>
        {{/each}}
        <input type="submit" value="Submit"/>
</form>

我的视图/布局/main.hbs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
</head>
<body>

    {{{body}}}

</body>
</html>

当我进入localhost：3000时，它会显示表单，但是当我单击“提交”按钮时，它将带我到另一个页面，显示：

无法获取/ favorite_fruit？fruit = orange

我有seen videos他们使用ajax在提交按钮上使用点击处理程序来解决此问题。但是在带有nunjucks的示例中，不需要在表单的“提交”按钮上附加点击处理程序。我不明白为什么要使用Express-Handlebars。我的代码有问题吗？请帮忙。非常感谢。

Expressjs 4：浏览器的POST请求返回Cannot GET / ...状态为404

0 个答案: