1

我刚刚尝试了以下 express 4 应用程序，它只是将选定的水果从客户端发送到服务器，服务器假设返回水果的名称。我从这里得到了这个例子。原始示例使用 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

我看过他们使用 ajax 提交按钮上的单击处理程序解决此问题的视频。但是在使用 nunjucks 的示例中，不需要在表单的提交按钮上附加单击处理程序。如果我使用快速车把，我不明白为什么需要这个。我的代码有问题吗。请帮忙。非常感谢。

4

0 回答 0