Node.js web stranica Dio 2: 7 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:35

Dobro došli u DIO 2 !!

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

Proći ću kroz kreiranje svoje 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 koristio upravljač umjesto žada. Ako volite jade, krenite! Jade je HTML kratke ruke bez svih zagrada i div -ova. Ako ne razumijete da biste htjeli posjetiti youtube i pogledati neke HTML vodiče.

Više volim i ugodnije mi je s HTML -om i upravljačima pa sam to i koristio. Za stvaranje brzog 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 vrlo korisna većina aplikacija node.js 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. Potražuje datoteku www i prati ovu datoteku radi izvršenja. Datoteka www govori node.js -u da pokrene poslužitelj na portu 3000 (to se može promijeniti na bilo što) i učiniti neke druge stvari, kao što je osluškivač događaja i slično. Glavna važna stvar je port na kojem je vaša aplikacija postavljena.

čvorovi_moduli

U ovoj mapi nalazi se 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 knjižnice s unaprijed izrađenim funkcijama za korištenje. Dodatna srednja oprema koju sam koristio za ovaj projekt bili su Nodemailer, Passport, Nodemon, bycrypt i drugi.

javnost

Ovdje bi smjestile sve vaše slike, CSS i javascript za vašu web stranicu. Web stranice ih izravno koriste.

rute

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

pogleda

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. Izgled je vaša glavna datoteka izgleda, a ponekad se nalazi u vlastitoj podmapi izgleda. Datoteka glavnog izgleda poziva vaše druge datoteke upravljača i prikazuje ih, što će imati više smisla kada zaronimo 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 sve konfiguracije za poslužitelj, pa čak i neke posebne funkcije. To će također biti alat za obradu grešaka.

paket.json

Ova je datoteka stvorena Express -om i govori npm -u sav međuprostor koji želite koristiti u svom projektu. Nakon što pokrenete npm install, svi posrednički 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 stranicu. Ostale web stranice koje sam pomogao u razvoju kodirao sam od početka. Izbor je vaš, ovaj korak objašnjava izgled predloška.

Moja web aplikacija koristi bootstrap predložak koji je izvrstan 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 kako 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". Izgled je 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, tada možete vidjeti moj kôd i usporediti ih.

Express generirana datoteka layout.handlebars datoteka

{{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 datoteci js rute. U našem slučaju index.js ima ovaj redak:

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

Ovo poziva datoteku 'index' onoga što ikada pokreće vašu upotrebu, žada, upravljača itd., Tako da u našem slučaju index.handlebars.

Express generirani indeks.ručke

{{titula}}

Dobro došli u {{title}}

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

To vam omogućuje da imate statički dio svoje web stranice i promjenjivi dio. To č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 na svoju web stranicu kako bi svatko mogao poslati e -poruku na moju web stranicu, sa pitanjima ili komentarima.

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

Postavljanje Node Mailera

Za instalaciju 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 datoteku app.js.

Prvi 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 s vašim poslužiteljem pošte, u mom slučaju gmail.

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

var transporter = nodemailer.createTransport ({usluga: 'gmail', auth: {vrsta: '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 stranica.

ClientId, clientSecret, refreshToken i accessToken potrebno je 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: 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};}}));

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', function (req, res) {// Dobijte informacije iz obrasca za kontakt s početne stranice.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 korištene pri slanju poruke od: ' Automatska e -pošta ', na:' [email protected] ', tema:' Obrazac za kontakt s web lokacijom: ' + ime, tekst:' Primili ste novu poruku s obrasca za kontakt svoje 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})

Bljesak

Flash se koristi za prikaz poruka nakon obavljenih radnji. To možete vidjeti kada pošaljete obrazac ili ne unesete ispravno polje.

Instalirajte flash kao i drugi npm middleware.

sudo npm instaliraj connect-flash

var flash = require ('connect-flash'); // je imao flash funkciju za prikaz na zaslonu

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

