En el desarrollo web, mostrar datos del servidor en páginas web es crucial para crear experiencias de usuario dinámicas e interactivas. Aquí es donde Template Engine vienen Express.js al rescate. A Template Engine es una herramienta que le permite crear plantillas HTML dinámicas mediante la inyección de datos del servidor en el código HTML.
¿Por qué usar Template Engine ?
Template Engine ayudar a separar el marcado HTML de los datos que provienen del servidor. Esto le permite administrar el código HTML más fácilmente sin tener que incrustar datos en cada línea de código. En su lugar, creará "marcadores de posición" o "etiquetas" dentro del código HTML, que Template Engine luego se llenará con datos del lado del servidor.
usando Template Engine en Express.js
Express.js admite varios template engine, como Pug(anteriormente conocido como Jade) y EJS(JavaScript integrado). A continuación se muestran ejemplos del uso de Pug y EJS en Express.js:
Usando pug Template Engine
Instalar Pug: debe instalar el pug paquete a través de npm.
npm install pug --save
Configure Template Engine: en el archivo de configuración de su aplicación(p. ej., app.js), defina Pug como template engine.
app.set('view engine', 'pug');
Crear una plantilla Pug: cree archivos Pug en el views directorio. Por ejemplo, cree un index.pug archivo:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Manejo de rutas y representación de datos: en el manejo de rutas, puede pasar datos al template engine uso de res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Usando EJS Template Engine
Instale EJS: Instale el ejs paquete a través de npm.
npm install ejs --save
Configure Template Engine: defina EJS como el template engine en la configuración de su aplicación.
app.set('view engine', 'ejs');
Cree una plantilla EJS: cree archivos EJS en el views directorio. Por ejemplo, cree un index.ejs archivo:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Manejo de rutas y representación de datos: en el manejo de rutas, pase datos al template engine usuario res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Conclusión
Usar Template Engine in Express.js le permite crear páginas web dinámicas y mostrar información del servidor en el navegador del usuario. Al utilizar Pug, EJS u otros template engine, puede crear páginas web interactivas y flexibles que brinden una mejor experiencia de usuario y optimicen la administración de código HTML y datos.