Webová stránka Node.js Část 2: 7 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:22

Vítejte u ČÁSTI 2 !!

Toto je část 2 mého výukového programu pro webovou aplikaci Node.js. Tento tutoriál jsem rozdělil na dvě části, protože odděluje ty, kteří potřebují jen stručný úvod, a ty, kteří chtějí úplný návod na webové stránce.

Projdu si tvorbu svých stránek. Váš může být jiný, proto se řiďte mým a naučte se používané techniky. Jakmile vyberete jinou šablonu HTML, tok se bude mírně lišit. Mějte to na paměti.

Krok 1: Struktura aplikace

Moje stránka tedy sleduje expresní generátor, nicméně jsem použil spíše řídítka než nefrit. Pokud máte rádi jadeit, jděte do toho! Jade je krátký HTML bez všech závorek a div. Pokud nerozumíte, možná budete chtít navštívit youtube a podívat se na nějaké HTML návody.

Dávám přednost a jsem spokojenější s HTML a řídítky, takže jsem to použil. Chcete -li vytvořit expresní projekt s řídítky, spusťte příkaz Express.

vyjádřit --hbs nameofmyapp

Poté pokračujte podle kroku v části 1 pro instalaci veškerého middlewaru.

Express vytváří velmi specifickou strukturu aplikace a velmi užitečnou, kterou většina aplikací node.js dodržuje s určitou variací.

Na připojené fotografii vidíte různé složky a soubory, níže se je snažím vysvětlit.

zásobník

Toto je složka, která se spustí jako první, když node.js spustí váš server. Vyhledá soubor www a následuje po provedení tohoto souboru. Soubor www říká node.js, aby spustil server na portu 3000 (to se může změnit téměř na cokoli) a dělal další věci, jako je například posluchač událostí a podobně. Hlavní důležitou věcí je port, na kterém je vaše aplikace nastavena.

node_modules

V této složce se nazývá middle-ware. Middle-ware Rád vysvětlím jako extra software, který vám usnadní kódování. Jsou to v podstatě jiné knihovny s předem připravenými funkcemi, které můžete použít. Nějaký další middleware, který jsem pro tento projekt použil, byl Nodemailer, Passport, Nodemon, bycrypt a další.

veřejnost

Sem by se dostaly všechny vaše obrázky, CSS a javascript pro vaše webové stránky. Ty jsou přímo používány webovými stránkami.

trasy

Toto jsou definice tras pro váš web. Jako domovská stránka, přihlašovací stránka a další.

pohledy

Jak vidíte, pohledy jsou soubory.hbs nebo.handlebars, buď to bude fungovat, jen to vyžaduje určitou manipulaci se souborem app.js. Toto jsou html stránky vašich řídítek, které se zobrazí v prohlížeči. Layout je váš hlavní soubor rozložení a někdy je ve vlastní podsložce rozložení. Hlavní soubor rozvržení volá vaše další soubory řídítek a zobrazuje je, což bude dávat větší smysl, když se ponoříme do kódu.

app.js

Toto je váš hlavní soubor aplikace, někdy se tomu říká server, záleží na nastavení. Tento soubor má veškerou konfiguraci pro server a dokonce i některé speciální funkce. Bude to také obsluha chyb.

balíček.json

Tento soubor je vytvořen expresem a sděluje NPM veškerý middleware, který chcete ve svém projektu použít. Jakmile spustíte npm install, veškerý middleware vyvolaný v tomto souboru bude nainstalován do složky node_modules.

Krok 2: Rozložení šablony

Můžete vytvořit celý svůj HTML od začátku nebo můžete použít šablonu. Pro tento web jsem použil šablonu. Další stránky, na jejichž vývoji jsem pomáhal, jsem zakódoval úplně od začátku. Volba je na vás, tento krok vysvětluje rozložení šablony.

Moje webová aplikace používá šablonu bootstrapu, která je skvělá při vytváření úžasných CSS. Šablony najdete na tomto webu. Jak již bylo uvedeno v předchozím kroku, všechny potřebné soubory css, js a img jsou ve veřejné složce. Díky těmto souborům vypadá web lépe než prostý text a způsob, jakým jsou na webu použity obrázky.

Aby styl šablon řídítek fungoval podle šablony Stránky jsou rozděleny na dvě části. První je to, čemu se říká „rozložení“. Rozložení jsou vlastnosti, které byste chtěli zobrazit na každé webové stránce na vašem webu. V mém případě se jedná o záhlaví s navigačním panelem a zápatí, které obsahuje další části navigace a zobrazení.

