Página web de Node.js, parte 2: 7 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

¡Bienvenido a la PARTE 2!

Esta es la parte 2 de mi tutorial de aplicación del sitio web Node.js. Dividí este tutorial en dos partes, ya que separa a aquellos que solo necesitan una breve introducción y a aquellos que quieren un tutorial completo en una página web.

Voy a pasar por la creación de mi sitio. El tuyo puede ser diferente, así que sigue el mío y aprende las técnicas utilizadas. Una vez que elija una plantilla HTML diferente, el flujo será ligeramente diferente. Mantén esto en mente.

Paso 1: Estructura de la aplicación

Entonces, mi sitio sigue el generador rápido, sin embargo, usé manubrios en lugar de jade. Si te gusta el jade, ¡hazlo! Jade es HTML abreviado sin todos los corchetes y div. Si no entiende que es posible que desee visitar YouTube y ver algunos tutoriales HTML.

Prefiero y me siento más cómodo con HTML y manillares, así que eso es lo que usé. Para crear un proyecto express con manubrios, ejecute el comando express.

express --hbs nameofmyapp

Luego continúe con el paso de la Parte 1 para instalar todo el middleware.

Express crea una estructura de aplicación muy específica y muy útil. La mayoría de las aplicaciones de node.js siguen este formulario con algunas variaciones.

En la foto adjunta puedes ver diferentes carpetas y archivos, a continuación trato de explicar todos estos.

compartimiento

Esta es la carpeta que se ejecuta primero cuando node.js inicia su servidor. Busca el archivo www y sigue este archivo para su ejecución. El archivo www le dice a node.js que inicie un servidor en el puerto 3000 (esto puede cambiar a casi cualquier cosa) y que haga algunas otras cosas, como el detector de eventos y demás. Lo más importante es el puerto en el que está configurada la aplicación.

módulos_nodo

En esta carpeta se encuentra lo que se llama middleware. Middleware que me gusta explicar como software adicional para facilitar la codificación. Básicamente, hay otras bibliotecas con funciones predefinidas para su uso. Algunos middleware adicionales que utilicé para este proyecto fueron Nodemailer, Passport, Nodemon, bycrypt y otros.

público

Aquí es donde irían todas sus imágenes, CSS y javascript para su sitio web. Estos son utilizados directamente por las páginas web.

rutas

Estas son rutas definidas para su sitio. Como una página de inicio, una página de inicio de sesión y otros.

puntos de vista

Como puede ver, las vistas son archivos.hbs o.handlebars, cualquiera funcionará, solo se necesita cierta manipulación del archivo app.js. Estas son las páginas html de su manillar que se mostrarán en el navegador. El diseño es su archivo de diseño principal y, a veces, se encuentra en su propia subcarpeta de diseño. El archivo de diseño principal llama a sus otros archivos de manillar y los muestra, esto tendrá más sentido cuando nos sumerjamos en el código.

app.js

Este es su archivo de aplicación principal, a veces se llama servidor, solo depende de la configuración. Este archivo tiene toda la configuración del servidor e incluso algunas funciones especiales. También será un controlador de errores.

package.json

Este archivo es creado por express y le dice a npm todo el middleware que desea usar en su proyecto. Una vez que ejecute npm install, todo el middleware llamado en este archivo se instalará en la carpeta node_modules.

Paso 2: diseñe su plantilla

Puede crear todo su HTML desde cero o puede utilizar una plantilla. He utilizado una plantilla para este sitio. Otros sitios que he ayudado a desarrollar los he codificado desde cero. La elección es suya, este paso explica el diseño de la plantilla.

Mi aplicación web utiliza una plantilla de arranque que es excelente para crear un CSS increíble. Para encontrar plantillas, visite este sitio. Como se indicó anteriormente en el paso anterior, todos los archivos css, js e img necesarios se encuentran en la carpeta pública. Estos archivos hacen que el sitio se vea mejor que el texto sin formato y es la forma en que se utilizan las imágenes en el sitio.

