Node.js veebileht 2. osa: 7 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:48

Tere tulemast 2. OSA !!

See on minu Node.js veebisaidirakenduse õpetuse 2. osa. Jagasin selle õpetuse kaheks osaks, kuna see eraldab need, kes vajavad lihtsalt lühitutvustust, ja need, kes soovivad veebisaidil täielikku õpetust.

Lähen läbi oma saidi loomise. Teie omad võivad olla erinevad, seega järgige minu oma ja õppige kasutatud tehnikaid. Kui olete valinud teise HTML -malli, on voog veidi erinev. Pidage seda meeles.

Samm: rakenduse struktuur

Nii et minu sait järgib ekspressgeneraatorit, kuid ma kasutasin pigem käepidet kui jade. Kui sulle meeldib jade, siis mine! Jade on lühike käsi HTML ilma kõigi sulgude ja div -ideta. Kui te ei saa aru, et võiksite külastada YouTube'i ja vaadata mõnda HTML -i õpetust.

Ma eelistan ja tunnen end paremini HTML -i ja juhtrauaga, nii et ma kasutasin seda. Käepidemega kiirprojekti loomiseks käivitage käsk express.

väljendada -hbs minu rakenduse nimi

Seejärel jätkake 1. osas toodud juhistega kõigi vaheseinte installimiseks.

Express loob väga spetsiifilise rakenduste struktuuri ja väga kasulikud enamiku node.js rakenduste puhul järgivad seda vormi teatud variatsioonidega.

Lisatud fotol näete erinevaid kaustu ja faile, allpool püüan neid kõiki selgitada.

prügikast

See on kaust, mis käivitatakse kõigepealt, kui node.js teie serveri käivitab. See vaatab www -faili ja järgib seda faili täitmiseks. Www -fail käsib node.js -l käivitada server pordil 3000 (see võib muutuda peaaegu millekski) ja teha muid asju, näiteks sündmuste kuulaja jms. Peamine oluline on port, kuhu teie rakendus on seadistatud.

node_modules

Selles kaustas on nn keskvara. Vaheseadmed Mulle meeldib selgitada lisatarkvarana, et teil oleks lihtsam asju kodeerida. Põhimõtteliselt on need muud raamatukogud, mille funktsioonid on teie jaoks ette valmistatud. Mõned täiendavad keskmised nõud, mida ma selle projekti jaoks kasutasin, olid Nodemailer, Passport, Nodemon, bycrypt ja teised.

avalik

Siia lähevad kõik teie veebisaidi pildid, CSS ja javascript. Veebilehed kasutavad neid otse.

marsruute

Need määratlevad teie saidi marsruudid. Näiteks koduleht, sisselogimisleht ja muud.

vaateid

Nagu näete, on vaated.hbs -failid või.käepidemed, kumbki töötab, see nõuab lihtsalt mõningaid manipuleerimisi failiga app.js. Need on teie lenksu html -lehed, mis kuvatakse brauseris. Paigutus on teie peamine paigutusfail ja mõnikord on see oma paigutuse alamkaustas. Peamine paigutusfail kutsub teie teisi juhtraua faile ja kuvab need, see on koodis sukeldudes mõttekam.

app.js

See on teie peamine rakenduse fail, mõnikord nimetatakse seda serveriks, see sõltub ainult seadistusest. Sellel failil on kogu serveri konfiguratsioon ja isegi mõned erifunktsioonid. See on ka veakäitleja.

package.json

See fail on loodud ekspressiga ja ütleb npm -le kogu vahevara, mida soovite oma projektis kasutada. Kui olete käivitanud npm install, installitakse kõik selles failis välja kutsutud keskmised seadmed kausta node_modules.

2. samm: paigutage oma mall välja

Saate luua kogu oma HTML -i nullist või kasutada malli. Olen selle saidi jaoks malli kasutanud. Teised saidid, mida olen aidanud arendada, olen nullist kodeerinud. Valik on teie, see samm selgitab malli paigutust.

Minu veebirakendus kasutab alglaadimismalli, mis on suurepärane hämmastava CSS -i tegemisel. Mallide leidmiseks külastage seda saiti. Nagu eelmises etapis öeldud, on kõik vajalikud css-, js- ja img -failid avaliku kausta all. Need failid muudavad saidi paremaks kui tavaline tekst ja selle piltide kasutamine saidil.

