Pagina web Node.js Partea 2: 7 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:44

Bine ați venit la PARTEA 2 !!

Aceasta este partea 2 a tutorialului meu pentru aplicația site-ului web Node.js. Am împărțit acest tutorial în două părți, deoarece îi separă pe cei care au nevoie doar de o scurtă introducere și pe cei care doresc un tutorial complet pe o pagină web.

Voi trece prin crearea site-ului meu. A ta poate fi diferită, așa că urmează-o pe a mea și învață tehnicile folosite. După ce alegeți un șablon HTML diferit, fluxul va fi ușor diferit. Rețineți acest lucru.

Pasul 1: Structura aplicației

Deci site-ul meu urmărește generatorul expres, totuși am folosit ghidon în loc de jad. Dacă îți place jadul, mergi pe el! Jade este HTML cu mână scurtă, fără toate parantezele și div-urile. Dacă nu înțelegeți că s-ar putea să doriți să vizitați YouTube și să urmăriți câteva tutoriale HTML.

Prefer și sunt mai confortabil cu HTML și ghidon, așa că asta am folosit. Pentru a crea un proiect expres cu ghidon executați comanda express.

exprimați --hbs numele meuapp

Apoi continuați să urmați pasul din partea 1 pentru instalarea tuturor produselor de mijloc.

Express creează o structură de aplicație foarte specifică și una foarte utilă, majoritatea aplicațiilor node.js urmând acest formular cu unele variații.

În fotografia atașată puteți vedea diferite foldere și fișiere, mai jos încerc să explic toate acestea.

cos

Acesta este folderul care se execută mai întâi când node.js pornește serverul. Se uită la fișierul www și urmează acest fișier pentru executare. Fișierul www spune node.js să pornească un server la portul 3000 (acest lucru se poate schimba la aproape orice) și să facă alte lucruri, cum ar fi ascultătorul de evenimente și altele. Principalul lucru important este portul în care este configurată aplicația.

nod_module

În acest folder se află ceea ce se numește middle-ware. Middle-ware Îmi place să explic ca software suplimentar pentru a vă facilita codificarea lucrurilor. Sunt practic alte biblioteci cu funcții pre-realizate pentru a le putea folosi. Unele middleware suplimentare pe care le-am folosit pentru acest proiect au fost Nodemailer, Passport, Nodemon, bycrypt și altele.

public

Aici ar merge toate imaginile dvs., CSS și javascript pentru site-ul dvs. web. Acestea sunt utilizate direct de paginile web.

rute

Acestea sunt rute definite pentru site-ul dvs. Cum ar fi o pagină de pornire, o pagină de conectare și altele.

vederi

După cum puteți vedea, vizualizările sunt fișiere.hbs sau.handlebars, fie va funcționa, este nevoie doar de o manipulare a fișierului app.js. Acestea sunt paginile html ale ghidonului dvs. care vor fi afișate în browser. Aspectul este fișierul dvs. principal de aspect și, uneori, se află în propriul subdirector de aspect. Fișierul principal de aspect apelează celelalte fișiere de ghidon și le afișează, acest lucru va avea mai mult sens atunci când ne aruncăm în cod.

app.js

Acesta este fișierul dvs. principal de aplicație, uneori acesta se numește server, depinde doar de configurare. Acest fișier are toate configurațiile pentru server și chiar unele funcții speciale. De asemenea, va fi un instrument de gestionare a erorilor.

pachet.json

Acest fișier este creat prin expres și îi spune lui npm toate middleware-urile pe care doriți să le utilizați în proiect. După ce executați instalarea npm, toate produsele intermediare apelate în acest fișier vor fi instalate în folderul node_modules.

Pasul 2: Asigurați-vă șablonul

Puteți crea tot HTML-ul dvs. de la zero sau puteți utiliza un șablon. Am folosit un șablon pentru acest site. Alte site-uri pe care le-am ajutat să le dezvolt am codificat de la zero. Alegerea este a ta, acest pas explică aspectul șablonului.

