Node.js webbsida Del 2: 7 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44

Välkommen till DEL 2 !!

Detta är del 2 till min Node.js webbplatsapplikationshandledning. Jag delade upp denna handledning i två delar eftersom den skiljer dem som bara behöver en kort introduktion och de som vill ha en fullständig handledning på en webbsida.

Jag kommer att gå igenom min webbplats skapande. Din kan vara annorlunda, så följ min och lär dig de tekniker som används. När du väl har valt en annan HTML -mall kommer flödet att vara något annorlunda. Tänk på detta.

Steg 1: Appstruktur

Så min webbplats följer expressgeneratorn, men jag använde styret snarare än jade. Om du gillar jade go for it! Jade är kort hand HTML utan alla parenteser och div. Om du inte förstår att du kanske vill besöka youtube och titta på några HTML -självstudier.

Jag föredrar och är mer bekväm med HTML och styr så det är vad jag använde. För att skapa ett expressprojekt med styret kör du kommandot express.

express --hbs namnofmyapp

Fortsätt sedan med att följa steget i del 1 för installation av alla mellanvaror.

Express skapar en mycket specifik appstruktur och en mycket användbar de flesta node.js -applikationer följer detta formulär med viss variation.

På det bifogade fotot kan du se olika mappar och filer, nedanför försöker jag förklara allt detta.

papperskorg

Det här är mappen som körs först när node.js startar din server. Den ser till www -filen och följer den här filen för körning. Www -filen berättar för node.js att starta en server vid port 3000 (detta kan ändras till nästan vad som helst) och göra några andra saker, till exempel händelse lyssnare och sådant. Det viktigaste är porten där din app är installerad.

nod_moduler

I den här mappen finns det som kallas middle-ware. Middle-ware Jag gillar att förklara som extra programvara för att göra det enklare för dig att koda. De är i princip andra bibliotek med funktioner som är färdiga för dig att använda. Några ytterligare mellanprodukter jag använde för detta projekt var Nodemailer, Passport, Nodemon, bycrypt och andra.

offentlig

Det är dit alla dina bilder, CSS och javascript för din webbplats skulle gå. Dessa används direkt av webbsidorna.

rutter

Det här är rutter för din webbplats. Såsom en hemsida, inloggningssida och andra.

vyer

Som du kan se är vyerna.hbs -filer eller.handlebars, antingen kommer det att fungera, det tar bara lite manipulation av filen app.js. Det här är dina html -sidor på styret som kommer att visas i webbläsaren. Layout är din huvudsakliga layoutfil och finns ibland i en egen layoutundermapp. Huvudlayoutfilen ringer till dina andra styrfiler och visar dem, det här blir mer meningsfullt när vi dyker in i koden.

app.js

Detta är din huvudsakliga appfil, ibland kallas detta server, beror bara på konfigurationen. Den här filen har all konfiguration för servern och till och med några specialfunktioner. Det kommer också att vara en felhanterare.

package.json

Den här filen skapas av express och berättar för npm all mellanprogram du vill använda i ditt projekt. När du har installerat npm-installationen installeras alla mellanvaror som kallas i den här filen i mappen node_modules.

Steg 2: Layout din mall

Du kan skapa all din HTML från grunden eller så kan du använda en mall. Jag har använt en mall för den här webbplatsen. Andra sajter som jag har hjälpt till att utveckla har jag kodat från grunden. Valet är ditt, det här steget förklarar malllayouten.

Min webbapplikation använder en bootstrap -mall som är bra på att skapa fantastisk CSS. Besök denna webbplats för att hitta mallar. Som sagt tidigare i föregående steg finns alla nödvändiga css-, js- och img -filer under den offentliga mappen. Dessa filer gör att webbplatsen ser bättre ut än vanlig text och hur bilder används på webbplatsen.

För att få styret att fungera som en mall med en mall Sidorna är uppdelade i två delar. Det första är det som kallas "layouten". Layouten är de egenskaper som du vill ska visas på varje webbsida på din webbplats. I mitt fall är detta rubriken, som har navigeringsfältet, och sidfoten, som innehåller extra navigations- och displaydelar.

Layoutfilen och andra styrfiler finns i mappen vyer. Jag kommer att gå över en mer enkel layout från expressgeneratorn du använde tidigare för att visa hur konceptet fungerar, sedan kan du se min kod och jämföra dem.

Expressgenererad layout.handlebars -fil

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