Selleks, et juhtraua malli stiil toimiks malliga Lehed on jagatud kaheks osaks. Esimene on see, mida nimetatakse "paigutuseks". Paigutus on atribuudid, mida soovite kuvada oma saidi igal veebilehel. Minu puhul on see päis, millel on navigeerimisriba, ja jalus, mis sisaldab täiendavaid navigeerimis- ja kuvaelemente.

Paigutusfail ja muud juhtraua failid on vaadete kaustas. Ma lähen üle lihtsamale paigutusele ekspressgeneraatorist, mida te varem kasutasite, et näidata, kuidas see kontseptsioon töötab, siis näete minu koodi ja saate neid võrrelda.

Expressi loodud layout.handlebars fail

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

Tõeline juhtraua võlu on lenksudes {{title}} ja {{{body}}}. Seega toimivad need kaks erinevalt {{title}} on muutuja, mis edastatakse failist index.js marsruutidel, kui see on mallile edastatud. Märgend {{{body}}} võtab teie marsruudi js -faili renderdusfunktsiooni nime. Meie puhul on indeks.js sellel real:

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

See kutsub indeksfaili selle kohta, mida te kunagi kasutate, jade, lenks ja nii edasi, nii et meie puhul index.handlebars.

Ekspressi loodud indeks.käepidemed

{{title}}

Tere tulemast teenusesse {{title}}

Fail index.handlebars edastatakse muutujana märgendile {{{body}}} ja kuvatakse teie veebilehel.

See võimaldab teil omada oma veebisaidi staatilist osa ja muutuvat osa. See muudab päised ja jalused kenaks, kuna te ei pea kogu lehte uuesti renderdama, uue lehe laadimisel muudetakse ainult osa teavet.

3. samm: kontaktivorm

Lisasin oma veebisaidile kontaktivormi, et kõik saaksid minu saidi e -postiga saata küsimusi või kommentaare.

Sellel kontaktivormil kasutati npm keskvara, mille nimi on Node Mailer.

Sõlme Maileri seadistamine

Sõlme-maileri installimiseks peate lihtsalt käivitama alloleva koodi oma tipptaseme failis, meie puhul myapp.

sudo npm installige nodemailer

Pärast installimist peate oma failis app.js seadistama mõned asjad.

Esimene on lihtsalt sõltuvus, see ütleb sõlmele, et plaanime seda vahevara kasutada.

var nodemailer = nõuda ('nodemailer');

Teiseks on meie transportija, transportijat kasutatakse teie e -posti serveriga ühenduse loomiseks, minu puhul gmail.

// Transporter kasutas gmaili kontot

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

kui kasutate nodemailerit mõne muu meiliserveriga, vaadake siit dokumentatsiooni ja abi.

Inimeste vahel muutuvad mõned asjad: user, clientId, clientSecret. refreshToken ja accessToken.

Teie userId on e -post, mida soovite kasutada, tegin uue, minu saidiga sama nimega.

Kliendi ID, clientSecret, refreshToken ja accessToken tuleb leida teie Google'i konto kaudu.

Kui vajate rohkem abi, saate seda videot siit vaadata.

Kui kõik need väljad on täidetud, lisame oma sõnumi üksikasjad.

Järgmisena peame kinnitama, et kõik meie vormi väljad on sisestatud ja on kehtivad vastused.

// Express Validatorapp.use (expressValidator ({errorFormatter: funktsioon (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};}}));

Nüüd peame hankima teavet oma veebisaidi kontaktivormilt ja saatma sõnumi.

// Nupp Postita kontaktilt saatmine, peate esitatava vormi jaoks looma edulehega kodulehekülje. = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// loob teabe, mida kasutatakse sõnumi saatmisel aadressilt: ' Automaatne e -post”, aadressile:„ [email protected]”, teema:„ Veebisaidi kontaktivorm:” + nimi, tekst:„ Saite oma veebisaidi kontaktivormilt uue sõnumi. / N / n” +” Siin on üksikasjad: / n / nNimi: ' + nimi +' / n / nE -post: ' + e -post +' / n / nTelefon: ' + telefon +' / n / nSõnum: / n ' + sõnum} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render uuel kodulehel, uurige, kuidas seda eduka sõnumiga teha, näiteks väljalogimisleht})

