Node.js web stranica Dio 2: 7 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:07

Dobro došli u DIO 2 !!

Ovo je drugi dio mog vodiča o aplikaciji za web lokaciju Node.js. Ovaj vodič sam podijelio na dva dijela jer razdvaja one kojima je potreban samo kratak uvod i one koji žele potpuni vodič na web stranici.

Idem kroz kreiranje moje web stranice. Vaše mogu biti drugačije, pa slijedite moje i naučite korištene tehnike. Nakon što odaberete drugi HTML predložak, tok će biti samo malo drugačiji. Imajte ovo na umu.

Korak 1: Struktura aplikacije

Tako da moja web stranica slijedi ekspresni generator, međutim ja sam umjesto jadea koristio upravljač. Ako volite jade, krenite! Jade je HTML kratke ruke bez svih zagrada i div -ova. Ako ne razumijete da biste mogli posjetiti youtube i pogledati neke HTML vodiče.

Više volim i ugodnije mi je HTML i upravljač, pa sam to i koristio. Za kreiranje ekspresnog projekta s upravljačem pokrenite naredbu express.

express --hbs nameofmyapp

Zatim nastavite slijediti korak u 1. dijelu za instaliranje svih srednjih proizvoda.

Express stvara vrlo specifičnu strukturu aplikacije, a jedna vrlo korisna većina node.js aplikacija slijedi ovaj obrazac s nekim varijacijama.

Na priloženoj fotografiji možete vidjeti različite mape i datoteke, ispod pokušavam sve to objasniti.

kanta za smeće

Ovo je mapa koja se prvo pokreće kada node.js pokrene vaš poslužitelj. Gleda datoteku www i prati ovu datoteku radi izvršenja. Datoteka www govori node.js -u da pokrene poslužitelj na portu 3000 (ovo se može promijeniti u bilo što) i učiniti neke druge stvari, poput osluškivača događaja i slično. Najvažnija stvar je port na kojem je vaša aplikacija postavljena.

node_modules

U ovoj fascikli se nalazi ono što se naziva middle-ware. Srednje posuđe volim objasniti kao dodatni softver koji će vam olakšati kodiranje. To su u osnovi druge biblioteke s unaprijed napravljenim funkcijama za upotrebu. Nekoliko dodatnih srednjih proizvoda koje sam koristio za ovaj projekt bili su Nodemailer, Passport, Nodemon, bycrypt i drugi.

javnosti

Ovdje bi otišle sve vaše slike, CSS i javascript za vašu web stranicu. Ove web stranice koriste direktno.

rute

Ovo definira rute za vašu web lokaciju. Kao što su početna stranica, stranica za prijavu i drugo.

pregledi

Kao što vidite, prikazi su.hbs datoteke ili.handlebars, oba će funkcionirati, potrebno je samo malo manipulirati datotekom app.js. Ovo su vaše html stranice upravljača koje će se prikazati u pregledniku. Raspored je vaša glavna datoteka izgleda, a ponekad se nalazi u vlastitoj podmapi izgleda. Datoteka glavnog rasporeda poziva vaše druge datoteke upravljača i prikazuje ih, što će imati više smisla kada uđemo u kôd.

app.js

Ovo je vaša glavna datoteka aplikacije, ponekad se naziva poslužiteljem, samo ovisi o postavljenim postavkama. Ova datoteka ima svu konfiguraciju za poslužitelj, pa čak i neke posebne funkcije. To će također biti alat za obradu grešaka.

package.json

Ova datoteka je kreirana ekspresno i govori npm -u sav međuprostor koji želite koristiti u svom projektu. Nakon što pokrenete npm install, svi srednji programi pozvani u ovoj datoteci bit će instalirani u mapu node_modules.

Korak 2: Postavite svoj predložak

Možete stvoriti sav svoj HTML od nule ili možete koristiti predložak. Koristio sam predložak za ovu web lokaciju. Ostale web stranice koje sam pomogao u razvoju kodirao sam od nule. Izbor je vaš, ovaj korak objašnjava izgled predloška.

