Spletna stran Node.js 2. del: 7 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:05

Dobrodošli v 2. DELU !!

To je drugi del moje vadnice za uporabo spletne strani Node.js. To vadnico sem razdelil na dva dela, saj ločuje tiste, ki potrebujejo le kratek uvod, in tiste, ki želijo popolno vadnico na spletni strani.

Grem skozi ustvarjanje moje spletne strani. Vaše so lahko drugačne, zato sledite mojim in se naučite uporabljenih tehnik. Ko izberete drugo predlogo HTML, bo tok nekoliko drugačen. Imejte to v mislih.

1. korak: Struktura aplikacije

Tako moje spletno mesto sledi generatorju hitrih izrazov, vendar sem namesto žada uporabil krmilo. Če vam je všeč žad, pojdite! Jade je kratek HTML HTML brez vseh oklepajev in div. Če ne razumete, da bi radi obiskali youtube in si ogledali nekaj vaj HTML.

Raje in bolj mi je všeč HTML in krmilo, zato sem to uporabil. Če želite ustvariti hitri projekt z ročaji, zaženite ukaz express.

express --hbs nameofmyapp

Nato nadaljujte s korakom v 1. delu za namestitev vse vmesne opreme.

Express ustvari zelo specifično strukturo aplikacij in zelo uporabna ena večina aplikacij node.js sledi temu obrazcu z nekaj različicami.

Na priloženi fotografiji lahko vidite različne mape in datoteke, spodaj poskušam vse to razložiti.

koš

To je mapa, ki se najprej zažene, ko node.js zažene vaš strežnik. Poišče datoteko www in ji sledi za izvedbo. Datoteka www pove node.js, naj zažene strežnik na vratih 3000 (to se lahko spremeni v skoraj vse) in naredi nekatere druge stvari, na primer poslušalca dogodkov in podobno. Najpomembnejša stvar so vrata, na katerih je nastavljena vaša aplikacija.

node_modules

V tej mapi je tisto, kar imenujemo srednja oprema. Srednjo opremo rad razložim kot dodatno programsko opremo, ki vam olajša kodiranje. To so v bistvu druge knjižnice s funkcijami, ki so vnaprej pripravljene za uporabo. Nekaj dodatne vmesne opreme, ki sem jo uporabil za ta projekt, so bili Nodemailer, Passport, Nodemon, bycrypt in drugi.

javno

Tu bi šle vse vaše slike, CSS in javascript za vaše spletno mesto. Te spletne strani uporabljajo neposredno.

poti

To določa poti za vaše spletno mesto. Na primer domača stran, stran za prijavo in drugo.

poglede

Kot lahko vidite, so pogledi.hbs datoteke ali.handlebars, bosta oba delovala, potrebno je le nekaj manipuliranja z datoteko app.js. To so vaše html strani vašega krmila, ki bodo prikazane v brskalniku. Layout je vaša glavna datoteka postavitve in je včasih v svoji podmapi postavitve. Datoteka glavne postavitve kliče vaše druge datoteke krmila in jih prikaže, kar bo bolj smiselno, ko se potopimo v kodo.

app.js

To je vaša glavna datoteka aplikacije, včasih se imenuje strežnik, odvisno samo od nastavitve. Ta datoteka ima vse konfiguracije za strežnik in celo nekatere posebne funkcije. To bo tudi obravnavalec napak.

package.json

To datoteko ustvari Express in pove npm vso vmesno programsko opremo, ki jo želite uporabiti v svojem projektu. Ko zaženete npm install, bo vsa vmesna programska oprema, poklicana v tej datoteki, nameščena v mapo node_modules.

2. korak: Postavite predlogo

HTML lahko ustvarite iz nič ali uporabite predlogo. Za to spletno mesto sem uporabil predlogo. Druga spletna mesta, ki sem jih pomagal razviti, sem kodiral od začetka. Izbira je vaša, ta korak pojasnjuje postavitev predloge.

