Node.js Webblad Deel 2: 7 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:26

Welkom by DEEL 2 !!

Dit is deel 2 van my handleiding vir die toepassing van my Node.js -webwerf. Ek het hierdie tutoriaal in twee dele verdeel, aangesien dit die mense wat net 'n kort inleiding benodig, onderskei tussen diegene wat 'n volledige tutoriaal op 'n webblad wil hê.

Ek gaan deur my webwerf -skepping. Die uwe kan anders wees, dus volg myne en leer die gebruikte tegnieke. Sodra u 'n ander HTML -sjabloon gekies het, sal die vloei net effens anders wees. Hou dit in gedagte.

Stap 1: App -struktuur

My webwerf volg dus die snelopwekker, maar ek het stuur eerder as jade gebruik. As jy van jade hou, gaan daarvoor! Jade is 'n kort HTML sonder al die hakies en div's. As u nie verstaan dat u YouTube wil besoek en 'n paar HTML -tutoriale wil kyk nie.

Ek verkies en is gemakliker met HTML en stuur, so dit is wat ek gebruik het. Voer die express -opdrag uit om 'n ekspress -projek met stuur te skep.

express -hbs naam van myapp

Volg dan die stap in Deel 1 vir die installering van alle middelware.

Express skep 'n baie spesifieke appstruktuur en 'n baie nuttige een, die meeste node.js -toepassings volg hierdie vorm met 'n mate van variasie.

Op die aangehegte foto kan u verskillende vouers en lêers sien, hieronder probeer ek dit alles verduidelik.

asblik

Dit is die gids wat eers uitgevoer word wanneer node.js u bediener begin. Dit kyk na die www -lêer en volg hierdie lêer vir uitvoering. Die www -lêer vertel node.js om 'n bediener by poort 3000 te begin (dit kan omtrent alles verander) en ander dinge doen, soos gebeurtenisluisteraar en so meer. Die belangrikste ding is die poort waarin u app ingestel is.

node_modules

In hierdie vouer is wat middel-ware genoem word. Middle-ware verduidelik ek graag as ekstra sagteware om dinge makliker te maak vir u om te kodeer. Dit is basies ander biblioteke met vooraf funksies wat u kan gebruik. 'N Paar ekstra middels wat ek vir hierdie projek gebruik het, was Nodemailer, Passport, Nodemon, bycrypt en ander.

publiek

Dit is waar al u beelde, CSS en javascript vir u webwerf sou wees. Dit word direk deur die webblaaie gebruik.

roetes

Dit is roetes vir u webwerf. Soos 'n tuisblad, aanmeldbladsy en ander.

uitsig

Soos u kan sien, is die aansigte.hbs -lêers of.handlebars, maar dit werk net, dit verg net 'n bietjie manipulasie van die app.js -lêer. Dit is die html -bladsye van u stuur wat in die blaaier verskyn. Uitleg is u hoofuitleglêer en is soms in sy eie uitleg -submap. Die hoofuitleglêer roep u ander stuurstanglêers op en vertoon dit; dit sal meer sin maak as ons in die kode duik.

app.js

Dit is u hoof -app -lêer, soms word dit bediener genoem, hang net af van die opstelling. Hierdie lêer het al die konfigurasies vir die bediener en selfs 'n paar spesiale funksies. Dit sal ook 'n fouthanterer wees.

package.json

Hierdie lêer word deur express gemaak en vertel npm al die middelware wat u in u projek wil gebruik. Sodra u die installasie van npm uitgevoer het, word al die middelware wat in hierdie lêer uitgeroep is, in die gids node_modules geïnstalleer.

Stap 2: Stel u sjabloon op

U kan al u HTML van nuuts af skep, of u kan 'n sjabloon gebruik. Ek het 'n sjabloon vir hierdie webwerf gebruik. Ander webwerwe wat ek gehelp het om te ontwikkel, het ek van nuuts af gekodeer. Die keuse is u eie; hierdie stap verduidelik die sjabloonuitleg.

