Node.js weboldal 2. rész: 7 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:41

Üdvözöljük a 2. RÉSZBEN !!

Ez a Node.js weboldal -alkalmazás bemutató 2. része. Ezt az oktatóanyagot két részre bontottam, mivel elválasztja azokat, akiknek csak egy rövid bemutatkozásra van szükségük, és azokat, akik teljes útmutatót szeretnének egy weboldalon.

Átmegyek az oldal létrehozásán. A tied lehet más, ezért kövesd az enyémet, és ismerd meg az alkalmazott technikákat. Ha másik HTML -sablont választ, a folyamat csak kissé eltérő lesz. Ezt tartsd észben.

1. lépés: Az alkalmazás felépítése

Tehát az oldalam az expressz generátort követi, azonban kormányt használtam a jade helyett. Ha szereted a jade -t, akkor hajrá! A Jade rövidkezű HTML minden zárójel és div nélkül. Ha nem érti, hogy érdemes felkeresnie a YouTube -ot, és megnéznie néhány HTML oktatóanyagot.

Én jobban szeretem a HTML -t és a kormányt, így én is ezt használtam. Expressz projekt létrehozásához kormányokkal futtassa az expressz parancsot.

expressz --hbs alkalmazásneve

Ezután kövesse az 1. részben leírt lépéseket az összes középső termék telepítéséhez.

Az Express egy nagyon specifikus alkalmazásstruktúrát hoz létre, és egy nagyon hasznos, a legtöbb node.js alkalmazás bizonyos változatokkal követi ezt az űrlapot.

A mellékelt fényképen különböző mappákat és fájlokat láthat, az alábbiakban ezeket próbálom megmagyarázni.

kuka

Ez a mappa fut először, amikor a node.js elindítja a szervert. Megnézi a www fájlt, és követi ezt a fájlt a végrehajtáshoz. A www fájl azt mondja a node.js -nek, hogy indítson el egy kiszolgálót a 3000 -es porton (ez szinte bármire változhat), és tegyen néhány egyéb dolgot, például eseményfigyelőt és hasonlókat. A legfontosabb dolog az a port, amelyen az alkalmazás be van állítva.

node_modules

Ebben a mappában található az úgynevezett middle-ware. Középáru Szeretek extra szoftverként magyarázni, hogy megkönnyítsem a kódolást. Ezek alapvetően más könyvtárak, amelyek funkcióit előre elkészítették a használatra. Néhány további középső eszköz, amelyet ehhez a projekthez használtam, a Nodemailer, a Passport, a Nodemon, a bycrypt és mások.

nyilvános

Ide kerülne a webhelyéhez tartozó összes képe, CSS és javascriptje. Ezeket a weboldalak közvetlenül használják.

útvonalak

Ezek határozzák meg a webhely útvonalait. Ilyen például a kezdőlap, a bejelentkezési oldal és mások.

nézetek

Amint láthatja, a nézetek.hbs vagy.handlebars fájlok, bármelyik működni fog, csak némi manipulációt igényel az app.js fájl. Ezek a kormány html oldalai, amelyek megjelennek a böngészőben. Az elrendezés a fő elrendezési fájl, és néha a saját elrendezési almappájában van. A fő elrendezési fájl felhívja a többi kormányfájlját, és megjeleníti azokat, ez értelmesebb lesz, ha belemerülünk a kódba.

app.js

Ez a fő alkalmazásfájl, néha szervernek hívják, csak a beállításoktól függ. Ez a fájl tartalmazza a szerver összes konfigurációját, sőt néhány speciális funkciót is. Hibakezelő is lesz.

package.json

Ezt a fájlt az expressz hozza létre, és megmondja az npm -nek a projektben használni kívánt összes köztes szoftvert. Az npm install futtatása után a fájlban meghívott összes középső eszköz telepítésre kerül a node_modules mappába.

2. lépés: A sablon elrendezése

Létrehozhatja az összes HTML -t a semmiből, vagy használhat sablont. Ehhez a webhelyhez sablont használtam. Más oldalak, amelyeket segítettem fejleszteni, a semmiből kódoltam. A választás a tiéd, ez a lépés magyarázza a sablon elrendezését.

