Node.js webpagina deel 2: 7 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Welkom bij DEEL 2!!

Dit is deel 2 van mijn Node.js website applicatie tutorial. Ik heb deze tutorial opgedeeld in twee delen, omdat het onderscheid maakt tussen degenen die slechts een korte introductie nodig hebben en degenen die een volledige tutorial op een webpagina willen.

Ik ga door mijn site creatie. De jouwe kan anders zijn, dus volg de mijne en leer de gebruikte technieken. Zodra u een ander HTML-sjabloon kiest, zal de stroom net iets anders zijn. Onthoud dit.

Stap 1: App-structuur

Dus mijn site volgt de express-generator, maar ik gebruikte stuur in plaats van jade. Als je van jade houdt, ga ervoor! Jade is korte HTML zonder alle haakjes en div's. Als je dat niet begrijpt, wil je misschien youtube bezoeken en enkele HTML-zelfstudies bekijken.

Ik geef de voorkeur aan en ben meer op mijn gemak met HTML en stuur, dus dat is wat ik gebruikte. Om een express-project met stuur te maken, voert u de opdracht express uit.

express --hbs naamvanmijnapp

Volg daarna de stap in Deel 1 voor het installeren van alle middleware.

Express creëert een zeer specifieke app-structuur en een zeer nuttige. De meeste node.js-applicaties volgen deze vorm met enige variatie.

Op de bijgevoegde foto zie je verschillende mappen en bestanden, hieronder probeer ik ze allemaal uit te leggen.

bin

Dit is de map die als eerste wordt uitgevoerd wanneer node.js uw server start. Het kijkt naar het www-bestand en volgt dit bestand voor uitvoering. Het www-bestand vertelt node.js om een server op poort 3000 te starten (dit kan in bijna alles veranderen) en een aantal andere dingen te doen, zoals gebeurtenislistener en dergelijke. Het belangrijkste is de poort waarop uw app is ingesteld.

node_modules

In deze map bevindt zich de zogenaamde middleware. Middleware leg ik graag uit als extra software om het voor jou makkelijker te maken om te coderen. Het zijn in feite andere bibliotheken met vooraf gemaakte functies die u kunt gebruiken. Enkele aanvullende middleware die ik voor dit project gebruikte, was Nodemailer, Passport, Nodemon, bycrypt en andere.

openbaar

Dit is waar al uw afbeeldingen, CSS en javascript voor uw website naartoe zouden gaan. Deze worden direct gebruikt door de webpagina's.

routes

Dit zijn gedefinieerde routes voor uw site. Zoals een startpagina, inlogpagina en andere.

keer bekeken

Zoals je kunt zien, zijn de weergaven.hbs-bestanden of.handlebars, beide werken, het vereist alleen wat manipulatie van het app.js-bestand. Dit zijn de html-pagina's van uw stuur die in de browser worden weergegeven. Lay-out is uw hoofdlay-outbestand en bevindt zich soms in een eigen lay-outsubmap. Het hoofdlay-outbestand roept uw andere stuurbestanden op en geeft ze weer, dit is logischer als we in de code duiken.

app.js

Dit is uw hoofdapp-bestand, soms wordt dit server genoemd, het hangt gewoon af van de instellingen. Dit bestand heeft alle configuratie voor de server en zelfs enkele speciale functies. Het zal ook een error handler zijn.

pakket.json

Dit bestand is gemaakt door express en vertelt npm alle middleware die u in uw project wilt gebruiken. Zodra u npm install uitvoert, wordt alle middleware die in dit bestand wordt genoemd, geïnstalleerd in de map node_modules.

Stap 2: Lay-out van uw sjabloon

U kunt al uw HTML helemaal opnieuw maken of u kunt een sjabloon gebruiken. Ik heb een sjabloon gebruikt voor deze site. Andere sites die ik heb helpen ontwikkelen, heb ik helemaal opnieuw gecodeerd. De keuze is aan jou, deze stap legt de sjabloonlay-out uit.

