5-ejemplo-aplicación web-sin route-ejs
Aquí está la versión 100% aplicación web
javascript
const express = require('express');
const app = express();
const PORT = 3000;
// Middleware para procesar datos de formularios
app.use(express.urlencoded({ extended: true }));
// Datos de ejemplo
let productos = [
{ id: 1, nombre: 'Laptop', precio: 1000 },
{ id: 2, nombre: 'Mouse', precio: 25 },
{ id: 3, nombre: 'Teclado', precio: 50 }
];
let nextId = 4;
// POST - Crear un nuevo producto
app.post('/productos', (req, res) => {
const { nombre, precio } = req.body;
if (!nombre || !precio) {
return res.send('<h1>Error</h1><p>Faltan nombre o precio</p><a href="/">Volver</a>');
}
const nuevoProducto = {
id: nextId++,
nombre: nombre,
precio: parseFloat(precio)
};
productos.push(nuevoProducto);
res.redirect('/');
});
// Ruta principal
app.get('/', (req, res) => {
let listaProductos = '';
for (let i = 0; i < productos.length; i++) {
listaProductos += `<li>ID: ${productos[i].id} - ${productos[i].nombre} - $${productos[i].precio}</li>`;
}
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Gestión de Productos</title>
</head>
<body>
<h1>Gestión de Productos</h1>
<h2>Agregar Producto</h2>
<form action="/productos" method="POST">
<input type="text" name="nombre" placeholder="Nombre" required>
<input type="number" name="precio" placeholder="Precio" step="0.01" required>
<button type="submit">Crear Producto</button>
</form>
<hr>
<h2>Lista de Productos</h2>
<ul>
${listaProductos}
</ul>
<hr>
<h3>Ver productos específicos:</h3>
<ul>
<li><a href="/producto/1">Ver producto ID 1</a></li>
<li><a href="/producto/2">Ver producto ID 2</a></li>
<li><a href="/producto/3">Ver producto ID 3</a></li>
</ul>
</body>
</html>
`);
});
// Ruta para ver un producto específico
app.get('/producto/:id', (req, res) => {
const id = parseInt(req.params.id);
const producto = productos.find(p => p.id === id);
if (!producto) {
return res.send(`
<h1>Producto no encontrado</h1>
<a href="/">Volver al inicio</a>
`);
}
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Producto ${producto.id}</title>
</head>
<body>
<h1>Detalle del Producto</h1>
<p><strong>ID:</strong> ${producto.id}</p>
<p><strong>Nombre:</strong> ${producto.nombre}</p>
<p><strong>Precio:</strong> $${producto.precio}</p>
<br>
<a href="/">Volver al inicio</a>
</body>
</html>
`);
});
// Iniciar servidor
app.listen(PORT, () => {
console.log(`🚀 Servidor corriendo en http://localhost:${PORT}`);
});
Características de esta versión web:
✅ Sin JSON - Todo es HTML
✅ Sin API - No hay endpoints que devuelvan datos en bruto
✅ Formulario POST - Para crear productos
✅ Páginas HTML - Todo se renderiza en el servidor
✅ Ver productos - Página de detalle para cada producto
Cómo probar:
bash
node app.js
Abrir en navegador: http://localhost:3000
Lo que verás:
Página principal - Formulario + lista de todos los productos
Crear producto - Llenas el formulario y se agrega a la lista
Ver detalle - Click en "Ver producto ID X" para ver sus detalles
Comentarios
Publicar un comentario