Para que el estilo de la plantilla del manillar funcione con una plantilla, las páginas se dividen en dos partes. El primero es lo que se denomina "diseño". El diseño son las propiedades que le gustaría que se mostraran en cada página web dentro de su sitio. En mi caso, este es el encabezado, que tiene la barra de navegación, y el pie de página, que contiene elementos adicionales de navegación y visualización.

El archivo de diseño y otros archivos de manillares se encuentran en la carpeta de vistas. Revisaré un diseño más simple del generador rápido que usó anteriormente para mostrar cómo funciona el concepto, luego podrá ver mi código y compararlos.

Archivo layout.handlebars generado expreso

{{title}} {{{body}}}

La verdadera magia del manillar está en el manillar {{title}} y {{{body}}}. Entonces, estos dos actúan de manera diferente {{title}} es una variable que se pasa del archivo index.js en las rutas, una vez que se pasa a la plantilla, se muestra. La etiqueta {{{body}}} toma lo que se llama en la función de renderizado en su archivo route js. En nuestro caso, index.js tiene esta línea:

res.render ('index', {title: 'Express', count: userCount});

Esto llama al archivo 'índice' de cualquier motor que esté usando, jade, manubrios, etc., por lo que en nuestro caso index.handlebars.

Manillares de índice generados expresamente

{{título}}

Bienvenido a {{title}}

El archivo index.handlebars se pasa como una variable a la etiqueta {{{body}}} y se muestra en su página web.

Esto le permite tener una parte estática de su sitio web y una parte variable. Esto hace que los encabezados y pies de página sean agradables, ya que no tiene que volver a renderizar toda la página, cuando carga una página nueva, solo se cambia parte de la información.

Paso 3: formulario de contacto

Incorporé un formulario de contacto en mi página web para que cualquiera pudiera enviar un correo electrónico al correo electrónico de mi sitio, con preguntas o comentarios.

Este formulario de contacto utilizó un middleware de npm que se llama Node Mailer.

Configuración de Node Mailer

Para instalar node-mailer, solo necesita ejecutar el código a continuación en su archivo de nivel superior, en nuestro caso, myapp.

sudo npm instalar nodemailer

Una vez instalado, deberá configurar algunas cosas en su archivo app.js.

La primera es solo la dependencia, esto le dice al nodo que planeamos usar este middleware.

var nodemailer = require ('nodemailer');

El segundo es nuestro transportador, el transportador se usa para conectarse a su servidor de correo, en mi caso gmail.

// Transporter utilizado para obtener una cuenta de gmail

var transporter = nodemailer.createTransport ({servicio: 'gmail', auth: {tipo: 'OAuth2', usuario: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercret.com': 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

Si usa nodemailer con un servidor de correo diferente, busque aquí documentación y ayuda.

Algunas cosas cambiarán de una persona a otra: usuario, clientId, clientSecret. refreshToken y accessToken.

Su userId es el correo electrónico en el que desea utilizar, hice uno nuevo con el mismo nombre que mi sitio.

El clientId, clientSecret, refreshToken y accessToken deben encontrarse a través de su cuenta de Google.

Si necesita más ayuda, puede seguir este video aquí.

Una vez que se hayan completado todos esos campos, agregaremos los detalles de nuestro mensaje.

A continuación, debemos validar que todos los campos de nuestro formulario se hayan ingresado y sean respuestas válidas.

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + namespace.shift () + ']';} return {param: formParam, msg: msg, value: value};}}));

Ahora necesitamos obtener información de nuestro formulario de contacto en nuestra página web y enviar un mensaje.

// Publicar desde el botón de envío de contacto, es necesario crear una página de inicio con un mensaje de éxito para los formularios enviados sapp.post ('/ contact_Form', function (req, res) {// Obtener información del formulario de contacto, desde homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// crea información utilizada al enviar un mensaje desde: ' Correo electrónico automático ', a:' [email protected] ', asunto:' Formulario de contacto del sitio web: '+ nombre, texto:' Ha recibido un nuevo mensaje del formulario de contacto de su sitio web. / N / n '+' Aquí son los detalles: / n / nNombre: '+ nombre +' / n / nCorreo electrónico: '+ correo electrónico +' / n / nTeléfono: '+ teléfono +' / n / nMensaje: / n '+ mensaje} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email enviado');}}) res.render ('index'); // render nueva página de inicio, mire cómo hacer esto con un mensaje de éxito, como la página de cierre de sesión})

