Problem z node.js i metodą POST

Question

W  ramach nauki tworzę aplikację dodającą książki do biblioteki. Korzystam z node, express, ejs oraz express-ejs-layouts. Będąc na stronie startowej użytkownik wybiera opcję dodania nowej książki. Wpisując adres url ręcznie np. http://localhost:5000/add wszystko działa poprawnie (ładuję się kolejna strona aplikacji). Jednak po naciśnięciu na konkretny element, którego zadaniem jest dodanie kolejnej książki pojawia się problem:

Zamieszczam kod z pliku app.js:

const express = require('express');
const expressLayouts = require('express-ejs-layouts');

const app = express();

app.use(expressLayouts);
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/views'));

app.use('/', require('./routes/index'));
app.use('/add', require('./routes/index'));
app.use('/library', require('./routes/index'));

const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`Server started on port ${PORT}`));

index.js w folderze routes:

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

router.get('/', (req, res) => res.send('hello world'));
router.get('/add', (req, res) => res.render('add'));
router.get('/library', (req, res) => res.render('library'));

module.exports = router;

index.ejs w folderze views:

<form action="/add" method="POST" class="left-side">...</form>

oraz mainPage.js w folderze views:

const leftSide = document.querySelector('.left-side');

leftSide.addEventListener('click', () => { leftSide.submit() });

 

Answer 1

Dodałeś jedynie obsługę żądania GET. Żeby dodać obsługę POST musisz użyć albo dodatkowo router.post, albo router.all.

Comments

Rozumiem to tak, że w pliku index.js obsługa get() powoduje wykonanie res.render(). Czy to nie powinno działać i jeśli nie to dlaczego?

---

Nie powinno, bo to jest obsługa żądania GET, a formularz wysyłasz POST – a takiego żądania nie obsługujesz.

---

Pod tym linkiem https://github.com/bradtraversy/node_passport_login znajduje się repozytorium z kodem z filmu na youtube. Nie ma tam żadnej obsługi .post, jedynie .get() oraz .render(), a strona funkcjonuje poprawnie. Chcę po prostu zrozumieć dlaczego akurat ten kod działa.

---

Jak najbardziej są: https://github.com/bradtraversy/node_passport_login/blob/eda60b883bc9ec546eb7096cfb8cd3ddfdf1de56/routes/users.js#L16 + https://github.com/bradtraversy/node_passport_login/blob/eda60b883bc9ec546eb7096cfb8cd3ddfdf1de56/routes/users.js#L80

---

Faktycznie, dzięki za pomoc. Mam jeszcze jedno pytanie. W jaki sposób mogę rozróżnić, który z tagów form jest submitowany. Mówię o sytuacji, w której na stronie startowej mam 2 divy, wykonujące po naciśnięciu myszką 2 różne funkcje. 

<form action="/add" method="POST" class="left-side">
                <div class="add-new">... </div>
            </form>
            <form action="/library" method="POST" class="right-side">
                <div class="show-library">... </div>
            </form>

 

---

Można im zrobić np. różne input[type=hidden], które by pokazywały, z jakiego formularza idzie żądanie.

---

Dzięki