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

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

0 голосов
/ 05 декабря 2018

Я только что попробовал следующее приложение 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>

Мои взгляды / layout / main.hbs 

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

    {{{body}}}

</body>
</html>

Когда яперейти к localhost: 3000, он показывает форму, но когда я нажимаю на кнопку отправки, он переходит на другую страницу, на которой написано:

Невозможно получить / fav__fruit? fruit = orange

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

...