Estructura del proyecto:
Antes de empezar, aquí está el árbol de la estructura del proyecto que organizaremos:
gestionar-datos/
├── htdocs/ # Carpeta creada automáticamente para almacenar datos
├── backend/ # Código backend
│ ├── server.js # Servidor principal
│ ├── roles.json # Gestión de roles y permisos
├── frontend/ # Código frontend
│ ├── index.html # Ventana inicial (Desarrollador)
│ ├── admin.html # Ventana del Administrador
│ ├── user.html # Ventana del Usuario
│ ├── guest.html # Ventana de Invitado
│ ├── style.css # Estilos compartidos
│ ├── scripts.js # Funciones del frontend
├── package.json # Configuración de Node.js
├── node_modules/ # Dependencias instaladas con npm
Generando Raiz del proyecto (gestionar-datos), directorio (carpetas) y archivos (files)
cd proyectos
mkdir gestionar-datos && { cd gestionar-datos && mkdir htdocs backend frontend; }
cd backend && touch server.js roles.json
cd ..
cd frontend && touch index.html admin.html user.html guest.html style.css scripts.js
cd ..
Paso 1: Configurar el Backend
Crea la carpeta backend y dentro de ella el
archivo server.js. Aquí tienes el código para manejar las
funcionalidades del backend:
const express = require("express");
const fs = require("fs");
const path = require("path");
const cors = require("cors");
const app = express();
app.use(cors()); // Permitir solicitudes desde el frontend
app.use(express.json()); // Permitir JSON en las solicitudes
// Ruta para almacenar archivos
const htdocsPath = path.join(__dirname, "../htdocs");
// Crear carpeta `htdocs` si no existe
if (!fs.existsSync(htdocsPath)) {
fs.mkdirSync(htdocsPath);
}
// Endpoint para agregar datos
app.post("/add-data", (req, res) => {
const { fileName, content } = req.body;
if (!fileName) {
return res.status(400).send("El nombre del archivo es obligatorio.");
}
const filePath = path.join(htdocsPath, fileName);
fs.writeFile(filePath, JSON.stringify(content, null, 2), (err) => {
if (err) {
return res.status(500).send("Error al crear el archivo.");
}
res.send("Archivo creado exitosamente.");
});
});
// Endpoint para listar datos
app.get("/list-data", (req, res) => {
fs.readdir(htdocsPath, (err, files) => {
if (err) {
return res.status(500).send("Error al listar archivos.");
}
const dataList = files.map((file) => ({
fileName: file,
content: JSON.parse(fs.readFileSync(path.join(htdocsPath, file))),
}));
res.json(dataList);
});
});
// Configuración del servidor
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Servidor corriendo en http://localhost:${PORT}`);
});
Paso 2: Configurar el Frontend
Crea la carpeta frontend y organiza los archivos como se
indica en el árbol.
Archivo index.html (Ventana de Desarrollador):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestión de Datos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul class="menu">
<li><a href="index.html">Desarrollador</a></li>
<li><a href="admin.html">Administrador</a></li>
<li><a href="user.html">Usuario</a></li>
<li><a href="guest.html">Invitado</a></li>
</ul>
</nav>
</header>
<main>
<h1>Gestión de Datos - Desarrollador</h1>
<div>
<label>Nombre del archivo:</label>
<input type="text" id="fileName" placeholder="archivo.json">
<textarea id="fileContent" placeholder="Escribe contenido en formato JSON"></textarea>
<button onclick="addData()">Agregar Datos</button>
</div>
<div>
<button onclick="listData()">Listar Datos</button>
<pre id="output"></pre>
</div>
</main>
<script src="scripts.js"></script>
</body>
</html>
Archivo admin.html, user.html, guest.html:
- Admin puede gestionar usuarios y datos.
- User puede introducir y editar datos permitidos.
- Guest solo puede visualizar.
La estructura básica es similar a index.html. Con menú de
navegación persistente y pestañas
Archivo scripts.js (Frontend):
const API_URL = "http://localhost:3000";
function addData() {
const fileName = document.getElementById("fileName").value;
const fileContent = document.getElementById("fileContent").value;
try {
const content = JSON.parse(fileContent); // Validar JSON
fetch(`${API_URL}/add-data`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ fileName, content }),
})
.then((response) => response.text())
.then((data) => alert(data))
.catch((error) => console.error("Error:", error));
} catch (e) {
alert("Contenido no es válido JSON.");
}
}
function listData() {
fetch(`${API_URL}/list-data`)
.then((response) => response.json())
.then((data) => {
const output = document.getElementById("output");
output.textContent = JSON.stringify(data, null, 2);
})
.catch((error) => console.error("Error:", error));
}
Archivo style.css (Estilos):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
}
nav {
display: flex;
justify-content: center;
}
.menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.menu li {
margin: 0 15px;
}
.menu a {
color: white;
text-decoration: none;
font-weight: bold;
}
.menu a:hover {
text-decoration: underline;
}
main {
padding: 20px;
}
Solución para la comunicación entre el backend y el frontend
La falta de comunicación suele deberse a:
- Rutas incorrectas en el frontend (scripts.js).
- El servidor no está ejecutándose correctamente.
- El navegador bloquea solicitudes por razones de CORS (Cross-Origin Resource Sharing).
Por qué es importante cors
El módulo cors es esencial para manejar solicitudes entre
distintas ubicaciones (cross-origin requests). Por ejemplo, si tu frontend y
backend están en servidores separados o en diferentes puertos (como
http://localhost:3000 para el backend y
http://localhost:5000 para el frontend), el navegador
bloquearía las solicitudes sin este módulo habilitado.
Paso 3: Ejecutar el Proyecto
Inicializa un proyecto Node.js:
-
Ejecuta el siguiente comando para inicializar un archivo
package.json:
npm init -y Instalar dependencias:
En la carpeta raíz del proyecto (gestionar-datos), ejecuta:
npm install express Instalar el módulo cors
Abre tu terminal y asegúrate de estar ubicado en la carpeta raíz
de tu proyecto (gestionar-datos).
Ejecuta este comando para instalar el módulo:
npm install cors
Verifica que cors se haya añadido a las dependencias en tu
archivo package.json:
"dependencies": {
"express": "^4.21.2",
"cors": "^2.8.5"
}
Iniciar el backend:
Ve a la carpeta backend y ejecuta el servidor:
node backend/server.js Esto debería eliminar el error relacionado con cors.
Abrir el frontend:
-
Para la vista del desarrollador, abre el archivo
frontend/index.htmlen el navegador. - Para administrador, usuario e invitado, abre sus respectivos archivos.
Navega entre las páginas usando el menú y verifica:
- Desarrollador puede agregar y listar datos.
- Administrador puede gestionar usuarios y datos.
- Usuario tiene permisos limitados según lo configurado en el backend.
- Invitado solo puede visualizar datos.
Paso 4: Extender Funcionalidades