Web de Lista de Libros

 Inicializar el proyecto

bash

npm init --yes

Express - El framework web

bash

npm install express

Morgan - Logger para desarrollo

bash

npm install morgan

Motor de plantillas

bash

npm install ejs



npm install


npm start


Métodos para Iniciar el Proyecto

a) npm run dev (Recomendado para desarrollo)

bash

npm run dev

  • Cómo funciona: Ejecuta el script "dev" definido en tu package.json

  • Requisito: Debes tener Nodemon instalado y configurado en package.json:

  • json

"scripts": {

  "dev": "nodemon app.js"

  • }

c) npm start (Para producción)

bash

npm start

  • Configuración típica:

  • json

"scripts": {

  "start": "node app.js"

}


Aplicación Web de Lista de Libros con Node.js, Express, EJS y MySQL

Voy a corregir y complementar tu proyecto para crear una aplicación web básica de lista de libros. Te explicaré cada parte del proceso.

Estructura del Proyecto Corregida

text
Copy
Download
booklist-app/
├── public/                # Archivos estáticos (CSS, JS, imágenes)
├── routes/                # Archivos de rutas
│   ├── index.js           # Rutas principales
│   ├── users.js           # Rutas de usuarios
│   └── libros.js          # Rutas de libros (antes productos.js)
├── views/                 # Plantillas EJS
│   ├── layouts/           # Plantillas parciales
│   │   ├── header.ejs     # Cabecera común
│   │   └── footer.ejs     # Pie de página común
│   ├── error.ejs          # Página de error
│   ├── index.ejs          # Página principal
│   ├── nosotros.ejs       # Página "Nosotros"
│   └── libros.ejs         # Página de libros (antes productos.ejs)
├── conexion/              # Configuración de base de datos
│   └── conexion.js        # Conexión a MySQL
└── app.js                 # Aplicación principal

Correcciones y Explicaciones

1. app.js (Aplicación principal)

javascript
Copy
Download
const express = require('express');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');

// Importar rutas
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const librosRouter = require('./routes/libros'); // Cambiado de productos a libros

const app = express();

// Configuración del motor de vistas
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); // Corregido "app.ser" por "app.set"

// Middlewares
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false })); // Corregido "uslencoded" por "urlencoded"
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); // Archivos estáticos

// Rutas
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/libros', librosRouter); // Cambiado de productos a libros

// Manejador de errores 404
app.use(function(req, res, next) {
  res.status(404).render('error', { title: 'Página no encontrada' });
});

// Manejador de errores generales
app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

2. conexion/conexion.js (Conexión a MySQL)

javascript
Copy
Download
const mysql = require('mysql'); // Corregido "MySQL" por "mysql"

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'biblioteca' // Cambiado de 'ventas' a 'biblioteca' para el ejemplo de libros
});

connection.connect((err) => {
  if (!err) { 
    console.log("Conexión establecida con la base de datos");
  } else {
    console.log("Conexión fallida: " + err.message); // Corregido "cosole" por "console"
  }
});

module.exports = connection;

3. routes/libros.js (antes productos.js)

javascript
Copy
Download
const express = require('express');
const router = express.Router();
const db = require("../conexion/conexion");

// GET lista de libros
router.get('/', function(req, res, next) {
  db.query("SELECT * FROM libros", function(err, resultados) { // Cambiado de tblproductos a libros
    if (err) {
      console.error("Error al obtener libros:", err);
      return next(err); // Pasar el error al manejador de errores
    }
    
    console.log(resultados);
    res.render('libros', { 
      title: 'Nuestra colección de libros', 
      libros: resultados // Cambiado de Libros a libros (convención)
    });
  });
});

module.exports = router;

4. routes/index.js

javascript
Copy
Download
const express = require('express');
const router = express.Router();

/* GET home page (index.ejs) */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Biblioteca Digital' }); // Corregido 'index0' por 'index'
});

/* GET Sección nosotros */
router.get('/nosotros', function(req, res, next) {
  res.render('nosotros', { title: 'Sobre nosotros' }); // Corregido comillas incorrectas
});

module.exports = router;

5. views/layouts/header.ejs

html
Copy
Download
Run
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
  <nav>
    <a href="/">Inicio</a>
    <a href="/nosotros">Nosotros</a>
    <a href="/libros">Libros</a> <!-- Cambiado de productos a libros -->
  </nav>
  <div class="container">

6. views/layouts/footer.ejs

html
Copy
Download
Run
  </div> <!-- Cierre del container -->
  <footer>
    <p>&copy; <%= new Date().getFullYear() %> Biblioteca Digital</p>
  </footer>
</body>
</html>

7. views/libros.ejs (antes productos.ejs)

html
Copy
Download
Run
<%- include('layouts/header') %>

<h1><%= title %></h1>

