Webová stránka Node.js, časť 2: 7 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:58

Vitajte v ČASTI 2 !!

Toto je časť 2 môjho tutoriálu k webovej aplikácii Node.js. Tento návod som rozdelil na dve časti, pretože oddeľuje tých, ktorí potrebujú iba stručný úvod, a tých, ktorí chcú úplný návod na webovej stránke.

Prejdem si tvorbu svojich stránok. Váš môže byť iný, preto sa riaďte mojimi a naučte sa používané techniky. Keď si vyberiete inú šablónu HTML, tok sa bude mierne líšiť. Majte to na pamäti.

Krok 1: Štruktúra aplikácie

Moje stránky teda nasledujú expresný generátor, avšak namiesto nefritu som používal riadidlá. Ak máte radi jadeit, choďte do toho! Jade je HTML s krátkou rukou bez všetkých zátvoriek a div. Ak nerozumiete, možno budete chcieť navštíviť youtube a pozrieť si niekoľko tutoriálov HTML.

Dávam prednosť a viac mi vyhovuje HTML a riadidlá, takže som to použil. Ak chcete vytvoriť expresný projekt s riadidlami, spustite príkaz Express.

express --hbs nameofmyapp

Potom pokračujte podľa postupu v časti 1 na inštaláciu celého middlewaru.

Express vytvára veľmi špecifickú štruktúru aplikácií a je veľmi užitočná. Väčšina aplikácií node.js sleduje tento formulár s určitými obmenami.

Na priloženej fotografii môžete vidieť rôzne priečinky a súbory, nižšie sa ich snažím vysvetliť.

bin

Toto je priečinok, ktorý sa spustí ako prvý pri spustení servera node.js. Pozrie sa na súbor www a podľa tohto súboru sa spustí. Súbor www hovorí node.js, aby spustili server na porte 3000 (to sa môže zmeniť takmer na čokoľvek) a vykonalo niekoľko ďalších vecí, ako napríklad poslucháč udalostí a podobne. Hlavnou dôležitou vecou je port, na ktorom je vaša aplikácia nastavená.

node_modules

V tomto priečinku sa nazýva middle-ware. Middle-ware Rád vysvetlím ako doplnkový softvér, ktorý vám uľahčí kódovanie. Sú to v podstate iné knižnice s vopred pripravenými funkciami, ktoré môžete používať. Niektorý ďalší middleware, ktorý som použil pre tento projekt, bol Nodemailer, Passport, Nodemon, bycrypt a ďalšie.

verejná

Sem by smerovali všetky vaše obrázky, CSS a javascript pre vaše webové stránky. Tieto sú priamo používané webovými stránkami.

trasy

Tu sú definované trasy pre vašu stránku. Ako napríklad domovská stránka, prihlasovacia stránka a ďalšie.

názory

Ako vidíte, zobrazenia sú súbory.hbs alebo.handlebars, buď to bude fungovať, vyžaduje to iba určitú manipuláciu so súborom app.js. Toto sú html stránky vašich riadidiel, ktoré sa zobrazia v prehliadači. Rozloženie je hlavným súborom rozloženia a niekedy je vo vlastnom podpriečinku rozloženia. Hlavný súbor rozloženia volá do vašich ostatných súborov riadidiel a zobrazuje ich, čo bude dávať väčší zmysel, keď sa ponoríme do kódu.

app.js

Toto je váš hlavný súbor aplikácie, niekedy sa tomu hovorí server, záleží na nastavení. Tento súbor má všetku konfiguráciu pre server a dokonca aj niektoré špeciálne funkcie. Bude to tiež nástroj na spracovanie chýb.

package.json

Tento súbor je vytvorený expresom a hovorí NPM všetkému middlewaru, ktorý chcete použiť vo svojom projekte. Akonáhle spustíte npm install, všetok prostredný softvér vyvolaný v tomto súbore bude nainštalovaný do priečinka node_modules.

Krok 2: Rozloženie šablóny

Všetky svoje HTML môžete vytvoriť úplne od začiatku alebo môžete použiť šablónu. Na tento web som použil šablónu. Ďalšie stránky, ktoré som vyvinul, som kódoval od začiatku. Voľba je na vás, tento krok vysvetľuje rozloženie šablóny.

