Expressjs 4: POST-запрос браузера возвращает статус Cannot GET / ... 404

Я только что попробовал следующее приложение Express 4, которое просто отправляет выбранный фрукт с клиента на сервер, и сервер, предположим, отвечает на имя фрукта. Я получил этот пример отсюда. В оригинальном примере используется движок шаблонов nunjucks от Mozilla. Однако я принял его для экспресс-руля.

// 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, он показывает форму, но когда я нажимаю на кнопку отправки, он переходит на другую страницу, которая говорит:

Не удается получить / избранное_фрукт? Фрукт = апельсин

Я видел видео, в которых они исправляют это, используя обработчик щелчка на кнопке отправки, используя ajax. Но в примере с nunjucks нет необходимости прикреплять обработчик кликов к кнопке отправки формы. Я не понимаю, зачем мне это нужно, если я использую экспресс-руль. Есть ли проблема с моим кодом? Пожалуйста помоги. Большое спасибо.

Источник

0 ответов

Другие вопросы по тегам