Node.js webside Del 2: 7 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

Velkommen til DEL 2 !!

Dette er del 2 til min Node.js nettstedsprogramopplæring. Jeg delte denne opplæringen i to deler da den skiller de som bare trenger en kort introduksjon og de som ønsker en fullstendig opplæring på en webside.

Jeg kommer til å gå gjennom opprettelsen av nettstedet mitt. Din kan være annerledes, så følg min og lær teknikkene som brukes. Når du har valgt en annen HTML -mal, blir flyten bare litt annerledes. Husk dette.

Trinn 1: App -struktur

Så nettstedet mitt følger ekspressgeneratoren, men jeg brukte styret i stedet for jade. Hvis du liker jade, gå for det! Jade er HTML med kort hånd uten alle parenteser og div. Hvis du ikke forstår at du kanskje vil besøke youtube og se noen HTML -opplæringsprogrammer.

Jeg foretrekker og er mer komfortabel med HTML og styre, så det er det jeg brukte. For å lage et ekspressprosjekt med styre, kjør express -kommandoen.

ekspress --hbs navn på min app

Fortsett deretter å følge trinnet i del 1 for installering av alt mellomlager.

Express skaper en veldig spesifikk appstruktur og en veldig nyttig en de fleste node.js -applikasjoner følger dette skjemaet med en viss variasjon.

På det vedlagte bildet kan du se forskjellige mapper og filer, nedenfor prøver jeg å forklare alt dette.

søppelbøtte

Dette er mappen som kjøres først når node.js starter serveren din. Den ser til www -filen og følger denne filen for utførelse. Www -filen forteller node.js om å starte en server på port 3000 (dette kan endre seg til omtrent alt) og gjøre noen andre ting, for eksempel hendelseslytter og slikt. Det viktigste er porten der appen din er satt opp.

node_modules

I denne mappen er det som kalles middle-ware. Middle-ware jeg liker å forklare som ekstra programvare for å gjøre ting enklere for deg å kode. De er i utgangspunktet andre biblioteker med forhåndsdefinerte funksjoner som du kan bruke. Noen ekstra mellomprodukter jeg brukte til dette prosjektet var Nodemailer, Passport, Nodemon, bycrypt og andre.

offentlig

Det er her alle bildene, CSS og javascript for nettstedet ditt vil gå. Disse brukes direkte av nettsidene.

ruter

Dette er ruter for nettstedet ditt. Slik som en hjemmeside, påloggingsside og andre.

visninger

Som du kan se, er visningene.hbs -filer eller.handlebars, enten vil det ta litt manipulasjon av app.js -filen. Dette er html -sidene på styret ditt som vises i nettleseren. Layout er hovedlayoutfilen og er noen ganger i sin egen layoutundermappe. Hovedlayoutfilen ringer til de andre styrefilene og viser dem, dette vil være mer fornuftig når vi dykker ned i koden.

app.js

Dette er hovedappfilen din, noen ganger kalles dette server, bare avhengig av konfigurasjonen. Denne filen har all konfigurasjon for serveren og til og med noen spesielle funksjoner. Det vil også være en feilbehandler.

package.json

Denne filen er opprettet av express og forteller npm all mellomvare du vil bruke i prosjektet. Når du har installert npm install, blir alt mellomvaren som blir kalt ut i denne filen, installert i mappen node_modules.

Trinn 2: Sett opp malen din

Du kan lage all HTML -en din fra bunnen av, eller du kan bruke en mal. Jeg har brukt en mal for dette nettstedet. Andre nettsteder jeg har hjulpet med å utvikle har jeg kodet fra bunnen av. Valget er ditt, dette trinnet forklarer maloppsettet.

Min webapplikasjon bruker en bootstrap -mal som er god til å lage fantastisk CSS. Besøk dette nettstedet for å finne maler. Som nevnt tidligere i forrige trinn er alle nødvendige css-, js- og img -filer under den offentlige mappen. Disse filene får nettstedet til å se bedre ut enn vanlig tekst og hvordan bilder brukes på nettstedet.

For å få håndtakets malstil til å fungere med en mal Sidene er delt i to stykker. Den første er det som omtales som "layout". Oppsettet er egenskapene du vil at skal vises på hver nettside på nettstedet ditt. I mitt tilfelle er dette toppteksten, som har navigasjonslinjen, og bunnteksten, som inneholder ekstra navigasjons- og displaystykker.

Layoutfilen og andre styringsfiler er i visningsmappen. Jeg vil gå over en mer enkel layout fra ekspressgeneratoren du brukte tidligere for å vise hvordan konseptet fungerer, så kan du se koden min og sammenligne dem.

