expressjs маршрутизатор не может публиковать данные формы

Question

Я работаю над проектом, в котором я создаю простой CRUD в express. Я пытаюсь использовать express.Router() для отправки данных формы, используя метод HTTP POST. Вот как выглядит форма в браузере:

form.png

Это было безошибочно, но когда я заполнил форму и нажал «отправить» «Это сообщение отображалось в браузере:

Cannot POST '/login'

Вот мой server.js файл (файл конфигурации):

// variables
var express = require('express');
var path = require('path');
var router = require('./routes/router');
var app = express();
var port = process.env.PORT || 3000;

// static files
app.use(express.static(path.join(__dirname, 'public')));
app.use('/login', router);

// setting the view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Create the paths
app.get('/', (req, res) => {
    res.render('index', { title : "Hello world" });
});
app.get('/login', (req, res) => {
    res.render('login');
});

// deploy the app
app.listen(port, function() {
    console.log(`Server is listening on port ${port}`);
});

Вот мой router.js файл (./routes/router):

var express = require('express');
var router = express.Router();

router.post('/login', (req, res) => {
    res.json(req.body);
});

module.exports = router;

Вот мой login.pug файл:

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Details
    body
        h1 Details
        p Please fill out this form 
        form(action="/", method="POST")
            label(for="fname") First Name:
            input(type="text", name="fname", id="fname")
            label(for="lname") Last Name:
            input(type="text", name="lname", id="lname")
            button(type="submit") Submit

А вот как выглядит структура моей папки:

│─ node_modules
│─ routes
│ └─ router.js
│─ views
│ │─ index.pug
│ └─ login.pug
│─ package-lock.json
│─ package.json
│─ server.js

Может кто-то объяснит мне, что я делаю не так, или есть какая-то проблема с одним из файлов, упомянутых выше?

Answer 1

Вы ссылаетесь:

app.use('/login', yourRouter)

Это устанавливает базовое имя для вашего маршрутизатора. Так что все, что внизу с префиксом. Это означает, что для вашего POST-маршрута, который вы настроили, находится под POST: /login/login.

Также ваш атрибут формы action, кажется, не направляет на правильный путь, подумайте, что он должен быть /login, когда у вас есть установите вышеупомянутое правильно

Answer 2

переместите содержимое вашего роутера в файл приложения и используйте его там вместе с приложением, иначе вам придется отправить запрос на /login/login.

// variables
var express = require('express');
var path = require('path');
var router = require('./routes/router');
var app = express();
var port = process.env.PORT || 3000;

// static files
app.use(express.static(path.join(__dirname, 'public')));

// app.use('/login', router); // (you will have to use the app.post method here or if you want to use router renaming it to auth and making a post request to /auth/post will be good)

// anyway this will work out directly if you don't want auth as router part
app.post('/login', (req, res) => {
    res.json(req.body);
});

// setting the view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Create the paths
app.get('/', (req, res) => {
    res.render('index', { title : "Hello world" });
});
app.get('/login', (req, res) => {
    res.render('login');
});

// deploy the app
app.listen(port, function() {
    console.log(`Server is listening on port ${port}`);
});