0

estoy haciendo un CRUD con javascript que se conecte a una base de datos mysql mediante node Me ocurre un problema al darle click al modificar un producto. code.js:99

   GET http://localhost:3000/api/articulos/16 404 (Not Found)

modificarArticulo @ code.js:99 (anonymous) @ code.js:62 code.js:153 Error al obtener el artículo para modificar: Error: La solicitud de obtener el artículo no fue exitosa. Código de estado: 404 at code.js:102:27

Paso el HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <!-- CSS -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
  <!-- Default theme -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"/>
  <title>Inventario</title>
  <style>
    body {
        background-color: #f7f7f7;
    }
    table thead {
        background-color: #0a4f70;
        color: white;
    }
  </style>
</head>
<body>
  <div class="container mt-4 shadow-lg p-3 mb - 5 bg-body rounded">
    <button id="btnCrear" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalArticulo">Crear</button>
    <table id="tablaArticulos" class="table mt-2 table-bordered table-striped">
        <thead>
            <tr class="text-center">
                <th>ID</th>
                <th>Descripción</th>
                <th>Precio</th>
                <th>Stock</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
  </div>

  <div id="modalArticulo" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Artículos</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="formArticulo">
            <div class="mb-3">
              <label for="descripcion" class="col-form-label">Descripción:</label>
              <input type="text" class="form-control" id="descripcion">
            </div>
            <div class="mb-3">
              <label for="precio" class="col-form-label">Precio:</label>
              <input type="number" class="form-control" id="precio">
            </div>
            <div class="mb-3">
              <label for="stock" class="col-form-label">Stock:</label>
              <input type="number" class="form-control" id="stock">
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary" id="btnGuardar">Guardar</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
  <script src="code.js"></script>
</body>
</html>

La parte del code.js

const url = 'http://localhost:3000/api/articulos/';

document.addEventListener('DOMContentLoaded', function () {
    const modalArticulo = document.getElementById('modalArticulo');
    if (modalArticulo) {
        const modalInstance = new bootstrap.Modal(modalArticulo);

        const btnCrear = document.getElementById('btnCrear');
        if (btnCrear) {
            btnCrear.addEventListener('click', () => {
                modalInstance.show();
            });
        }

        const formArticulo = document.getElementById('formArticulo');
        const descripcion = document.getElementById('descripcion');
        const precio = document.getElementById('precio');
        const stock = document.getElementById('stock');

        const btnGuardar = document.getElementById('btnGuardar');
        if (btnGuardar) {
            btnGuardar.addEventListener('click', () => {
                const nuevoArticulo = {
                    descripcion: descripcion.value,
                    precio: parseFloat(precio.value),
                    stock: parseInt(stock.value)
                };

                fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(nuevoArticulo)
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                  
                    alert('Artículo guardado exitosamente.');
                    modalInstance.hide();                     cargarDatos(); 
                })
                .catch(error => {
                    console.error('Error en la solicitud Fetch:', error);
                    alert('Error al guardar el artículo. Por favor, intenta de nuevo.');
                });
            });
        }

 
        const tablaArticulos = document.getElementById('tablaArticulos');
        tablaArticulos.addEventListener('click', function (event) {
            const target = event.target;
            if (target.classList.contains('eliminar-btn')) {
                const fila = target.closest('tr');
                const id = fila.id.split('-')[1]; 
                eliminarArticulo(id);
            } else if (target.classList.contains('modificar-btn')) {
                const fila = target.closest('tr');
                const id = fila.id.split('-')[1]; 
                modificarArticulo(id);
            }
        });
    }

    const tablaArticulos = document.getElementById('tablaArticulos');


    function cargarDatos() {
        fetch(url)
        .then(response => response.json())
        .then(data => {
    
            tablaArticulos.innerHTML = '';

 
            data.forEach(articulo => {
                const fila = document.createElement('tr');
                fila.innerHTML = `
                    <td>${articulo.id}</td>
                    <td>${articulo.descripcion}</td>
                    <td>${articulo.precio}</td>
                    <td>${articulo.stock}</td>
                    <td>
                        <button class="btn btn-primary modificar-btn">Modificar</button>
                        <button class="btn btn-danger eliminar-btn">Eliminar</button>
                    </td>
                `;
                fila.id = `articulo-${articulo.id}`;
                tablaArticulos.appendChild(fila);
            });
        })
        .catch(error => console.error('Error al cargar los datos:', error));
    }

    function modificarArticulo(id) {
        fetch(`${url}${id}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('La solicitud de obtener el artículo no fue exitosa. ' + response.status);
                }
                return response.json();
            })
            .then(articulo => {
        
                const descripcionInput = document.getElementById('descripcion');
                const precioInput = document.getElementById('precio');
                const stockInput = document.getElementById('stock');
    
                descripcionInput.value = articulo.descripcion;
                precioInput.value = articulo.precio;
                stockInput.value = articulo.stock;
   
                const modalInstance = new bootstrap.Modal(document.getElementById('modalArticulo'));
                modalInstance.show();
    
           
                const btnGuardar = document.getElementById('btnGuardar');
                btnGuardar.onclick = function () {
                    const datosModificados = {
                        descripcion: descripcionInput.value,
                        precio: parseFloat(precioInput.value),
                        stock: parseInt(stockInput.value)
                    };

                    fetch(`${url}${id}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(datosModificados)
                    })
                    .then(response => {
                        if (response.ok) {
                            alert('Artículo modificado exitosamente.');
                            modalInstance.hide(); 
                            cargarDatos(); 
                        } else {
                            throw new Error('La solicitud de modificar el artículo no fue exitosa. Código de estado: ' + response.status);
                        }
                    })
                    .catch(error => {
                        console.error('Error al modificar el artículo:', error);
                        alert('Error al modificar el artículo. Por favor, intenta de nuevo.');
                    });
                };
            })
            .catch(error => {
                console.error('Error al obtener el artículo para modificar:', error);
                alert('Error al obtener el artículo para modificar. Por favor, intenta de nuevo.');
            });
    }

    function eliminarArticulo(id) {
        if (confirm('¿Estás seguro de que deseas eliminar este artículo?')) {
            fetch(`http://localhost:3000/api/articulos/${id}`, { 
                method: 'DELETE',
            })
            .then(response => {
                if (response.ok) {
                    const filaEliminar = document.getElementById(`articulo-${id}`);
                    if (filaEliminar) {
                        filaEliminar.remove();
                        alert('Artículo eliminado exitosamente.');
                    } else {
                        alert('No se pudo encontrar el artículo en la tabla.');
                    }
                } else {
                    console.error('Error al eliminar el artículo:', response.statusText);
                    alert('Error al eliminar el artículo. Por favor, intenta de nuevo.');
                }
            })
            .catch(error => {
                console.error('Error al eliminar el artículo:', error);
                alert('Error al eliminar el artículo. Por favor, intenta de nuevo.');
            });
        }
    }

    cargarDatos();
});

