ExpressJS: Plantillas

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 #{}.

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.

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.