Moja webová aplikácia používa šablónu bootstrapu, ktorá je skvelá na vytváranie úžasných CSS. Ak chcete nájsť šablóny, navštívte tento web. Ako už bolo uvedené v predchádzajúcom kroku, všetky potrebné súbory css, js a img sú vo verejnom priečinku. Vďaka týmto súborom vyzerá web lepšie ako obyčajný text a spôsob, akým sa na webe používajú obrázky.

Aby šablónovací štýl riadidiel fungoval podľa šablóny Stránky sú rozdelené na dve časti. Prvá je to, čo sa posudzuje ako „rozloženie“. Rozloženie je vlastnosti, ktoré by ste chceli, aby sa zobrazovali na každej webovej stránke na vašom webe. V mojom prípade ide o hlavičku s navigačným panelom a pätu, ktorá obsahuje ďalšie časti navigácie a zobrazenia.

Súbor rozloženia a ďalšie súbory riadidiel sú v priečinku zobrazení. Prejdem jednoduchším rozložením z expresného generátora, ktorý ste použili predtým na zobrazenie toho, ako koncept funguje, potom môžete vidieť môj kód a porovnať ho.

Expresne generovaný súbor layout.handlebars

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

Skutočná mágia riadidiel je v riadidlách {{title}} a {{{body}}}. Títo dvaja teda pôsobia odlišne {{title}} je premenná, ktorá je odoslaná zo súboru index.js na trasách, akonáhle je odoslaná do šablóny, zobrazí sa. Značka {{{body}}} preberá všetko, čo sa vo funkcii vykresľovania vo vašom súbore route js nazýva. V našom prípade index.js obsahuje tento riadok:

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

Hovorí sa tomu „indexový“súbor toho, čo kedy vytvára vaše používanie, nefrit, riadidlá a tak ďalej, v našom prípade index.handlebars.

Expresne generovaný index. Riadidlá

{{title}}

Vitajte v službe {{title}}

Súbor index.handlebars je odoslaný ako premenná do značky {{{body}}} a zobrazí sa na vašej webovej stránke.

To vám umožní mať statickú časť vašich webových stránok a variabilnú časť. Vďaka tomu sú hlavičky a päty pekné, pretože nemusíte znova vykresľovať celú stránku, pri načítaní novej stránky sa zmenia iba niektoré informácie.

Krok 3: Kontaktný formulár

Do svojej webovej stránky som začlenil kontaktný formulár, aby ktokoľvek mohol posielať e -maily na moje stránky s otázkami alebo komentármi.

Tento kontaktný formulár používal mid-ware NPM, ktorý sa nazýva Node Mailer.

Nastavenie Node Mailer

Na inštaláciu node-maileru stačí spustiť nižšie uvedený kód v súbore najvyššej úrovne, v našom prípade myapp.

sudo npm nainštalovať nodemailer

Po inštalácii budete musieť v súbore app.js nastaviť niekoľko vecí.

Prvá je len závislosť, ktorá uzlu hovorí, že plánujeme použiť tento middleware.

var nodemailer = require ('nodemailer');

Druhý je náš transportér, transportér sa používa na pripojenie k vášmu poštovému serveru, v mojom prípade k gmailu.

// Transportér slúži na získanie účtu v Gmaile