Express -generert layout.handlebars -fil

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

Den sanne styret er magisk i styret {{title}} og {{{body}}}. Så disse to opptrer ulikt {{title}} er en variabel som sendes fra index.js -filen i ruter, en gang den er sendt til malen den vises. {{{Body}}} - taggen tar det som noensinne kalles i gjengivelsesfunksjonen i ruten js -filen. I vårt tilfelle har index.js denne linjen:

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

Dette kaller "indeks" -filen til det du noensinne bruker, jade, styr, og så videre, så i vårt tilfelle index.handlebars.

Ekspress generert indeks. Styre

{{tittel}}

Velkommen til {{title}}

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

Dette lar deg ha en statisk del av nettstedet ditt og en variabel del. Dette gjør topp- og bunntekst fine, ettersom du ikke trenger å gjengi hele siden på nytt. Når du laster inn en ny side, endres bare noen opplysninger.

Trinn 3: Kontaktskjema

Jeg innlemmet et kontaktskjema på websiden min, slik at alle kunne sende e -post til nettstedet mitt med spørsmål eller kommentarer.

Dette kontaktskjemaet brukte en npm middle-ware som kalles Node Mailer.

Sette opp Node Mailer

For å installere node-mailer trenger du bare å kjøre koden nedenfor i filen på toppnivå, i vårt tilfelle myapp.

sudo npm installer nodemailer

Når du er installert, må du sette opp noen ting i appen.js.

Den første er bare avhengigheten, dette forteller node at vi planlegger å bruke denne mellomvaren.

var nodemailer = require ('nodemailer');

For det andre er transportøren vår, transportøren brukes til å koble til e -postserveren din, i mitt tilfelle gmail.

// Transportør pleide å hente gmail -konto

var transporter = nodemailer.createTransport ({service: 'gmail', auth: {type: 'OAuth2', bruker: '[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 bruker nodemailer med en annen e -postserver, kan du se her for dokumentasjon og hjelp.

Noen få ting vil endre seg fra person til person: bruker, clientId, clientSecret. refreshToken og accessToken.

Din userId er e -posten du vil bruke. Jeg har laget en ny som heter det samme som nettstedet mitt.

ClientId, clientSecret, refreshToken og accessToken må finnes gjennom Google -kontoen din.

Hvis du trenger mer hjelp, kan du følge denne videoen her.

Når alle disse feltene er fylt ut, legger vi til meldingsinformasjonen vår.

Deretter må vi bekrefte at alle feltene i skjemaet vårt er angitt 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 + = '[' + namespace.shift () + ']';} returner {param: formParam, msg: msg, verdi: verdi};}}));

Vi må nå få informasjon fra vårt kontaktskjema på vår webside og sende en melding.

// Knapp for å sende inn kontakt, må du opprette en hjemmeside med suksessmelding for innsendte formsapp.post ('/contact_Form', funksjon (krav, res) {// Få informasjon ut av kontaktskjemaet, 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 = {// oppretter informasjon som brukes når du sender en melding fra: ' Automatisk e -post ', til:' [email protected] ', emne:' Kontaktskjema for nettsted: ' + navn, tekst:' Du har mottatt en ny melding fra kontaktskjemaet for nettstedet ditt. / N / n ' +' Her er detaljene: / n / nNavn: ' + navn +' / n / nE -post: ' + e -post +' / n / nTelefon: ' + telefon +' / n / nMelding: / n ' + melding} 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 gjør dette med suksessmelding, for eksempel avloggingsside})

Blits

Flash brukes til å vise meldinger etter at handlinger er utført. Du kan se dette når du sender inn et skjema, eller hvis du ikke angir et felt riktig.

Installer flash akkurat som annen npm -mellomvare.

sudo npm installer connect-flash

var flash = require ('connect-flash'); // hadde flash -funksjonalitet for å vise meldinger på skjermen

// Koble til Flashapp.use (flash ());

Aktiver blits som skyver og oppdaterer meldinger på nettsiden. Dette er meldingene som sier ting som suksess, eller informasjon ble skrevet feil.

// Global Vars

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

Noen trenger variabler knyttet til blits.

Der går du et laget kontaktskjema.

Trinn 4: Logg inn side

Dette var bare noe jeg ønsket å se om jeg kunne gjøre, og kanskje jeg kommer til å bruke det i fremtiden. Jeg ville bare forklare koden slik den er i git -depotet mitt.

Så denne delen bruker noen flere npm mellomprodukter. Installer følgende ved å bruke kommandoene nedenfor.

npm installere pass && npm installere pass-lokal && npm installere bcryptjs

Med && kan du kjøre flere kommandoer med én linje.

Innlogging og brukere

