Pàgina web de Node.js Part 2: 7 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

Benvingut a la 2ª PART !!

Aquesta és la part 2 del meu tutorial d'aplicació del lloc web Node.js. He dividit aquest tutorial en dues parts, ja que separa els que només necessiten una breu introducció i els que volen un tutorial complet en una pàgina web.

Vaig a passar per la creació del meu lloc. El vostre pot ser diferent, així que seguiu el meu i apreneu les tècniques utilitzades. Un cop trieu una plantilla HTML diferent, el flux serà lleugerament diferent. Tingueu-ho present.

Pas 1: estructura de l'aplicació

Per tant, el meu lloc segueix el generador exprés, però he utilitzat manillar en lloc de jade. Si us agrada el jade, aneu-hi! Jade és HTML de mà curta, sense tots els claudàtors i div. Si no enteneu que és possible que vulgueu visitar youtube i veure alguns tutorials HTML.

Prefereixo i em sento més còmode amb HTML i manillar, de manera que això és el que he utilitzat. Per crear un projecte express amb manillar, executeu l'ordre express.

expressa --hbs nom de la meva aplicació

A continuació, seguiu el pas de la primera part per instal·lar tots els productes intermedis.

Express crea una estructura d’aplicacions molt específica i molt útil, la majoria d’aplicacions de node.js segueixen aquest formulari amb algunes variacions.

A la foto adjunta podeu veure diferents carpetes i fitxers, a continuació intento explicar-los tots.

paperera

Aquesta és la carpeta que s’executa primer quan node.js inicia el vostre servidor. Es fixa en el fitxer www i el segueix per executar-lo. El fitxer www indica a node.js que iniciï un servidor al port 3000 (això pot canviar a gairebé qualsevol cosa) i que faci altres coses, com ara un oient d'esdeveniments, etc. El més important és el port on està configurada la vostra aplicació.

mòduls_node

En aquesta carpeta hi ha el que s’anomena middleware. Middle-ware M'agrada explicar-ho com a programari addicional per facilitar-vos les codificacions. Bàsicament són altres biblioteques amb funcions prefabricades per al vostre ús. Alguns productes intermedis addicionals que he utilitzat per a aquest projecte han estat Nodemailer, Passport, Nodemon, bycrypt i altres.

públic

Aquí és on anirien totes les vostres imatges, CSS i javascript del vostre lloc web. Aquests són utilitzats directament per les pàgines web.

rutes

Aquestes són les rutes que defineixen el vostre lloc. Com ara una pàgina d'inici, una pàgina d'inici de sessió i altres.

vistes

Com podeu veure, les vistes són fitxers.hbs o.handlebars, qualsevol dels dos funcionarà, només cal manipular el fitxer app.js. Aquestes són les vostres pàgines html de manillar que es mostraran al navegador. El disseny és el vostre fitxer de disseny principal i, de vegades, es troba a la seva pròpia subcarpeta de disseny. El fitxer de disseny principal crida als altres fitxers de manillar i els mostra, això tindrà més sentit quan ens endinsem en el codi.

app.js

Aquest és el fitxer principal de l'aplicació, de vegades s'anomena servidor, només depèn de la configuració. Aquest fitxer té tota la configuració del servidor i fins i tot algunes funcions especials. També serà un gestor d'errors.

package.json

Aquest fitxer està creat per express i indica a npm tot el middleware que voleu utilitzar al vostre projecte. Un cop hàgiu executat l'installació de npm, tots els productes intermedis cridats en aquest fitxer s'instal·laran a la carpeta node_modules.

Pas 2: dissenyeu la plantilla

Podeu crear tot el vostre HTML des de zero o podeu utilitzar una plantilla. He utilitzat una plantilla per a aquest lloc. Altres llocs que he ajudat a desenvolupar els he codificat des de zero. L’elecció és vostra, aquest pas explica el disseny de la plantilla.