Aplicația mea web folosește un șablon bootstrap, care este excelent pentru a crea CSS uimitor. Pentru a găsi șabloane vizitați acest site. Așa cum s-a menționat anterior în pasul anterior, toate fișierele css, js și img necesare sunt în folderul public. Aceste fișiere fac site-ul să arate mai bine decât textul simplu și modul în care sunt utilizate imaginile pe site.

Pentru a face ca stilul de șablonare a ghidonului să funcționeze cu un șablon Paginile sunt împărțite în două bucăți. Primul este ceea ce este denumit „layout”. Aspectul este proprietățile pe care ați dori să fie afișate pe fiecare pagină web de pe site-ul dvs. În cazul meu, acesta este antetul, care are bara de navigare, și subsolul, care conține piese suplimentare de navigare și afișare.

Fișierul de aspect și alte fișiere de ghidon se află în folderul de vizualizări. Voi trece peste un aspect mai simplu din generatorul expres pe care l-ați folosit mai devreme pentru a afișa cum funcționează conceptul, apoi puteți vedea codul meu și le puteți compara.

Fișier generat expres layout.handlebars

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

Adevărata magie a ghidonului se află în ghidon {{title}} și {{{body}}}. Deci, aceste două acționează diferit {{title}} este o variabilă care este transmisă din fișierul index.js în rute, odată trecut la șablon este afișat. Eticheta {{{body}}} preia ceea ce se numește vreodată în funcția de redare din fișierul dvs. route js. În cazul nostru index.js are această linie:

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

Aceasta numește fișierul „index” al motorului pe care îl folosești vreodată, jad, ghidon și așa mai departe, deci în cazul nostru index.handlebars.

Expres generat index.handlebars

{{titlu}}

Bun venit la {{title}}

Fișierul index.handlebars este transmis ca o variabilă etichetei {{{body}}} și afișat pe pagina dvs. web.

Acest lucru vă permite să aveți o porțiune statică a site-ului dvs. web și o porțiune variabilă. Acest lucru face ca anteturile și subsolurile să fie plăcute, deoarece nu trebuie să redați întreaga pagină, atunci când încărcați o pagină nouă, doar unele informații sunt modificate.

Pasul 3: Formular de contact

Am încorporat un formular de contact în pagina mea web, astfel încât oricine să poată trimite prin e-mail site-ului meu, cu întrebări sau comentarii.

Acest formular de contact a folosit un middleware npm care se numește Node Mailer.

Configurarea Node Mailer

Pentru a instala node-mailer trebuie doar să rulați codul de mai jos în fișierul dvs. de nivel superior, în cazul nostru, myapp.

sudo npm instala nodemailer

Odată instalat, va trebui să configurați câteva lucruri în fișierul app.js.

Primul este doar dependența, aceasta spune nodului că intenționăm să folosim acest middleware.

var nodemailer = require ('nodemailer');

Al doilea este transportorul nostru, transportorul este folosit pentru a vă conecta la serverul dvs. de e-mail, în cazul meu Gmail.

// Transporter folosit pentru a obține un cont 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'}})

dacă utilizați nodemailer cu un alt server de e-mail, vă rugăm să căutați aici pentru documentație și ajutor.

Câteva lucruri se vor schimba de la persoană la persoană: utilizator, clientId, clientSecret. refreshToken și accessToken.

ID-ul dvs. de utilizator este adresa de e-mail în care doriți să utilizați, am creat unul nou numit la fel ca site-ul meu.

ClientId, clientSecret, refreshToken și accessToken trebuie să fie găsite prin contul dvs. Google.

Dacă aveți nevoie de mai mult ajutor, puteți urmări acest videoclip aici.

Odată completate toate aceste câmpuri, vom adăuga detaliile mesajului nostru.

În continuare trebuie să validăm că toate câmpurile din formularul nostru au fost introduse și sunt răspunsuri valide.

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

Acum trebuie să obținem informații din formularul nostru de contact de pe pagina noastră web și să trimitem un mesaj.

