Node.js webside Del 2: 7 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

Velkommen til DEL 2 !!

Dette er del 2 til min Node.js webstedsprogram tutorial. Jeg delte denne tutorial op i to dele, da den adskiller dem, der bare har brug for en kort introduktion, og dem, der ønsker en komplet tutorial på en webside.

Jeg vil gennemgå mit websted oprettelse. Din kan være anderledes, så følg min og lær de anvendte teknikker. Når du vælger en anden HTML -skabelon, vil strømmen bare være lidt anderledes. Husk dette.

Trin 1: App Struktur

Så mit websted følger ekspressgeneratoren, men jeg brugte styr i stedet for jade. Hvis du kan lide jade, gå efter det! Jade er HTML med kort hånd uden alle parenteser og div'er. Hvis du ikke forstår, at du måske vil besøge youtube og se nogle HTML -øvelser.

Jeg foretrækker og er mere komfortabel med HTML og styr, så det er det, jeg brugte. For at oprette et ekspresprojekt med styr, skal du køre kommandoen express.

express --hbs navn på min app

Fortsæt derefter med at følge trinnet i del 1 for installation af alt mellemlager.

Express skaber en meget specifik appstruktur og en meget nyttig en de fleste node.js -applikationer følger denne form med en vis variation.

På det vedhæftede foto kan du se forskellige mapper og filer, herunder prøver jeg at forklare alt dette.

beholder

Dette er den mappe, der køres først, når node.js starter din server. Det ser til www -filen og følger denne fil til udførelse. Www -filen fortæller node.js at starte en server på port 3000 (dette kan ændre sig til næsten alt) og gøre nogle andre ting såsom begivenhedslytter og sådan. Det vigtigste er den port, som din app er konfigureret på.

node_modules

I denne mappe er det, der kaldes middle-ware. Middle-ware forklarer jeg gerne som ekstra software for at gøre tingene lettere for dig at kode. De er dybest set andre biblioteker med funktioner, der er forhåndsfremstillede, så du kan bruge dem. Nogle yderligere mellemprodukter jeg brugte til dette projekt var Nodemailer, Passport, Nodemon, bycrypt og andre.

offentlig

Det er her, alle dine billeder, CSS og javascript til dit websted ville gå. Disse bruges direkte af websiderne.

ruter

Disse er ruter for dit websted. Såsom en hjemmeside, login -side og andre.

visninger

Som du kan se, er visningerne.hbs -filer eller.handlebars, enten vil det virke, det kræver bare en vis manipulation af app.js -filen. Dette er dine HTML -sider på styret, der vises i browseren. Layout er din hovedlayoutfil og er undertiden i sin egen layoutundermappe. Hovedlayoutfilen kalder til dine andre styrfiler og viser dem, dette vil give mere mening, når vi dykker ned i koden.

app.js

Dette er din primære app -fil, nogle gange kaldes dette server, afhænger bare af opsætningen. Denne fil har hele konfigurationen til serveren og endda nogle særlige funktioner. Det vil også være en fejlbehandler.

package.json

Denne fil er oprettet af express og fortæller npm al den middleware, du vil bruge i dit projekt. Når du kører npm-installation, installeres alt det midterste ware, der kaldes i denne fil, i mappen node_modules.

Trin 2: Layout din skabelon

Du kan oprette hele din HTML fra bunden, eller du kan bruge en skabelon. Jeg har brugt en skabelon til dette websted. Andre websteder, jeg har hjulpet med at udvikle, har jeg kodet fra bunden. Valget er dit, dette trin forklarer skabelonlayoutet.

Min webapplikation bruger en bootstrap -skabelon, som er fantastisk til at lave fantastisk CSS. Besøg dette websted for at finde skabeloner. Som nævnt før i det foregående trin er alle de nødvendige css-, js- og img -filer under den offentlige mappe. Disse filer får sit websted til at se bedre ud end almindelig tekst, og hvordan billeder bruges på webstedet.

For at få styret til at fungere med en skabelonstil fungerer siderne med en skabelon Siderne er delt i to stykker. Det første er det, der omtales som "layout". Layoutet er de egenskaber, du gerne vil have vist på hver webside på dit websted. I mit tilfælde er dette overskriften, der har navigationslinjen, og sidefoden, som indeholder ekstra navigations- og displaystykker.

Layoutfilen og andre styrfiler findes i mappen visninger. Jeg vil gå over et mere simpelt layout fra ekspressgeneratoren, du brugte tidligere for at vise, hvordan konceptet fungerer, så kan du se min kode og sammenligne dem.

Express -genereret layout.handlebars -fil

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

Den sande styremagi er i styret {{title}} og {{{body}}}. Så disse to handler forskelligt {{title}} er en variabel, der sendes fra index.js -filen på ruter, når den er sendt til den skabelon, den vises. Tagget {{{body}}} tager det, der nogensinde kaldes i gengivelsesfunktionen i din route js -fil. I vores tilfælde har index.js denne linje:

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