Välk

Flashi kasutatakse sõnumite kuvamiseks pärast toimingute tegemist. Seda näete vormi esitamisel või välja sisestamata.

Installige välk, nagu ka muud npm vahevara.

sudo npm install connect-flash

var flash = nõuda ('connect-flash'); // oli ekraanisõnumites kuvamiseks välguvõimalus

// Ühenda Flashapp.use (flash ());

Lubage välk, mis lükkab ja värskendab veebisaidil olevaid sõnumeid. Need on sõnumid, mis ütlevad näiteks edu või teave on valesti sisestatud.

// Global Vars

app.use (funktsioon (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('viga'); res.locals.user = req.user || null; next ();});

Mõned vajavad välguga seotud muutujaid.

Siit leiate loodud kontaktivormi.

Samm: sisselogimisleht

See oli lihtsalt midagi, mida tahtsin näha, kas saan hakkama ja võib -olla kasutan seda ka tulevikus. Tahtsin lihtsalt selgitada koodi sellisena, nagu see on minu giti hoidlas.

Nii et see osa kasutab veel mõnda npm keskmist nõud. Installige järgmine, kasutades alltoodud käske.

npm install pass && npm install pass-local && npm install bcryptjs

&& võimaldab teil ühe reaga käivitada mitu käsku.

Sisselogimine ja kasutajad

Peate oma marsruudi kausta alla looma faili login.js ja user.js. Seda kasutatakse kasutaja loomiseks, mis salvestatakse meie andmebaasi, ja võimaldab kasutajal andmebaasi kontrollides sisse logida.

user.js

var express = nõuda ('express'); var router = express. Router (); var pass = nõuda ('pass'); var LocalStrategy = nõuda ('pass-local'). Strateegia; var Kasutaja = nõuda ('../ mudelid/kasutaja'); // Registreeri ruuter.get ('/register', funktsioon (req, res) {res.render ('register');}); // Registreeri kasutaja router.post ('/register', funktsioon (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; // Valideerimine req.checkBody ('nimi', 'Nimi on kohustuslik'). notEmpty (); req.checkBody ('email', 'Email is required')).notEmpty (); req.checkBody ('e -post', 'E -post pole kehtiv'). isEmail (); req.checkBody ('kasutajanimi', 'Kasutajanimi on kohustuslik'). notEmpty (); req.checkBody (' parool ',' Parool on kohustuslik '). notEmpty (); req.checkBody (' password2 ',' Paroolid ei sobi '). võrdub (req.body.password); var viga = req.validationErrors (); if (vead) {res.render ('register', {vead: vead});}} muu {var newUser = uus kasutaja ({nimi: nimi, e -post: e -post, kasutajanimi: kasutajanimi, parool: parool}); User.createUser (newUser, function (viga, kasutaja) {if (err) viska viga; console.log (kasutaja);}); req.flash ('success_msg', 'Olete registreeritud ja saate nüüd sisse logida'); res.redirect (' /Logi sisse'); } });

Murdes selle tükkhaaval maha

Esmalt kaasame kogu vajaliku keskvara, seejärel lisame oma mudelifaili, mida selgitatakse allpool. Me suuname registrisildilt ja kuvame registri juhtraua teksti. Siis tuleb oluline funktsioon. Need võimaldavad meil registreerida oma andmebaasi uue kasutaja. Funktsioon kontrollib, kas kõik väljad on kehtivad ja vormis sisalduvad, vastasel juhul küsib see neid. Järgmisena kontrollib see vigu ja kui vigu ei esine, loob see antud teabega uue kasutaja. Seejärel suunatakse see uuesti sisselogimislehele, võimaldades teil sisse logida.

login.js

var express = nõuda ('ekspress');