Destello

Flash se utiliza para mostrar mensajes después de que se realizan las acciones. Puede ver esto cuando envía un formulario o no ingresa un campo correctamente.

Instale flash como cualquier otro middleware npm.

sudo npm instalar connect-flash

var flash = require ('conectar-flash'); // tenía funcionalidad flash para mostrar en los mensajes de la pantalla

// Conectar Flashapp.use (flash ());

Habilite el flash que empuja y actualiza los mensajes en la página web. Estos son los mensajes que dicen cosas como éxito o información que se ingresó incorrectamente.

// Global Vars

app.use (function (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('error'); res.locals.user = req.user || null; next ();});

Algunos necesitan variables asociadas con flash.

Ahí tienes un formulario de contacto hecho.

Paso 4: página de inicio de sesión

Esto era algo que quería ver si podía hacer y tal vez lo usaría en el futuro. Solo quería explicar el código tal como está en mi repositorio de git.

Así que esta parte usa algunos middleware más de npm. Instale lo siguiente usando los siguientes comandos.

npm instalar pasaporte && npm instalar pasaporte-local && npm instalar bcryptjs

&& le permite ejecutar varios comandos con una línea.

Inicio de sesión y usuarios

Deberá crear un archivo login.js y user.js en su carpeta de rutas. Esto se utilizará para permitir la creación de un usuario, que se almacenará en nuestra base de datos, y permitirá que el usuario inicie sesión comprobando la base de datos.

user.js

var express = require ('express'); var router = express. Router (); var passport = require ('pasaporte'); var LocalStrategy = require ('pasaporte-local'). Estrategia; var Usuario = require ('../ modelos / usuario'); // Registrar router.get ('/ register', function (req, res) {res.render ('register');}); // Registrar usuario router.post ('/ register', function (req, res) {var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Validación req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('email', 'El email no es válido'). isEmail (); req.checkBody ('username', 'Username is required'). notEmpty (); req.checkBody (' contraseña ',' Se requiere contraseña '). notEmpty (); req.checkBody (' contraseña2 ',' Las contraseñas no coinciden '). equals (req.body.password); var errors = req.validationErrors (); if (errores) {res.render ('registrarse', {errores: errores});} else {var newUser = new User ({nombre: nombre, correo electrónico: correo electrónico, nombre de usuario: nombre de usuario, contraseña: contraseña}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Estás registrado y ahora puedes iniciar sesión'); res.redirect (' /acceso'); } });

Rompiendo esto pieza por pieza

Primero incluimos todo el middleware necesario, luego incluimos nuestro archivo de modelo que se explica a continuación. Enrutamos desde la etiqueta de registro y mostramos el texto de nuestro manillar de registro. Entonces viene la función importante. Estos nos permiten registrar un nuevo usuario en nuestra base de datos. La función comprueba que todos los campos sean válidos y estén incluidos en el formulario, de lo contrario, los solicitará. A continuación, comprueba si hay errores y, si no se producen, crea un nuevo usuario con la información proporcionada. Luego vuelve a enrutar a la página de inicio de sesión, lo que le permite iniciar sesión.

login.js

var express = require ('express');