Dette kalder 'indeks' -filen for hvad der nogensinde er din motor, jade, styr osv., Så i vores tilfælde index.handlebars.

Hurtigt genereret indeks. Styr

{{titel}}

Velkommen til {{title}}

Index.handlebars -filen sendes som en variabel til {{{body}}} - tagget og vises på din webside.

Dette giver dig mulighed for at have en statisk del af dit websted og en variabel del. Dette gør sidehoveder og sidefødder fine, da du ikke behøver at gengive hele siden igen, når du indlæser en ny side, ændres kun nogle oplysninger.

Trin 3: Kontaktformular

Jeg indarbejdede en kontaktformular på min webside, så alle kunne sende en e -mail til mit websted med spørgsmål eller kommentarer.

Denne kontaktformular brugte en npm middle-ware, der kaldes Node Mailer.

Opsætning af Node Mailer

For at installere node-mailer skal du bare køre koden herunder i din topniveau-fil, i vores tilfælde myapp.

sudo npm installer nodemailer

Når den er installeret, skal du konfigurere et par ting i din app.js -fil.

Den første er bare afhængigheden, dette fortæller node, at vi planlægger at bruge denne middleware.

var nodemailer = require ('nodemailer');

For det andet er vores transportør, transportøren bruges til at oprette forbindelse til din mailserver, i mit tilfælde gmail.

// Transporter bruges til at få gmail -konto

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

Hvis du bruger nodemailer med en anden mailserver, kan du se her for dokumentation og hjælp.

Et par ting vil ændre sig fra person til person: bruger, clientId, clientSecret. refreshToken og accessToken.

Din userId er den e -mail, du vil bruge, jeg lavede en ny med samme navn som mit websted.

ClientId, clientSecret, refreshToken og accessToken skal findes via din Google -konto.

Hvis du har brug for mere hjælp, kan du følge denne video her.

Når alle disse felter er udfyldt, tilføjer vi vores beskedoplysninger.

Dernæst skal vi validere, at alle felter i vores formular er indtastet og er gyldige svar.

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

Vi har nu brug for at få oplysninger fra vores kontaktformular på vores webside og sende en besked.

// Knap til indsendelse fra kontaktperson, skal oprette en hjemmeside med succesbesked for indsendte formularapp.post ('/contact_Form', funktion (forespørgsel, res) {// Få oplysninger ud af kontaktformularen, fra homepage.hbs var navn = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// opretter oplysninger, der bruges, når der sendes en besked fra: ' Automatisk e -mail ', til:' [email protected] ', emne:' Webstedets kontaktformular: ' + navn, tekst:' Du har modtaget en ny besked fra dit websteds kontaktformular. / N / n ' +' Her er detaljerne: / n / nNavn: ' + navn +' / n / nEmail: ' + email +' / n / nTelefon: ' + telefon +' / n / nMelding: / n ' + besked} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email sent');}}) res.render ('index'); // render ny hjemmeside, se nærmere på, hvordan du gør dette med succesbesked, f.eks. aflogningsside})

Blitz

Flash bruges til at vise meddelelser, når handlinger er udført. Du kan se dette, når du indsender en formular, eller hvis du ikke indtaster et felt korrekt.

Installer flash ligesom andre npm middleware.

sudo npm installer connect-flash

var flash = require ('connect-flash'); // havde flash -funktionalitet til at vise meddelelser på skærmen

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

Aktiver flash, der skubber og opdaterer meddelelser på websiden. Dette er de meddelelser, der siger ting som succes, eller oplysninger blev indtastet forkert.

// Global Vars

app.use (funktion (req, res, næste) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('fejl'); res.locals.user = req.user || null; næste ();});

Nogle har brug for variabler forbundet med flash.

Der går du en lavet kontaktformular.

Trin 4: Login side

Dette var bare noget, jeg ville se, om jeg kunne gøre, og måske vil jeg bruge det i fremtiden. Jeg ville bare forklare koden, som den er i mit git -lager.

Så denne portion bruger et par mere npm middle-ware. Installer følgende ved hjælp af kommandoerne herunder.

npm installere pas && npm installere pas-lokal && npm installere bcryptjs

Med && kan du køre flere kommandoer med en linje.

Login og brugere

Du skal oprette en login.js- og user.js -fil under din ruter -mappe. Dette vil blive brugt til at tillade oprettelse af en bruger, som vil blive gemt i vores database, og give brugeren mulighed for at logge ind ved at kontrollere databasen.

user.js

