Me gustaría saber cómo pasar la variable "myBlogs" que tengo en mi archivo Node.js ("server.js") a un archivo JavaScript frontend ("blogs.js"). Una vez que tenga acceso a él en el archivo JS, mapearé la matriz que está almacenada en esa variable y generaré una plantilla para cada blog en un archivo HTML ("blogs.html").
Más tarde, la idea es obtener los datos de los blogs de una base de datos (MongoDB) en lugar de tenerlos codificados. He visto cómo hacer esto con Express y un motor de plantillas (EJS), pero como práctica para un principiante, me gustaría entender los conceptos básicos de si se puede hacer sin estas herramientas y cómo.
Mi estructura de archivos:
blogs.css
blogs.html
blogs.js
server.js
servidor.js:
const http = require("http");
const fs = require("fs");
const myBlogs = [
{
title: "My first blog",
author: "John",
},
{
title: "My second blog",
author: "Mike",
},
];
const server = http.createServer((req, res) => {
console.log("request made");
// set header content type
let path = "";
switch (req.url) {
case "/blogs.css":
path += "blogs.css";
res.setHeader("Content-Type", "text/css");
break;
case "/blogs.js":
path += "blogs.js";
res.setHeader("Content-Type", "text/javascript");
break;
default:
path += "blogs.html";
res.setHeader("Content-Type", "text/html");
}
// send file
fs.readFile(path, (err, data) => {
if (err) {
console.log(err);
res.end();
} else {
res.write(data);
res.end();
}
});
});
server.listen(3000, "localhost", () => {
console.log("listening for requests on port 3000");
});
blogs.js:
const container = document.querySelector("div")
const html = myBlogs.map(blog => (
`<h2>${blog.title}</h2>
<p>${blog.author}</p>`
))
container.innerHTML = html;
blogs.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="blogs.css" />
</head>
<body>
<div></div>
<script src="blogs.js"></script>
</body>
</html>
blogs.css:
p {
color: red;
}
PD: Si tal enfoque es completamente incorrecto, ¿podría explicar la forma correcta en que se haría sin el uso de Express y un motor de plantillas?
Solución del problema
servidor.js
// send file
fs.readFile(path, "utf8", (err, data) => {
if (err) {
console.log(err);
res.end();
} else {
res.write(data.replace(/%MY_BLOGS%/g, JSON.stringify(myBlogs)));
res.end();
}
});
blogs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="blogs.css" />
<script>
var myBlogs = %MY_BLOGS%;
console.log(myBlogs);
</script>
</head>
<body>
<div></div>
<script src="blogs.js"></script>
</body>
</html>
Esto es increíblemente hacky y no es una buena práctica en absoluto. Básicamente, solo encuentra %MY_BLOGS% e interpola un objeto codificado en JSON. Dado que JSON es JS válido, se podrá acceder directamente a él en el JS del lado del cliente. Ahora puede acceder myBlogsen blogs.js ya que es una variable global.
No hay comentarios.:
Publicar un comentario