Du må opprette en login.js- og user.js -fil under rutemappen. Dette vil bli brukt til å tillate opprettelse av en bruker, som vil bli lagret i vår database, og tillate brukeren å logge inn ved å sjekke databasen.

user.js

var express = require ('express'); var router = express. Router (); var pass = krever ('pass'); var LocalStrategy = require ('pass-local'). Strategi; var User = require ('../ models/user'); // Registrer router.get ('/register', funksjon (krav, res) {res.render ('register');}); // Register User 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; // Validation req.checkBody ('navn', 'Navn er påkrevd'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('e -post', 'E -post er ikke gyldig'). isEmail (); req.checkBody ('brukernavn', 'Brukernavn kreves'). notEmpty (); req.checkBody (' passord ',' Passord kreves '). notEmpty (); req.checkBody (' passord2 ',' Passord stemmer ikke '). er lik (req.body.password); var feil = req.validationErrors (); hvis (feil) {res.render ('registrer', {feil: feil});} annet {var newUser = ny bruker ({navn: navn, e -post: e -post, brukernavn: brukernavn, passord: passord}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'You are registered and can now login'); res.redirect (' /Logg Inn'); } });

Bryter denne ned bit for bit

Først inkluderer vi alt mellomlager som trengs, deretter inkluderer vi modellfilen vår som er forklart nedenfor. Vi ruter fra registeretiketten og viser teksten i registerstyret. Så kommer den viktige funksjonen. Disse lar oss registrere en ny bruker i vår database. Funksjonen sjekker for å sikre at alle feltene er gyldige og inkludert i skjemaet, hvis ikke vil det be om dem. Deretter sjekker den etter feil, og hvis det ikke oppstår feil, oppretter den en ny bruker med informasjonen gitt. Den går deretter videre til påloggingssiden, slik at du kan logge inn.

login.js

var express = require ('express');

var router = express. Router (); var pass = require ('pass'); var LocalStrategy = require ('pass-local'). Strategi; var User = require ('../ models/user'); /* FÅ brukeroppføring. */// Hjemmeside router.get ('/', function (req, res) {res.render ('login');}); passport.use (ny LocalStrategy (funksjon (brukernavn, passord, gjort) {User.getUserByUsername (brukernavn, funksjon (feil, bruker) {hvis (feil) kast feil; hvis (! bruker) {retur gjort (null, usann, { melding: 'Ukjent bruker'});} User.comparePassword (passord, bruker.passord, funksjon (err, isMatch) {hvis (feil) kaster feil; hvis (isMatch) {retur gjort (null, bruker);} annet { retur gjort (null, usann, {melding: 'ugyldig passord'});}});});})); passport.serializeUser (funksjon (bruker, ferdig) {gjort (null, user.id);}); pas.deserializeUser (funksjon (id, ferdig) {User.getUserById (id, funksjon (feil, bruker) {gjort (feil, bruker);});}); router.post ('/login', passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/login', failureFlash: true}), function (req, res) {res.redirect ('/ dashbord ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You are logged out'); res.redirect ('/homepage');});

module.exports = ruter;

Først inkluderer vi alt mellomlager som trengs, deretter inkluderer vi modellfilen vår som er forklart nedenfor. Vi går fra påloggingsetiketten og viser tekst for påloggingshåndtak. Vi bruker deretter noen passfunksjoner til å ta det oppgitte brukernavnet og passordet og sjekke dem mot vår database. Vi vil også bruke et kryptert passord som kan gjøre pålogging litt treg på en bringebær pi. Jeg forklarer dette mer neste. Etter å ha validert brukernavnet og passordet, blir du omdirigert til hjemmesiden som vil vise oversikten når vi setter dette opp i indeksfilen vår. Vi legger også til muligheten til å logge ut her.

Som jeg tidligere nevnte, må vi også lage en modell for å sjekke databasen for.

Dette gjøres ved å opprette en mappe under hovedapplikasjonsmappen som heter modeller. I denne mappen er det også nødvendig med en user.js -fil.

modell/user.js

var mongoose = require ('mongoose');

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