// Butonul Postare de la trimiterea contactului, trebuie să creați o pagină de pornire cu un mesaj de succes pentru formularele trimise = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// creează informații utilizate la trimiterea unui mesaj de la: ' E-mail automat ', către:' [email protected] ', subiect:' Formular de contact pentru site-ul web: '+ nume, text:' Ați primit un mesaj nou de la formularul de contact al site-ului dvs. web. / N / n '+' Aici sunt detaliile: / n / nNume: '+ nume +' / n / nEmail: '+ e-mail +' / n / nTelefon: '+ telefon +' / n / nMesaj: / n '+ mesaj} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render pagină de pornire nouă, căutați cum să faceți acest lucru cu un mesaj de succes, cum ar fi pagina de deconectare})

Flash

Flash-ul este folosit pentru a afișa mesajele după efectuarea acțiunilor. Puteți vedea acest lucru când trimiteți un formular sau nu introduceți un câmp corect.

Instalați flash la fel ca alte middleware npm.

sudo npm instalați conectarea-flash

var flash = require ('conectare-bliț'); // avea funcționalitate flash pentru a afișa pe ecran mesajele

// Conectați Flashapp.use (flash ());

Activați blițul care împinge și actualizează mesajele de pe pagina web. Acestea sunt mesajele care spun lucruri precum succesul sau informațiile au fost introduse incorect.

// Global Vars

app.use (funcție (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash („eroare”); res.locals.user = req.user || null; next ();});

Unii au nevoie de variabile asociate cu blițul.

Iată un formular de contact.

Pasul 4: Pagina de autentificare

Acesta a fost doar ceva ce am vrut să văd dacă aș putea face și poate îl voi folosi în viitor. Am vrut doar să explic codul așa cum se află în depozitul meu git.

Deci, această porțiune folosește încă câteva middleware-uri npm. Instalați următoarele folosind comenzile de mai jos.

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

&& vă permite să rulați mai multe comenzi cu o singură linie.

Autentificare și utilizatori

Va trebui să creați un fișier login.js și user.js sub folderul rutelor. Aceasta va fi utilizată pentru a permite crearea unui utilizator, care va fi stocat în baza noastră de date și pentru a permite utilizatorului să se conecteze verificând baza de date.

user.js

var express = require ('express'); var router = express. Router (); var pașaport = require ('pașaport'); var LocalStrategy = require ('pașaport-local'). Strategie; var Utilizator = require ('../ modele / utilizator'); // Înregistrează router.get ('/ register', function (req, res) {res.render ('register');}); // Înregistrați-vă utilizatorul router.post ('/ register', funcție (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; // Validare req.checkBody („nume”, „Nume este necesar”). notEmpty (); req.checkBody („e-mail”, „E-mail este necesar”).notEmpty (); req.checkBody („e-mail”, „E-mailul nu este valid”). isEmail (); req.checkBody („nume de utilizator”, „Numele de utilizator este necesar”). notEmpty (); req.checkBody („ parola ',' Parola este necesară '). notEmpty (); req.checkBody (' parola2 ',' Parolele nu se potrivesc '). egal (req.body.password); var errors = req.validationErrors (); if (erori) {res.render ('register', {errors: errors});} else {var newUser = utilizator nou ({nume: nume, e-mail: e-mail, nume de utilizator: nume de utilizator, parolă: parolă}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Sunteți înregistrat și vă puteți autentifica acum'); res.redirect (' /Autentificare'); } });

Distrugerea asta bucată cu bucată

Mai întâi includem toate produsele de mijloc necesare, apoi includem fișierul model care este explicat mai jos. Trecem de la eticheta de înregistrare și afișăm textul ghidonului de înregistrare. Apoi vine funcția importantă. Acestea ne permit să înregistrăm un nou utilizator în baza noastră de date. Funcția verifică pentru a vă asigura că toate câmpurile sunt valide și sunt incluse în formular, dacă nu, va solicita pentru acestea. Apoi verifică dacă există erori și, dacă nu apar erori, creează un nou utilizator cu informațiile date. Apoi redirecționează către pagina de autentificare, permițându-vă să vă autentificați.