Moja web aplikacija koristi predložak za pokretanje koji je odličan za stvaranje nevjerojatnog CSS -a. Za pronalaženje predložaka posjetite ovu web lokaciju. Kao što je već rečeno u prethodnom koraku, sve potrebne datoteke css, js i img nalaze se u javnoj mapi. Ove datoteke čine da stranica izgleda bolje od običnog teksta i način na koji se slike koriste na web mjestu.

Kako bi stil predložaka upravljača funkcionirao s predloškom Stranice su podijeljene na dva dijela. Prvi je ono što se naziva "rasporedom". Raspored su svojstva koja biste htjeli prikazati na svakoj web stranici svoje web lokacije. U mom slučaju ovo je zaglavlje koje ima navigacijsku traku i podnožje koje sadrži dodatne komade navigacije i prikaza.

Datoteka izgleda i druge datoteke upravljača nalaze se u mapi pogleda. Preći ću na jednostavniji izgled iz Express generatora koji ste ranije koristili da prikažete kako koncept funkcionira, a zatim ćete vidjeti moj kôd i uporediti ih.

Brzo generirana datoteka layout.handlebars

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

Prava magija upravljača je u upravljačima {{title}} i {{{body}}}. Dakle, ove dvije stvari djeluju drugačije {{title}} je varijabla koja se prosljeđuje iz datoteke index.js u rutama, nakon što se prikaže u predlošku, ona se prikazuje. Oznaka {{{body}}} uzima sve što se zove u funkciji renderiranja u vašoj datoteci js rute. U našem slučaju index.js ima ovu liniju:

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

Ovo poziva 'indeksnu' datoteku onoga što ste ikada pokrenuli, žada, upravljača itd., Tako da u našem slučaju index.handlebars.

Express generirani index.handlebars

{{title}}

Dobro došli u {{title}}

Datoteka index.handlebars se kao varijabla prosljeđuje oznaci {{{body}}} i prikazuje na vašoj web stranici.

Ovo vam omogućava da imate statički dio vaše web stranice i promjenjivi dio. Ovo čini zaglavlja i podnožja lijepima jer ne morate ponovno iscrtavati cijelu stranicu, pri učitavanju nove stranice mijenjaju se samo neki podaci.

Korak 3: Obrazac za kontakt

Uključio sam obrazac za kontakt u svoju web stranicu kako bi svako mogao poslati e -poruku na moju web lokaciju, sa pitanjima ili komentarima.

Ovaj obrazac za kontakt je koristio npm srednju opremu koja se zove Node Mailer.

Postavljanje Node Mailera

Za instaliranje node-mailera samo trebate pokrenuti donji kod u datoteci najviše razine, u našem slučaju, myapp.

sudo npm install nodemailer

Nakon instaliranja morat ćete postaviti nekoliko stvari u datoteci app.js.

Prva je samo ovisnost, to govori čvoru da planiramo koristiti ovaj međuopreme.

var nodemailer = require ('nodemailer');

Drugo je naš transporter, transporter se koristi za povezivanje sa vašim serverom pošte, u mom slučaju gmail.

// Transporter korišten za dobivanje gmail računa