var express = require ('express'); var router = express. Router (); var pas = kræve ('pas'); var LocalStrategy = require ('pas-lokal'). Strategi; var User = require ('../ models/user'); // Registrer router.get ('/register', funktion (req, res) {res.render ('register');}); // Registrer bruger router.post ('/register', funktion (req, res) {var navn = req.body.navn; var email = req.body.email; var brugernavn = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Validering req.checkBody ('navn', 'Navn er påkrævet'). notEmpty (); req.checkBody ('email', 'Email er påkrævet').notEmpty (); req.checkBody ('email', 'Email er ikke gyldig'). isEmail (); req.checkBody ('brugernavn', 'Brugernavn er påkrævet'). notEmpty (); req.checkBody (' password ',' Password is required '). notEmpty (); req.checkBody (' password2 ',' Passwords do not match '). equals (req.body.password); var errors = req.validationErrors (); if (fejl) {res.render ('registrer', {fejl: fejl});} ellers {var newUser = ny bruger ({navn: navn, e -mail: e -mail, brugernavn: brugernavn, adgangskode: adgangskode}); User.createUser (nybruger, funktion (fejl, bruger) {hvis (fejl) kaster fejl; console.log (bruger);}); req.flash ('success_msg', 'Du er registreret og kan nu logge ind'); res.redirect (' /Log på'); } });

Nedbryder dette stykke for stykke

Først medtager vi alt det nødvendige mellemlag, derefter inkluderer vi vores modelfil, som er forklaret nedenfor. Vi går fra registermærket og viser vores registerstyrtekst. Så kommer den vigtige funktion. Disse giver os mulighed for at registrere en ny bruger i vores database. Funktionen kontrollerer for at sikre, at alle felter er gyldige og inkluderet i formularen, hvis ikke vil det bede om dem. Derefter kontrollerer den for fejl, og hvis der ikke opstår fejl, opretter den en ny bruger med de angivne oplysninger. Det går derefter videre til login -siden, så du kan logge ind.

login.js

var express = require ('express');

var router = express. Router (); var pas = require ('pas'); var LocalStrategy = require ('pas-lokal'). Strategi; var User = require ('../ models/user'); /* FÅ brugerliste. */// Hjemmeside router.get ('/', funktion (req, res) {res.render ('login');}); pas.use (ny LocalStrategy (funktion (brugernavn, adgangskode, udført) {User.getUserByUsername (brugernavn, funktion (fejl, bruger) {hvis (fejl) kaster fejl; hvis (! bruger) {return gjort (null, falsk, { meddelelse: 'Ukendt bruger'});} User.comparePassword (adgangskode, user.password, funktion (err, isMatch) {hvis (err) kaster fejl; if (isMatch) {return done (null, user);} else { retur udført (nul, falsk, {besked: 'Ugyldig adgangskode'});}});});})); pas.serializeUser (funktion (bruger, udført) {udført (null, bruger.id);}); pas.deserializeUser (funktion (id, udført) {User.getUserById (id, funktion (fejl, bruger) {udført (fejl, bruger);});}); router.post ('/login', passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/login', failureFlash: true}), function (req, res) {res.redirect ('/ dashboard ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You are logged out'); res.redirect ('/homepage');});

modul.exports = router;

Først medtager vi alt det nødvendige mellemlag, derefter inkluderer vi vores modelfil, som er forklaret nedenfor. Vi ruter fra login -mærket og viser vores login -styrtekst. Vi bruger derefter nogle pasfunktioner til at tage det indtastede brugernavn og adgangskode og kontrollere dem i forhold til vores database. Vi vil også bruge en krypteret adgangskode, som kan gøre login lidt langsomt på en hindbær pi. Jeg forklarer dette mere næste gang. Efter at have valideret brugernavnet og adgangskoden, omdirigeres du til hjemmesiden, der viser instrumentbrættet, når vi konfigurerer dette i vores indeksfil. Vi tilføjer også muligheden for at logge ud her.

Som jeg tidligere har nævnt, skal vi også oprette en model til at kontrollere databasen for.

Dette gøres ved at oprette en mappe under din hovedapplikationsmappe kaldet modeller. I denne mappe er der også brug for en user.js -fil.

model/user.js

var mongoose = require ('mangoose');

var bcrypt = require ('bcryptjs'); // Brugerskema var UserSchema = mongoose. Schema ({brugernavn: {type: String, index: true}, adgangskode: {type: String}, e -mail: {type: String}, navn: {type: String}}); var User = module.exports = mongoose.model ('User', UserSchema);