login.js

var express = require ('express');

var router = express. Router (); var pașaport = require ('pașaport'); var LocalStrategy = require ('pașaport-local'). Strategie; var Utilizator = require ('../ models / user'); / * GET listarea utilizatorilor. * / // Pagina principală router.get ('/', funcție (req, res) {res.render ('login');}); passport.use (LocalStrategy nouă (funcție (nume de utilizator, parolă, terminat)) {User.getUserByUsername (nume de utilizator, funcție (err, user) {if (err) aruncă err; if (! user) {return done (nul, false, { mesaj: „Utilizator necunoscut”});} User.comparePassword (parolă, user.password, funcție (err, isMatch) {if (err) aruncă error; if (isMatch) {return done (nul, user);} else { returnare efectuată (nul, fals, {mesaj: 'Parolă nevalidă'});}});});})); passport.serializeUser (funcție (user, done) {done (nul, user.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}), funcție (req, res) {res.redirect ('/ tablou de bord ');}); router.get ('/ logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Te-ai deconectat'); res.redirect ('/ homepage');});

module.exports = router;

Mai întâi includem toate produsele de mijloc necesare, apoi includem fișierul model care este explicat mai jos. Trecem de la eticheta de conectare și afișăm textul ghidonului de conectare. Apoi folosim câteva funcții de pașaport pentru a prelua numele de utilizator și parola introduse și pentru a le verifica în baza noastră de date. Vom folosi, de asemenea, o parolă criptată, care poate face conectarea un pic lentă pe un raspberry pi. Vă explic mai departe acest lucru mai departe. După validarea numelui de utilizator și a parolei, sunteți redirecționat către pagina de pornire, care va afișa tabloul de bord în timp ce configurăm acest lucru în fișierul nostru index. De asemenea, adăugăm aici posibilitatea de a vă deconecta.

Așa cum am menționat anterior, va trebui, de asemenea, să creăm un model pentru a verifica baza de date.

Acest lucru se realizează prin crearea unui folder sub folderul principal al aplicației numit modele. În acest dosar este necesar și un fișier user.js.

model / user.js

var mongoose = require ('mongoose');

var bcrypt = require ('bcryptjs'); // Schema utilizatorului var UserSchema = mongoose. Schema ({nume utilizator: {tip: Șir, index: adevărat}, parolă: {tip: Șir}, e-mail: {tip: Șir}, nume: {tip: Șir}}); var Utilizator = module.exports = mongoose.model („Utilizator”, UserSchema);