My webtoepassing gebruik 'n bootstrap -sjabloon wat uitstekend is om ongelooflike CSS te maak. Besoek hierdie webwerf om sjablone te vind. Soos voorheen in die vorige stap gesê, is al die nodige css-, js- en img -lêers onder die openbare gids. Hierdie lêers laat die webwerf beter lyk as gewone teks en hoe die beelde op die webwerf gebruik word.

Om die stuurstyl met 'n sjabloon te laat werk, word die bladsye in twee stukke verdeel. Die eerste is waarna verwys word as die 'uitleg'. Die uitleg is die eienskappe wat u op elke webwerf op u webwerf wil vertoon. In my geval is dit die koptekst met die navigasiebalk en die voettekst wat ekstra navigasie- en vertoonstukke bevat.

Die uitleglêer en ander stuurstanglêers is in die lêergids. Ek gaan 'n meer eenvoudige uitleg van die snelopwekker wat u vroeër gebruik het, om te sien hoe die konsep werk, en dan kan u my kode sien en dit vergelyk.

Express gegenereerde layout.handlebars lêer

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

Die ware magie van die stuur is in die stuur {{title}} en {{{body}}}. Hierdie twee tree dus anders op: {{title}} is 'n veranderlike wat op roetes van die index.js -lêer oorgedra word, sodra dit na die sjabloon oorgedra word. Die {{{body}}} - tag merk op wat ooit in die weergawefunksie in u route js -lêer genoem word. In ons geval het index.js hierdie reël:

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

Dit noem die 'indeks' -lêer van wat u ook al gebruik, jade, stuur, ensovoorts, so in ons geval index.handlebars.

Express gegenereerde indeks.stuur

{{titel}}

Welkom by {{title}}

Die index.handlebars -lêer word soos 'n veranderlike na die {{{body}}} - tag gestuur en op u webbladsy vertoon.

Hiermee kan u 'n statiese gedeelte van u webwerf en 'n veranderlike gedeelte hê. Dit maak kop- en voettekste aangenaam, want u hoef nie die hele bladsy weer te lewer nie; as u 'n nuwe bladsy laai, word slegs 'n paar inligting verander.

Stap 3: Kontakvorm

Ek het 'n kontakvorm op my webblad ingesluit sodat almal my e -pos met e -pos kan stuur, met vrae of kommentaar.

Hierdie kontakvorm het 'n npm-middelware gebruik wat Node Mailer genoem word.

Stel Node Mailer op

Om node-mailer te installeer, hoef u net die onderstaande kode in u lêer op die hoogste vlak uit te voer, in ons geval myapp.

sudo npm installeer nodemailer

Nadat u dit geïnstalleer het, moet u 'n paar dinge in u app.js -lêer opstel.

Die eerste is net die afhanklikheid; dit vertel die knoop dat ons van plan is om hierdie middelware te gebruik.

var nodemailer = require ('nodemailer');

Tweedens is ons vervoerder; die vervoerder word gebruik om met u e -posbediener te skakel, in my geval gmail.

// Vervoerder gebruik om 'n Gmail -rekening te kry

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'}})

As u nodemailer met 'n ander e -posbediener gebruik, kyk dan hier vir dokumentasie en hulp.

'N Paar dinge sal van persoon tot persoon verander: gebruiker, clientId, clientSecret. refreshToken en accessToken.

U userId is die e -pos waarin u wil gebruik; ek het 'n nuwe een gemaak met dieselfde naam as my webwerf.

Die clientId, clientSecret, refreshToken en accessToken moet deur u Google -rekening gevind word.

As u meer hulp nodig het, kan u hierdie video hier volg.

Sodra al die velde ingevul is, sal ons ons boodskapbesonderhede byvoeg.

Vervolgens moet ons bevestig dat alle velde in ons vorm ingevoer is en geldige antwoorde is.

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

Ons moet nou inligting kry van ons kontakvorm op ons webblad en 'n boodskap stuur.