var ruuter = express. Router (); var pass = nõuda ('pass'); var LocalStrategy = nõuda ('pass-local'). Strateegia; var Kasutaja = nõuda ('../ mudelid/kasutaja'); /* GET kasutajate kirje. */// Kodulehekülg router.get ('/', function (req, res) {res.render ('login');}); pass.use (uus LocalStrategy (funktsioon (kasutajanimi, parool, tehtud) {User.getUserByUsername (kasutajanimi, funktsioon (err, kasutaja) {if (err) viska viga; if (! user) {return done (null, false, { sõnum: 'Tundmatu kasutaja'});} User.comparePassword (parool, kasutaja.parool, funktsioon (err, isMatch) {if (err) viska viga; if (isMatch) {return done (null, user);} else { tagastamine tehtud (null, vale, {message: 'Vale parool'});}});});})); pass.serializeUser (funktsioon (kasutaja, valmis) {valmis (null, kasutaja.id);}); pass.deserializeUser (funktsioon (id, tehtud) {User.getUserById (id, funktsioon (err, user) {done (err, user);});}); router.post ('/login', pass.authenticate ('local', {successRedirect: '/', failedRedirect: '/login', failFlash: true}), function (req, res) {res.redirect ('/ armatuurlaud ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Olete välja logitud'); res.redirect ('/koduleht');});

moodul.eksport = ruuter;

Esmalt kaasame kogu vajaliku keskvara, seejärel lisame oma mudelifaili, mida selgitatakse allpool. Suundume sisselogimismärgendist ja kuvame oma sisselogimisraua teksti. Seejärel kasutame mõningaid passi funktsioone, et võtta sisestatud kasutajanimi ja parool ning kontrollida neid meie andmebaasi alusel. Kasutame ka krüpteeritud parooli, mis võib vaarika pi -le sisselogimise veidi aeglustada. Järgnevalt selgitan seda täpsemalt. Pärast kasutajanime ja parooli kinnitamist suunatakse teid avalehele, kus kuvatakse armatuurlaud, kui me selle indeksfailis seadistame. Lisame siia ka väljalogimise võimaluse.

Nagu ma varem mainisin, peame andmebaasi kontrollimiseks looma ka mudeli.

Selleks looge kaust oma rakenduste peamise kausta alla, mida nimetatakse mudeliteks. Selles kaustas on vaja ka faili user.js.

mudel/user.js

var mongoose = nõuda ('mongoose');

var bcrypt = nõuda ('bcryptjs'); // Kasutajaskeem var UserSchema = mongoose. Schema ({kasutajanimi: {tüüp: String, indeks: true}, parool: {tüüp: string}, e -post: {tüüp: string}, nimi: {tüüp: string}}); var User = module.exports = mongoose.model ('Kasutaja', UserSchema);

module.exports.createUser = funktsioon (uuskasutaja, tagasihelistamine) {

bcrypt.genSalt (10, funktsioon (viga, sool) {bcrypt.hash (uuskasutaja.parool, sool, funktsioon (err, räsi) {newUser.password = hash; newUser.save (tagasihelistamine);});}); } module.exports.getUserByUsername = funktsioon (kasutajanimi, tagasihelistamine) {var query = {kasutajanimi: kasutajanimi}; User.findOne (päring, tagasihelistamine); } module.exports.getUserById = funktsioon (id, tagasihelistamine) {User.findById (id, tagasihelistamine); } module.exports.comparePassword = funktsioon (kandidaatparool, räsi, tagasihelistamine) {bcrypt.compare (kandidaatparool, räsi, funktsioon (err, isMatch) {if (eks) viska viga; tagasihelistamine (null, isMatch);}); }

See mudel kirjeldab, millised näevad välja meie kasutajaparameetrid ja kuidas neile juurde pääseme. Mainisin varem, et krüpteerime oma paroolid. seda selleks, et rikkumise korral ei salvestataks kellegi parooli andmebaasi. Paroolid on räsitud, kasutades keskvara bcrypt.

5. samm: liiklusloendur

Tahtsin näha, kui palju unikaalseid kasutajaid minu veebilehte külastas, ja lugeda "tabamuste" arvu. Selleks on palju viise, ma selgitan, kuidas mul läks.

See kasutab mongodb -kogu, et jälgida, kui palju kasutajaid on minu lehte külastanud ja mitu korda iga ainulaadne külastaja külastas.