Moja spletna aplikacija uporablja zagonsko predlogo, ki odlično ustvarja neverjeten CSS. Če želite poiskati predloge, obiščite to spletno mesto. Kot je bilo že omenjeno v prejšnjem koraku, so vse potrebne datoteke css, js in img v javni mapi. Te datoteke naredijo spletno mesto boljše od navadnega besedila in njegovo uporabo slik na spletnem mestu.

Da bi slog predloge krmila deloval s predlogo Strani so razdeljene na dva dela. Prvi je tisto, kar se imenuje "postavitev". Postavitev so lastnosti, ki bi jih radi prikazali na vsaki spletni strani svojega spletnega mesta. V mojem primeru je to glava z navigacijsko vrstico in noga z dodatnimi deli navigacije in prikaza.

Datoteka postavitve in druge datoteke krmila so v mapi pogledov. Preučil bom enostavnejšo postavitev iz generatorja hitrih izrazov, ki ste ga uporabili prej, da prikažete, kako koncept deluje, nato pa si lahko ogledate mojo kodo in jih primerjate.

Express generirana datoteka layout.handlebars

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

Prava čarovnija krmila je v krmilih {{title}} in {{{body}}}. Torej delujeta različno {{title}} je spremenljivka, ki se posreduje iz datoteke index.js na poteh, ko se enkrat prikaže v predlogi, se prikaže. Oznaka {{{body}}} prevzame vse, kar se kliče v funkciji upodabljanja v datoteki js poti. V našem primeru ima index.js to vrstico:

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

To pokliče datoteko 'index' tistega, kar kdaj poganja vašo uporabo, žada, krmila itd., Tako da v našem primeru index.handlebars.

Express generirano index.handlebars

{{title}}

Dobrodošli v {{title}}

Datoteka index.handlebars se kot spremenljivka posreduje oznaki {{{body}}} in prikaže na vaši spletni strani.

To vam omogoča, da imate statičen del svojega spletnega mesta in spremenljiv del. Zaradi tega so glave in noge prijetne, saj vam ni treba znova upodabljati celotne strani, pri nalaganju nove strani se spremenijo le nekateri podatki.

3. korak: obrazec za stik

V svojo spletno stran sem vključil obrazec za stik, tako da je lahko vsak poslal e -poštno sporočilo z vprašanji ali komentarji na moje spletno mesto.

Ta obrazec za stik je uporabljal srednji program npm, ki se imenuje Node Mailer.

Nastavitev Node Mailerja

Če želite namestiti node-mailer, morate zagnati spodnjo kodo v datoteki najvišje ravni, v našem primeru myapp.

sudo npm install nodemailer

Po namestitvi boste morali v datoteko app.js nastaviti nekaj stvari.

Prva je samo odvisnost, ki vozlišču pove, da nameravamo uporabiti to vmesno programsko opremo.

var nodemailer = require ('nodemailer');

Drugi je naš transporter, transporter se uporablja za povezavo z vašim poštnim strežnikom, v mojem primeru gmail.

// Transporter, uporabljen za pridobitev gmail računa

var transporter = nodemailer.createTransport ({storitev: 'gmail', avt: {vrsta: 'OAuth2', uporabnik: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.acons.screon,: "Q775xefdHA_BGu3ZnY9-6sP-", refreshToken: "1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc ', accessToken:" ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

če uporabljate nodemailer z drugim poštnim strežnikom, poiščite dokumentacijo in pomoč tukaj.

Nekaj stvari se bo od osebe do osebe spremenilo: uporabnik, clientId, clientSecret. refreshToken in accessToken.

Vaš userId je e -poštni naslov, ki ga želite uporabiti. Naredil sem novega, ki se imenuje enako kot moje spletno mesto.

ClientId, clientSecret, refreshToken in accessToken je treba najti v vašem google računu.

Če potrebujete dodatno pomoč, si lahko ogledate ta video tukaj.

Ko so vsa ta polja izpolnjena, bomo dodali podrobnosti našega sporočila.

Nato moramo potrditi, da so vsa polja v naši obliki vnesena in da so veljavni 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};}}));

Zdaj moramo dobiti informacije iz obrazca za stik na naši spletni strani in poslati sporočilo.