var transporter = nodemailer.createTransport ({usluga: 'gmail', auth: {tip: 'OAuth2', korisnik: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.acons.screon: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

ako koristite nodemailer s drugim poslužiteljem pošte, potražite dokumentaciju i pomoć ovdje.

Nekoliko stvari će se promijeniti od osobe do osobe: korisnik, clientId, clientSecret. refreshToken i accessToken.

Vaš userId je adresa e -pošte koju želite koristiti. Napravio sam novu koja se zove isto kao i moja web lokacija.

ClientId, clientSecret, refreshToken i accessToken morate pronaći putem vašeg google računa.

Ako vam je potrebna dodatna pomoć, možete pratiti ovaj video ovdje.

Nakon što su sva ta polja popunjena, dodat ćemo detalje naše poruke.

Zatim moramo potvrditi da su sva polja u našem obrascu unesena i da su valjani odgovori.

// Express Validatorapp.use (expressValidator ({errorFormatter: funkcija (param, poruka, vrijednost) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + namespace.shift () + ']';} return {param: formParam, msg: msg, value: value};}}));

Sada moramo dobiti informacije iz našeg obrasca za kontakt na našoj web stranici i poslati poruku.

// Objavi iz gumba za slanje kontakta, potrebno je stvoriti početnu stranicu s porukom o uspjehu za poslane obrasceapp.post ('/contact_Form', funkcija (req, res) {// Dobijte informacije iz obrasca za kontakt, s homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// stvara informacije koje se koriste pri slanju poruke od: ' Automatska e -pošta ', na:' [email protected] ', tema:' Obrazac za kontakt web stranice: ' + ime, tekst:' Primili ste novu poruku sa obrasca za kontakt vaše web stranice. / N / n ' +' Ovdje su detalji: / n / nIme: ' + ime +' / n / nE -pošta: ' + e -pošta +' / n / nTelefon: ' + telefon +' / n / nPoruka: / n ' + poruka} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render novu početnu stranicu, pogledajte kako to učiniti s porukom o uspjehu, poput stranice za odjavu})

Flash

Flash se koristi za prikazivanje poruka nakon obavljenih radnji. To možete vidjeti kada podnesete obrazac ili ne unesete ispravno polje.

Instalirajte flash kao i drugi npm middleware.

sudo npm install connect-flash

var flash = require ('connect-flash'); // je imao fleš funkciju za prikazivanje poruka na ekranu

// Povežite Flashapp.use (flash ());

Omogućite flash koji gura i ažurira poruke na web stranici. Ovo su poruke koje govore o stvarima poput uspjeha ili su podaci uneti pogrešno.

// Global Vars

app.use (funkcija (req, res, next) {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 ();});

Nekima su potrebne varijable povezane sa flash -om.

Eto vam napravljenog obrasca za kontakt.

Korak 4: Stranica za prijavu

Ovo je bilo nešto što sam htjela vidjeti mogu li učiniti i možda ću to koristiti u budućnosti. Samo sam htio objasniti kôd kakav je u mom git spremištu.

Dakle, ovaj dio koristi još nekoliko npm srednjih proizvoda. Instalirajte sljedeće pomoću naredbi ispod.

npm instaliraj pasoš && npm instaliraj pasoš-lokalno && npm instaliraj bcryptjs

&& vam omogućava da pokrenete više naredbi u jednoj liniji.

Prijava i korisnici

Morat ćete stvoriti datoteku login.js i user.js ispod mape vaših ruta. Ovo će se koristiti za omogućavanje stvaranja korisnika, koji će biti pohranjen u našoj bazi podataka, i omogućiti korisniku da se prijavi provjerom baze podataka.

user.js

var express = require ('express'); var router = express. Router (); var pasoš = zahtevati ('pasoš'); var LocalStrategy = zahtijevaju ('lokalni pasoš'). Strategija; var User = require ('../ models/user'); // Registrirajte router.get ('/register', function (req, res) {res.render ('register');}); // Registracija korisnika 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; // Validacija req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('email', 'Email nije važeći'). isEmail (); req.checkBody ('username', 'Korisničko ime je potrebno'). notEmpty (); req.checkBody (' password ',' Password is required '). notEmpty (); req.checkBody (' password2 ',' Lozinke se ne podudaraju '). equals (req.body.password); var errors = req.validationErrors (); if (greške) {res.render ('register', {errors: errors});} else {var newUser = new User ({name: name, email: email, username: username, password: password}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Registrirani ste i sada se možete prijaviti'); res.redirect (' /Ulogovati se'); } });

Razbijajući ovo dio po dio

Prvo uključujemo svu potrebnu srednju opremu, zatim uključujemo datoteku modela koja je objašnjena u nastavku. Rutiramo od oznake registra i prikazujemo tekst našeg upravljača. Tada dolazi važna funkcija. To nam omogućava da registriramo novog korisnika u našoj bazi podataka. Funkcija provjerava jesu li sva polja valjana i uključena u obrazac, ako nije, od njih će se tražiti. Zatim provjerava ima li grešaka, a ako se ne pojave greške, stvara novog korisnika s navedenim podacima. Zatim se preusmjerava na stranicu za prijavu, omogućavajući vam prijavu.

login.js

var express = require ('express');

var router = express. Router (); var pasoš = zahtijeva ('pasoš'); var LocalStrategy = zahtijevaju ('lokalni pasoš'). Strategija; var User = require ('../ models/user'); /* DOBITE spisak korisnika. */// početna stranica router.get ('/', funkcija (req, res) {res.render ('login');}); Passport.use (nova LocalStrategy (funkcija (korisničko ime, lozinka, gotovo)) {User.getUserByUsername (korisničko ime, funkcija (greška, korisnik) {if (err) baci err; if (! korisnik) {return done (null, false, { poruka: 'Nepoznati korisnik'});} User.comparePassword (lozinka, user.password, funkcija (err, isMatch) {if (err) baci err; if (isMatch) {return done (null, user);} else { return done (null, false, {poruka: 'Neispravna lozinka'});}});});})); Passport.serializeUser (function (user, done) {done (null, user.id);}); Passport.deserializeUser (funkcija (id, učinjeno) {User.getUserById (id, funkcija (greška, korisnik) {gotovo (greška, korisnik);});}); router.post ('/login', Passport.authenticate ('lokalno', {successRedirect: '/', failRedirect: '/login', failFlash: true}), funkcija (req, res) {res.redirect ('/ nadzorna ploča ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Odjavljeni ste'); res.redirect ('/homepage');});

module.exports = usmjerivač;

Prvo uključujemo svu potrebnu srednju opremu, zatim uključujemo datoteku modela koja je objašnjena u nastavku. Skrećemo s oznake za prijavu i prikazujemo tekst na upravljaču. Zatim koristimo neke funkcije pasoša kako bismo uzeli uneseno korisničko ime i lozinku i provjerili ih u našoj bazi podataka. Koristit ćemo i šifriranu lozinku koja može malo usporiti prijavu na maline pi. Ovo ću dalje objasniti. Nakon potvrđivanja korisničkog imena i lozinke, bit ćete preusmjereni na početnu stranicu na kojoj će se prikazati nadzorna ploča dok smo ovo postavljali u datoteci indeksa. Ovdje također dodajemo mogućnost odjave.

Kao što sam ranije spomenuo, također ćemo morati stvoriti model za provjeru baze podataka.

To se postiže stvaranjem mape ispod glavne mape aplikacije pod nazivom models. U ovoj mapi je potrebna i datoteka user.js.

model/user.js

var mongoose = require ('mongoose');

var bcrypt = require ('bcryptjs'); // Korisnička shema var UserSchema = mongoose. Schema ({korisničko ime: {tip: String, indeks: true}, lozinka: {tip: String}, e -pošta: {tip: String}, ime: {tip: String}}); var User = module.exports = mongoose.model ('Korisnik', UserSchema);

module.exports.createUser = function (newUser, povratni poziv) {

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (povratni poziv);});}); } module.exports.getUserByUsername = funkcija (korisničko ime, povratni poziv) {var query = {korisničko ime: korisničko ime}; User.findOne (upit, povratni poziv); } module.exports.getUserById = funkcija (id, povratni poziv) {User.findById (id, povratni poziv); } module.exports.comparePassword = function (kandidatPassword, hash, callback) {bcrypt.compare (kandidatPassword, hash, function (err, isMatch) {if (err) baci grešku; povratni poziv (null, isMatch);}); }