La meva aplicació web utilitza una plantilla d’arrencada ideal per crear CSS increïbles. Per trobar plantilles, visiteu aquest lloc. Com s'ha indicat anteriorment al pas anterior, tots els fitxers css, js i img necessaris es troben a la carpeta pública. Aquests fitxers fan que el lloc tingui un aspecte millor que el text sense format i com s’utilitzen les imatges al lloc.

Per fer que l'estil de plantilla de manillar funcioni amb una plantilla Les pàgines es divideixen en dos trossos. El primer és el que es denomina "disseny". El disseny són les propietats que voleu que es mostrin a totes les pàgines web del vostre lloc. En el meu cas, es tracta de la capçalera, que té la barra de navegació, i el peu de pàgina, que conté peces de navegació i visualització addicionals.

El fitxer de disseny i altres fitxers de manillar es troben a la carpeta de vistes. Repassaré un disseny més senzill del generador exprés que heu utilitzat anteriorment per mostrar el funcionament del concepte i, a continuació, podeu veure el meu codi i comparar-los.

Fitxer layout.handlebars generat expressament

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

La veritable màgia del manillar es troba al manillar {{title}} i {{{body}}}. Per tant, aquests dos actuen de manera diferent {{title}} és una variable que es transmet des del fitxer index.js a les rutes, un cop passada a la plantilla es mostra. L'etiqueta {{{body}}} pren el que mai es diu a la funció de renderització del fitxer route js. En el nostre cas index.js té aquesta línia:

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

Això crida el fitxer "índex" de tot el que us motiva, jade, manillar, etc., de manera que en el nostre cas index.handlebars.

Index.handlebars generats expressament

{{title}}

Benvingut a {{title}}

El fitxer index.handlebars es passa com una variable a l'etiqueta {{{body}}} i es mostra a la vostra pàgina web.

Això us permet tenir una part estàtica del vostre lloc web i una part variable. Això fa que les capçaleres i els peus de pàgina siguin agradables, ja que no cal tornar a representar tota la pàgina, quan es carrega una pàgina nova, només es canvia alguna informació.

Pas 3: formulari de contacte

Vaig incorporar un formulari de contacte a la meva pàgina web perquè tothom pogués enviar un correu electrònic al meu lloc amb preguntes o comentaris.

Aquest formulari de contacte utilitzava un producte intermedi npm que s’anomena Node Mailer.

Configuració de Node Mailer

Per instal·lar node-mailer només heu d’executar el codi següent al fitxer de nivell superior, en el nostre cas, myapp.

sudo npm install nodemailer

Un cop instal·lat, haureu de configurar algunes coses al fitxer app.js.

El primer és només la dependència, això indica al node que tenim previst utilitzar aquest middleware.

var nodemailer = require ('nodemailer');

El segon és el nostre transporter, el transporter s’utilitza per connectar-se al servidor de correu, en el meu cas Gmail.

// El transporter solia obtenir un compte de Gmail

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

si utilitzeu nodemailer amb un servidor de correu diferent, consulteu aquí documentació i ajuda.

Algunes coses canviaran de persona a persona: usuari, clientId, clientSecret. refreshToken i accessToken.

El vostre ID d'usuari és el correu electrònic en què voleu utilitzar-ne, n'he creat un de nou anomenat igual que el meu lloc.

Cal trobar el clientId, clientSecret, refreshToken i accessToken a través del vostre compte de Google.

Si necessiteu més ajuda, podeu seguir aquest vídeo aquí.

Un cop emplenats tots aquests camps, afegirem els detalls del nostre missatge.

A continuació, hem de validar que tots els camps del nostre formulari s'han introduït i que són respostes vàlides.

// 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};}}));

Ara necessitem obtenir informació del formulari de contacte de la nostra pàgina web i enviar-li un missatge.