Soubor rozložení a další soubory řídítek jsou ve složce zobrazení. Přejdu na jednodušší rozložení z expresního generátoru, který jste dříve použili k zobrazení toho, jak koncept funguje, pak můžete vidět můj kód a porovnat je.

Expresně generovaný soubor layout.handlebars

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

Pravá magie řídítek je v řídítkách {{title}} a {{{body}}}. Tito dva se chovají odlišně {{title}} je proměnná, která je předávána ze souboru index.js v trasách, jakmile je předána do šablony, zobrazí se. Značka {{{body}}} přebírá to, čemu se kdy říká funkce vykreslení ve vašem souboru js js route. V našem případě index.js má tento řádek:

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

Toto nazývá soubor 'indexu' toho, co kdy vytvořilo vaše použití, nefrit, řídítka a tak dále, v našem případě index.handlebars.

Expresně generovaný index. Řídítka

{{titul}}

Vítejte v {{title}}

Soubor index.handlebars je předán jako proměnná do značky {{{body}}} a zobrazí se na vaší webové stránce.

To vám umožní mít statickou část vašeho webu a variabilní část. Díky tomu jsou záhlaví a zápatí pěkné, protože nemusíte znovu vykreslovat celou stránku, při načítání nové stránky se mění pouze některé informace.

Krok 3: Kontaktní formulář

Do své webové stránky jsem začlenil kontaktní formulář, aby kdokoli mohl zaslat e -mail na můj web s dotazy nebo připomínkami.

Tento kontaktní formulář používal NPM middleware, který se nazývá Node Mailer.

Nastavení Node Mailer

K instalaci node-maileru stačí spustit níže uvedený kód v souboru nejvyšší úrovně, v našem případě myapp.

sudo npm install nodemailer

Po instalaci budete muset v souboru app.js nastavit několik věcí.

První je jen závislost, která uzlu říká, že plánujeme použít tento middleware.

var nodemailer = require ('nodemailer');

Za druhé je náš transportér, transportér slouží k připojení k vašemu poštovnímu serveru, v mém případě gmailu.

// Transporter slouží k získání účtu Gmail

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

pokud používáte nodemailer s jiným poštovním serverem, podívejte se zde na dokumentaci a pomoc.

Několik věcí se změní z člověka na člověka: user, clientId, clientSecret. refreshToken a accessToken.

Your userId je e -mail, ve kterém chcete použít. Vytvořil jsem nový se stejným názvem jako můj web.

The clientId, clientSecret, refreshToken a accessToken need to be found through your Google account.

Pokud potřebujete další pomoc, můžete sledovat toto video zde.

Jakmile jsou všechna tato pole vyplněna, přidáme podrobnosti o naší zprávě.

Dále musíme ověřit, že všechna pole v našem formuláři byla zadána a jsou platnými odpověďmi.

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

Nyní potřebujeme získat informace z našeho kontaktního formuláře na naší webové stránce a odeslat zprávu.

// Tlačítko Odeslat z kontaktu Odeslat, je třeba vytvořit domovskou stránku se zprávou o úspěchu pro odeslané formulářeapp.post ('/contact_Form', funkce (req, res) {// Získat informace z kontaktního formuláře z homepage.hbs název var = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// vytvoří informace použité při odesílání zprávy od: ' Automatický e -mail, na: '[email protected]', předmět: 'Kontaktní formulář na web:' + jméno, text: 'Obdrželi jste novou zprávu z kontaktního formuláře na vašem webu. / N / n' + 'Zde jsou podrobnosti: / n / nNázev: ' + jméno +' / n / nEmail: ' + email +' / n / nTelefon: ' + telefon +' / n / nZpráva: / n ' + zprá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, podívejte se, jak to udělat, pomocí zprávy o úspěchu, jako je stránka pro odhlášení})

Blikat

Flash se používá k zobrazení zpráv po provedení akcí. Můžete to vidět při odeslání formuláře nebo při nezadání pole správně.

Nainstalujte flash stejně jako jiný NPM middleware.

sudo npm install connect-flash

var flash = require ('connect-flash'); // měl funkci Flash, aby se zobrazoval na obrazovce

// Připojte Flashapp.use (flash ());

Povolit flash, který odesílá a aktualizuje zprávy na webové stránce. Jsou to zprávy, které říkají například úspěch nebo informace byly zadány nesprávně.

// Globální variace

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

Některé potřebují proměnné spojené s flashem.

Tady máte vytvořený kontaktní formulář.

Krok 4: Přihlašovací stránka

To bylo jen něco, co jsem chtěl zjistit, jestli to dokážu, a možná to budu používat i v budoucnu. Jen jsem chtěl vysvětlit kód tak, jak je v mém úložišti git.