Ovaj model opisuje kako će naši korisnički parametri izgledati, kao i kako ćemo im pristupiti. Već sam spomenuo da ćemo šifrirati naše lozinke. ovo je tako da se u slučaju kršenja ne čuva nijedna lozinka u bazi podataka. Lozinke se heširaju pomoću srednjeg softvera bcrypt.

Korak 5: Brojač prometa

Htio sam vidjeti koliko je jedinstvenih korisnika posjetilo moju web stranicu i izbrojati broj "pogodaka". Postoji mnogo načina za to, objasnit ću kako sam to učinio.

Ovo koristi zbirku mongodb za praćenje koliko je korisnika posjetilo moju stranicu i koliko je puta posjetio svaki jedinstveni posjetitelj.

Budući da smo već govorili o postavljanju mongoDB -a, neću to ponovo prolaziti.

Možda ćete morati sastaviti dvije zbirke u bazu podataka da biste je kompajlirali. Da biste to učinili, možete instalirati RoboMongo ako koristite korisničko sučelje, međutim, ako koristite maline pi bez glave poput mene, zabavit ćete sljedeće naredbe.

Mongo školjka

Za uređivanje db -a, dobijanje informacija ili stvaranje zbirke trebat će vam mongo ljuska na jedinici bez glave.

Trči