// Plaas vanaf die knoppie stuur kontak, moet 'n tuisblad met 'n suksesboodskap vir ingediende vorms.post ('/contact_Form', funksie (vereiste, res) skep) {// Kry inligting uit die kontakvorm, vanaf homepage.hbs var naam = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// skep inligting wat gebruik word by die stuur van 'n boodskap van: ' Outomatiese e -pos ', na:' [email protected] ', onderwerp:' Webwerf kontakvorm: ' + naam, teks:' U het 'n nuwe boodskap van u webwerf se kontakvorm ontvang. / N / n ' +' Hier is die besonderhede: / n / n Naam: ' + naam +' / n / nE -pos: ' + e -pos +' / n / nTelefoon: ' + telefoon +' / n / nBoodskap: / n ' + boodskap} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render nuwe tuisblad, kyk hoe u dit kan doen met 'n suksesboodskap, soos afmeldbladsy})

Flits

Flash word gebruik om boodskappe te wys nadat aksies uitgevoer is. U kan dit sien as u 'n vorm indien, of as u nie die veld korrek invoer nie.

Installeer flits net soos ander npm middelware.

sudo npm installeer connect-flash

var flash = require ('connect-flash'); // het flitsfunksies gehad om boodskappe op die skerm te wys

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

Aktiveer flits wat boodskappe op die webblad stoot en opdateer. Dit is die boodskappe wat sê dat dinge soos sukses of inligting verkeerd ingevoer is.

// Global Vars

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

Sommige benodig veranderlikes wat verband hou met flits.

Daar is 'n gemaakte kontakvorm.

Stap 4: Aanmeldbladsy

Dit was net iets wat ek wou sien of ek kon doen, en miskien sal ek dit in die toekoms gebruik. Ek wou net die kode verduidelik soos dit in my git -bewaarplek is.

Hierdie gedeelte gebruik dus nog 'n paar npm middelware. Installeer die volgende met behulp van die opdragte hieronder.

npm installeer paspoort && npm installeer paspoort-plaaslik && npm installeer bcryptjs

Met die && kan u verskeie opdragte met een reël uitvoer.

Teken in en gebruikers

U sal 'n login.js- en user.js -lêer onder u gids moet skep. Dit sal gebruik word om 'n gebruiker te skep wat in ons databasis gestoor word, en om die gebruiker aan te meld deur die databasis na te gaan.

user.js

var express = require ('express'); var router = express. Router (); var paspoort = vereis ('paspoort'); var LocalStrategy = vereis ('paspoort-lokaal'). Strategie; var gebruiker = vereis ('../ models/user'); // Register router.get ('/register', function (req, res) {res.render ('register');}); // Registreer gebruiker router.post ('/register', funksie (req, res) {var name = req.body.name; var email = req.body.email; var gebruikersnaam = req.body.username; var wagwoord = req.body.password; var password2 = req.body.password2; // Validation req.checkBody ('naam', 'Naam is nodig'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('email', 'Email is not valid'). isEmail (); req.checkBody ('username', 'Username is required'). notEmpty (); req.checkBody (' password ',' Password is required '). notEmpty (); req.checkBody (' password2 ',' Passwords do not match '). equals (req.body.password); var errors = req.validationErrors (); if (foute) {res.render ('registreer', {foute: foute});} anders {var newUser = nuwe gebruiker ({naam: naam, e -pos: e -pos, gebruikersnaam: gebruikersnaam, wagwoord: wagwoord}); User.createUser (newUser, function (err, user) {if (err) gooi err; console.log (gebruiker);}); req.flash ('success_msg', 'You are registered and can now login'); res.redirect (' /teken aan'); } });

Breek hierdie stuk stuk vir stuk af

Eerstens bevat ons al die nodige middelware, dan bevat ons ons modellêer wat hieronder uiteengesit word. Ons loop van die register -etiket af en vertoon ons registerstuurtekst. Dan kom die belangrike funksie. Hiermee kan ons 'n nuwe gebruiker in ons databasis registreer. Die funksie kontroleer om seker te maak dat alle velde geldig is en in die vorm ingesluit is, indien nie, sal dit gevra word. Vervolgens kyk dit na foute, en as daar geen foute voorkom nie, skep dit 'n nuwe gebruiker met die gegewe inligting. Dit gaan dan na die aanmeldbladsy, sodat u kan aanmeld.

login.js

var express = require ('express');