Den sanna styret är magiskt i styret {{title}} och {{{body}}}. Så dessa två agerar olika {{title}} är en variabel som skickas från index.js -filen på rutter, när den väl har skickats till mallen visas den. Taggen {{{body}}} tar det som någonsin kallas i renderingsfunktionen i din route js -fil. I vårt fall index.js har den här raden:

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

Detta kallar "index" -filen för vad du än använder, jade, styr, och så vidare, så i vårt fall index.handlebars.

Expressgenererade index.handtag

{{titel}}

Välkommen till {{title}}

Index.handlebars -filen skickas som en variabel till taggen {{{body}}} och visas på din webbsida.

Detta gör att du kan ha en statisk del av din webbplats och en variabel del. Detta gör sidhuvud och sidfot trevliga eftersom du inte behöver göra om hela sidan, när en ny sida laddas ändras endast en del information.

Steg 3: Kontaktformulär

Jag införlivade ett kontaktformulär på min webbsida så att vem som helst skulle kunna skicka e -post till min webbplats med frågor eller kommentarer.

Detta kontaktformulär använde ett npm-mellanlager som kallas Node Mailer.

Konfigurera Node Mailer

För att installera nod-mailer behöver du bara köra koden nedan i din översta fil, i vårt fall, myapp.

sudo npm installera nodemailer

När du har installerat måste du konfigurera några saker i din app.js -fil.

Det första är bara beroendet, detta berättar för noden att vi planerar att använda denna mellanprogram.

var nodemailer = require ('nodemailer');

För det andra är vår transportör, transportören används för att ansluta till din e -postserver, i mitt fall gmail.

// Transporter brukade få Gmail -konto

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

om du använder nodemailer med en annan e -postserver, vänligen titta här för dokumentation och hjälp.

Några saker kommer att förändras från person till person: användare, clientId, clientSecret. refreshToken och accessToken.

Din userId är e -postmeddelandet som du vill använda. Jag skapade en ny som heter samma som min webbplats.

ClientId, clientSecret, refreshToken och accessToken måste hittas via ditt Google -konto.

Om du behöver mer hjälp kan du följa den här videon här.

När alla dessa fält har fyllts i kommer vi att lägga till våra meddelandeuppgifter.

Därefter måste vi bekräfta att alla fält i vårt formulär har angetts och är giltiga svar.

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + namespace.shift () + ']';} returnera {param: formParam, msg: msg, värde: värde};}}));

Vi behöver nu få information från vårt kontaktformulär på vår webbsida och skicka ett meddelande.

// Knappen Skicka från kontaktskicka, måste skapa en hemsida med framgångsmeddelande för skickade formulärapp.post ('/kontakt_Form', funktion (beg., Res) {// Få information från kontaktformuläret, från hemsida.hbs var namn = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// skapar information som används när ett meddelande skickas från: ' Automatisk e -post ', till:' [email protected] ', ämne:' Kontaktformulär för webbplatsen: ' + namn, text:' Du har fått ett nytt meddelande från din webbplats kontaktformulär. / N / n ' +' Här är detaljerna: / n / nNamn: ' + namn +' / n / nMail: ' + e -post +' / n / nTelefon: ' + telefon +' / n / nMeddelande: / n ' + meddelande} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render ny hemsida, undersök hur du gör detta med framgångsmeddelande, som utloggningssida})

Blixt

Flash används för att visa meddelanden när åtgärder har utförts. Du kan se detta när du skickar in ett formulär, eller om du inte anger ett fält korrekt.

Installera flash precis som andra npm -mellanprogram.

sudo npm installera connect-flash

var flash = require ('connect-flash'); // hade blixtfunktion för att visa meddelanden på skärmen

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

Aktivera blixt som driver och uppdaterar meddelanden på webbsidan. Det här är de meddelanden som säger saker som framgång, eller information angavs felaktigt.

// Global Vars

app.use (funktion (req, res, nästa) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('fel'); res.locals.user = req.user || null; nästa ();});

Vissa behöver variabler associerade med blixt.

Det går ett skapat kontaktformulär.

Steg 4: Logga in

Detta var bara något jag ville se om jag kunde göra och kanske kommer jag att använda det i framtiden. Jag ville bara förklara koden som den är i mitt git -arkiv.

Så den här delen använder några fler npm-mellanvaror. Installera följande med kommandona nedan.

npm installera pass && npm installera pass-lokal && npm installera bcryptjs

Med && kan du köra flera kommandon med en rad.