module.exports.createUser = function (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 = funksjon (brukernavn, tilbakeringing) {var query = {brukernavn: brukernavn}; User.findOne (forespørsel, tilbakeringing); } module.exports.getUserById = funksjon (id, tilbakeringing) {User.findById (id, tilbakeringing); } module.exports.comparePassword = funksjon (kandidatpassord, hash, tilbakeringing) {bcrypt.compare (kandidatpassord, hash, funksjon (err, isMatch) {hvis (feil) kaster feil; tilbakeringing (null, isMatch);}); }

Denne modellen beskriver hvordan brukerparametrene våre vil se ut, samt hvordan vi får tilgang til dem. Jeg nevnte før at vi vil kryptere passordene våre. dette er slik at ingen passord lagres i databasen i tilfelle brudd. Passordene er hasket ved hjelp av mellomlager bcrypt.

Trinn 5: Trafikteller

Jeg ønsket å se hvor mange unike brukere som besøkte websiden min og telle antall "treff". Det er mange måter å gjøre dette på. Jeg skal forklare hvordan jeg gikk frem.

Denne bruker en mongodb -samling for å spore hvor mange brukere som har besøkt siden min og hvor mange ganger hver unike besøkende besøkte.

Siden vi allerede har snakket om å sette opp en mongoDB, vil jeg ikke gå gjennom det igjen.

Du må kanskje legge til to samlinger i databasen din for å kompilere. For å gjøre dette kan du enten installere RoboMongo hvis du bruker et brukergrensesnitt, men hvis du bruker en hodeløs bringebær pi som jeg er, vil du ha det gøy med følgende kommandoer.

Mongo skall

For å redigere en db, få informasjon eller lage en samling trenger du mongo -skallet på en hodeløs enhet.

Løpe

mongo

Dette vil åpne skallet.

Legg til en samling

I mitt tilfelle heter databasen loginapp, du kan navngi den hva du vil.

bruk nameofyourdb

Vi trenger en samling for å holde all vår ip -adresse til brukerne som besøker nettstedet vårt.

db.creatCollection ("ip")

Deretter lager vi en samling for å telle de unike treffene til nettstedet vårt. Dette initialiseres med en id og telling som starter med 0.

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

Spor IP -adresser

For å gjøre dette vil vi trekke brukerne IP når de besøker hjemmesiden vår, øke antallet og lagre dem for å sammenligne dem senere.

Vi må lage noen modeller for å lagre våre mangoose -skjemaer, og legge til kode i vår homepage.js -fil.

Vi lager count.js og ip.js og lagrer dem i modellmappen vår.

Ip.js -filen er bare et skjema for ip -adressen vår

var mongoose = require ('mongoose'); // pakkebehandler for mongo

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

count.js vil bli oppringt av hjemmesiden vår for å starte treffsporing. Dette gjøres slik som nedenfor.

//Homepagerouter.get('/ ', function (req, res) {publicIp.v4 (). Deretter (ip => {Public_ip = ip; console.log ("ipv4:"+ Public_ip); // =>' 46.5.21.123 '}); publicIp.v6 (). Deretter (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 skjer hver gang noen går til hjemmesiden vår, i dette tilfellet theinternet.onthewifi.com/homepage.

Den sjekker brukerens IP, ip4 eller ip6, og lagrer deretter verdien der den sender den til count.get.collection, som er en funksjon som er lagret i count.js -filen vår.

Etter å ha kontrollert brukerens egenart, returnerer den og legger inn tellingsverdien til hjemmesiden som en styringsvariabel.

Count.js -filen er som følger.

//count.jsvar mongo = require ('mongodb'); // støtter database var mongoose = require ('mongoose'); // pakkebehandler for mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mango.kobling; 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 oppdateringstelleren {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // legg til ny ip til database count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // oppdater spesifikk ip -teller, for å se hvem som besøker mest {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}}); }

Dette skaper telleskjemaet og vår.getCount -funksjon.. GetCount -funksjonen sjekker DB for brukerens ip, og hvis den finner den, øker funksjonen tellingen til den brukeren, ikke trefftelleren. Men hvis brukerens ip ikke blir funnet vil den opprette et nytt samlingsobjekt med brukerens ip og øke trefftelleren med 1.

Dette returneres deretter og vises på nettsiden.

Der har du det en ip tracking hit counter.

Trinn 6: Blogg

Jeg prøver for tiden å utvikle en blogg sentralisert om mine interesser om programvare, smarte hjem og Polaroids. Så jeg opprettet en bloggseksjon. Bloggen bruker statiske html -sider og styringsrammen. Etter å ha sett på bedre teknologier for å gjøre blogging enklere, har jeg siden redesignet nettstedet mitt ved hjelp av hugo. Hugo er en statisk html -generator. Jeg snakker mer om dette i oppgaven nedenfor.

Trinn 7: Ferdig

Der går du en grundig opplæring på node.js -nettstedet mitt lokalt på bringebær pi. Hvis du har spørsmål eller kommentarer, kan du la dem stå nedenfor.

Jeg håper dette hjelper andre der ute.

For en annen tilnærming til dette nettstedet ved hjelp av hugo, se en statisk nettsidegenerator i min andre opplæring (kommer snart).