var router = express. Router (); var paspoort = vereiste ('paspoort'); var LocalStrategy = vereis ('paspoort-lokaal'). Strategie; var gebruiker = vereis ('../ models/user'); /* KRY gebruikerslys. */// Tuisblad router.get ('/', funksie (vereiste, res) {res.render ('login');}); paspoort.gebruik (nuwe LocalStrategy (funksie (gebruikersnaam, wagwoord, klaar)) {User.getUserByUsername (gebruikersnaam, funksie (err, gebruiker) {as (err) gooi err; as (! gebruiker) {return done (null, false, { boodskap: 'Onbekende gebruiker'});} User.comparePassword (wagwoord, user.password, funksie (err, isMatch) {if (err) gooi err; if (isMatch) {return done (null, user);} else { terug gestuur (nul, vals, {boodskap: 'ongeldige wagwoord'});}});});})); paspoort.serializeUser (funksie (gebruiker, klaar) {gedoen (nul, user.id);}); paspoort.deserializeUser (funksie (id, klaar) {User.getUserById (id, funksie (fout, gebruiker) {gedoen (fout, gebruiker);});}); router.post ('/login', passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/login', failureFlash: true}), function (req, res) {res.redirect ('/ paneelbord ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You are logged'); res.redirect ('/homepage');});

module.exports = router;

Eerstens bevat ons al die nodige middelware, dan bevat ons ons modellêer wat hieronder uiteengesit word. Ons loop van die aanmeldplaatjie af en vertoon ons aanmeldstuurtekst. Ons gebruik dan 'n paar paspoortfunksies om die ingevoerde gebruikersnaam en wagwoord op te neem en dit teen ons databasis te kontroleer. Ons sal ook 'n geïnkripteer wagwoord gebruik wat die aanmelding 'n bietjie stadig op 'n framboos pi kan maak. Ek verduidelik dit meer hierna. Nadat u die gebruikersnaam en wagwoord bekragtig het, word u herlei na die tuisblad wat die paneelbord sal wys terwyl ons dit in ons indekslêer opgestel het. Ons voeg ook hier die moontlikheid by om af te meld.

Soos ek vroeër genoem het, sal ons ook 'n model moet opstel om na die databasis te kyk.

Dit word gedoen deur 'n gids te skep onder die hooftoepassingsmap, genaamd modelle. In hierdie gids is 'n user.js -lêer ook nodig.

model/user.js

var mangoose = vereis ('mangoos');

var bcrypt = require ('bcryptjs'); // Gebruikerskema var UserSchema = mongoose. Schema ({gebruikersnaam: {type: String, index: true}, wagwoord: {type: String}, e -pos: {type: String}, naam: {type: String}}); var User = module.exports = mongoose.model ('User', UserSchema);