Tato část tedy používá několik dalších NPM middle-ware. Pomocí níže uvedených příkazů nainstalujte následující.

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

&& umožňuje spouštět více příkazů na jednom řádku.

Přihlášení a uživatelé

Ve složce tras budete muset vytvořit soubor login.js a user.js. To bude použito k vytvoření uživatele, který bude uložen v naší databázi, a umožní uživateli přihlásit se kontrolou databáze.

user.js

var express = require ('expres'); var router = express. Router (); var pas = vyžadovat ('pas'); var LocalStrategy = require ('pas-místní'). Strategie; var Uživatel = require ('../ models/user'); // Zaregistrujte router.get ('/register', function (req, res) {res.render ('register');}); // Registrace uživatele 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; // Ověření req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('email', 'Email není platný'). isEmail (); req.checkBody ('username', 'Username is required'). notEmpty (); req.checkBody (' heslo ',' je vyžadováno heslo '). notEmpty (); req.checkBody (' heslo2 ',' hesla se neshodují '). 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 (' /přihlásit se'); } });

Rozbíjíme to kousek po kousku

Nejprve zahrneme veškerý potřebný middleware a poté zahrneme náš soubor modelu, který je vysvětlen níže. Směřujeme ze značky registru a zobrazujeme text našich řídítek registru. Poté přichází důležitá funkce. Ty nám umožňují zaregistrovat nového uživatele do naší databáze. Funkce zkontroluje, zda jsou všechna pole platná a zahrnuta ve formuláři, pokud ne, vyzve je k zadání. Dále zkontroluje chyby a pokud nedojde k žádným chybám, vytvoří nového uživatele s uvedenými informacemi. Poté se přesměruje na přihlašovací stránku, což vám umožní přihlášení.

login.js

var express = require ('expres');

var router = express. Router (); var pas = vyžadovat ('pas'); var LocalStrategy = require ('pas-místní'). Strategie; var Uživatel = require ('../ models/user'); /* ZÍSKEJTE seznam uživatelů. */// Homepage router.get ('/', function (req, res) {res.render ('login');}); passport.use (new LocalStrategy (funkce (uživatelské jméno, heslo, hotovo) {User.getUserByUsername (uživatelské jméno, funkce (chyba, uživatel) {if (err) hodit chybu; if (! uživatel) {návrat hotový (null, false, {) zpráva: 'Neznámý uživatel'});} User.comparePassword (heslo, user.password, funkce (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} else { return done (null, false, {message: 'Invalid password'});}});});})); passport.serializeUser (funkce (uživatel, hotovo) {hotovo (null, user.id);}); passport.deserializeUser (funkce (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 ('/ přístrojová deska'); }); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You are logged out'); res.redirect ('/homepage');});

module.exports = router;

Nejprve zahrneme veškerý potřebný middleware, poté zahrneme náš soubor modelu, který je vysvětlen níže. Směrujeme z přihlašovací značky a zobrazujeme text našich přihlašovacích řídítek. Poté použijeme některé funkce pasu, abychom zadané uživatelské jméno a heslo převzali a zkontrolovali je v naší databázi. Použijeme také šifrované heslo, které může na malinovém pi trochu zpomalit přihlášení. Příště to vysvětlím více. Po ověření uživatelského jména a hesla budete přesměrováni na domovskou stránku, která zobrazí hlavní panel, jak jsme to nastavili v našem indexovém souboru. Přidáváme zde také možnost odhlášení.

Jak jsem již zmínil, budeme také muset vytvořit model pro kontrolu databáze.

To se provádí vytvořením složky v hlavní složce aplikace s názvem models. V této složce je také potřeba soubor user.js.

model/user.js

var mongoose = require ('mongoose');

var bcrypt = require ('bcryptjs'); // Uživatelské schéma var UserSchema = mongoose. Schema ({uživatelské jméno: {type: String, index: true}, heslo: {type: String}, e -mail: {type: String}, jméno: {type: String}}); var Uživatel = modul.exports = mongoose.model ('Uživatel', UserSchema);