Mijn webtoepassing gebruikt een bootstrap-sjabloon die geweldig is in het maken van geweldige CSS. Bezoek deze site om sjablonen te vinden. Zoals eerder vermeld in de vorige stap, bevinden alle benodigde css-, js- en img-bestanden zich in de openbare map. Deze bestanden zorgen ervoor dat de site er beter uitziet dan platte tekst en hoe afbeeldingen op de site worden gebruikt.

Om de sjabloonstijl van het stuur met een sjabloon te laten werken, zijn de pagina's in twee delen gesplitst. De eerste is wat wordt aangeduid als de "lay-out". De lay-out is de eigenschappen die u op elke webpagina binnen uw site wilt weergeven. In mijn geval is dit de koptekst, die de navigatiebalk heeft, en de voettekst, die extra navigatie- en weergavestukken bevat.

Het lay-outbestand en andere stuurbestanden staan in de map views. Ik zal een meer eenvoudige lay-out bespreken van de express-generator die je eerder hebt gebruikt om te laten zien hoe het concept werkt, dan kun je mijn code zien en ze vergelijken.

Express gegenereerd layout.handlebars-bestand

{{title}} {{{lichaam}}}

De echte stuurmagie zit in het stuur {{title}} en {{{body}}}. Dus deze twee handelen anders {{title}} is een variabele die wordt doorgegeven vanuit het index.js-bestand in routes, eenmaal doorgegeven aan de sjabloon wordt deze weergegeven. De tag {{{body}}} neemt wat ooit wordt aangeroepen in de renderfunctie in je route js-bestand. In ons geval heeft index.js deze regel:

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

Dit noemt het 'index'-bestand van welke engine je ook gebruikt, jade, stuur, enzovoort, dus in ons geval index.handlebars.

Express gegenereerde index.handlebars

{{titel}}

Welkom bij {{title}}

Het bestand index.handlebars wordt als een variabele doorgegeven aan de tag {{{body}}} en weergegeven op uw webpagina.

Hierdoor heb je een statisch deel van je website en een variabel deel. Dit maakt kop- en voetteksten prettig omdat je niet de hele pagina opnieuw hoeft te renderen, bij het laden van een nieuwe pagina wordt alleen wat informatie gewijzigd.

Stap 3: Contactformulier

Ik heb een contactformulier in mijn webpagina opgenomen, zodat iedereen mijn site-e-mail kan e-mailen, met vragen of opmerkingen.

Dit contactformulier maakte gebruik van een npm middleware genaamd Node Mailer.

Node Mailer instellen

Om node-mailer te installeren, hoeft u alleen de onderstaande code in uw bestand op het hoogste niveau uit te voeren, in ons geval myapp.

sudo npm installeer nodemailer

Eenmaal geïnstalleerd, moet je een paar dingen instellen in je app.js-bestand.

De eerste is alleen de afhankelijkheid, dit vertelt het knooppunt dat we van plan zijn deze middleware te gebruiken.

var nodemailer = vereisen('nodemailer');

Ten tweede is onze transporter, de transporter wordt gebruikt om verbinding te maken met uw mailserver, in mijn geval gmail.

//Transporter gebruikt om Gmail-account te krijgen

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

als je nodemailer gebruikt met een andere mailserver kijk dan hier voor documentatie en hulp.

Een paar dingen zullen van persoon tot persoon veranderen: gebruiker, clientId, clientSecret. refreshToken en accessToken.

Uw userId is het e-mailadres waarin u wilt gebruiken, ik heb een nieuwe gemaakt met dezelfde naam als mijn site.

De clientId, clientSecret, refreshToken en accessToken moeten worden gevonden via uw Google-account.

Als je meer hulp nodig hebt, kun je deze video hier volgen.

Zodra al deze velden zijn ingevuld, voegen we onze berichtdetails toe.

Vervolgens moeten we valideren dat alle velden in ons formulier zijn ingevuld en geldige antwoorden zijn.

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

We moeten nu informatie krijgen van ons contactformulier op onze webpagina en een bericht sturen.