A webalkalmazásom egy bootstrap sablont használ, amely kiválóan alkalmas csodálatos CSS készítésére. A sablonok megtekintéséhez keresse fel ezt az oldalt. Az előző lépésben leírtak szerint minden szükséges css, js és img fájl a nyilvános mappában található. Ezek a fájlok jobb megjelenést kölcsönöznek a webhelynek, mint a sima szöveg és annak képei a webhelyen.

Annak érdekében, hogy a kormány sablonstílusa sablonnal működjön Az oldalak két részre vannak osztva. Az első az, amit "elrendezésnek" neveznek. Az elrendezés azok a tulajdonságok, amelyeket a webhely minden weboldalán meg szeretne jeleníteni. Esetemben ez a fejléc, amely tartalmazza a navigációs sávot, és a lábléc, amely extra navigációs és megjelenítési részeket tartalmaz.

Az elrendezési fájl és a többi kormányfájl a views mappában található. Egy egyszerűbb elrendezést fogok áttekinteni a korábban használt expressz generátorból a koncepció működésének bemutatásához, majd láthatja a kódomat és összehasonlíthatja őket.

Expressz generált layout.handlebars fájl

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

Az igazi kormánymágia a {{title}} és {{{body}}} kormányokban rejlik. Tehát ez a kettő másképp cselekszik {{title}} egy változó, amelyet az index.js fájl útvonalakon ad át, miután a sablonnak átadták. A (z) {{{body}}} címke átveszi az útvonal js fájl renderelési függvényében használt összes nevet. Esetünkben az index.js ez a sor:

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

Ez az „index” fájlnak nevezi az Ön által használt motort, a jade -t, a kormányt és így tovább, így esetünkben az index.handlebars.

Expressz generált index.kormány

{{cím}}

Üdvözli a {{title}}!

Az index.handlebars fájlt változóként továbbítják a {{{body}}} címkének, és megjelenítik a weboldalon.

Ez lehetővé teszi, hogy a webhely statikus része és változó része legyen. Ez teszi a fejléceket és lábléceket szebbé, mivel nem kell újra megjeleníteni az egész oldalt, új oldal betöltésekor csak néhány információ változik meg.

3. lépés: Kapcsolatfelvételi űrlap

Beillesztettem egy kapcsolatfelvételi űrlapot a weboldalamba, hogy bárki e -mailt küldhessen a webhelyemnek e -mailben, kérdésekkel vagy megjegyzésekkel.

Ez a kapcsolatfelvételi űrlap egy npm középső eszközt használt, amelyet Node Mailer-nek hívnak.

A Node Mailer beállítása

A node-mailer telepítéséhez csak futtassa az alábbi kódot a legfelső szintű fájlban, esetünkben a myapp-ban.

sudo npm telepítse a nodemailer programot

A telepítés után néhány dolgot be kell állítania az app.js fájlban.

Az első csak a függőség, ez jelzi a csomópontnak, hogy ezt a köztes szoftvert fogjuk használni.

var nodemailer = igényel ('nodemailer');

Másodszor a mi szállítónk, a szállító arra szolgál, hogy csatlakozzon a levelező szerveréhez, esetemben a gmailhez.

// A szállító gmail fiókot szerzett

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

Ha a csomópont -kezelőt másik levelezőszerverrel használja, kérjük, nézze meg itt a dokumentációt és a segítséget.

Néhány dolog személyenként változik: user, clientId, clientSecret. refreshToken, és accessToken.

A userId az az e -mail, amelyben használni szeretné, készítettem egy újat, ugyanazzal a címmel, mint a webhelyem.

A clientId, clientSecret, refreshToken és accessToken fájlokat a Google -fiókján keresztül kell megtalálni.

Ha további segítségre van szüksége, kövesse ezt a videót itt.

Miután ezeket a mezőket kitöltöttük, hozzáadjuk az üzenet részleteit.

Ezután ellenőriznünk kell, hogy űrlapunk minden mezője be van -e írva és érvényes válaszok.

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

Most információt kell szereznünk a weboldalunkon található kapcsolatfelvételi űrlapunkról, és üzenetet kell küldenünk.

