Demo
En este artículo continuaremos con el capitulo anterior Como Crear tu Primera Página Web con Node JS 10, Express JS 4 y Bootstrap 4 – Parte 2 en donde crearemos las vistas HTML con un contenido determinado para cada página y para visualizar cada página les crearemos una ruta determinada por donde le pasamos un título a cada página HTML, vayamos con el artículo.
Partes
Vamos a diseñar 4 páginas para nuestro proyecto, estas páginas serán home, servicios, nosotros y contacto, ve a la carpeta routes y abre el archivo index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/proyectoweb ├── bin │ └── www ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js // Abre este archivo │ └── users.js └── views ├── error.pug ├── index.pug └── layout.pug ├── app.js ├── package.json |
Una ves abierto el archivo index.js, colocaremos las rutas de las páginas de nuestro proyecto, encontraremos la ruta del home que fue creada automáticamente al usar Express Generator para crear nuestro proyecto en el 2do Capitulo de este tutorial.
Debajo de la ruta del Home agregaremos las 3 rutas correspondientes a las páginas Servicios, Nosotros y Contacto
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); /* Nosotros. */ router.get('/nosotros', function(req, res, next) { res.render('nosotros', { title: 'Nosotros' }); }); /* Servicios. */ router.get('/servicios', function(req, res, next) { res.render('servicios', { title: 'Servicios' }); }); /* Contacto. */ router.get('/contacto', function(req, res, next) { res.render('contacto', { title: 'Contacto' }); }); module.exports = router; |
Con eso agregamos las rutas necesarios para nuestras páginas, dentro de cada ruta usamos el método render para llamar a la pagina correspondiente por ejemplo a la página contacto
|
1 2 3 4 5 6 |
/* Contacto. */ router.get('/contacto', function(req, res, next) { res.render('contacto', { title: 'Contacto' }); // Acá llamamos a la pagina contacto.pug }); |
Bien ahora vamos a crear las páginas HTML correspondientes en formato .pug en el Capitulo 2 de este tutorial puedes ver los pasos para instalar la librería Pug, la cual nos ayuda a renderizar páginas con Express JS, para crear las páginas Servicios, Nosotros y Contacto ve a la carpeta views y crea 3 páginas servicios.pug, nosotros.pug y contacto.pug la página de inicio ya se creo cuando generamos el proyecto con Express Generator (Ver el Capítulo 2 de este tutorial)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/proyectoweb ├── bin │ └── www ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── users.js └── views └── contacto.pug // Página Contacto ├── error.pug ├── index.pug └── layout.pug └── nosotros.pug // Página Nosotros └── servicios.pug // Página Servicios ├── app.js ├── package.json |
Ahora abre las 3 páginas que hemos creado las cuales son servicios.pug, nosotros.pug y contacto.pug dentro de estas páginas colocaremos la siguiente estructura HTML con Express (Básicamente Copiamos el contenido de la página index.pug y lo colocamos en las nuevas páginas creadas)
|
1 2 3 4 5 6 7 |
extends layout // Instanciamos el layout que viene por defecto cuando creamos el proyecto con Express Generator en el 2do Capítulo de este tutorial block content h1= title p Estás en la página #{title} |
Express es muy intuitivo y dinámico con tan solo escribir una etiqueta, hace llamado al elemento HTML correspondiente
También instanciamos un archivo layout lo puedes encontrar en la carpeta views del proyecto, este archivo lo genera automáticamente Express Generator
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/proyectoweb ├── bin │ └── www ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── users.js └── views └── contacto.pug ├── error.pug ├── index.pug └── layout.pug // Página Layout └── nosotros.pug └── servicios.pug ├── app.js ├── package.json |
Si abres el archivo layout.pug puedes ver que se encuentra la etiqueta title para especificar el Titulo de la página que se debe mostrar en la pestaña del Navegador y la etiqueta link con la que llamamos a una hoja de estilos especifica
|
1 2 3 4 5 6 7 8 9 |
doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content |
En la etiqueta title se mostrará el texto que declaramos cuando creamos la ruta de cada página, por ejemplo en la ruta de la página Nosotros
|
1 2 3 4 5 6 |
/* Nosotros. */ router.get('/nosotros', function(req, res, next) { res.render('nosotros', { title: 'Nosotros' }); // Acá especificamos el contenido para la etiqueta title: 'Nosotros' }); |
Ahora vuelve a ejecutar el servidor, abre la consola de comandos y escribe lo siguiente
|
1 2 3 4 5 6 |
npm start GET / 304 986.229 ms - - GET /stylesheets/style.css 304 4.294 ms - - |
Podemos abrir el servidor con el puerto 3000 y nos cargará la pagina principal https://localhost:3000/
Para la página Nosotros ingresa a la ruta que le hemos asignado https://localhost:3000/nosotros
Para la página Servicios ingresa a la ruta que le hemos asignado https://localhost:3000/servicios
Para la página Contacto ingresa a la ruta que le hemos asignado https://localhost:3000/contacto
Con esto ya tenemos creadas las páginas HTML con sus rutas, listas para crearle sus contenidos correspondientes y mejorar el aspecto visual con Bootstrap 4, esto lo veremos en el siguiente y último capitulo de este tutorial.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.