Logga in och användare

Du måste skapa en login.js- och user.js -fil under din ruttmapp. Detta kommer att användas för att skapa en användare som lagras i vår databas och låter användaren logga in genom att kontrollera databasen.

user.js

var express = require ('express'); var router = express. Router (); var pass = kräver ('pass'); var LocalStrategy = require ('pas-lokal'). Strategi; var User = require ('../ models/user'); // Registrera router.get ('/register', funktion (krav, res) {res.render ('register');}); // Registrera användare router.post ('/register', funktion (req, res) {var namn = req.body.name; var email = req.body.email; var användarnamn = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Validering req.checkBody ('namn', 'Namn krävs'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('email', 'Email is not valid'). isEmail (); req.checkBody ('username', 'Username is required'). notEmpty (); req.checkBody (' lösenord ',' Lösenord krävs '). notEmpty (); req.checkBody (' lösenord2 ',' Lösenord matchar inte '). är lika med (req.body.password); var fel = req.validationErrors (); om (fel) {res.render ('register', {fel: fel});} annars {var newUser = ny användare ({namn: namn, e -post: e -post, användarnamn: användarnamn, lösenord: lösenord}); 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 (' /logga in'); } });

Bryter ner detta bit för bit

Först inkluderar vi all mellanliggande ware som behövs, sedan inkluderar vi vår modellfil som förklaras nedan. Vi går från registertaggen och visar vår registerstyrtext. Då kommer den viktiga funktionen. Dessa tillåter oss att registrera en ny användare i vår databas. Funktionen kontrollerar att alla fält är giltiga och ingår i formuläret, om inte så kommer det att begära dem. Därefter söker den efter fel, och om inga fel uppstår skapar den en ny användare med den angivna informationen. Den går sedan vidare till inloggningssidan, så att du kan logga in.

login.js

var express = require ('express');

var router = express. Router (); var pass = require ('pass'); var LocalStrategy = require ('pas-lokal'). Strategi; var User = require ('../ models/user'); /* Hämta användare. */// Hemsida router.get ('/', function (req, res) {res.render ('login');}); passport.use (ny LocalStrategy (funktion (användarnamn, lösenord, gjort) {User.getUserByUsername (användarnamn, funktion (err, användare) {om (err) kasta err; if (! user) {return done (null, false, { meddelande: 'Okänd användare'});} User.comparePassword (lösenord, user.password, function (err, isMatch) {if (err) kasta fel; if (isMatch) {return done (null, user);} else { retur gjord (null, falsk, {meddelande: 'Ogiltigt lösenord'});}});});})); passport.serializeUser (function (user, done) {done (null, user.id);}); passport.deserializeUser (function (id, done) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/login', passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/login', failureFlash: true}), function (req, res) {res.redirect ('/ instrumentbräda'); }); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You are logged out'); res.redirect ('/homepage');});

modul.exports = router;

Först inkluderar vi all mellanliggande ware som behövs, sedan inkluderar vi vår modellfil som förklaras nedan. Vi går från inloggningstaggen och visar texten för inloggningsstyret. Vi använder sedan några passfunktioner för att ta det angivna användarnamnet och lösenordet och kontrollera dem mot vår databas. Vi kommer också att använda ett krypterat lösenord som kan göra inloggningen lite långsam på en hallon pi. Jag förklarar detta mer nästa. Efter att ha bekräftat användarnamnet och lösenordet omdirigeras du till hemsidan som visar instrumentpanelen när vi konfigurerar detta i vår indexfil. Vi lägger också till möjligheten att logga ut här.

Som jag tidigare nämnde kommer vi också att behöva skapa en modell för att kontrollera databasen efter.

Detta görs genom att skapa en mapp under huvudapplikationsmappen som heter modeller. I den här mappen behövs också en user.js -fil.

modell/user.js

var mongoose = require ('mongoose');

var bcrypt = require ('bcryptjs'); // User Schema var UserSchema = mongoose. Schema ({användarnamn: {type: String, index: true}, lösenord: {type: String}, e -post: {type: String}, namn: {type: String}}); var User = module.exports = mongoose.model ('User', 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 = funktion (användarnamn, återuppringning) {var query = {användarnamn: användarnamn}; User.findOne (fråga, återuppringning); } module.exports.getUserById = funktion (id, återuppringning) {User.findById (id, återuppringning); } module.exports.comparePassword = funktion (kandidatpassord, hash, återuppringning) {bcrypt.compare (kandidatpassord, hash, funktion (err, isMatch) {om (err) kastar fel; återuppringning (null, isMatch);}); }