Omogućite flash koji gura i ažurira poruke na web stranici. Ovo su poruke koje govore o uspjehu ili o pogrešnom unosu podataka.

// Global Vars

app.use (function (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 s bljeskalicom.

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. Pomoću donjih naredbi instalirajte sljedeće.

npm instalirati putovnicu && npm instalirati putovnicu-lokalno && npm instalirati bcryptjs

&& vam omogućuje pokretanje više naredbi u jednom retku.

Prijava i korisnici

Morat ćete stvoriti datoteku login.js i user.js u mapi s rutama. To ć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 putovnica = zahtijevati ('putovnica'); var LocalStrategy = zahtijevaju ('lokalna putovnica'). 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 ('e -pošta', 'E -pošta nije važeća'). isEmail (); req.checkBody ('korisničko ime', '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 (' /prijaviti se'); } });

Razbijajući ovo dio po dio

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

login.js

var express = require ('express');

var router = express. Router (); var putovnica = zahtijevaju ('putovnica'); var LocalStrategy = zahtijevaju ('lokalna putovnica'). Strategija; var User = require ('../ models/user'); /* DOBITE popis korisnika. */// 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) {{(greška)) baciti grešku; ako (! korisnik) {return done (null, false, { poruka: 'Nepoznati korisnik'});} User.comparePassword (lozinka, user.password, funkcija (err, isMatch) {if (err) izbaci grešku; if (isMatch) {return done (null, korisnik);} else { return done (null, false, {message: 'Invalid password'});}});});})); pass.serializeUser (funkcija (korisnik, učinjeno) {gotovo (null, user.id);}); pass.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}), function (req, res) {res.redirect ('/ nadzorna ploča ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Odjavljeni ste'); res.redirect ('/početna stranica');});

module.exports = usmjerivač;

Prvo uključujemo svu potrebnu srednju opremu, zatim uključujemo našu datoteku modela koja je dolje objašnjena. Skrećemo s oznake za prijavu i prikazujemo tekst na upravljaču. Zatim koristimo neke funkcije putovnice 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 potvrde korisničkog imena i lozinke, bit ćete preusmjereni na početnu stranicu koja će prikazati nadzornu ploču dok smo to postavili u indeksnu datoteku. Ovdje također dodajemo mogućnost odjave.

Kao što sam već 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 potrebna je i datoteka user.js.

model/user.js

var mongoose = zahtijevati ('mungos');

var bcrypt = require ('bcryptjs'); // Korisnička shema var UserSchema = mongoose. Schema ({korisničko ime: {type: String, index: true}, lozinka: {type: String}, e -pošta: {type: String}, ime: {type: 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 upit = {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) throw err; povratni poziv (null, isMatch);}); }

Ovaj model prikazuje kako će naši korisnički parametri izgledati, kao i kako ćemo im pristupiti. Već sam spomenuo da ćemo šifrirati naše lozinke. to je tako da se u bazu podataka ne pohranjuje nijedna lozinka u slučaju kršenja. Zaporke se raspršuju srednjim bcrypt-om.

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 ponovno prolaziti.

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

Mongo školjka

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

Trčanje

mongo

Ovo će otvoriti ljusku.

Dodajte zbirku

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

upotrijebite 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 zbirku 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 usporedimo.

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

Izrađujemo count.js i ip.js i pohranjujemo ih u mapu naših modela.

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

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

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

našu početnu stranicu pozvat će 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: "hit counter"}, funkcija (err, count) {userCount = count.count; res.render ('početna stranica', {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 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 zatim 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 brojanja 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 je test, povratni poziv je funkcija 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 brojač ip, da vidite tko najviše posjećuje {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Ovo stvara shemu brojanja i našu.getCount funkciju. Funkcija.getCount 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.

To 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. Više o tome govorim u dolje navedenom vodiču.

Korak 7: Završeno

Eto vam detaljnog vodiča na mojoj web stranici node.js koja je lokalno smještena na mojoj malini 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 moj drugi vodič (uskoro).