module.exports.createUser = funcție (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 = funcție (nume de utilizator, apel invers) {var interogare = {nume de utilizator: nume de utilizator}; User.findOne (interogare, apel invers); } module.exports.getUserById = funcție (id, callback) {User.findById (id, callback); } module.exports.comparePassword = function (candidatePassword, hash, callback) {bcrypt.compare (candidatePassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Acest model prezintă cum vor arăta parametrii noștri de utilizator, precum și modul în care îi vom accesa. Am menționat anterior că ne vom cripta parolele. aceasta pentru ca parola nimănui să nu fie stocată în baza de date în caz de încălcare. Parolele sunt hash folosind middle-ware bcrypt.

Pasul 5: Contor de trafic

Am vrut să văd câți utilizatori unici au vizitat pagina mea web și să număr numărul de „accesări”. Există multe modalități de a face acest lucru, voi explica cum am procedat.

Aceasta folosește o colecție mongodb pentru a urmări câți utilizatori au vizitat pagina mea și de câte ori a vizitat fiecare vizitator unic.

Deoarece am vorbit deja despre configurarea unui mongoDB, nu voi mai trece prin el.

Poate fi necesar să adăugați două colecții la baza de date pentru a compila. Pentru a face acest lucru, puteți instala RoboMongo dacă utilizați o interfață de utilizare, cu toate acestea, dacă utilizați un pi zmeură fără cap, așa cum sunt, vă veți distra următoarele comenzi.

Mongo shell

Pentru a edita un db, pentru a obține informații sau pentru a crea o colecție, veți avea nevoie de mongo shell pe o unitate fără cap.

Alerga

mongo

Aceasta va deschide shell-ul.

Adăugați o colecție

În cazul meu, baza de date se numește loginapp, o puteți numi oricum doriți.

folosiți nameofyourdb

Avem nevoie de o colecție pentru a păstra toate adresele noastre IP ale utilizatorilor care vizitează site-ul nostru.

db.creatCollection („ip”)

Apoi creăm o colecție pentru a număra accesările unice pe site-ul nostru. Aceasta este inițializată cu un id și se începe de la 0.

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

Urmăriți adresele IP

Pentru a face acest lucru, vom trage utilizatorii Ip atunci când vizitează pagina noastră de pornire, vom crește numărul și le vom stoca pentru a le compara mai târziu.

Trebuie să creăm câteva modele pentru a stoca schemele noastre de mangustă și să adăugăm un cod în fișierul nostru homepage.js.

Creăm count.js și ip.js și le stocăm în folderul modelelor noastre.

Fișierul ip.js este doar o schemă pentru adresa noastră IP

var mongoose = require ('mongoose'); // manipulator de pachete pentru mongo

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

count.js va fi apelat de pagina noastră de pornire pentru a iniția urmărirea accesului. Acest lucru se face la fel ca mai jos.

//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 (colecție, ipc, Public_ip, funcție (count) {

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

Acest lucru se întâmplă de fiecare dată când cineva merge la pagina noastră de pornire, în acest caz theinternet.onthewifi.com/homepage.

Verifică adresa IP a utilizatorului, ip4 sau ip6, apoi stochează acea valoare unde o trimite la count.get.collection care este o funcție stocată în fișierul nostru count.js.

După verificarea unicității utilizatorului, acesta returnează și postează valoarea contorului pe pagina principală ca o variabilă de ghidon.

Fișierul count.js este după cum urmează.

//count.jsvar mongo = require ('mongodb'); // acceptă baza de date var mongoose = require ('mongoose'); // handler de pachete pentru mongo mongoose.connect ('mongodb: // localhost / loginapp'); var db = mongoose.connection; var Ip = require ('../ models / ip'); // Count Schema var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = funcție (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add un IP nou dacă nu este în baza de date și contorul de actualizare {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // add new ip to database count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // update specific IP counter, pentru a vedea cine vizitează cel mai mult {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Aceasta creează schema de numărare și funcția noastră.getCount. Funcția.getCount verifică DB pentru ip-ul utilizatorilor și, dacă îl găsește, funcția mărește numărul utilizatorului respectiv, nu contorul de accesări. Totuși, dacă ip-ul utilizatorului nu este găsit, acesta va crea un nou obiect de colecție cu ip-ul utilizatorilor și va crește contorul de hit-uri cu 1.

Aceasta este apoi returnată și afișată pe pagina web.

Acolo aveți un contor de urmărire IP.

Pasul 6: Blog

În prezent, încerc să dezvolt un blog centralizat pe interesele mele despre software, case inteligente și Polaroids. Așa că am creat o secțiune de blog. Blogul folosește pagini HTML statice și cadrul de ghidare. După ce am analizat tehnologii mai bune pentru a face blogging-ul mai ușor, de atunci mi-am reproiectat site-ul web folosind Hugo. Hugo este un generator de html static. Vorbesc mai multe despre acest lucru în tutorialul menționat mai jos.

Pasul 7: Finalizat

Ai un tutorial detaliat pe site-ul meu node.js găzduit local pe raspberry pi. Dacă aveți întrebări sau comentarii, vă rugăm să le lăsați mai jos.

Sper că acest lucru îi ajută și pe alții.

Pentru o abordare diferită a acestui site folosind hugo, un generator de pagini web static consultați celălalt tutorial (în curând).