8-convertido a EJS (Opción 1: carpeta views)

1. Nueva estructura de archivos:

text
mi-proyecto/
├── app.js
├── package.json
├── public/
│   └── (archivos estáticos opcionales)
└── views/              ← Carpeta creada
    ├── index.ejs       ← Vista principal
    └── productos.ejs   ← Vista de productos (opcional)

2. Código actualizado (app.js):

javascript
const express = require('express');
const path = require('path'); // ← Importante para path.join

const app = express();
const PORT = 3000;

// ============ CONFIGURAR EJS ============
app.set('view engine', 'ejs');  // Opción 1: carpeta 'views' por defecto
// No necesitas app.set('views') porque Express busca en 'views/'

// ============ MIDDLEWARE STATIC ============
app.use(express.static('public'));
app.use('/css', express.static('node_modules/bootstrap/dist/css'));
app.use('/js', express.static('node_modules/bootstrap/dist/js'));

// Datos de ejemplo
const productos = [
  { id: 1, nombre: 'Laptop', precio: 1000 },
  { id: 2, nombre: 'Mouse', precio: 25 },
  { id: 3, nombre: 'Teclado', precio: 50 }
];

// ============ RUTAS ============

// API REST (sigue igual)
app.get('/productos', (req, res) => {
  res.json({
    success: true,
    cantidad: productos.length,
    productos: productos
  });
});

app.get('/productos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const producto = productos.find(p => p.id === id);
  
  if (!producto) {
    return res.status(404).json({ error: 'Producto no encontrado' });
  }
  
  res.json(producto);
});

// Ruta principal - AHORA RENDERIZA EJS
app.get('/', (req, res) => {
  res.render('index', { productos }); // ← Pasa datos a la vista
});

app.listen(PORT, () => {
  console.log(`🚀 Servidor corriendo en http://localhost:${PORT}`);
  console.log(`📦 Ver productos: http://localhost:${PORT}/productos`);
  console.log(`🎨 Ver interfaz: http://localhost:${PORT}`);
});

3. Vista EJS (views/index.ejs):

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Tienda con EJS</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">📦 Mi Tienda de Productos</h1>
        
        <div class="row mt-4">
            <div class="col-md-6 offset-md-3">
                <div class="card">
                    <div class="card-header">
                        <h3>Productos disponibles</h3>
                    </div>
                    <div class="card-body">
                        <!-- EJS RENDERIZA DIRECTAMENTE LOS PRODUCTOS -->
                        <ul class="list-group">
                            <% productos.forEach(producto => { %>
                                <li class="list-group-item">
                                    <strong><%= producto.nombre %></strong> - $<%= producto.precio %>
                                    <a href="/productos/<%= producto.id %>" class="btn btn-sm btn-primary float-end">Ver</a>
                                </li>
                            <% }) %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/bootstrap.min.js"></script>
</body>
</html>

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo Iniciar un Proyecto Node.js

  Cómo Iniciar un Proyecto Node.js desde Cero: Guía Paso a Paso Solución 1: Cambiar la política de ejecución (recomendado) Abre PowerShell  como administrador . Ejecuta este comando para permitir la ejecución de scripts firmados: powershell Copy Download Set-ExecutionPolicy RemoteSigned - Scope CurrentUser Si estás comenzando con Node.js, esta guía te mostrará cómo configurar un proyecto básico con las herramientas esenciales. Paso 1: Inicializar el proyecto bash Copy Download npm init --yes Este comando crea automáticamente un archivo  package.json  con valores predeterminados. El  package.json  es el corazón de tu proyecto Node.js, donde se almacenan: Dependencias del proyecto Scripts personalizados Metadatos del proyecto (nombre, versión, descripción, etc.) Paso 2: Instalar dependencias esenciales Express - El framework web bash Copy Download npm install express Express es el framework web más popular para Node.js. Te permite: Crear rutas (endpoints)...
Leer más

5-Express--Curso de Node.js#05 Introducción a Express.js

Express: Dominando Servidores Web con Node.js y Express   5- EXPRESS            |           V 6-MIDDLEWARE mi-app/ ├app.js └── package.json Código completo ( app.js ) javascript const express = require ( 'express' ) ; const app = express ( ) ; const PORT = 3000 ; // Para leer datos de formularios app . use ( express . urlencoded ( { extended : true } ) ) ; // Arreglo de productos let productos = [ { id : 1 , nombre : 'Laptop' , precio : 1000 } , { id : 2 , nombre : 'Mouse' , precio : 25 } , { id : 3 , nombre : 'Teclado' , precio : 50 } ] ; // ========== MÉTODO 1: Ver todos los productos (página principal) ========== app . get ( '/' , ( req , res ) => { let lista = '' ; for ( let i = 0 ; i < productos . length ; i ++ ) { lista += ` <li> <strong> ${ productos [ i ] ...
Leer más

8-Template Engines

¿Qué es un Motor de Plantillas?   5- EXPRESS            |           V 6- MIDDLEWARE            |           V  7- express.static            |           V 8-Motor de plantilla tu-proyecto/ ├── public/ # Carpeta para archivos estáticos │ ├── css/ │ │ └── styles.css │ ├── js/ │ │ └── script.js │ └── images/ │ └── logo.png ├── index.ejs # Plantilla EJS (en raíz) ├── app.js # Servidor Express └── package.json # Dependencias Un motor de plantillas es una herramienta que permite generar contenido HTML (u otros formatos) de manera dinámica, insertando datos en estructuras predefinidas. Esto facilita: pp . set ( 'view engine' , 'ejs' ) ; app . set ( 'views' , './templates' ) ; res . render ( 'index' ) ; // Buscará /home/usuario/proyecto/index.ejs Parámetros: Primer p...
Leer más