<% if (libros.length > 0) { %>
  <ul class="list-group">
    <% libros.forEach(function(libro) { %>
      <li class="list-group-item">
        <h3><%= libro.titulo %></h3>
        <p><strong>Autor:</strong> <%= libro.autor %></p>
        <p><strong>Año:</strong> <%= libro.anio_publicacion %></p>
      </li>
    <% }); %>
  </ul>
<% } else { %>
  <p>No hay libros disponibles en este momento.</p>
<% } %>

<%- include('layouts/footer') %>

8. views/index.ejs

html
Copy
Download
Run
<%- include('layouts/header') %>

<h1><%= title %></h1>
<p>Bienvenido a nuestra biblioteca digital</p>
<p>Explora nuestra colección de libros.</p>

<%- include('layouts/footer') %>

9. views/nosotros.ejs

html
Copy
Download
Run
<%- include('layouts/header') %>

<h1><%= title %></h1>
<p>Somos una biblioteca digital comprometida con la difusión del conocimiento.</p>

<%- include('layouts/footer') %>

Configuración de la Base de Datos

Antes de ejecutar la aplicación, necesitas crear la base de datos y la tabla de libros:

sql
Copy
Download
CREATE DATABASE biblioteca;

USE biblioteca;

CREATE TABLE libros (
  id INT AUTO_INCREMENT PRIMARY KEY,
  titulo VARCHAR(255) NOT NULL,
  autor VARCHAR(255) NOT NULL,
  anio_publicacion INT,
  genero VARCHAR(100),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insertar algunos datos de ejemplo
INSERT INTO libros (titulo, autor, anio_publicacion, genero) VALUES
('Cien años de soledad', 'Gabriel García Márquez', 1967, 'Realismo mágico'),
('1984', 'George Orwell', 1949, 'Ciencia ficción'),
('El principito', 'Antoine de Saint-Exupéry', 1943, 'Literatura infantil');

Pasos para Ejecutar la Aplicación

  1. Instalar dependencias:

bash
Copy
Download
npm install express ejs mysql morgan cookie-parser

  1. Iniciar la aplicación:

bash
Copy
Download
node app.js

  1. Abrir en el navegador:

text
Copy
Download
http://localhost:3000

Explicación de los Componentes

  1. Express: Framework web para Node.js que simplifica la creación de aplicaciones web.

  2. EJS (Embedded JavaScript): Motor de plantillas que permite generar HTML dinámico.

  3. Middleware:

    • express.json(): Para parsear cuerpos de solicitud en formato JSON.

    • express.urlencoded(): Para parsear datos de formularios.

    • express.static(): Para servir archivos estáticos (CSS, JS, imágenes).

  4. Rutas:

    • Modularizadas en archivos separados para mejor organización.

    • Cada archivo de rutas define endpoints específicos.

  5. MySQL:

    • Conexión a base de datos relacional para almacenar y recuperar información de libros.

    • Las consultas se realizan con el método query().

  6. Estructura MVC (Modelo-Vista-Controlador):

    • Modelo: La conexión a la base de datos (conexion.js).

    • Vista: Las plantillas EJS en la carpeta views.

    • Controlador: Las rutas que manejan la lógica de la aplicación.

Esta aplicación básica puede extenderse con funcionalidades como:

  • Formularios para agregar nuevos libros

  • Búsqueda y filtrado de libros

  • Autenticación de usuarios

  • Sistema de préstamos

¿Te gustaría que profundicemos en alguna parte específica de la aplicación?

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

9-Nuestra Primera Plantilla con EJS

Imagen
  Creando Nuestra Primera Plantilla con EJS y Express   5- EXPRESS            |           V 6- MIDDLEWARE            |           V 7- express.static            |           V 8- Motor de plantilla            |           V      9-Plantilla mi-app/ ├── public/ # Archivos estáticos (opcional) │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── app.js │ └── images/ │ └── logo.png ├── views/ # Carpeta para las plantillas EJS (obligatoria) │ ├── index.ejs # Vista principal │ └── partials/ # Fragmentos reutilizables (opcional) │ ├── header.ejs │ └── footer.ejs ├── app.js # Archivo principal de la aplicación └── package.json # Configuración del proyecto En este post, aprenderemos...
Leer más

6-Middleware?

Imagen
  Middleware en Node.js con Express: Guía Definitiva      5- EXPRESS            |           V 6-MIDDLEWARE ¿Qué es un Middleware? mi-app/ ├ app.js └── package.json El middleware son  funciones intermedias  que procesan las solicitudes ( req ) y respuestas ( res ) en tu aplicación Express. Actúan como "puentes" entre la recepción de una petición y el envío de la respuesta final. 🔧 Tipos de Middleware 1.  Middleware de Aplicación Se ejecutan en  todas las rutas : javascript Copy Download app . use ( ( req , res , next ) => { console . log ( 'Middleware global' ) ; next ( ) ; // ¡No olvides next()! } ) ; 2.  Middleware de Ruta Específicos para ciertas rutas: javascript Copy Download app . get ( '/ruta' , ( req , res , next ) => { console . log ( 'Middleware solo para /ruta' ) ; next ( ) ; } ) ; 3.  Middleware de Terceros Paquetes externos como  body-...
Leer más