// Posten vanaf de knop voor het verzenden van contact, moet een startpagina maken met een succesbericht voor ingediende formulierenapp.post ('/contact_Form', function (req, res) { // Haal informatie uit het contactformulier, van homepage.hbs var naam = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {//creëert informatie die wordt gebruikt bij het verzenden van een bericht van: ' Automatische e-mail', naar: '[email protected]', onderwerp: 'Contactformulier website: ' + naam, tekst: 'Je hebt een nieuw bericht ontvangen van het contactformulier van je website.\n\n' + 'Hier zijn de details:\n\nNaam: ' + naam + '\n\nE-mail: ' + e-mail + '\n\nTelefoon: ' + telefoon + '\n\nBericht:\n' + bericht } transporter.sendMail(mailOptions, functie (err, res) {if(err){ console.log('Error'); }else { console.log('E-mail verzonden'); } }) res.render('index'); //render nieuwe startpagina, kijk hoe u dit kunt doen met succesbericht, zoals uitlogpagina })

Flash

Flash wordt gebruikt om berichten weer te geven nadat acties zijn uitgevoerd. U kunt dit zien wanneer u een formulier verzendt of een veld niet correct invoert.

Installeer flash net als andere npm-middleware.

sudo npm install connect-flash

var flash = vereisen('connect-flash'); // had flash-functionaliteit om berichten op het scherm weer te geven

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

Schakel flash in die berichten op de webpagina pusht en bijwerkt. Dit zijn de berichten die dingen zeggen als succes, of informatie die verkeerd is ingevoerd.

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

Sommige hebben variabelen nodig die met flash te maken hebben.

Daar ga je een gemaakt contactformulier.

Stap 4: Inlogpagina

Dit was gewoon iets dat ik wilde zien of ik het kon doen en misschien zal ik het in de toekomst gebruiken. Ik wilde alleen de code uitleggen zoals deze zich in mijn git-repository bevindt.

Dit gedeelte gebruikt dus nog een paar npm middleware. Installeer het volgende met behulp van de onderstaande opdrachten.

npm installeer paspoort && npm installeer paspoort-lokaal && npm installeer bcryptjs

Met de && kunt u meerdere opdrachten uitvoeren met één regel.

Inloggen en gebruikers

U moet een login.js- en user.js-bestand maken onder uw routesmap. Dit zal worden gebruikt om het aanmaken van een gebruiker mogelijk te maken, die wordt opgeslagen in onze database, en om de gebruiker in staat te stellen in te loggen door de database te controleren.

gebruiker.js

var express = vereisen('express');var router = express. Router(); var paspoort = vereisen('paspoort'); var LocalStrategy = required('paspoort-local'). Strategy; var Gebruiker = vereisen('../modellen/gebruiker'); // Registreer router.get('/register', function(req, res){ res.render('register'); }); //Gebruiker registreren router.post('/register', function(req, res){ var name = req.body.name; var email = req.body.email; var gebruikersnaam = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Validatie req.checkBody('name', 'Name is required').notEmpty(); req.checkBody('email', 'Email is required').notEmpty(); req.checkBody('email', 'E-mail is niet geldig').isEmail(); req.checkBody('gebruikersnaam', 'Gebruikersnaam is vereist').notEmpty(); req.checkBody(' wachtwoord', 'Wachtwoord is vereist').notEmpty(); req.checkBody('password2', 'Wachtwoorden komen niet overeen').equals(req.body.password); var errors = req.validationErrors(); if(errors){ 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', 'U bent geregistreerd en kunt nu inloggen'); res.redirect(' /Log in'); } });

Dit stuk voor stuk opsplitsen

Eerst nemen we alle benodigde middleware op, daarna voegen we ons modelbestand toe dat hieronder wordt uitgelegd. We routeren vanaf de registertag en tonen onze registerstuurtekst. Dan komt de belangrijke functie. Hiermee kunnen we een nieuwe gebruiker registreren in onze database. De functie controleert of alle velden geldig zijn en in het formulier zijn opgenomen, zo niet, dan wordt hiernaar gevraagd. Vervolgens controleert het op fouten en als er geen fouten optreden, maakt het een nieuwe gebruiker aan met de gegeven informatie. Het wordt vervolgens omgeleid naar de inlogpagina, zodat u kunt inloggen.

login.js

var express = vereisen('express');