module.exports.createUser = funksie (newUser, terugbel) {

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = funksie (gebruikersnaam, terugbel) {var query = {gebruikersnaam: gebruikersnaam}; User.findOne (navraag, terugbel); } module.exports.getUserById = funksie (id, terugbel) {User.findById (id, terugbel); } module.exports.comparePassword = funksie (kandidaatPasswoord, hash, terugbel) {bcrypt.compare (kandidaatPasswoord, hash, funksie (err, isMatch) {as (fout) gooi fout; terugbel (null, isMatch);}); }

Hierdie model gee 'n uiteensetting van hoe ons gebruikersparameters sal lyk, asook hoe ons toegang daartoe sal kry. Ek het vroeër genoem dat ons ons wagwoorde sal enkripteer. dit is sodat niemand se wagwoord in die databasis gestoor word in geval van 'n oortreding nie. Die wagwoorde word ge-hash met behulp van middel-ware bcrypt.

Stap 5: Verkeersteller

Ek wou sien hoeveel unieke gebruikers my webblad besoek het en die aantal "treffers" tel. Daar is baie maniere om dit te doen; ek sal verduidelik hoe ek te werk gegaan het.

Dit gebruik 'n mongodb -versameling om op te spoor hoeveel gebruikers my bladsy besoek het en hoeveel keer elke unieke besoeker besoek het.

Aangesien ons reeds gepraat het oor die oprigting van 'n mongoDB, sal ek dit nie weer deurgaan nie.

Miskien moet u twee versamelings by u databasis voeg om dit op te stel. Om dit te kan doen, kan u RoboMongo óf installeer as u 'n UI gebruik, maar as u 'n koplose framboos pi soos I am gebruik, sal u die volgende opdragte geniet.

Mongo -dop

Om 'n db te wysig, inligting te kry of 'n versameling te maak, benodig u die mongo -dop op 'n koplose eenheid.

Hardloop

mongo

Dit sal die dop oopmaak.

Voeg 'n versameling by

In my geval word die databasis loginapp genoem, u kan dit noem wat u wil.

gebruik nameofyourdb

Ons benodig 'n versameling om al ons ip -adres van die gebruikers wat ons webwerf besoek, te hou.

db.creatCollection ("ip")

Vervolgens skep ons 'n versameling om die unieke treffers op ons webwerf te tel. Dit word geïnisialiseer met 'n ID en telling wat begin by 0.

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

Volg IP -adresse

Om dit te kan doen, trek ons die gebruikers se IP aan as hulle ons tuisblad besoek, ons telling verhoog en dit stoor om dit later te vergelyk.

Ons moet 'n paar modelle skep om ons mangoose -skemas te stoor en kode by ons tuisblad.js -lêer te voeg.

Ons skep count.js en ip.js en stoor dit in ons modelle -lêergids.

Die ip.js -lêer is slegs 'n skema vir ons ip -adres

var mangoose = vereis ('mangoos'); // pakket hanteerder vir mongo

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

count.js sal deur ons tuisblad gebel word om die opsporing van treffers te begin. Dit word gedoen soos hieronder.

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

Count.getCount (versameling, ipc, Public_ip, function (count) {

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

Dit gebeur elke keer as iemand na ons tuisblad gaan, in hierdie geval theinternet.onthewifi.com/homepage.

Dit kontroleer die IP van die gebruiker, ip4 of ip6, en stoor dan die waarde waarheen dit dit na count.get.collection stuur, wat 'n funksie is wat in ons count.js -lêer gestoor is.

Nadat hy die uniekheid van die gebruiker nagegaan het, word die telwaarde teruggestuur en na die tuisblad geplaas as 'n stuurvariabele.

Die count.js -lêer is soos volg.

//count.jsvar mongo = require ('mongodb'); // ondersteun databasis var mongoose = require ('mangoose'); // pakket hanteerder vir mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mangoose.verbinding; var Ip = vereiste ('../ 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 = function (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add 'n nuwe ip as dit nie in die databasis is nie, en werk teller op {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // voeg nuwe ip by databasis count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // update spesifieke ip counter, om te sien wie die meeste {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}}); }

Dit skep die telskema en ons.getCount -funksie. Die.getCount -funksie kontroleer die DB vir die gebruikers -ip en as dit dit vind, verhoog die funksie die telling van die gebruiker, nie die trefteller nie. As die gebruikers -ip egter nie gevind word nie, skep dit 'n nuwe versamelingsobjek met die gebruikers -ip en verhoog die trefteller met 1.

Dit word dan teruggestuur en op die webblad vertoon.

Daar het u dit 'n ip tracking hit counter.

Stap 6: Blog

Ek probeer tans 'n blog ontwikkel wat gesentreer is oor my belangstellings oor sagteware, slimhuise en Polaroids. Ek het dus 'n blogafdeling geskep. Die blog gebruik statiese html -bladsye en die stuurraamwerk. Nadat ek na beter tegnologie gekyk het om blog te vergemaklik, het ek sedertdien my webwerf herontwerp met behulp van hugo. Hugo is 'n statiese html -kragopwekker. Ek praat meer hieroor in die onderstaande handleiding.

Stap 7: klaar

Daar gaan u 'n diepgaande tutoriaal op my node.js -webwerf wat plaaslik op my framboospi aangebied word. As u vrae of kommentaar het, laat dit dan hieronder.

Ek hoop dit help ander daar buite.

Sien my ander tutoriaal (binnekort) vir 'n ander benadering tot hierdie webwerf met behulp van hugo, 'n statiese webbladopwekker.