7-Web de Lista de Libros-mysql select

Integrando MySQL con Node.js: Sistema de Productos para Ventas

En este post, te mostraré cómo integrar una base de datos MySQL con Node.js para crear un sistema de gestión de productos. Usaremos la base de datos "ventas" con una tabla "productos" y conectaremos todo a nuestra aplicación.

🛠️ Configuración Inicial

Primero, instalamos el driver de MySQL:

bash

Copy

Download

npm install mysql

📦 Estructura del Proyecto Actualizada

text

Copy

Download

mi-app/
├── conexion/
│   └── conexion.js            # Configuración de conexión MySQL
├── node_modules/              # Dependencias instaladas
├── public/
│   ├── css/                   # Hojas de estilo
│   ├── js/                    # Scripts JavaScript
│   └── images/                # Imágenes (incluir las de productos aquí)
├── routes/
│   ├── index.js               # Rutas principales
│   └── productos.js           # Rutas específicas de productos
├── views/
│   ├── layouts/
│   │   ├── header.ejs         # Encabezado común
│   │   └── footer.ejs         # Pie de página común
│   ├── index.ejs              # Página principal
│   ├── nosotros.ejs           # Página "Nosotros"
│   └── productos.ejs          # Página "Productos" (dinámica)
├── .gitignore                 # Archivos a ignorar por Git
├── app.js                     # Configuración principal de Express
└── package.json               # Configuración del proyecto y dependencias

🔌 Configuración de la Conexión MySQL

conexion/conexion.js:

javascript

Copy

Download

const MySQL = require('mysql');

const connection = MySQL.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'ventas'
});

connection.connect((err) => {
  if(!err) {
    console.log("Conexión establecida con MySQL");
  } else {
    console.log("Conexión fallida: " + err);
  }
});

module.exports = connection;

🗃️ Creación de la Tabla y Datos de Ejemplo

Ejecuta este script SQL en tu cliente MySQL (como MySQL Workbench o phpMyAdmin):

sql

Copy

Download

CREATE DATABASE IF NOT EXISTS ventas;
USE ventas;

CREATE TABLE productos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  titulo VARCHAR(100),
  imagen VARCHAR(100),
  descripcion TEXT,
  precio DECIMAL(5,2)
);

-- Insertar datos de ejemplo
INSERT INTO productos (titulo, imagen, descripcion, precio) VALUES
('Laptop HP', 'laptop.jpg', 'Laptop HP con 8GB RAM y 256GB SSD', 899.99),
('Teclado Mecánico', 'teclado.jpg', 'Teclado mecánico RGB switches azules', 59.99),
('Mouse Inalámbrico', 'mouse.jpg', 'Mouse ergonómico con 1600DPI', 29.99),
('Monitor 24"', 'monitor.jpg', 'Monitor Full HD 144Hz', 199.99),
('Auriculares Gamer', 'auriculares.jpg', 'Auriculares con micrófono y RGB', 79.99);

🛣️ Router de Productos Actualizado

routes/productos.js:

javascript

Copy

Download

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

// Ruta para listar productos
router.get('/', (req, res) => {
  db.query("SELECT * FROM productos", (err, resultados) => {
    if(err) {
      console.error(err);
      return res.status(500).send("Error al obtener productos");
    }
    res.render('productos', { 
      titulo: 'Nuestros Productos',
      productos: resultados 
    });
  });
});

// Ruta para agregar nuevo producto (POST)
router.post('/agregar', (req, res) => {
  const { titulo, imagen, descripcion, precio } = req.body;
  
  db.query(
    "INSERT INTO productos (titulo, imagen, descripcion, precio) VALUES (?, ?, ?, ?)",
    [titulo, imagen, descripcion, precio],
    (err, resultado) => {
      if(err) {
        console.error(err);
        return res.status(500).send("Error al agregar producto");
      }
      res.redirect('/productos');
    }
  );
});

module.exports = router;

📄 Vista de Productos Actualizada

views/productos.ejs:

html

Copy

Download

Run

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

<div class="container p-3">
  <h2 class="mb-4">Nuestros Productos</h2>
  
  <div class="row">
    <% productos.forEach(producto => { %>
      <div class="col-md-4 mb-4">
        <div class="card h-100">
          <img src="/images/<%= producto.imagen %>" class="card-img-top" alt="<%= producto.titulo %>">
          <div class="card-body">
            <h5 class="card-title"><%= producto.titulo %></h5>
            <p class="card-text"><%= producto.descripcion %></p>
            <p class="text-primary h4">$<%= producto.precio.toFixed(2) %></p>
          </div>
        </div>
      </div>
    <% }); %>
  </div>
</div>

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

🔄 Actualización de app.js

Asegúrate de tener esto en tu app.js:

javascript

Copy

Download

const express = require('express');
const path = require('path');
const app = express();

// Middleware para parsear el body de las peticiones
app.use(express.urlencoded({ extended: true }));

// Configuración de vistas
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));

// Rutas
app.use('/', require('./routes/index'));
app.use('/productos', require('./routes/productos'));

// Iniciar servidor
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor activo en http://localhost:${PORT}`);
});

💡 Funcionalidades Clave

1. Conexión a MySQL: Configuración limpia y reutilizable

2. Separación de rutas: Router específico para productos

3. CRUD básico: Actualmente con Read (listar) y Create (agregar)

4. Vista dinámica: Muestra los productos directamente desde la base de datos

🚀 Próximos Pasos

1. Añadir formulario para agregar nuevos productos

2. Implementar edición y eliminación de productos

3. Agregar validaciones de datos

4. Implementar búsqueda y filtrado

¡Listo! Ahora tu aplicación Node.js está conectada a MySQL y puede mostrar productos dinámicamente. ¿Qué otras funcionalidades te gustaría añadir?