var router = express. Router (); var passport = require ('pasaporte'); var LocalStrategy = require ('pasaporte-local'). Estrategia; var Usuario = require ('../ modelos / usuario'); / * OBTENER listado de usuarios. * / // Página de inicio router.get ('/', function (req, res) {res.render ('login');}); passport.use (new LocalStrategy (function (username, password, done) {User.getUserByUsername (username, function (err, user) {if (err) throw err; if (! user) {return done (null, false, { mensaje: 'Usuario desconocido'});} User.comparePassword (contraseña, user.password, function (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} else { retorno hecho (nulo, falso, {mensaje: 'Contraseña no válida'});}});});})); passport.serializeUser (función (usuario, hecho) {hecho (nulo, id.usuario);}); passport.deserializeUser (function (id, done) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/ login', passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/ login', failureFlash: true}), función (req, res) {res.redirect ('/ tablero'); }); router.get ('/ logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Estás desconectado'); res.redirect ('/ homepage');});

module.exports = enrutador;

Primero incluimos todo el middleware necesario, luego incluimos nuestro archivo de modelo que se explica a continuación. Enrutamos desde la etiqueta de inicio de sesión y mostramos el texto de nuestro manillar de inicio de sesión. Luego usamos algunas funciones de pasaporte para tomar el nombre de usuario y la contraseña ingresados y compararlos con nuestra base de datos. También usaremos una contraseña encriptada que puede hacer que el inicio de sesión sea un poco lento en una Raspberry Pi. Explico esto más a continuación. Después de validar el nombre de usuario y la contraseña, se le redirige a la página de inicio que mostrará el panel de control a medida que lo configuramos en nuestro archivo de índice. También agregamos aquí la posibilidad de cerrar sesión.

Como mencioné anteriormente, también necesitaremos crear un modelo para verificar la base de datos.

Esto se hace creando una carpeta en la carpeta principal de la aplicación llamada modelos. En esta carpeta también se necesita un archivo user.js.

modelo / user.js

var mangosta = require ('mangosta');

var bcrypt = require ('bcryptjs'); // Esquema de usuario var UserSchema = mongoose. Schema ({nombre de usuario: {tipo: Cadena, índice: verdadero}, contraseña: {tipo: Cadena}, correo electrónico: {tipo: Cadena}, nombre: {tipo: Cadena}}); var User = module.exports = mongoose.model ('Usuario', UserSchema);