var transporter = nodemailer.createTransport ({služba: 'gmail', autentifikácia: {typ: 'OAuth2', užívateľ: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.google: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

ak používate nodemailer s iným poštovým serverom, vyhľadajte tu dokumentáciu a pomoc.

Z osoby na osobu sa zmení niekoľko vecí: user, clientId, clientSecret. refreshToken a accessToken.

Your userId je e -mail, v ktorom chcete použiť. Vytvoril som nový s rovnakým názvom ako moje stránky.

ClientId, clientSecret, refreshToken a accessToken je potrebné nájsť prostredníctvom vášho účtu Google.

Ak potrebujete ďalšiu pomoc, môžete sledovať toto video tu.

Akonáhle sú všetky tieto polia vyplnené, pridáme podrobnosti o našej správe.

Ďalej musíme overiť, či boli zadané všetky polia v našom formulári a či ide o platné odpovede.

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

Teraz potrebujeme získať informácie z nášho kontaktného formulára na našej webovej stránke a odoslať správu.

// Tlačidlo na odoslanie kontaktu, je potrebné vytvoriť domovskú stránku so správou o úspechu pre odoslané formuláre.post ('/contact_Form', funkcia (požiadavka, res) {// Získajte informácie z kontaktného formulára na adrese homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// vytvára informácie používané pri odosielaní správy od: ' Automatický e -mail, na: „[email protected]“, predmet: „Webový kontaktný formulár:“+ meno, text: „Dostali ste novú správu z kontaktného formulára na vašom webe. / N / n ' +' Tu sú podrobnosti: / n / nNázov: ' + meno +' / n / nE -mail: ' + e -mail +' / n / nTelefón: ' + telefón +' / n / n Správa: / n ' + správa} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render nová domovská stránka, pozrite sa, ako to urobiť pomocou správy o úspechu, ako je napríklad stránka na odhlásenie})

Blesk

Flash sa používa na zobrazenie správ po vykonaní akcií. Môžete to vidieť pri odosielaní formulára alebo pri nesprávnom zadaní poľa.

Nainštalujte si flash rovnako ako iný NPM middleware.

sudo npm nainštalovať connect-flash

var flash = require ('connect-flash'); // mala funkciu flash na zobrazenie správ na obrazovke

// Pripojte Flashapp.use (flash ());

Povoliť flash, ktorý odosiela a aktualizuje správy na webovej stránke. Toto sú správy, ktoré hovoria o úspechu alebo o tom, že informácie boli zadané nesprávne.

// Globálne var

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 ('chyba'); res.locals.user = req.user || null; next ();});

Niektoré vyžadujú premenné súvisiace s formátom flash.

Tu nájdete vytvorený kontaktný formulár.

Krok 4: Prihlasovacia stránka

To bolo niečo, čo som chcel vidieť, či to dokážem a možno to využijem aj v budúcnosti. Chcel som len vysvetliť kód, ktorý je v mojom úložisku git.

Táto časť teda používa niekoľko ďalších stredných nástrojov npm. Nainštalujte nasledujúce pomocou nižšie uvedených príkazov.

npm install pas && npm install pas-local && npm install bcryptjs

&& vám umožňuje spustiť viac príkazov na jednom riadku.

Prihlásenie a používatelia

V priečinku trás budete musieť vytvoriť súbor login.js a user.js. Toto bude slúžiť na umožnenie vytvorenia používateľa, ktorý bude uložený v našej databáze, a na umožnenie užívateľovi prihlásiť sa kontrolou databázy.

user.js

var expres = require ('expres'); var router = expres. Router (); var pas = vyžadovať ('pas'); var LocalStrategy = require ('pas-miestny'). Stratégia; var Užívateľ = require ('../ models/user'); // Zaregistrujte router.get ('/register', function (req, res) {res.render ('register');}); // Zaregistrujte užívateľa 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 heslo2 = req.body.password2; // Overenie req.checkBody ('meno', 'meno je povinné'). notEmpty (); req.checkBody ('email', 'e -mail je povinný')).notEmpty (); req.checkBody ('email', 'Email nie je platný'). isEmail (); req.checkBody ('username', 'username is required'). notEmpty (); req.checkBody (' heslo ',' vyžaduje sa heslo '). notEmpty (); req.checkBody (' heslo2 ',' heslá sa nezhodujú '). equals (req.body.password); var errors = req.validationErrors (); if (chyby) {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', 'You are registered and can now login'); res.redirect (' /Prihlásiť sa'); } });

Rozpisovanie to kus za kus

Najprv zahrnieme všetok potrebný middleware a potom zahrnieme náš modelový súbor, ktorý je vysvetlený nižšie. Smerujeme zo štítku registra a zobrazujeme text našich riadítok registra. Potom príde dôležitá funkcia. Tieto nám umožňujú zaregistrovať nového používateľa v našej databáze. Funkcia skontroluje, či sú všetky polia platné a zahrnuté vo formulári, ak nie, vyzve ich na zadanie. Ďalej skontroluje chyby a ak sa nevyskytnú žiadne chyby, vytvorí nového používateľa s uvedenými informáciami. Potom sa presmeruje na prihlasovaciu stránku, čo vám umožní prihlásiť sa.

login.js

var express = require ('expres');

var router = express. Router (); var pas = vyžadovať ('pas'); var LocalStrategy = require ('pas-miestny'). Stratégia; var Užívateľ = require ('../ models/user'); /* ZÍSKAJTE zoznam užívateľov. */// Domovská stránka router.get ('/', function (req, res) {res.render ('login');}); passport.use (new LocalStrategy (funkcia (používateľské meno, heslo, hotovo) {User.getUserByUsername (používateľské meno, funkcia (chyba, používateľ) {if (err) hodiť chybu; if (! užívateľ) {návrat hotový (null, false, {) správa: 'Neznámy používateľ'});} User.comparePassword (heslo, user.password, funkcia (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} else { return done (null, false, {message: 'Invalid password'});}});});})); passport.serializeUser (funkcia (užívateľ, hotovo) {hotovo (null, user.id);}); passport.deserializeUser (funkcia (id, hotovo) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/login', passport.authenticate ('local', {successRedirect: '/', failedRedirect: '/login', failedFlash: true}), function (req, res) {res.redirect ('/ palubná doska ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Ste odhlásení'); res.redirect ('/homepage');});

module.exports = router;

Najprv zahrnieme všetok potrebný middleware a potom zahrnieme náš modelový súbor, ktorý je vysvetlený nižšie. Smerujeme z prihlasovacej značky a zobrazujeme text našich prihlasovacích riadidiel. Potom použijeme niektoré funkcie pasu, aby sme zadané používateľské meno a heslo prevzali a skontrolovali ich v našej databáze. Použijeme tiež šifrované heslo, ktoré môže pri malinovom pi trochu spomaliť prihlasovanie. Ďalej to vysvetlím podrobnejšie. Po overení používateľského mena a hesla budete presmerovaní na domovskú stránku, ktorá zobrazí informačný panel, ako sme to nastavili v našom indexovom súbore. Pridávame sem aj možnosť odhlásenia.

Ako som už spomenul, budeme tiež musieť vytvoriť model na kontrolu databázy.

To sa dosiahne vytvorením priečinka pod hlavným priečinkom aplikácie s názvom modely. V tomto priečinku je tiež potrebný súbor user.js.

model/user.js

var mongoose = vyžadovať ('mongoose');

var bcrypt = require ('bcryptjs'); // Schéma používateľa var UserSchema = mongoose. Schema ({používateľské meno: {type: String, index: true}, heslo: {type: String}, e -mail: {type: String}, meno: {type: String}}); var Používateľ = modul.exports = mongoose.model ('Používateľ', 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 = funkcia (používateľské meno, spätné volanie) {var query = {používateľské meno: používateľské meno}; User.findOne (dotaz, spätné volanie); } module.exports.getUserById = funkcia (id, spätné volanie) {User.findById (id, callback); } module.exports.comparePassword = funkcia (candidatePassword, hash, callback) {bcrypt.compare (candidatePassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Tento model načrtáva, ako budú vyzerať naše používateľské parametre a ako k nim budeme pristupovať. Predtým som spomenul, že budeme šifrovať naše heslá. je to tak, aby sa v prípade porušenia neuložilo žiadne heslo do databázy. Heslá sú hašované pomocou bcrypt middlewaru.

Krok 5: Počítadlo návštevnosti

Chcel som vidieť, koľko unikátnych používateľov navštívilo moju webovú stránku a spočítať počet „prístupov“. Existuje mnoho spôsobov, ako to urobiť, vysvetlím, ako som k tomu pristúpil.

Táto zbierka mongodb sleduje, koľko používateľov navštívilo moju stránku a koľkokrát ich navštívil každý jedinečný návštevník.

Pretože sme už hovorili o nastavení mongoDB, nebudem sa ním znova zaoberať.

Na kompiláciu bude možno potrebné pridať dve kolekcie do databázy. Ak to chcete urobiť, môžete si buď nainštalovať RoboMongo, ak používate používateľské rozhranie, ale ak používate bezhlavé malinové pi ako ja, nasledujúce zábavné príkazy vás budú baviť.

Mongo škrupina

Na úpravu db, získanie informácií alebo vytvorenie zbierky budete potrebovať mongo shell na bezhlavej jednotke.

Utekaj

mongo

Tým sa otvorí škrupina.

Pridajte zbierku

V mojom prípade sa databáza nazýva loginapp, môžete ju pomenovať, ako chcete.

použite nameofyourdb

Potrebujeme zbierku, ktorá by uchovávala všetky naše adresy IP používateľov, ktorí navštevujú naše stránky.

db.creatCollection ("ip")

Ďalej vytvoríme zbierku na počítanie jedinečných prístupov na naše stránky. Toto je inicializované id a číslom začínajúcim od 0.

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

Sledujte IP adresy

Za týmto účelom stiahneme IP používateľov pri návšteve našej domovskej stránky, zvýšime ich počet a uložíme ich, aby sme ich mohli neskôr porovnať.

Musíme vytvoriť niekoľko modelov na ukladanie našich schém mongoose a pridať nejaký kód do nášho súboru homepage.js.

Vytvoríme count.js a ip.js a uložíme ich do priečinka s modelmi.

Súbor ip.js je iba schémou pre našu IP adresu

var mongoose = vyžadovať ('mongoose'); // obsluha balíkov pre mongo

// Schéma počítania var IpSchema = mongoose. Schema ({ip: {type: String,}, count: {type: Number,}}); var Ip = modul.exports = mongoose.model ('Ip', IpSchema);

count.js zavolá naša domovská stránka na spustenie sledovania prístupov. To sa robí tak, ako je uvedené nižšie.

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

Count.getCount (zbierka, ipc, Public_ip, funkcia (počet) {

}); count = db.collection ('count'). findOne ({id: "hit counter"}, funkcia (chyba, počet) {userCount = count.count; res.render ('homepage', {count: userCount}); }); });