// Botó Envieu des del contacte, heu de crear una pàgina d'inici amb un missatge d'èxit per al formulari enviatapp.post ('/ contact_Form', funció (requeriment, resolució) {// Obteniu informació del formulari de contacte, des del nom var var.hbs. = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// crea la informació que s’utilitza quan s’envia un missatge des de: ' Correu electrònic automàtic ', a:' [email protected] ', subject:' Formulari de contacte del lloc web: '+ nom, text:' Heu rebut un missatge nou del formulari de contacte del vostre lloc web. / N / n '+' Aquí són els detalls: / n / nNom: '+ nom +' / n / nCorreu electrònic: '+ correu electrònic +' / n / nTelèfon: '+ telèfon +' / n / nMessatge: / n '+ missatge} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Enviat per correu electrònic');}}) res.render ('index'); // render nova pàgina d'inici, consulteu com fer-ho amb un missatge d'èxit, com ara la pàgina de tancament de sessió})

Flash

Flash s’utilitza per mostrar missatges després de fer les accions. Ho podeu veure quan envieu un formulari o no introduïu un camp correctament.

Instal·leu el flash igual que altres programes intermedis npm.

sudo npm install connect-flash

var flash = require ('connect-flash'); // tenia funcionalitat de flaix per mostrar els missatges a la pantalla

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

Activa el flash que empeny i actualitza els missatges de la pàgina web. Aquests són els missatges que diuen coses com l’èxit o la informació que s’ha introduït incorrectament.

// Global Vars

app.use (funció (req, res, següent) {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 ();});

Alguns necessiten variables associades al flash.

Aquí teniu un formulari de contacte realitzat.

Pas 4: pàgina d'inici de sessió

Això era només una cosa que volia veure si podia fer-ho i potser ho faré servir en el futur. Només volia explicar el codi tal com es troba al meu repositori de git.

Per tant, aquesta part utilitza uns quants mitjans més de npm. Instal·leu el següent mitjançant les ordres següents.

npm install passport && npm install passport-local && npm install bcryptjs

El && us permet executar diverses ordres amb una línia.

Inici de sessió i usuaris

Haureu de crear un fitxer login.js i user.js a la carpeta de rutes. S’utilitzarà per permetre la creació d’un usuari, que s’emmagatzemarà a la nostra base de dades, i permetrà a l’usuari iniciar la sessió comprovant la base de dades.

user.js

var express = require ('express'); var router = express. Router (); var passaport = require ('passaport'); var LocalStrategy = require ('passport-local'). Estratègia; var Usuari = require ('../ models / user'); // Registrar router.get ('/ register', function (req, res) {res.render ('register');}); // Registrar usuari router.post ('/ register', funció (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ó req.checkBody ("nom", "El nom és obligatori"). notEmpty (); req.checkBody ("correu electrònic", "El correu electrònic és obligatori").notEmpty (); req.checkBody ('correu electrònic', 'El correu electrònic no és vàlid'). isEmail (); req.checkBody ('nom d'usuari', 'El nom d'usuari és obligatori'). notEmpty (); req.checkBody (' notEmpty (); req.checkBody ('password2', 'Les contrasenyes no coincideixen'). igual (req.body.password); var errors = req.validationErrors (); si (errors) {res.render ('register', {errors: errors});} else {var newUser = nou usuari ({nom: nom, correu electrònic: correu electrònic, nom d'usuari: nom d'usuari, contrasenya: contrasenya}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Esteu registrat i podeu iniciar sessió'); res.redirect (' /iniciar Sessió'); } });

Desglossant aquesta peça a peça

Primer incloem tots els mitjans que calen, i després incloem el nostre fitxer model que s’explica a continuació. Rutem des de l’etiqueta de registre i mostrem el text del nostre manillar de registre. Després ve la funció important. Això ens permet registrar un usuari nou a la nostra base de dades. La funció comprova que tots els camps siguin vàlids i que estiguin inclosos al formulari, si no, els demanarà. A continuació, comprova si hi ha errors i, si no es produeixen errors, crea un nou usuari amb la informació proporcionada. A continuació, redirigeix a la pàgina d'inici de sessió, cosa que us permetrà iniciar la sessió.

login.js

var express = require ('express');

