4-Recibir datos mediante método POST
Crear la ruta POST en routes/index.js
Ahora necesitamos agregar una ruta que reciba los datos del formulario. Actualiza routes/index.js:
const express = require('express');
const router = express.Router();
// Arreglo temporal para almacenar las entradas
let entries = [];
// Ruta para mostrar el formulario
router.get('/new-entry', (req, res) => {
res.render('new-entry', {
title: 'Nueva Entrada'
});
});
// Ruta para recibir los datos del formulario (POST)
router.post('/add-entry', (req, res) => {
// Obtener los datos del formulario
const newEntry = {
title: req.body.title,
content: req.body.body,
date: new Date()
};
// Guardar en el arreglo
entries.push(newEntry);
console.log('Nueva entrada guardada:', newEntry);
console.log('Total de entradas:', entries.length);
// Redirigir a la página principal
res.redirect('/');
});
// Ruta principal - mostrar todas las entradas
router.get('/', (req, res) => {
res.render('index', {
title: 'Inicio',
entries: entries
});
});
module.exports = router;📖 Explicación del código:
| Elemento | Función |
|---|---|
router.post() | Define una ruta que acepta método POST |
req.body.title | Accede al campo name="title" del formulario |
req.body.body | Accede al campo name="body" del formulario |
entries.push() | Agrega la nueva entrada al arreglo |
res.redirect() | Redirige al usuario a otra página |
3️⃣ Actualizar index.ejs para mostrar las entradas
Modifica views/index.ejs para mostrar la lista de mensajes guardados:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %> | GuestBook</title>
<% include partials/head %>
</head>
<body class="container">
<% include partials/header %>
<div class="jumbotron">
<h1>Express GuestBook</h1>
<p>Bienvenido a nuestro libro de visitas. Deja tu mensaje y lee lo que otros han escrito.</p>
<a href="/new-entry" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-pencil"></span> Write a GuestBook
</a>
</div>
<h2>Mensajes recientes</h2>
<% if(entries.length === 0) { %>
<div class="alert alert-info">
No hay mensajes aún. ¡Sé el primero en escribir!
</div>
<% } else { %>
<% for(let i = entries.length - 1; i >= 0; i--) { %>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<strong><%= entries[i].title %></strong>
<small class="pull-right">
<%= entries[i].date.toLocaleString() %>
</small>
</h3>
</div>
<div class="panel-body">
<%= entries[i].content %>
</div>
</div>
<% } %>
<% } %>
</body>
</html>4️⃣ Verificar que body-parser está funcionando
Para que req.body funcione, asegúrate que en app.js tengas:
// Estos middlewares son los que permiten leer req.body
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));O si usas Express moderno:
app.use(express.json());
app.use(express.urlencoded({ extended: false }));5️⃣ Flujo completo de la aplicación
Ahora el usuario sigue este flujo:
1. Usuario entra a /
↓
2. Ve la página principal (sin mensajes)
↓
3. Click en "Write a GuestBook"
↓
4. Llena el formulario en /new-entry
↓
5. Envía el formulario (POST a /add-entry)
↓
6. El servidor guarda el mensaje
↓
7. Redirige a / (página principal)
↓
8. El mensaje aparece en la lista6️⃣ Probar la aplicación
Iniciar el servidor:
npm run devProbar el formulario:
Abre
http://localhost:3000/Haz click en "Write a GuestBook"
Llena el formulario:
Title: "Mi primer mensaje"
Entry Text: "Hola, esto es una prueba"
Haz click en "Post Entry"
Serás redirigido a la página principal
¡Tu mensaje aparece en la lista!
7️⃣ Código completo actualizado
routes/index.js (completo):
const express = require('express');
const router = express.Router();
// Base de datos temporal (en memoria)
let entries = [];
// Página principal
router.get('/', (req, res) => {
res.render('index', {
title: 'Inicio',
entries: entries
});
});
// Formulario de nueva entrada
router.get('/new-entry', (req, res) => {
res.render('new-entry', {
title: 'Nueva Entrada'
});
});
// Procesar nueva entrada
router.post('/add-entry', (req, res) => {
// Validar que los campos no estén vacíos
if (!req.body.title || !req.body.body) {
res.status(400).send('Título y contenido son requeridos');
return;
}
const newEntry = {
title: req.body.title,
content: req.body.body,
date: new Date(),
id: entries.length + 1
};
entries.push(newEntry);
console.log(`✅ Entrada guardada: ${newEntry.title}`);
res.redirect('/');
});
module.exports = router;📝 Resumen de esta parte
| Concepto | Código clave |
|---|---|
| Formulario POST | <form method="POST" action="/add-entry"> |
| Acceder a datos POST | req.body.title |
| Guardar en memoria | entries.push(newEntry) |
| Redireccionar | res.redirect('/') |
| Mostrar lista dinámica | <% for(let i = 0; i < entries.length; i++) { %> |
🚀 Próxima parte: Mejoras y persistencia de datos
En la siguiente parte veremos:
Validación de datos más robusta
Manejo de errores (qué pasa si el formulario está vacío)
Mensajes flash para notificar al usuario
Persistencia con archivos JSON (para no perder datos al reiniciar)
⚠️ Nota importante
Actualmente los mensajes se guardan en un arreglo en memoria. Esto significa que:
✅ Funciona mientras el servidor esté corriendo
❌ Si reinicias el servidor, se pierden todos los mensajes
En la siguiente parte solucionaremos esto guardando los datos en un archivo JSON o en una base de datos.
🔧 Verifica tu código
Asegúrate de que todos los archivos estén correctos:
¿El formulario envía bien? → Deberías ver en consola: ✅ Entrada guardada: Mi título
¿Los mensajes aparecen? → En la página principal deberías ver los mensajes en paneles de Bootstrap
¿Hay errores? → Revisa que body-parser esté configurado correctamente en app.js
¿Quieres que continúe con la Parte 5 donde agregamos persistencia (guardar en archivo JSON) y mensajes flash para notificar al usuario?
Comentarios
Publicar un comentario