Denna modell beskriver hur våra användarparametrar kommer att se ut samt hur vi kommer åt dem. Jag nämnde tidigare att vi kommer att kryptera våra lösenord. detta är så att ingen lösenord lagras i databasen vid ett intrång. Lösenorden är hashade med hjälp av bcrypt med mellanlager.

Steg 5: Trafikräknare

Jag ville se hur många unika användare som besökte min webbsida och räkna antalet "träffar". Det finns många sätt att göra detta, jag kommer att förklara hur jag gick tillväga.

Detta använder en mongodb -samling för att spåra hur många användare som har besökt min sida och hur många gånger varje unik besökare besökte.

Eftersom vi redan har pratat om att skapa en mongoDB kommer jag inte att gå igenom det igen.

Du kan behöva lägga till två samlingar i din databas för att kunna kompilera. För att göra detta kan du antingen installera RoboMongo om du använder ett användargränssnitt, men om du använder en huvudlös hallon pi som jag är kommer du att ha roligt följande kommandon.

Mongo skal

För att redigera ett db, få information eller skapa en samling behöver du mongoskalet på en huvudlös enhet.

Springa

mongo

Detta öppnar skalet.

Lägg till en samling

I mitt fall heter databasen loginapp, du kan namnge den vad du vill.

använd nameofyourdb

Vi behöver en samling för att hålla all vår ip -adress för de användare som besöker vår webbplats.

db.creatCollection ("ip")

Därefter skapar vi en samling för att räkna de unika träffarna till vår webbplats. Detta initieras med ett id och antal som börjar med 0.

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

Spåra IP -adresser

För att göra detta kommer vi att dra användarna Ip när de besöker vår hemsida, öka vårt antal och lagra dem för att jämföra dem senare.

Vi måste skapa några modeller för att lagra våra mangoscheman och lägga till lite kod till vår homepage.js -fil.

Vi skapar count.js och ip.js och lagrar dem i vår modellmapp.

Ip.js -filen är bara ett schema för vår ip -adress

var mongoose = require ('mongoose'); // pakethanterare för mongo

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

count.js kommer att ringas av vår hemsida för att initiera träffspårningen. Detta görs enligt nedan.

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

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

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

Detta händer varje gång någon går till vår hemsida, i det här fallet theinternet.onthewifi.com/homepage.

Det kontrollerar användarens IP, ip4 eller ip6, och lagrar sedan det värdet dit det skickar det till count.get.collection som är en funktion som lagras i vår count.js -fil.

Efter att ha kontrollerat användarens unikhet returnerar den och lägger in räkningsvärdet till hemsidan som en styrvariabel.

Count.js -filen är följande.

//count.jsvar mongo = require ('mongodb'); // stöder databasen var mongoose = require ('mongoose'); // pakethanterare för mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = require ('../ 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 = function (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add en ny ip om den inte finns i databasen och uppdateringsräknaren {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // add new ip to databas count.update (// uppdatera träffräknare {id: "hit counter"}, {$ inc: {count: 1}})} else // uppdatera specifik ip -räknare för att se vem som besöker mest {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}}); }

Detta skapar räkneschemat och vår.getCount -funktion.. GetCount -funktionen kontrollerar databasen för användarens ip och om den hittar den, ökar funktionen antalet användare, inte träffräknaren. Men om användarens ip inte hittas kommer det att skapa ett nytt samlingsobjekt med användarens ip och öka träffräknaren med 1.

Detta returneras sedan och visas på webbsidan.

Där har du det en ip tracking hit counter.

Steg 6: Blogg

Jag försöker för närvarande att utveckla en blogg som är centraliserad på mina intressen om programvara, smarta hem och Polaroids. Så jag skapade en bloggsektion. Bloggen använder statiska html -sidor och styret. Efter att ha tittat på bättre teknik för att göra det enklare att blogga har jag sedan gjort om min webbplats med hugo. Hugo är en statisk html -generator. Jag pratar mer om detta i nedanstående handledning.

Steg 7: Avslutad

Där går du en fördjupad handledning på min node.js -webbplats som finns lokalt på min hallon pi. Om du har frågor eller kommentarer lämna dem nedan.

Jag hoppas att detta hjälper andra där ute.

För en annan inställning till denna webbplats med hugo, en statisk webbsidegenerator se min andra handledning (kommer snart).