module.exports.createUser = function (newUser, devolución de llamada) {

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = function (nombre de usuario, devolución de llamada) {var query = {username: username}; User.findOne (consulta, devolución de llamada); } module.exports.getUserById = function (id, callback) {User.findById (id, callback); } module.exports.comparePassword = function (candidatoPassword, hash, callback) {bcrypt.compare (candidatoPassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Este modelo describe cómo se verán nuestros parámetros de usuario y cómo accederemos a ellos. Mencioné antes que estaremos encriptando nuestras contraseñas. esto es para que ninguna contraseña se almacene en la base de datos en caso de violación. Las contraseñas se codifican mediante bcrypt de middleware.

Paso 5: contador de tráfico

Quería ver cuántos usuarios únicos visitaron mi página web y contar el número de "visitas". Hay muchas formas de hacer esto, explicaré cómo lo hice.

Esto usa una colección de mongodb para rastrear cuántos usuarios han visitado mi página y cuántas veces visitó cada visitante único.

Como ya hemos hablado sobre la configuración de un mongoDB, no volveré a revisarlo.

Es posible que deba agregar dos colecciones a su base de datos para poder compilar. Para hacer esto, puede instalar RoboMongo si usa una interfaz de usuario, sin embargo, si está usando una frambuesa pi sin cabeza como yo, divertirá los siguientes comandos.

Concha de Mongo

Para editar una base de datos, obtener información o crear una colección, necesitará el shell mongo en una unidad sin cabeza.

Correr

mongo

Esto abrirá el caparazón.

Agregar una colección

En mi caso, la base de datos se llama loginapp, puedes nombrarla como quieras.

use nameofyourdb

Necesitamos una colección para guardar todas nuestras direcciones IP de los usuarios que visitan nuestro sitio.

db.creatCollection ("ip")

A continuación, creamos una colección para contar las visitas únicas a nuestro sitio. Esto se inicializa con una identificación y cuenta a partir de 0.

db.createCollection ("recuento", {id: "contador de visitas", recuento: 0})

Seguimiento de direcciones IP

Para hacer esto, extraeremos el IP de los usuarios cuando visiten nuestra página de inicio, incrementaremos nuestro recuento y los almacenaremos para compararlos más tarde.

Necesitamos crear algunos modelos para almacenar nuestros esquemas de mangosta y agregar algo de código a nuestro archivo homepage.js.

Creamos count.js e ip.js y los almacenamos en nuestra carpeta de modelos.

El archivo ip.js es solo un esquema para nuestra dirección IP

var mangosta = require ('mangosta'); // controlador de paquetes para mongo

// Esquema de recuento var IpSchema = mongoose. Schema ({ip: {tipo: Cadena,}, recuento: {tipo: Número,}}); var Ip = módulo.exportaciones = mangosta.modelo ('Ip', IpSchema);

count.js será llamado por nuestra página de inicio para iniciar el seguimiento de visitas. Esto se hace de la siguiente manera.

//Homepagerouter.get('/ ', function (req, res) {publicIp.v4 (). Then (ip => {Public_ip = ip; console.log ("ipv4:" + Public_ip); // =>' 46.5.21.123 '}); publicIp.v6 (). Luego (ip => {console.log ("ipv6" + ip); Public_ip = ip; // =>' fe80:: 200: f8ff: fe21: 67cf ' });

Count.getCount (colección, ipc, Public_ip, function (count) {

}); count = db.collection ('count'). findOne ({id: "contador de visitas"}, function (err, count) {userCount = count.count; res.render ('homepage', {count: userCount}); }); });

Esto sucede cada vez que alguien accede a nuestra página de inicio, en este caso theinternet.onthewifi.com/homepage.

Verifica la IP del usuario, ip4 o ip6, y luego almacena ese valor donde lo envía a count.get.collection, que es una función almacenada en nuestro archivo count.js.

Después de verificar la unicidad del usuario, regresa y publica el valor de recuento en la página de inicio como una variable de manillar.

El archivo count.js es el siguiente.

//count.jsvar mongo = require ('mongodb'); // admite la base de datos var mongoose = require ('mangosta'); // controlador de paquetes para mongo mongoose.connect ('mongodb: // localhost / loginapp'); var db = mangosta.conexión; var Ip = require ('../ modelos / ip'); // Esquema de recuento var CountSchema = mongoose. Schema ({id: {tipo: Cadena,}, recuento: {tipo: Número,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// count es prueba, callback es función ipc.findOne ({ip: public_ip}, function (err, iptest) {if (! iptest) // agregar una nueva ip si no está en la base de datos, y actualizar el contador {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // agregar nueva ip a database count.update (// actualiza el contador de visitas {id: "contador de visitas"}, {$ inc: {count: 1}})} else // actualiza el contador de IP específico, para ver quién visita más {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Esto crea el esquema de recuento y nuestra función.getCount. La función.getCount comprueba la base de datos en busca de la IP del usuario y, si la encuentra, la función incrementa el recuento de ese usuario, no el contador de visitas. Sin embargo, si no se encuentra la IP del usuario, se creará un nuevo objeto de colección con la IP del usuario e incrementará el contador de visitas en 1.

A continuación, se devuelve y se muestra en la página web.

Ahí lo tienes un contador de visitas de seguimiento de ip.

Paso 6: Blog

Actualmente estoy tratando de desarrollar un blog centralizado en mis intereses sobre software, hogares inteligentes y Polaroid. Entonces creé una sección de blog. El blog utiliza páginas html estáticas y el marco de manillares. Después de buscar mejores tecnologías para facilitar los blogs, he rediseñado mi sitio web con hugo. Hugo es un generador de HTML estático. Hablo más sobre esto en el tutorial mencionado a continuación.

Paso 7: terminado

Ahí tienes un tutorial en profundidad en mi sitio web node.js alojado localmente en mi raspberry pi. Si tiene preguntas o comentarios, déjelos a continuación.

Espero que esto ayude a otros.

Para un enfoque diferente de este sitio usando hugo, un generador de páginas web estático, vea mi otro tutorial (próximamente).