Kuna me oleme juba rääkinud mongoDB seadistamisest, ei lähe ma seda uuesti läbi.

Võimalik, et peate kompileerimiseks lisama oma andmebaasi kaks kogu. Selleks saate kasutajaliidese kasutamisel kas RoboMongo installida, kuid kui kasutate peata vaarikapi, nagu mina, naudite järgmisi käske.

Mongo kest

Db -i redigeerimiseks, teabe hankimiseks või kogu loomiseks vajate peata seadme mongokest.

Jookse

mongo

See avab kesta.

Lisa kogu

Minu puhul nimetatakse andmebaasi loginappiks, võite sellele nime anda, mida soovite.

kasutage oma nime nime

Vajame kogu, mis hoiab kõiki meie saiti külastavate kasutajate IP -aadresse.

db.creatCollection ("ip")

Järgmisena loome kogu, mis loeb meie saidi kordumatud hitid. See lähtestatakse ID -ga ja loendur algab 0 -st.

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

Jälgige IP -aadresse

Selleks tõmbame kasutajad Ip -le, kui nad meie kodulehte külastavad, suurendame nende arvu ja salvestame nad, et neid hiljem võrrelda.

Peame looma mõned mudelid oma manguskeemide salvestamiseks ja lisama mõne koodi meie kodulehele.js.

Loome count.js ja ip.js ning salvestame need oma mudelite kausta.

Fail ip.js on lihtsalt meie ip -aadressi skeem

var mongoose = nõuda ('mongoose'); // pakettide käitleja mongo jaoks

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

Meie koduleht helistab count.js -le, et algatada tabamuste jälgimine. Seda tehakse järgmiselt.

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

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

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

See juhtub iga kord, kui keegi läheb meie kodulehele, antud juhul theinternet.onthewifi.com/homepage.

See kontrollib kasutaja IP -d, ip4 või ip6, ja salvestab selle väärtuse sinna, kuhu see selle aadressile count.get.collection saadab, mis on meie count.js -faili salvestatud funktsioon.

Pärast kasutaja ainulaadsuse kontrollimist tagastab ta ja postitab loendusväärtuse juhtlehe muutujana kodulehele.

Fail count.js on järgmine.

//count.jsvar mongo = nõuda ('mongodb'); // toetab andmebaasi var mongoose = need ('mongoose'); // pakettide käitleja mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mangus.ühendus; var Ip = nõuda ('../ 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 = funktsioon (count, ipc, Public_ip, callback) {// count on test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add uus IP, kui seda pole andmebaasis, ja värskendusloendur {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // lisage uus IP andmebaas count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // värskendage konkreetset IP -loendurit, et näha, kes külastab kõige rohkem {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

See loob loendusskeemi ja funktsiooni.getCount. Funktsioon.getCount kontrollib andmebaasi kasutaja ip -st ja kui see leiab, suurendab funktsioon selle kasutaja arvu, mitte tabamuste loendurit. Kui aga kasutajate IP -d ei leita, loob see kasutajate IP -ga uue kogumisobjekti ja suurendab tabamuste loendurit 1 võrra.

Seejärel tagastatakse see ja kuvatakse veebilehele.

Seal on see ip jälgimise tabamuse loendur.

6. samm: ajaveeb

Proovin praegu arendada ajaveebi, mis keskendub minu huvidele tarkvara, nutikate kodude ja Polaroidide kohta. Seega lõin blogi rubriigi. Blogi kasutab staatilisi html -lehti ja juhtraami raamistikku. Pärast blogimise lihtsustamiseks paremate tehnoloogiate uurimist olen oma veebisaidi hugo abil ümber kujundanud. Hugo on staatiline html -generaator. Ma räägin sellest lähemalt allpool mainitud õpetuses.

7. samm: lõpetatud

Siit leiate põhjaliku õpetuse minu veebisaidil node.js, mida hostitakse kohapeal minu vaarika pi. Kui teil on küsimusi või kommentaare, jätke need allpool.

Loodan, et see aitab ka teisi.

Selle saidi teistsuguse lähenemise jaoks, kasutades staatilist veebilehegeneraatorit hugo, vaadake minu teist õpetust (varsti).