Stáva sa to zakaždým, keď niekto prejde na našu domovskú stránku, v tomto prípade na internet.onthewifi.com/homepage.

Kontroluje IP užívateľa, ip4 alebo ip6, a potom uloží túto hodnotu tam, kde ju odošle do count.get.collection, čo je funkcia uložená v našom súbore count.js.

Po skontrolovaní jedinečnosti používateľa sa potom vráti a hodnotu počítania odošle na domovskú stránku ako premennú na riadidlách.

Súbor count.js je nasledujúci.

//count.jsvar mongo = require ('mongodb'); // podporuje databázu var mongoose = require ('mongoose'); // obsluha balíkov pre mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = require ('../ models/ip'); // Schéma počítania 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 nová ip, ak nie je v databáze, a počítadlo aktualizácií {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // add new ip to database count.update (// aktualizácia počítadla prístupov {id: "hit counter"}, {$ inc: {count: 1}})}} else // aktualizácia konkrétneho počítadla ip, aby ste zistili, kto navštevuje najviac {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Tým sa vytvorí schéma počítania a naša funkcia.getCount. Funkcia.getCount kontroluje v databáze IP adresu IP používateľov a ak ju nájde, funkcia zvýši počet tohto používateľa, nie počítadlo prístupov. Ak sa však IP ip nenájde, vytvorí sa nový zberný objekt s IP užívateľa a zvýši sa počítadlo prístupov o 1.

Potom sa vráti a zobrazí sa na webovej stránke.

Tu máte počítadlo hitov na sledovanie ip.

Krok 6: Blog

V súčasnej dobe sa snažím vyvinúť blog centralizovaný na moje záujmy o softvéri, inteligentných domácnostiach a polaroidoch. Vytvoril som teda sekciu blogu. Blog používa statické html stránky a rámec riadidiel. Po preskúmaní lepších technológií na uľahčenie blogovania som odvtedy prepracoval svoj web pomocou hugo. Hugo je statický generátor html. Viac o tom hovorím v nižšie uvedenom návode.

Krok 7: Hotovo

Tu nájdete podrobný návod na mojom webe node.js, ktorý je hostený lokálne na mojom Raspberry Pi. Ak máte otázky alebo pripomienky, nechajte ich nižšie.

Dúfam, že to pomôže iným tam vonku.

Odlišný prístup k týmto stránkam pomocou hugo, generátora statických webových stránok, nájdete v mojom inom návode (čoskoro).