module.exports.createUser = funktion (nybruger, tilbagekald) {

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = funktion (brugernavn, tilbagekald) {var query = {brugernavn: brugernavn}; User.findOne (forespørgsel, tilbagekald); } module.exports.getUserById = funktion (id, tilbagekald) {User.findById (id, tilbagekald); } module.exports.comparePassword = funktion (kandidatpassord, hash, tilbagekald) {bcrypt.compare (kandidatpassord, hash, funktion (fejl, isMatch) {hvis (fejl) kaster fejl; tilbagekald (null, isMatch);}); }

Denne model beskriver, hvordan vores brugerparametre vil se ud, samt hvordan vi får adgang til dem. Jeg nævnte før, at vi vil kryptere vores adgangskoder. dette er, så ingen adgangskode gemmes i databasen i tilfælde af brud. Adgangskoderne hashes ved hjælp af bcrypt med mellemlageret ware.

Trin 5: Trafiktæller

Jeg ville se, hvor mange unikke brugere der besøgte min webside og tælle antallet af "hits". Der er mange måder at gøre dette på. Jeg vil forklare, hvordan jeg gik frem.

Dette bruger en mongodb -samling til at spore, hvor mange brugere der har besøgt min side, og hvor mange gange hver unik besøgende har besøgt.

Da vi allerede har talt om at oprette en mongoDB, vil jeg ikke gå igennem det igen.

Du skal muligvis tilføje to samlinger til din database for at kunne kompilere. For at gøre dette kan du enten installere RoboMongo, hvis du bruger et brugergrænseflade, men hvis du bruger en hovedløs hindbærpi som jeg er, vil du have det sjovt med følgende kommandoer.

Mongo skal

For at redigere en db, få oplysninger eller oprette en samling skal du bruge mongo -skallen på en hovedløs enhed.

Løb

mongo

Dette åbner skallen.

Tilføj en samling

I mit tilfælde hedder databasen loginapp, du kan navngive den, hvad du vil.

brug nameofyourdb

Vi har brug for en samling for at holde alle vores ip -adresser for de brugere, der besøger vores websted.

db.creatCollection ("ip")

Dernæst opretter vi en samling for at tælle de unikke hits til vores websted. Dette initialiseres med et id og tæller, der starter ved 0.

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

Spor IP -adresser

For at gøre dette trækker vi brugerne ip, når de besøger vores hjemmeside, øger vores tælling og gemmer dem for at sammenligne dem senere.

Vi skal oprette nogle modeller for at gemme vores mangoose -skemaer og tilføje kode til vores homepage.js -fil.

Vi opretter count.js og ip.js og gemmer dem i vores modelmappe.

Filen ip.js er blot et skema for vores ip -adresse

var mongoose = require ('mangoose'); // pakkebehandler til mongo

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

count.js bliver ringet op af vores hjemmeside for at starte hitsporingen. Dette gøres som nedenfor.

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

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

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

Dette sker hver gang nogen går til vores hjemmeside, i dette tilfælde theinternet.onthewifi.com/homepage.

Det kontrollerer brugerens IP, ip4 eller ip6, og gemmer derefter den værdi, hvor den sender den til count.get.collection, som er en funktion, der er gemt i vores count.js -fil.

Efter at have kontrolleret brugerens entydighed vender den tilbage og bogfører tælleværdien til startsiden som en variabel på styret.

Count.js -filen er som følger.

//count.jsvar mongo = require ('mongodb'); // understøtter database var mongoose = require ('mangoose'); // pakkebehandler til mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mangoose.forbindelse; 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 = function (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add en ny ip, hvis den ikke er i databasen, og opdateringstælleren {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // tilføj ny ip til database count.update (// opdater hit -tæller {id: "hit counter"}, {$ inc: {count: 1}})} else // opdater specifik IP -tæller for at se, hvem der besøger mest {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}}); }

Dette skaber optællingsskemaet og vores.getCount -funktion.. GetCount -funktionen kontrollerer DB for brugerens ip, og hvis den finder den, øger funktionen antallet af denne bruger, ikke hittælleren. Men hvis brugerens ip ikke findes, vil den oprette et nyt indsamlingsobjekt med brugerens ip og øge hittælleren med 1.

Dette returneres derefter og vises på websiden.

Der har du det en ip tracking hit counter.

Trin 6: Blog

Jeg forsøger i øjeblikket at udvikle en blog, der er centreret om mine interesser om software, smarte hjem og Polaroids. Så jeg lavede en blog sektion. Bloggen bruger statiske html -sider og styrets rammer. Efter at have undersøgt bedre teknologier til at gøre blogging lettere har jeg siden redesignet mit websted ved hjælp af hugo. Hugo er en statisk html -generator. Jeg taler mere om dette i nedenstående vejledning.

Trin 7: Færdig

Der går du en dybdegående tutorial på mit node.js -websted, der er hostet lokalt på min hindbærpi. Hvis du har spørgsmål eller kommentarer, skal du efterlade dem herunder.

Jeg håber, at dette hjælper andre derude.

For en anden tilgang til dette websted ved hjælp af hugo, se en statisk webside -generator i min anden vejledning (kommer snart).