Blog
En este clase vamos a ver el uso de las plantillas en Express. Estas plantillas nos servirán para escribir código HTML de forma más rápida, gracias a sus bloques y funciones.
Estas plantillas nos permiten crear páginas web dinámicas, entre las cuales destacan Swig y Jade. Jade es el motor de plantillas que veremos en este curso.
Incluir una plantilla en nuestro proyecto
Hasta ahora, nos hemos limitado a enviar datos con la función res.send al navegador, pero a partir de ahora lo haremos a través de plantillas mucho más poderosas.
Para empezar, vamos a crear una carpeta en el proyecto que se llame ‘Plantillas’ para así tener mejor organizado el proyecto. Crearemos también un archivo dentro que se llame ‘hola_mundo.jade’.
Dentro del archivo que acabamos de crear vamos a crear un bloque de texto H1 donde ponga Hola Mundo. Es importante usar las tabulaciones correctamente en los archivos Jade para que funcione bien.
html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Plantillas Jade body h1 Hola Mundo
Sin embargo, esto simplemente no nos funcionará, sino que tendremos que incluir este fichero dentro de la ruta. Pero antes, tendremos que instalar Jade.
Instalar Jade
Para instalar Jade y poder incluir estas plantillas en nuestro proyecto, tenemos que instalarlo primero. Al igual que con Express, la instalación podemos hacerla con NPM. Para ello, nos situamos sobre la ruta del proyecto y ejecutamos:
npm install jade
Inicializar la plantilla
Una vez tenemos instalado Jade en nuestro proyecto, es hora de incluirlo dentro de la ruta, con el archivo que hemos creado antes. Para ello, crearemos un nuevo js que se llame ‘plantillas.js’ y tendremos el siguiente código, el cual establece como motor de plantillas Jade y lo llama dentro de la ruta:
const express = require('express'); const app = express(); //Establecemos Jade como motor de plantillas app.set('views', './plantillas'); app.set('view engine', 'jade'); app.get('/', function (req, res) { //Llamamos al archivo hola_mundo.jade dentro de la carpeta plantillas res.render('hola_mundo'); }); //Configurar que el servidor escuche el puerto 3000 const server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Ejemplo de aplicación del curso de NodeJS, ExpressJS y MongoDB en el puerto', port); });
Enviar parámetros a la plantilla
A Jade le podemos enviar variables que posteriormente podemos mostrar. La forma sencilla es crear una variable en js, como por ejemplo var titulo = “Curso de UniPython”, y pasarla a la plantilla como parámetro en el render.
Vamos a poner un ejemplo donde pasamos un objeto y una variable, comentemos el código anterior o lo borramos y agregamos el siguiente:
const express = require('express'); const app = express(); app.set('views', './plantillas'); app.set('view engine', 'jade'); app.get('/', function (req, res) { var usuario = { nombre: "Sergio", edad: 18 } var titulo = "Curso de UniPython"; res.render('hola_mundo', {usuario: usuario, titulo: titulo}); }); //Configurar que el servidor escuche el puerto 3000 const server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Ejemplo de aplicación del curso de NodeJS, ExpressJS y MongoDB en el puerto', port); });
Y el archivo hola_mundo.jade quedaría así:
html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Plantillas Jade body h1= titulo p(class='parrafo1 parrafo2' id='idparrafo') El usuario #{usuario.nombre} tiene #{usuario.edad} años
Como vemos en el ejemplo, la variable simple la hemos mostrado con el símbolo “=” después de la etiqueta h1, mientras que el objeto lo hemos mostrado con #{}.
save money of top fake rolex at low prices.
En cuanto a la etiqueta p, le hemos asignado dos clase y un id para enseñar cómo se asignan en Jade. El resultado es el siguiente:
Parciales
Con Jade podemos tener bloques parciales donde alojar nuestro contenido que queremos incluir en varios ficheros. Por ejemplo, imaginemos que tenemos una tienda online y queremos que el menú superior y el footer siempre sean iguales. Por lo tanto, podríamos crear un a layout que contenga esta información e incluirlo en nuestros archivos.
Las palabras clave que utilizaremos será Block y Extends:
Block es simplemente un “bloque” de Jade que puede reemplazarse dentro de una plantilla secundaria. Este proceso es recursivo y pueden proporcionar contenido predeterminado.
Vamos a poner un ejemplo. Creamos un nuevo archivo llamado ‘layout.jade’ donde tendremos toda la información del encabezado y pie, y en hola_mundo.jade dejaremos el contenido central que queremos reemplazar con el uso de block content:
layout.jade:
html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") title #{titulo} block scripts script(src='/jquery.js') link(href='/css/normalize.css', rel='stylesheet') body block content block foot #footer p(class='parrafo1', id='idparrafo') Pie de página
hola_mundo.jade:
extends ./layout.jade block content p Pagina principal
Si ejecutamos este código, veremos que ahora se muestra el encabezado y pie de página, y el contenido dentro de block content ha sido modificado por el que hemos puesto en hola_mundo.jade. También vemos cómo se incluyen scripts tanto de js como de css.
Es importante mencionar, que el script cargado y la hoja de estilo, no existen en este momento dentro de nuestro proyecto, simplemente hemos agregado estas lineas de código para demostrar como se carga un archivo javascript y css dentro de una plantilla jade.
Condicionales
Los condicionales nos proporcionan, al igual que en js, el poder de elegir entre varias condiciones para una variable. Por ejemplo, podemos crear una condición que compruebe si el usuario introducido tiene más de 21 años. Si no los tiene, entonces mostrará un aviso.
hola_mundo.jade
extends ./layout.jade block content h1= titulo p if usuario.edad > 21 span Tienes más de 21 años else span Tienes menos de 21 años ul each val, index in usuarios li= index + ': ' + val
Bucles
Los bucles nos servirán para recorrer un objeto que contenga múltiples valores y acceder a sus claves y valores. Por ejemplo, podríamos recorrer un objeto que contiene muchos usuarios y mostrarlos en una lista. Para ello, crearemos un nuevo objeto en nuestro JS que pasaremos a la vista, para ello vamos al archivo plantillas.js y lo aregamos en la ruta de la siguiente manera:
app.get('/', function (req, res) { var usuario = { nombre: "Sergio", edad: 18 } var titulo = "Curso de UniPython"; var usuarios = { nombre: "Manolo", edad: 58, aficiones: "Futbol", instrumento: "Bombo" } res.render('hola_mundo', {usuario: usuario, titulo: titulo, usuarios:usuarios}); });
Y entonces, dentro de la plantilla hola_mundo.jade, lo recorreremos:
ul each val, index in usuarios li= index + ': ' + val
Y con esto concluimos la clase de hoy donde hemos aprendido a manejar plantillas Jade. Existen multitud de motores de plantillas, pero nos hemos decantado por Jade debido a su potencial y simplicidad a la hora de escribir las etiquetas. Hay que recordar lo importante que son las indentaciones en este motor, de lo contrario nos pueden generar errores.