mongo

Ovo će otvoriti ljusku.

Dodajte kolekciju

U mom slučaju, baza podataka se zove loginapp, možete joj dati ime kako god želite.

koristite nameofyourdb

Potrebna nam je zbirka koja sadrži sve naše IP adrese korisnika koji posjećuju našu web stranicu.

db.creatCollection ("ip")

Zatim stvaramo kolekciju za brojanje jedinstvenih pogodaka na našoj web stranici. Ovo se inicijalizira s ID -om i brojenjem počevši od 0.

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

Pratite IP adrese

Da bismo to učinili, povući ćemo korisnike IP -a kada posjete našu početnu stranicu, povećati naš broj i pohraniti ih da ih kasnije uporede.

Moramo stvoriti neke modele za pohranu naših mongoose shema i dodati neki kôd u našu datoteku homepage.js.

Kreiramo count.js i ip.js i pohranjujemo ih u mapu naših modela.

Datoteka ip.js je samo shema za našu IP adresu

var mongoose = require ('mongoose'); // rukovatelj paketima za mongo

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

našu početnu stranicu će pozvati count.js da pokrene praćenje pogodaka. To se radi na sljedeći način.

//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 (collection, ipc, Public_ip, function (count) {

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

To se događa svaki put kad netko posjeti našu početnu stranicu, u ovom slučaju theinternet.onthewifi.com/homepage.

Provjerava IP adresu korisnika, ip4 ili ip6, a zatim pohranjuje tu vrijednost tamo gdje je šalje na count.get.collection koja je funkcija pohranjena u našoj datoteci count.js.

Nakon provjere jedinstvenosti korisnika, on se vraća i objavljuje vrijednost broja na početnu stranicu kao varijablu upravljača.

Datoteka count.js je sljedeća.

//count.jsvar mongo = require ('mongodb'); // podržava bazu podataka var mongoose = require ('mongoose'); // rukovatelj paketima za mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = require ('../ models/ip'); // Shema prebrojavanja var CountSchema = mongoose. Schema ({id: {tip: String,}, count: {tip: Broj,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// count je test, funkcija povratnog poziva ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // dodaj novi IP ako ga nema u bazi podataka i brojač ažuriranja {var new_ip = novi IP ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // dodaj novi ip u database count.update (// ažuriraj brojač pogodaka {id: "brojač pogodaka"}, {$ inc: {count: 1}})} else // ažuriraj određeni ip brojač, da vidiš ko najviše posjećuje {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Ovo stvara shemu prebrojavanja i našu.getCount funkciju.. GetCount funkcija provjerava DB za korisnički ip i ako ga pronađe, funkcija povećava broj korisnika, a ne brojač pogodaka. Međutim, ako se korisnički ip ne pronađe, stvorit će novi objekt zbirke s korisničkim ip -om i povećati brojač pogodaka za 1.

Ovo se zatim vraća i prikazuje na web stranici.

Evo vam brojač pogodaka za praćenje IP -a.

Korak 6: Blog

Trenutno pokušavam razviti blog centraliziran na svojim interesima o softveru, pametnim kućama i polaroidima. Tako sam stvorio odjeljak za blog. Blog koristi statičke html stranice i okvir upravljača. Nakon što sam proučio bolje tehnologije kako bih olakšao bloganje, od tada sam redizajnirao svoju web stranicu koristeći hugo. Hugo je statički html generator. O tome govorim više u dolje navedenom vodiču.

Korak 7: Završeno

Eto vam detaljnog vodiča na mojoj web stranici node.js koja je lokalno hostirana na mom malinu pi. Ako imate pitanja ili komentare, ostavite ih ispod.

Nadam se da će ovo pomoći drugima.

Za drugačiji pristup ovoj web stranici koristeći hugo, generator statičkih web stranica pogledajte moje drugo uputstvo (uskoro).