var router = express. Router();var paspoort = vereisen('paspoort'); var LocalStrategy = required('paspoort-local'). Strategy; var Gebruiker = vereisen('../modellen/gebruiker'); /* GET gebruikerslijst. */ //Homepage router.get('/', function(req, res){ res.render('login'); }); paspoort.use(new LocalStrategy(function(username, password, done) { User.getUserByUsername(username, function(err, user){ if(err) throw err; if(!user){ return done(null, false, { message: 'Unknown User'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) throw err; if(isMatch){ return done(null, user); } else { return done(null, false, {message: 'Ongeldig wachtwoord'}); } }); }); })); paspoort.serializeUser (functie (gebruiker, klaar) { klaar (null, gebruiker.id); }); paspoort.deserializeUser(function(id, done) { User.getUserById(id, function(err, user) { done(err, user); }); }); router.post('/login', paspoort.authenticate('local', {successRedirect:'/', failureRedirect:'/login', failureFlash: true}), function(req, res) { res.redirect('/ dashboard'); }); router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'Je bent uitgelogd'); res.redirect('/homepage'); });

module.exports = router;

Eerst nemen we alle benodigde middleware op, daarna voegen we ons modelbestand toe dat hieronder wordt uitgelegd. We routeren vanaf de login-tag en geven onze login-stuurtekst weer. Vervolgens gebruiken we enkele paspoortfuncties om de ingevoerde gebruikersnaam en het wachtwoord te gebruiken en deze te vergelijken met onze database. We zullen ook een gecodeerd wachtwoord gebruiken, wat het inloggen op een Raspberry Pi een beetje traag kan maken. Ik leg dit hierna meer uit. Na het valideren van de gebruikersnaam en het wachtwoord, wordt u doorgestuurd naar de startpagina die het dashboard zal tonen zoals we dit hebben ingesteld in ons indexbestand. We voegen hier ook de mogelijkheid toe om uit te loggen.

Zoals ik eerder al zei, zullen we ook een model moeten maken om de database op te controleren.

Dit wordt gedaan door een map te maken onder uw hoofdtoepassingsmap met de naam modellen. In deze map is ook een user.js-bestand nodig.

model/gebruiker.js

var mangoest = vereisen('mangoeste');

var bcrypt = vereisen('bcryptjs'); // Gebruikersschema var UserSchema = mongoose. Schema ({ gebruikersnaam: { type: String, index: true }, wachtwoord: { type: String }, e-mail: { type: String }, naam: { type: String } }); var Gebruiker = module.exports = mangoest.model('Gebruiker', Gebruikersschema);

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 = function(gebruikersnaam, callback){ var query = {gebruikersnaam: gebruikersnaam}; User.findOne (vraag, terugbellen); } module.exports.getUserById = function(id, callback){ User.findById(id, callback); } module.exports.comparePassword = function(candidatePassword, hash, callback){ bcrypt.compare(candidatePassword, hash, function(err, isMatch) {if(err) throw error; callback(null, isMatch);}); }

Dit model schetst hoe onze gebruikersparameters eruit zullen zien en hoe we ze zullen benaderen. Ik heb al eerder gezegd dat we onze wachtwoorden zullen versleutelen. dit is zodat het wachtwoord van niemand in de database wordt opgeslagen in geval van een inbreuk. De wachtwoorden worden gehasht met behulp van middleware bcrypt.

Stap 5: Verkeersteller

Ik wilde zien hoeveel unieke gebruikers mijn webpagina bezochten en het aantal "hits" tellen. Er zijn veel manieren om dit te doen, ik zal uitleggen hoe ik het heb gedaan.

Dit gebruikt een mongodb-verzameling om bij te houden hoeveel gebruikers mijn pagina hebben bezocht en hoe vaak elke unieke bezoeker het heeft bezocht.

Aangezien we het al gehad hebben over het opzetten van een mongoDB, zal ik er niet nog een keer doorheen gaan.

Mogelijk moet u twee collecties aan uw database toevoegen om te kunnen compileren. Om dit te doen, kun je RoboMongo installeren als je een gebruikersinterface gebruikt, maar als je een headless raspberry pi gebruikt zoals ik, zul je de volgende opdrachten leuk vinden.

Mongo-schelp