module.exports.createUser = funkce (newUser, zpětné volání) {

bcrypt.genSalt (10, funkce (err, sůl) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = funkce (uživatelské jméno, zpětné volání) {var query = {uživatelské jméno: uživatelské jméno}; User.findOne (dotaz, zpětné volání); } module.exports.getUserById = funkce (id, zpětné volání) {User.findById (id, zpětné volání); } module.exports.comparePassword = funkce (candidatePassword, hash, callback) {bcrypt.compare (candidatePassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Tento model popisuje, jak budou vypadat naše uživatelské parametry a jak k nim budeme přistupovat. Předtím jsem zmínil, že budeme šifrovat svá hesla. to proto, aby v případě porušení nebylo do databáze uloženo žádné heslo. Hesla jsou hašována pomocí bcrypt middlewaru.

Krok 5: Počitadlo provozu

Chtěl jsem zjistit, kolik unikátních uživatelů navštívilo moji webovou stránku a spočítat počet „zásahů“. Existuje mnoho způsobů, jak toho dosáhnout, vysvětlím, jak jsem k tomu přistoupil.

To používá kolekci mongodb ke sledování, kolik uživatelů navštívilo moji stránku a kolikrát každý jedinečný návštěvník navštívil.

Jelikož jsme již hovořili o nastavení mongoDB, nebudu jej znovu procházet.

Ke kompilaci budete možná muset přidat dvě kolekce do své databáze. Chcete -li to provést, můžete buď nainstalovat RoboMongo, pokud používáte uživatelské rozhraní, ale pokud používáte bezhlavý malinový pi jako já, budete si užívat následující příkazy.

Mongo skořápka

K úpravě db, získání informací nebo vytvoření sbírky budete potřebovat mongo shell na bezhlavé jednotce.

Běh

mongo

Tím se otevře shell.

Přidejte sbírku

V mém případě se databáze nazývá loginapp, můžete ji pojmenovat, jak chcete.

použijte nameofyourdb

Potřebujeme sbírku, která uchovává veškerou naši IP adresu uživatelů, kteří navštěvují naše stránky.

db.creatCollection ("ip")

Dále vytvoříme kolekci pro počítání unikátních přístupů na naše stránky. Toto je inicializováno ID a číslem začínajícím na 0.

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

Sledujte IP adresy

Za tímto účelem vytáhneme IP uživatele, když navštíví naši domovskou stránku, zvýšíme náš počet a uložíme je, abychom je mohli později porovnat.

Potřebujeme vytvořit některé modely pro ukládání našich schémat mongoose a přidat nějaký kód do našeho souboru homepage.js.

Vytváříme count.js a ip.js a ukládáme je do naší složky modelů.

Soubor ip.js je pouze schéma pro naši IP adresu

var mongoose = require ('mongoose'); // obsluha balíků pro Mongo

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

count.js bude vyvolána naší domovskou stránkou k zahájení sledování požadavků. To se provádí tak, jak je uvedeno níže.

//Homepagerouter.get('/ ', funkce (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 (kolekce, ipc, Public_ip, funkce (počet) {

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

K tomu dochází pokaždé, když někdo přejde na naši domovskou stránku, v tomto případě na internet.onthewifi.com/homepage.

Zkontroluje IP uživatele, ip4 nebo ip6, a poté tuto hodnotu uloží, kam ji odešle do count.get.collection, což je funkce uložená v našem souboru count.js.

Poté, co zkontroluje jedinečnost uživatele, pak se vrátí a zaúčtuje hodnotu count na domovskou stránku jako proměnnou řídítek.

Soubor count.js je následující.

//count.jsvar mongo = require ('mongodb'); // podporuje databázi var mongoose = require ('mongoose'); // obsluha balíčku pro mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = require ('../ models/ip'); // Schéma počítání var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = funkce (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add nový ip, pokud není v databázi, a čítač aktualizací {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // přidání nového ip do database count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})}} else // update specific ip counter, to see who who visit the most {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Tím se vytvoří schéma počítání a naše funkce.getCount. Funkce.getCount zkontroluje DB pro IP uživatele a pokud ji najde, zvýší počet tohoto uživatele, nikoli čítač přístupů. Pokud však IP adresa uživatele není nalezena, vytvoří nový objekt kolekce s IP uživatele a zvýší počítadlo přístupů o 1.

Toto je poté vráceno a zobrazeno na webové stránce.

Tady máte počítadlo hitů pro sledování IP.

Krok 6: Blog

V současné době se snažím vyvinout blog centralizovaný na mé zájmy o software, chytré domácnosti a polaroidy. Vytvořil jsem tedy sekci blogu. Blog používá statické html stránky a rámec řídítek. Poté, co jsem se podíval na lepší technologie, abych usnadnil blogování, jsem od té doby přepracoval svůj web pomocí hugo. Hugo je statický generátor html. Více o tom mluvím v níže uvedeném tutoriálu.

Krok 7: Hotovo

Tam jdete do hloubky tutoriálu na mém webu node.js hostovaném lokálně na mém malinovém pi. Pokud máte dotazy nebo komentáře, zanechte je níže.

Doufám, že to pomůže ostatním tam venku.

Odlišný přístup k tomuto webu pomocí hugo, generátoru statických webových stránek, najdete v mém dalším tutoriálu (již brzy).