y este es el server.js

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');
const app = express();

app.use((req, res, next) => {
    res.setHeader('Content-Security-Policy', "default-src 'none'; worker-src blob:;");
    next();
});


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

connection.connect((err) => {
    if (err) {
        console.error('Error al conectar a la base de datos MySQL:', err);
        return;
    }
    console.log('Conexión exitosa a MySQL');
});


app.use(express.json());
app.use(cors());


app.post('/api/articulos/', (req, res) => {
    const { descripcion, precio, stock } = req.body;

    const query = `INSERT INTO Articulos (descripcion, precio, stock) VALUES (?, ?, ?)`;
    connection.query(query, [descripcion, precio, stock], (err, result) => {
        if (err) {
            console.error('Error al guardar los datos en la base de datos:', err);
            res.status(500).send('Error al guardar los datos');
            return;
        }
        console.log('Datos guardados correctamente en la base de datos');
        res.status(200).json({ message: 'Datos guardados correctamente' }); 
    });
});

app.get('/api/articulos/:id', (req, res) =>{
    const query = `SELECT * FROM Articulos`;
    connection.query(query, (err, result) => {
        if(err) {
            console.error('Error al obtener los datos de la base de datos:', err);
            res.status(500).send('Error al obtener los datos');
            return;
        }
        res.status(200).json(result);
    });
});

app.put('/api/articulos/', (req, res) => {
    const articuloId = req.body.id;
    const { descripcion, precio, stock } = req.body;

    const query = `UPDATE Articulos SET descripcion = ?, precio = ?, stock = ? WHERE id = ?`;
    connection.query(query, [descripcion, precio, stock, articuloId], (err, result) => {
        if (err) {
            console.error('Error al modificar el artículo en la base de datos:', err);
            res.status(500).send('Error al modificar el artículo');
            return;
        }
        console.log('Artículo modificado correctamente en la base de datos');
        res.status(200).json({ message: 'Artículo modificado correctamente' });
    });
});

app.delete('/api/articulos/:id', (req, res) => {
    const articuloId = req.params.id;

    const query = `DELETE FROM Articulos WHERE id = ?`;
    connection.query(query, [articuloId], (err, result) => {
        if(err){
            console.error('Error al eliminar el articulo de la base de datos:', err)
            res.status(500).send('Error al eliminar el articulo');
            return;
        }
        console.log('Articulo eliminado correctamente');
        res.status(200).json({ message: 'Borrado correctamente'});
    });
});

app.listen(3000, () => {
    console.log('Servidor Node.js corriendo en el puerto 3000');
});

La verdad que ya me estoy volviendo loco con este error. Use chatgpt pero ni asi pude solucionarlo. Necesito su ayuda. Gracias!

1

1 respuesta 1

0

No estas usando el ID al momento de obtener por ID, agrega:

const { id } = req.params;

y [id] acá:

connection.query(query, [id], (err, result)

Por otro lado, la conexión a tu base de datos debe ser asíncrona (async, await) y usando un try-catch. Te aconsejo separar el código en carpetas de helpers, middleware, base de datos, rutas, etc. así tendrás todo más organizado.

1
  • no explica el 404 Commented el 13 abr. a las 10:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.