Om een db te bewerken, informatie te krijgen of een verzameling te maken, hebt u de mongo-shell op een headless-eenheid nodig.

Loop

mongo

Hierdoor wordt de schaal geopend.

Een collectie toevoegen

In mijn geval heet de database loginapp, je kunt het noemen wat je wilt.

gebruik nameofyourdb

We hebben een verzameling nodig om al ons ip-adres te bewaren van de gebruikers die onze site bezoeken.

db.creatCollection("ip")

Vervolgens maken we een verzameling om de unieke hits op onze site te tellen. Dit wordt geïnitialiseerd met een id en telt vanaf 0.

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

IP-adressen volgen

Om dit te doen, zullen we de gebruikers Ip trekken wanneer ze onze startpagina bezoeken, onze telling verhogen en ze opslaan om ze later te vergelijken.

We moeten enkele modellen maken om onze mangoestschema's op te slaan en wat code toevoegen aan ons homepage.js-bestand.

We maken count.js en ip.js aan en slaan deze op in onze modellenmap.

Het ip.js-bestand is slechts een schema voor ons ip-adres

var mangoest = vereisen('mangoest'); // pakketbehandelaar voor mongo

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

count.js wordt door onze startpagina aangeroepen om de hittracking te starten. Dit gebeurt als volgt.

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

Dit gebeurt elke keer dat iemand naar onze homepage gaat, in dit geval theinternet.onthewifi.com/homepage.

Het controleert het IP-adres van de gebruiker, ip4 of ip6, en slaat die waarde vervolgens op waar het het naar count.get.collection stuurt, een functie die is opgeslagen in ons count.js-bestand.

Nadat de uniciteit van de gebruiker is gecontroleerd, keert het terug en plaatst het de telwaarde op de startpagina als een stuurvariabele.

Het bestand count.js is als volgt.

//count.jsvar mongo = vereisen ('mongodb'); // ondersteunt database var mongoose = required ('mongoose'); //pakket-handler voor mongo mongoose.connect('mongodb://localhost/loginapp'); var db = mangoest.verbinding; var Ip = vereisen('../models/ip'); // Count Schema var CountSchema = mangoest. Schema ({ id: { type: String, }, count: { type: Number, } }); var Count = module.exports = mangoest.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 een nieuw ip indien niet in de database, en update counter { var new_ip = new Ip({ ip: Public_ip, count: 1 }); db.collection('ip').save(new_ip);//add new ip to database count.update(//update hit counter { id: "hit counter"}, { $inc: {count: 1} }) } else//update specifieke ip counter, om te zien wie het meeste bezoekt { ipc.update({ ip: Public_ip }, { $inc: {count: 1} }) } }); }

Dit creëert het telschema en onze.getCount-functie. De.getCount-functie controleert de DB op het IP-adres van de gebruiker en als deze deze vindt, verhoogt de functie de telling van die gebruiker, niet de hitteller. Als het ip van de gebruiker echter niet wordt gevonden, wordt er een nieuw verzamelingsobject gemaakt met het ip van de gebruiker en wordt de hitteller met 1 verhoogd.

Dit wordt vervolgens geretourneerd en weergegeven op de webpagina.

Daar heb je het een ip-tracking-hitteller.

Stap 6: Bloggen

Ik probeer momenteel een blog te ontwikkelen waarin mijn interesses over software, slimme huizen en polaroids centraal staan. Daarom heb ik een blogsectie gemaakt. De blog maakt gebruik van statische html-pagina's en het stuurraamwerk. Na onderzoek te hebben gedaan naar betere technologieën om bloggen gemakkelijker te maken, heb ik sindsdien mijn website opnieuw ontworpen met behulp van hugo. Hugo is een statische html-generator. Ik vertel hier meer over in de onderstaande tutorial.

Stap 7: Klaar

Daar ga je een diepgaande zelfstudie op mijn node.js-website die lokaal wordt gehost op mijn raspberry pi. Als je vragen of opmerkingen hebt, laat ze dan hieronder achter.

Ik hoop dat dit anderen helpt.

Voor een andere benadering van deze site met behulp van hugo, een generator voor statische webpagina's, zie mijn andere tutorial (binnenkort beschikbaar).