// Objava iz gumba za pošiljanje stika, ustvariti domačo stran s sporočilom o uspehu za poslane obrazceapp.post ('/contact_Form', function (req, res) {// Pridobite podatke iz obrazca za stik z domače strani.hbs var ime = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// ustvari podatke, uporabljene pri pošiljanju sporočila od: ' Samodejno e -poštno sporočilo ', na naslov:' [email protected] ', naslov:' Obrazec za stik s spletnim mestom: ' + ime, besedilo:' Prejeli ste novo sporočilo s kontaktnega obrazca vašega spletnega mesta. / N / n ' +' Tukaj so podrobnosti: / n / nIme: ' + ime +' / n / nEmail: ' + email +' / n / nTelefon: ' + telefon +' / n / n Sporočilo: / n ' + sporočilo} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // upodabljanje nova domača stran, preverite, kako to storite s sporočilom o uspehu, na primer stran za odjavo})

Flash

Flash se uporablja za prikaz sporočil po opravljenih dejanjih. To lahko vidite, ko oddate obrazec ali pa ne vnesete polja pravilno.

Namestite flash tako kot drugo vmesno programsko opremo npm.

sudo npm namestite connect-flash

var flash = require ('connect-flash'); // je imel funkcijo bliskavice za prikaz na zaslonskih sporočilih

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

Omogočite bliskavico, ki potisne in posodobi sporočila na spletni strani. To so sporočila, ki govorijo o uspehu ali pa so bili podatki vneseni napačno.

// 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 ();});

Nekateri potrebujejo spremenljivke, povezane z bliskavico.

Tam imate pripravljen kontaktni obrazec.

4. korak: stran za prijavo

To je bilo nekaj, kar sem hotel videti, če bi lahko naredil, in morda ga bom uporabil v prihodnosti. Želel sem samo razložiti kodo, kot je v mojem skladišču git.

Torej ta del uporablja še nekaj npm srednjih izdelkov. S spodnjimi ukazi namestite naslednje.

npm namestitev potnega lista && npm namestitev potnega lista-local && npm install bcryptjs

&& vam omogoča izvajanje več ukazov v eni vrstici.

Prijava in uporabniki

V mapi s potmi boste morali ustvariti datoteko login.js in user.js. To bo uporabljeno, da se omogoči ustvarjanje uporabnika, ki bo shranjen v naši bazi podatkov, in uporabniku omogoči prijavo s preverjanjem baze podatkov.

user.js

var express = require ('express'); var router = express. Router (); var potni list = zahteva ("potni list"); var LocalStrategy = zahteva ('lokalni potni list'). Strategija; var Uporabnik = zahteva ('../ models/user'); // Registracija router.get ('/register', function (req, res) {res.render ('register');}); // Registracija uporabnika 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; // Preverjanje req.checkBody ('ime', 'Ime je potrebno'). notEmpty (); req.checkBody ('e -pošta', 'E -pošta je obvezna').notEmpty (); req.checkBody ('e -pošta', 'E -pošta ni veljavna'). isEmail (); req.checkBody ('uporabniško ime', 'Uporabniško ime je potrebno'). notEmpty (); req.checkBody (' geslo ',' Geslo je potrebno '). notEmpty (); req.checkBody (' geslo2 ',' Gesla se ne ujemata '). equals (req.body.password); var napake = req.validationErrors (); if (napake) {res.render ('register', {error: 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', 'Ste registrirani in se lahko zdaj prijavite'); res.redirect (' /Vpiši se'); } });

Razbijanje tega po kosih

Najprej vključimo vso potrebno vmesno opremo, nato vključimo našo datoteko modela, ki je razložena spodaj. Umaknemo se od oznake registra in prikažemo besedilo krmila registra. Potem pride pomembna funkcija. Ti nam omogočajo, da v svojo bazo podatkov registriramo novega uporabnika. Funkcija preveri, ali so vsa polja veljavna in vključena v obrazec, če ne, jih bo pozvala. Nato preveri napake in če ne pride do napak, ustvari novega uporabnika z navedenimi informacijami. Nato se preusmeri na stran za prijavo, kar vam omogoča prijavo.

login.js