// Hozzászólás a kapcsolattartóról küldés gombra, létre kell hozni egy kezdőlapot a sikeres üzenettel a beküldött formsapp.post ('/contact_Form', function (req, res) {// Tájékozódjon a kapcsolatfelvételi űrlapon, a honlapon.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// létrehozza az üzenetek küldésekor használt információkat: ' Automatikus e -mail ', a következő címre:' [email protected] ', subject:' Webhely kapcsolatfelvételi űrlapja: ' + név, szöveg:' Új üzenetet kapott a webhely kapcsolatfelvételi űrlapjáról. / N / n ' +' Itt a részletek: / n / nNév: ' + név +' / n / nE -mail: ' + e -mail +' / n / nTelefon: ' + telefon +' / n / nÜzenet: / n ' + üzenet} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Hiba');} else {console.log ('E -mail elküldve');}}) res.render ('index'); // render új kezdőlap, nézze meg, hogyan lehet ezt sikeres üzenettel megtenni, például a kijelentkezési oldal})

Vaku

A Flash az üzenetek megjelenítésére szolgál a műveletek elvégzése után. Ezt láthatja, amikor űrlapot küld be, vagy nem ad meg helyesen egy mezőt.

Telepítse a flash -t a többi npm köztes szoftverhez hasonlóan.

sudo npm install connect-flash

var flash = igényel ('connect-flash'); // flash funkcióval rendelkezett a képernyőn megjelenő üzenetekben

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

Engedélyezze a flash -t, amely megjeleníti és frissíti az üzeneteket a weboldalon. Ezek azok az üzenetek, amelyek olyan dolgokat mondanak, mint a siker, vagy az információ helytelen megadása.

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

Néhánynak szüksége van a flashhez kapcsolódó változókra.

Itt van egy elkészített kapcsolatfelvételi űrlap.

4. lépés: Bejelentkezési oldal

Ezt csak látni akartam, hogy meg tudom -e csinálni, és talán használni fogom a jövőben is. Csak el akartam magyarázni a kódot, ahogy az a git táromban van.

Tehát ez a rész még néhány npm középső eszközt használ. Telepítse az alábbiakat az alábbi parancsok használatával.

npm telepítse az útlevelet && npm telepítse az útlevelet-helyi && npm telepítse a bcryptjs fájlt

A && lehetővé teszi több parancs futtatását egy sorban.

Bejelentkezés és felhasználók

Létre kell hoznia egy login.js és user.js fájlt az útvonalak mappa alatt. Ez lehetővé teszi egy felhasználó létrehozását, amelyet az adatbázisunk tárol, és lehetővé teszi a felhasználó számára, hogy bejelentkezzen az adatbázis ellenőrzésével.

user.js

var express = igényel ('expressz'); var router = express. Router (); var útlevél = megköveteli ('útlevél'); var LocalStrategy = igényel ('útlevél-helyi'). Stratégia; var Felhasználó = igényel ('../ modellek/felhasználó'); // Regisztrálja a router.get ('/register', function (req, res) {res.render ('register');}); // Felhasználó regisztrálása 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; // Validation req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email is required')).notEmpty (); req.checkBody ('e -mail', 'E -mail nem érvényes'). isEmail (); req.checkBody ('felhasználónév', 'Felhasználónév szükséges'). notEmpty (); req.checkBody (' jelszó ',' Jelszó szükséges '). notEmpty (); req.checkBody (' password2 ',' A jelszavak nem egyeznek '). egyenlő (req.body.password); var hibák = req.validationErrors (); if (hibák) {res.render ('register', {hibák: hibák});}} {var newUser = new User ({name: name, email: email, username: username, password: password}); User.createUser (newUser, function (err, user) {if (err) dob err; console.log (user);}); req.flash ('success_msg', 'regisztrált és most bejelentkezhet'); res.redirect (' /Belépés'); } });

Ezt darabokra bontva

Először az összes szükséges középárut tartalmazza, majd a modellfájlt, amelyet az alábbiakban ismertetünk. A regisztercímkéből irányítunk, és megjelenítjük a regiszter kormány szövegét. Aztán jön a fontos funkció. Ezek lehetővé teszik, hogy új felhasználót regisztráljunk adatbázisunkban. A függvény ellenőrzi, hogy minden mező érvényes -e és szerepel -e az űrlapon, ha nem, akkor megkéri őket. Ezután ellenőrzi a hibákat, és ha nem történik hiba, új felhasználót hoz létre a megadott információkkal. Ezután újra a bejelentkezési oldalra irányít, és lehetővé teszi a bejelentkezést.

login.js

var express = igényel ('expressz');

