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!
127.0.0.1
,::1
o la ip del interfaz, proba ponerlo explicitoapp.listen(3000, '127.0.0.1', ...
oapp.listen(3000, 'localhost', ...
.-> geeksforgeeks.org/express-js-app-listen-function