var express = require ('express');

var usmerjevalnik = express. Router (); var potni list = zahteva ('potni list'); var LocalStrategy = zahteva ('lokalni potni list'). Strategija; var Uporabnik = zahteva ('../ models/user'); /* GET seznam uporabnikov. */// domača stran router.get ('/', function (req, res) {res.render ('login');}); Passport.use (nova LocalStrategy (funkcija (uporabniško ime, geslo, končano) {User.getUserByUsername (uporabniško ime, funkcija (err, uporabnik) {if (err) vrti err; if (! uporabnik) {return done (null, false, { sporočilo: 'Neznan uporabnik'});} User.comparePassword (geslo, uporabniška geslo, funkcija (err, isMatch) {if (err) vrži err; if (isMatch) {return done (null, user);} else { return done (null, false, {message: 'Neveljavno geslo'});}});});})); Passport.serializeUser (funkcija (uporabnik, končano) {končano (ničelno, user.id);}); Passport.deserializeUser (funkcija (id, končano) {User.getUserById (id, funkcija (napaka, uporabnik) {končano (napaka, uporabnik);});}); router.post ('/login', Passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/login', failFlash: true}), function (req, res) {res.redirect ('/ armaturna plošča ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Odjavljeni ste'); res.redirect ('/domača stran');});

module.exports = usmerjevalnik;

Najprej vključimo vso potrebno vmesno opremo, nato vključimo datoteko modela, ki je razložena spodaj. Umaknemo se od prijavne oznake in prikažemo besedilo na krmilu za prijavo. Nato uporabimo nekatere funkcije potnega lista, da vzamemo vneseno uporabniško ime in geslo ter ju primerjamo z našo bazo podatkov. Uporabili bomo tudi šifrirano geslo, ki lahko nekoliko upočasni prijavo na maline pi. Več o tem bom razložil v nadaljevanju. Po potrditvi uporabniškega imena in gesla boste preusmerjeni na domačo stran, ki bo prikazala nadzorno ploščo, ko smo to nastavili v indeksni datoteki. Tukaj dodamo tudi možnost odjave.

Kot sem že omenil, bomo morali ustvariti tudi model za preverjanje baze podatkov.

To naredite tako, da pod glavno mapo aplikacije ustvarite mapo, imenovano models. V tej mapi je potrebna tudi datoteka user.js.

model/user.js

var mongoose = require ('mongoose');

var bcrypt = require ('bcryptjs'); // Uporabniška shema var UserSchema = mongoose. Schema ({uporabniško ime: {tip: String, indeks: true}, geslo: {vrsta: String}, e -poštni naslov: {vrsta: String}, ime: {vrsta: String}}); var User = module.exports = mongoose.model ('Uporabnik', UserSchema);

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

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, sol, function (err, hash) {newUser.password = hash; newUser.save (povratni klic);});}); } module.exports.getUserByUsername = funkcija (uporabniško ime, povratni klic) {var query = {username: username}; User.findOne (poizvedba, povratni klic); } module.exports.getUserById = funkcija (id, povratni klic) {User.findById (id, povratni klic); } module.exports.comparePassword = function (kandidatPassword, hash, callback) {bcrypt.compare (kandidatPassword, hash, function (err, isMatch) {if (err) throw err; povratni klic (null, isMatch);}); }

Ta model opisuje, kako bodo videti naši uporabniški parametri in kako bomo do njih dostopali. Že prej sem omenil, da bomo šifrirali svoja gesla. to je zato, da se v primeru kršitve v zbirko podatkov ne shrani nobeno geslo. Gesla se zgostijo s srednjim bcrypt-om.

5. korak: Števec prometa

Želel sem videti, koliko edinstvenih uporabnikov je obiskalo mojo spletno stran in prešteti število "zadetkov". Obstaja veliko načinov za to, razložil bom, kako sem se tega lotil.

Ta uporablja zbirko mongodb za sledenje, koliko uporabnikov je obiskalo mojo stran in kolikokrat je obiskal vsak edinstven obiskovalec.

Ker smo že govorili o namestitvi mongoDB, tega ne bom ponovil.