var router = expressz. Router (); var útlevél = megköveteli ('útlevél'); var LocalStrategy = igényel ('útlevél-helyi'). Stratégia; var Felhasználó = igényel ('../ modellek/felhasználó'); /* GET felhasználói lista. */// Kezdőlap router.get ('/', function (req, res) {res.render ('login');}); pass.use (új LocalStrategy (függvény (felhasználónév, jelszó, kész) {User.getUserByUsername (felhasználónév, funkció (err, user) {if (err) dob hibát; if (! user) {return done (null, false, { üzenet: 'Ismeretlen felhasználó'});} User.comparePassword (jelszó, felhasználó.jelszó, függvény (err, isMatch) {if (err) dob hibát; if (isMatch) {return done (null, user);} else { return done (null, false, {message: 'Érvénytelen jelszó'});}});}};})); pass.serializeUser (funkció (felhasználó, kész) {kész (null, felhasználó.azonosító;});); pass.deserializeUser (function (id, done) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/login', pass.authenticate ('local', {successRedirect: '/', failedRedirect: '/login', failFlash: true}), function (req, res) {res.redirect ('/ Irányítópult'); }); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Kijelentkeztél'); res.redirect ('/homepage');});

modul.exports = útválasztó;

Először az összes szükséges középárut tartalmazza, majd a modellfájlt, amelyet az alábbiakban ismertetünk. A bejelentkezési címkéről irányítunk, és megjelenítjük a bejelentkezési kormány szövegét. Ezután néhány útlevélfüggvényt használunk, hogy kivesszük a megadott felhasználónevet és jelszót, és megvizsgáljuk őket az adatbázisunkban. Titkosított jelszót is használunk, amely kissé lelassíthatja a bejelentkezést egy málna pi -n. Ezt részletesebben elmagyarázom. A felhasználónév és jelszó ellenőrzése után átirányítjuk a kezdőlapra, amely az irányítópultot jeleníti meg, amikor ezt beállítottuk az indexfájlunkban. Itt adjuk hozzá a kijelentkezés lehetőségét is.

Mint korábban említettem, létre kell hoznunk egy modellt az adatbázis ellenőrzéséhez.

Ezt úgy teheti meg, hogy létrehoz egy mappát a fő alkalmazásmappában, a modellek néven. Ebben a mappában egy user.js fájlra is szükség van.

model/user.js

var mongoose = igényel ('mongúz');

var bcrypt = igényel ('bcryptjs'); // Felhasználói séma var UserSchema = mongoose. Schema ({felhasználónév: {típus: Karakterlánc, index: igaz}, jelszó: {típus: Karakterlánc}, e -mail: {típus: Karakterlánc}, név: {típus: Karakterlánc}}); var User = module.exports = mongoose.model ('Felhasználó', 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 (visszahívás);});}); } module.exports.getUserByUsername = function (felhasználónév, visszahívás) {var query = {felhasználónév: felhasználónév}; User.findOne (lekérdezés, visszahívás); } module.exports.getUserById = function (id, callback) {User.findById (id, visszahívás); } modul.exports.comparePassword = függvény (jelszójelszó, hash, visszahívás) {bcrypt.compare (jelöltPassword, hash, function (err, isMatch) {if (err) dob hibát; visszahívás (null, isMatch);}); }

Ez a modell felvázolja, hogyan fognak kinézni a felhasználói paramétereink, valamint hogyan fogjuk elérni őket. Korábban említettem, hogy titkosítani fogjuk jelszavainkat. ez azért van, hogy senkinek a jelszava ne kerüljön tárolásra az adatbázisban. A jelszavak kivonatolása a middle-ware bcrypt használatával történik.

5. lépés: Forgalomszámláló

Látni akartam, hogy hány egyedi felhasználó látogatta meg a weboldalamat, és meg akartam számolni a "találatok" számát. Ennek számos módja van, elmagyarázom, hogyan jártam el.

Ez egy mongodb gyűjteményt használ annak nyomon követésére, hogy hány felhasználó látogatta meg az oldalamat, és hányszor látogatta meg az egyedi látogató.

Mivel már beszéltünk a mongoDB beállításáról, nem megyek át rajta újra.

Előfordulhat, hogy két gyűjteményt kell hozzáadnia az adatbázishoz a fordításhoz. Ehhez telepítheti a RoboMongo -t, ha felhasználói felületet használ, de ha fej nélküli málna pi -t használ, mint én, akkor a következő parancsokat szórakoztatja.

Mongo héja