var router = express. Router (); var passaport = require ('passaport'); var LocalStrategy = require ('passport-local'). Estratègia; var Usuari = require ('../ models / user'); / * OBTENCIÓ de la llista d'usuaris. * / // Homepage router.get ('/', function (req, res) {res.render ('login');}); passport.use (nova LocalStrategy (funció (nom d'usuari, contrasenya, fet)) {User.getUserByUsername (nom d'usuari, funció (err, usuari) {if (err) llançar err; if (! user) {return done (nul, false, { missatge: "Usuari desconegut"});} Usuari.comparePassword (contrasenya, user.password, funció (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} else { retorn fet (nul, fals, {missatge: 'Contrasenya no vàlida'});}});});})); passport.serializeUser (funció (usuari, fet) {fet (nul, usuari.id);}); 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ó (req, res) {res.redirect ('/ panell'); }); router.get ('/ logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Heu tancat la sessió'); res.redirect ('/ homepage');});

module.exports = encaminador;

Primer incloem tots els mitjans necessaris, i després incloem el nostre fitxer model que s’explica a continuació. Anem des de l’etiqueta d’inici de sessió i mostrem el text del nostre manillar d’inici de sessió. A continuació, utilitzem algunes funcions de passaport per agafar el nom d'usuari i la contrasenya introduïts i comprovar-los amb la nostra base de dades. Utilitzarem també una contrasenya xifrada que pot fer que la connexió sigui una mica lenta en un raspberry pi. A continuació ho explico més. Després de validar el nom d'usuari i la contrasenya, se us redirigirà a la pàgina d'inici, que mostrarà el tauler de control mentre el configurem al nostre fitxer d'índex. També hi afegim la possibilitat de tancar la sessió.

Com he esmentat anteriorment, també haurem de crear un model per comprovar la base de dades.

Això es fa creant una carpeta a la carpeta principal de l'aplicació anomenada models. En aquesta carpeta també es necessita un fitxer user.js.

model / user.js

var mangosta = require ('mangosta');

var bcrypt = require ('bcryptjs'); // User Schema var UserSchema = mongoose. Schema ({nom d’usuari: {type: String, index: true}, contrasenya: {type: String}, correu electrònic: {type: String}, nom: {type: String}}); var Usuari = module.exports = mongoose.model ('Usuari', UserSchema);

module.exports.createUser = funció (newUser, callback) {

bcrypt.genSalt (10, function (err, salt)) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = funció (nom d'usuari, devolució de trucada) {var query = {nom d'usuari: nom d'usuari}; User.findOne (consulta, devolució de trucada); } module.exports.getUserById = funció (identificador, devolució de trucada) {User.findById (identificador, devolució de trucada); } module.exports.comparePassword = function (candidatePassword, hash, callback) {bcrypt.compare (candidatePassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Aquest model descriu l’aspecte dels nostres paràmetres d’usuari i com accedirem a ells. Abans he esmentat que xifrarem les nostres contrasenyes. això és perquè no es guardi cap contrasenya a la base de dades en cas d'incompliment. Les contrasenyes es combinen mitjançant bcrypt de middleware.

Pas 5: comptador de trànsit

Volia veure quants usuaris únics van visitar la meva pàgina web i comptar el nombre de "visites". Hi ha moltes maneres de fer-ho, explicaré com ho vaig fer.

S’utilitza una col·lecció mongodb per fer un seguiment de quants usuaris han visitat la meva pàgina i quantes vegades ha visitat cada visitant únic.

Com que ja hem parlat de configurar un mongoDB, no el tornaré a passar.

És possible que hàgiu d'afegir dues col·leccions a la vostra base de dades per poder compilar. Per fer-ho, podeu instal·lar RoboMongo si utilitzeu una interfície d’usuari, però si utilitzeu un raspberry pi sense cap com jo, us agradaran les següents ordres.

Petxina Mongo

Per editar un db, obtenir informació o crear una col·lecció, necessitareu el shell mongo en una unitat sense cap.

Correr

mongo

Això obrirà l'intèrpret d'ordres.

Afegiu una col·lecció

En el meu cas, la base de dades s’anomena loginapp, podeu anomenar-la com vulgueu.

utilitzeu nameofyourdb

Necessitem una col·lecció per contenir tota la nostra adreça IP dels usuaris que visiten el nostre lloc.

db.creatCollection ("ip")

A continuació, creem una col·lecció per comptar els èxits únics del nostre lloc. Això s’inicialitza amb un identificador i es compta a partir de 0.

db.createCollection ("count", {id: "hit counter", count: 0})

Feu un seguiment de les adreces IP

Per fer-ho, traurem els usuaris Ip quan visiten la nostra pàgina d'inici, augmentarem el nostre recompte i els guardarem per comparar-los més endavant.

Hem de crear alguns models per emmagatzemar els nostres esquemes de mangosta i afegir algun codi al nostre fitxer homepage.js.

Creem count.js i ip.js i els guardem a la nostra carpeta de models.

El fitxer ip.js és només un esquema per a la nostra adreça IP

var mangosta = require ('mangosta'); // gestor de paquets per a mongo

// Count Schema var IpSchema = mongoose. Schema ({ip: {type: String,}, count: {type: Number,}}); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

count.js serà cridat per la nostra pàgina d'inici per iniciar el seguiment de les visites. Això es fa de la manera següent.

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

Count.getCount (col·lecció, ipc, Public_ip, function (count) {

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

Això passa cada vegada que algú va a la nostra pàgina principal, en aquest cas theinternet.onthewifi.com/homepage.

Comprova la IP de l’usuari, ip4 o ip6, i després emmagatzema aquest valor allà on l’envia a count.get.collection, que és una funció emmagatzemada al nostre fitxer count.js.

Després de comprovar la singularitat de l'usuari, torna i publica el valor del recompte a la pàgina d'inici com a variable de manillar.

El fitxer count.js és el següent.

//count.jsvar mongo = require ('mongodb'); // admet la base de dades var mongoose = require ('mangosta'); // gestor de paquets per a mongo mongoose.connect ('mongodb: // localhost / loginapp'); var db = mangosta.connexió; var Ip = require ('../ models / ip'); // Count Schema var CountSchema = mangosta. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add una nova ip si no es troba a la base de dades i actualitzeu el comptador {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // afegiu una nova ip a database count.update (// actualitza el comptador de cops {id: "hit counter"}, {$ inc: {count: 1}})} else // actualitza el comptador d'IP específic, per veure qui visita més {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Això crea l'esquema de recompte i la nostra funció.getCount. La funció.getCount comprova la base de dades de la IP dels usuaris i, si la troba, la funció incrementa el recompte d'aquest usuari, no el comptador de peticions de fitxer. Tanmateix, si no es troba la ip dels usuaris, crearà un nou objecte de col·lecció amb la ip dels usuaris i augmentarà el comptador de peticions en 1.

Tot seguit, es torna i es mostra a la pàgina web.

Allà el teniu un comptador de seguiments d'IP.

Pas 6: bloc

Actualment intento desenvolupar un bloc centralitzat en els meus interessos sobre programari, cases intel·ligents i Polaroids. Així que vaig crear una secció de blocs. El bloc utilitza pàgines html estàtiques i el marc del manillar. Després d’haver estudiat millors tecnologies per facilitar els blocs, des de llavors he redissenyat el meu lloc web amb Hugo. Hugo és un generador html estàtic. En parlo més al tutorial esmentat a continuació.

Pas 7: finalitzat

Aquí teniu un tutorial en profunditat al meu lloc web node.js allotjat localment al meu raspberry pi. Si teniu preguntes o comentaris, deixeu-los a continuació.

Espero que això ajudi els altres.

Per obtenir una aproximació diferent a aquest lloc mitjançant hugo, un generador de pàgines web estàtiques vegeu el meu altre tutorial (properament).