Za sestavljanje boste morda morali v zbirko podatkov dodati dve zbirki. Če želite to narediti, lahko namestite RoboMongo, če uporabljate uporabniški vmesnik, če pa uporabljate malinov pi brez glave, kot sem jaz, boste zabavali naslednje ukaze.

Mongo lupina

Če želite urediti db, pridobiti informacije ali ustvariti zbirko, potrebujete mongo lupino na enoti brez glave.

Teči

mongo

To bo odprlo lupino.

Dodajte zbirko

V mojem primeru se zbirka podatkov imenuje loginapp, lahko jo poimenujete, kot želite.

uporabite nameofyourdb

Potrebujemo zbirko, ki vsebuje ves naš IP naslov uporabnikov, ki obiščejo našo spletno stran.

db.creatCollection ("ip")

Nato ustvarimo zbirko za štetje edinstvenih zadetkov na naši spletni strani. To se inicializira z ID -jem in štetjem, ki se začne pri 0.

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

Sledite naslovom IP

V ta namen bomo uporabnike IP obiskali, ko bodo obiskali našo domačo stran, povečali naše število in jih shranili, da jih bodo kasneje primerjali.

Ustvariti moramo nekaj modelov za shranjevanje shem mongoose in dodati nekaj kode v datoteko homepage.js.

Ustvarjamo count.js in ip.js ter jih shranimo v mapo z modeli.

Datoteka ip.js je le shema za naš naslov ip

var mongoose = require ('mongoose'); // upravljavec paketov za mongo

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

count.js bo poklicala naša domača stran, da sproži sledenje zadetkom. To se naredi tako, kot je prikazano spodaj.

//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 ('domača stran', {count: userCount}); }); });

To se zgodi vsakič, ko nekdo obišče našo domačo stran, v tem primeru theinternet.onthewifi.com/homepage.

Preveri IP uporabnika, ip4 ali ip6, nato pa to vrednost shrani, kamor jo pošlje na count.get.collection, ki je funkcija, shranjena v naši datoteki count.js.

Ko preveri edinstvenost uporabnika, se nato vrne in vrednost števca objavi na domači strani kot spremenljivko krmila.

Datoteka count.js je naslednja.

//count.jsvar mongo = require ('mongodb'); // podpira bazo podatkov var mongoose = require ('mongoose'); // upravljalec paketov za mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = require ('../ models/ip'); // Štetje sheme 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 klic je function ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // dodaj nov IP, če ga ni v bazi podatkov, in števec posodobitev {var new_ip = nov IP ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // dodaj nov ip v database count.update (// posodobi števec zadetkov {id: "hit counter"}, {$ inc: {count: 1}})} else // posodobi določen števec ip, da vidim, kdo obišče največ {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Tako nastane shema štetja in funkcija.getCount. Funkcija.getCount preveri bazo podatkov za ip uporabnika in če jo najde, funkcija poveča število tega uporabnika, ne števec zadetkov. Če pa uporabniškega ip -a ne najdemo, bo ustvaril nov zbirni objekt z uporabniškim ip -jem in povečal števec zadetkov za 1.

Ta se nato vrne in prikaže na spletni strani.

Tukaj imate števec zadetkov za sledenje IP -jem.

6. korak: Blog

Trenutno poskušam razviti blog, osredotočen na moja zanimanja o programski opremi, pametnih domovih in polaroidih. Tako sem ustvaril razdelek za blog. Spletni dnevnik uporablja statične strani html in okvir krmila. Ko sem preučil boljše tehnologije za lažje pisanje bloga, sem svoje spletno mesto preoblikoval s pomočjo huga. Hugo je statični generator html. Več o tem govorim v spodnji vadnici.

7. korak: Končano

Tukaj je poglobljena vadnica na mojem spletnem mestu node.js, ki gostuje lokalno na mojem maline pi. Če imate vprašanja ali komentarje, jih pustite spodaj.

Upam, da to pomaga drugim.

Za drugačen pristop do tega spletnega mesta z uporabo huga, generatorja statičnih spletnih strani si oglejte mojo drugo vadnico (kmalu).