A db szerkesztéséhez, információk beszerzéséhez vagy gyűjtemény létrehozásához szüksége lesz a fej nélküli egység mongo héjára.

Fuss

mongo

Ez megnyitja a héjat.

Gyűjtemény hozzáadása

Esetemben az adatbázist loginapp -nak hívják, bárhogy nevezheti.

használd a sajátodb nevét

Szükségünk van egy gyűjteményre, hogy tárolhassuk a webhelyünket felkereső felhasználók összes IP -címét.

db.creatCollection ("ip")

Ezután létrehozunk egy gyűjteményt, amely számolja az egyedi találatokat webhelyünkre. Ezt egy azonosítóval és számlálással inicializálják 0 -tól.

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

Kövesse nyomon az IP -címeket

Ehhez lehívjuk a felhasználók Ip -jét, amikor meglátogatják honlapunkat, növeljük a számunkat, és tároljuk őket, hogy később összehasonlítsuk őket.

Létre kell hoznunk néhány modellt a mongúz sémák tárolására, és hozzá kell adnunk néhány kódot a homepage.js fájlunkhoz.

Létrehozjuk a count.js és az ip.js fájlokat, és tároljuk őket a modellek mappában.

Az ip.js fájl csak egy séma az ip címünkhöz

var mongoose = igényel ('mongúz'); // csomagkezelő mongóhoz

// Séma számlálása var IpSchema = mongoose. Schema ({ip: {type: String,}, count: {type: Number,}}); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

Honlapunk felhívja a count.js -t, hogy kezdeményezze a találatkövetést. Ez az alábbiak szerint történik.

//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"}, function (err, count) {userCount = count.count; res.render ('homepage', {count: userCount}); }); });

Ez minden alkalommal megtörténik, amikor valaki felkeresi honlapunkat, jelen esetben a theinternet.onthewifi.com/homepage oldalt.

Ellenőrzi a felhasználó IP -címét, az ip4 -et vagy az ip6 -ot, majd tárolja ezt az értéket, ahová elküldi a count.get.collection címre, amely a count.js fájlunkban tárolt függvény.

A felhasználó egyediségének ellenőrzése után visszatér, és kormányszám változóként közzéteszi a számértéket a honlapon.

A count.js fájl a következő.

//count.jsvar mongo = igényel ('mongodb'); // támogatja az adatbázist var mongoose = need ('mongoose'); // csomagkezelő a mongo mongoose.connect számára ('mongodb: // localhost/loginapp'); var db = mongúza.kapcsolat; var Ip = igényel ('../ models/ip'); // Count Schema var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = module.exports = mongoose.model ('Szám', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// a szám teszt, visszahívás funkció ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add új ip, ha nincs az adatbázisban, és frissítse a számlálót {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // új IP hozzáadása adatbázis count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // frissítse az adott IP -számlálót, hogy lássa, ki látogatja a legtöbbet {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Ez létrehozza a számlálási sémát és a.getCount függvényünket. A.getCount függvény ellenőrzi a DB -t a felhasználók ip -jében, és ha megtalálja, akkor a függvény növeli az adott felhasználó számát, nem pedig a találati számlálót. Ha azonban a felhasználók ip -je nem található, akkor új gyűjteményobjektumot hoz létre a felhasználók ip -jével, és növeli a találati számlálót 1 -gyel.

Ezt visszaadja és megjeleníti a weboldalon.

Itt van egy ip követés találat számláló.

6. lépés: Blog

Jelenleg egy olyan blogot próbálok kifejleszteni, amely az én érdeklődésemre koncentrál a szoftverekről, az intelligens otthonokról és a Polaroidokról. Így létrehoztam egy blog részt. A blog statikus html oldalakat és a kormány keretet használja. Miután megkerestem a blogolást megkönnyítő jobb technológiákat, azóta újraterveztem webhelyemet a hugo segítségével. A Hugo egy statikus html generátor. Erről részletesebben beszélek az alábbi oktatóanyagban.

7. lépés: Kész

Itt van egy részletes oktatóanyag a node.js webhelyemen, amelyet helyileg a málna pi -n tárolok. Ha kérdései vagy észrevételei vannak, kérjük, hagyja őket alább.

Remélem, ez segít másoknak is.

Ha másképp szeretné megközelíteni ezt az oldalt a hugo, egy statikus weboldal -generátor használatával, tekintse meg a másik oktatóanyagomat (hamarosan).