Node.js Webpage Bahagi 2: 7 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:13

Maligayang pagdating sa BAHAGI 2 !!

Ito ang bahagi 2 sa aking tutorial sa application ng website ng Node.js. Pinaghiwalay ko ang tutorial na ito sa dalawang bahagi dahil pinaghihiwalay nito ang mga nangangailangan lamang ng isang maikling pagpapakilala at ang mga nais ng isang buong tutorial sa isang webpage.

Dadaan ako sa aking paglikha ng site. Maaaring iba ang iyo, kaya sundin ang akin at alamin ang mga diskarteng ginamit. Kapag pinili mo ang isang iba't ibang mga template ng HTML ang daloy ay magiging bahagyang naiiba. Isaisip ito

Hakbang 1: Istraktura ng App

Kaya't ang aking site ay sumusunod sa express generator, subalit gumamit ako ng mga handlebar kaysa sa jade. Kung gusto mo ng jade go for it! Ang Jade ay maikling HTML ng kamay nang walang lahat ng mga braket at div. Kung hindi mo maintindihan na baka gusto mong bisitahin ang youtube at manuod ng ilang mga HTML tutorial.

Mas gusto ko at mas komportable ako sa HTML at mga handlebars kaya iyon ang ginamit ko. Upang lumikha ng isang malinaw na proyekto sa mga handlebars patakbuhin ang express command.

ipahayag --hbs nameofmyapp

Pagkatapos ay patuloy na sundin ang hakbang sa Bahagi 1 para sa pag-install ng lahat ng gitnang-ware.

Lumilikha ang Express ng isang napaka-tukoy na istraktura ng app at isang napaka-kapaki-pakinabang sa isang pinaka node.js application na sundin ang form na ito na may ilang pagkakaiba-iba.

Sa naka-attat na larawan maaari mong makita ang iba't ibang mga folder at file, sa ibaba sinubukan kong ipaliwanag ang lahat ng ito.

basurahan

Ito ang folder na unang pinatakbo kapag sinimulan ng node.js ang iyong server. Tumingin ito sa www file at sinusundan ang file na ito para sa pagpapatupad. Sinasabi ng www file ang node.js na magsimula ng isang server sa port 3000 (maaari itong baguhin sa anumang bagay) at gumawa ng ilang iba pang mga bagay tulad ng tagapakinig ng kaganapan at mga katulad nito. Ang pangunahing mahalagang bagay ay ang port kung saan naka-set up ang iyong app.

node_modules

Sa folder na ito ay ang tinatawag na middle-ware. Middle-ware nais kong ipaliwanag bilang dagdag na software upang gawing mas madali ang mga bagay para sa iyo na mag-code. Karaniwang iba pa ang mga aklatan na may mga pagpapaandar na paunang ginawa para magamit mo. Ang ilang karagdagang gitnang ware-ware na ginamit ko para sa proyektong ito ay Nodemailer, Passport, Nodemon, bycrypt, at iba pa.

pampubliko

Dito pupunta ang lahat ng iyong mga imahe, CSS, at javascript para sa iyong website. Direkta itong ginagamit ng mga webpage.

mga ruta

Ito ang tumutukoy sa mga ruta para sa iyong site. Tulad ng isang homepage, pahina sa pag-login, at iba pa.

pananaw

Tulad ng nakikita mo ang mga panonood ay. Ito ang iyong mga pahina ng html na handlebars na ipapakita sa browser. Ang layout ay ang iyong pangunahing file ng layout at kung minsan ay nasa sariling layout sub folder. Ang pangunahing tawag ng file ng layout sa iyong iba pang mga file ng handlebars at ipinapakita ang mga ito, magiging mas katuturan ito kapag sumisid kami sa code.

app.js

Ito ang iyong pangunahing file ng app, kung minsan ito ay tinatawag na server, nakasalalay lamang sa pag-set up. Ang file na ito ay mayroong lahat ng pagsasaayos para sa server at kahit na ilang mga espesyal na pagpapaandar. Ito rin ay magiging isang handler ng error.

package.json

Ang file na ito ay nilikha ng express at nagsasabi sa lahat ng middleware na nais mong gamitin sa iyong proyekto. Kapag nagpatakbo ka ng pag-install ng npm, ang lahat ng gitnang-ware na tinawag sa file na ito, ay mai-install sa folder na node_modules.

Hakbang 2: I-layout ang Iyong Template

Maaari kang lumikha ng lahat ng iyong HTML mula sa simula o maaari kang gumamit ng isang template. Gumamit ako ng isang template para sa site na ito. Ang iba pang mga site na tinulungan kong binuo ay naka-code mula sa simula. Sa iyo ang pagpipilian, ipinapaliwanag ng hakbang na ito ang layout ng template.

Gumagamit ang aking web application ng isang template ng bootstrap na mahusay sa paggawa ng kamangha-manghang CSS. Upang makahanap ng mga template bisitahin ang site na ito. Tulad ng nakasaad dati sa nakaraang hakbang lahat ng kinakailangang mga css, js, at img file ay nasa ilalim ng pampublikong folder. Ang mga file na ito ay nagpapaganda sa site kaysa sa simpleng teksto at kung paano ginagamit ang mga imahe sa site.

Upang makagawa ang mga handlebars templating style na gumagana sa isang template Ang mga pahina ay nahahati sa dalawang piraso. Ang una ay kung ano ang refereed bilang "layout". Ang layout ay ang mga pag-aari na nais mong ipakita sa bawat web page sa loob ng iyong site. Sa aking kaso ito ang header, na mayroong navigation bar, at ang footer, na nagtataglay ng labis na pag-navigate at mga display piraso.

Ang layout file at iba pang mga file ng handlebars ay nasa folder ng mga view. Dadalhin ko ang isang mas simpleng layout mula sa express generator na ginamit mo kanina upang ipakita kung paano gumagana ang konsepto, pagkatapos ay makikita mo ang aking code at ihambing ang mga ito.

I-express ang nabuong layout.handlebars file

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

Ang totoong handlebars na magic ay nasa mga handlebars {{title}} at {{{body}}}. Kaya't ang magkakaibang kilos na ito ng {{pamagat}} ay isang variable na naipasa mula sa index.js file sa mga ruta, sa sandaling naipasa sa template na ito ay ipinapakita. Ang tag na {{{body}}} ay kukuha ng anumang tinawag sa pag-andar ng render sa iyong file na js file. Sa aming case index.js may ganitong linya:

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

Tinatawag nito ang file na 'index' ng kung ano ang nag-engine sa iyong gamit, jade, handlebars, at iba pa, kaya sa aming case index.handlebars.

Express na nabuong index.handlebars

{{title}}

Maligayang pagdating sa {{title}}

Ang index.handlebars file ay naipasa tulad ng isang variable sa tag na {{{body}}} at ipinapakita sa iyong webpage.

Pinapayagan kang magkaroon ng isang static na bahagi ng iyong website at isang variable na bahagi. Ginagawang maganda ang mga header at footer dahil hindi mo kailangang muling ibigay ang buong pahina, kapag naglo-load ng isang bagong pahina, ilang impormasyon lamang ang nabago.

Hakbang 3: Form sa Pakikipag-ugnay

Isinama ko ang isang form sa pakikipag-ugnay sa aking web page upang ang sinuman ay maaaring mag-email sa email ng aking site, na may mga katanungan o komento.

Ang form ng contact na ito ay gumamit ng isang npm middle-ware na tinatawag na Node Mailer.

Pagse-set up ng Node Mailer

Upang mai-install ang node-mailer kailangan mo lamang patakbuhin ang code sa ibaba sa iyong nangungunang antas ng file, sa aming kaso, myapp.

sudo npm i-install ang nodemailer

Kapag na-install kakailanganin mong mag-set up ng ilang mga bagay sa iyong app.js file.

Ang una ay ang pagiging maaasahan lamang, sinasabi nito sa node na plano naming gamitin ang middleware na ito.

var nodemailer = nangangailangan ('nodemailer');

Pangalawa ang aming transporter, ang transporter ay ginagamit upang kumonekta sa iyong mail server, sa aking kaso gmail.

// Transporter dati upang makakuha ng gmail account

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

kung gumagamit ng nodemailer na may ibang mail server mangyaring tumingin dito para sa dokumentasyon at tulong.

Ang ilang mga bagay ay magbabago mula sa bawat tao sa: gumagamit, clientId, clientSecret. refreshToken, at accessToken.

Ang iyong userId ay ang email kung saan mo nais gamitin, gumawa ako ng bago na pinangalanan ang kapareho ng aking site.

Ang clientId, clientSecret, refreshToken, at accessToken ay kailangang matagpuan sa pamamagitan ng iyong google account.

Kung kailangan mo ng karagdagang tulong maaari mong sundin ang video na ito dito.

Kapag napunan na ang lahat ng mga patlang na iyon idaragdag namin ang aming mga detalye sa mensahe.

Susunod kailangan naming patunayan na ang lahat ng mga patlang sa aming form ay naipasok na at wastong tugon.

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; habang (namespace.length) {formParam + = '[' + namespace.shift () + ']';} ibalik ang {param: formParam, msg: msg, halaga: halaga};}}));

Kailangan namin ngayon upang makakuha ng impormasyon mula sa aming contact form sa aming webpage at magpadala ng isang mensahe.

// Mag-post mula sa pindutan ng pagsumite ng contact, kailangang lumikha ng isang homepage na may mensahe ng tagumpay para sa naisumite na mga formapp.post ('/ contact_Form', pagpapaandar (req, res) {// Kumuha ng impormasyon mula sa form sa pakikipag-ugnay, mula sa homepage.hbs pangalan ng var = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// lumilikha ng impormasyong ginamit kapag nagpapadala ng isang mensahe mula sa: ' Awtomatikong Email ', sa:' [email protected] ', paksa:' Form sa Pakikipag-ugnay sa Website: '+ pangalan, teksto:' Nakatanggap ka ng isang bagong mensahe mula sa iyong form sa pakikipag-ugnay sa website. / N / n '+' Dito ay ang mga detalye: / n / nName: '+ name +' / n / nEmail: '+ email +' / n / nPhone: '+ phone +' / n / nMessage: / n '+ message} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} iba pa {console.log ('Email Sent');}}) res.render ('index'); // render bagong homepage, tingnan kung paano ito gagawin sa mensahe ng tagumpay, tulad ng pahina ng pag-logout})

Flash

Ginagamit ang Flash upang ipakita ang mga mensahe pagkatapos magawa ang mga pagkilos. Maaari mo itong makita kapag nagsumite ka ng isang form, o hindi naglalagay ng tama sa isang patlang.

Mag-install ng flash tulad ng iba pang mga npm middleware.

sudo npm i-install ang connect-flash

var flash = nangangailangan ('connect-flash'); // ay nagkaroon ng pag-andar ng flash upang ipakita sa mga mensahe sa screen

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

Paganahin ang flash na nagtutulak at nag-a-update ng mga mensahe sa webpage. Ito ang mga mensahe na nagsasabi ng mga bagay tulad ng tagumpay, o impormasyon na maling naipasok.

// Global Vars

app.use (function (req, res, susunod) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('error'); res.locals.user = req.user || null; susunod ();});

Ang ilan ay nangangailangan ng mga variable na nauugnay sa flash.

Doon pumunta sa isang form sa pakikipag-ugnay.

Hakbang 4: Pahina sa Pag-login

Ito ay isang bagay lamang na nais kong makita kung magagawa ko at marahil ay magagamit ko ito sa hinaharap. Nais ko lamang ipaliwanag ang code dahil nasa aking git repository.

Kaya't ang bahaging ito ay gumagamit ng ilang higit pa sa gitna ng ware. I-install ang sumusunod gamit ang mga utos sa ibaba.

npm i-install ang passport && npm i-install ang passport-local && npm i-install ang bcryptjs

Pinapayagan ka ng && na magpatakbo ng maraming mga utos sa isang linya.

Pag-login at Mga Gumagamit

Kakailanganin mong lumikha ng isang file ng login.js at user.js sa ilalim ng iyong folder ng mga ruta. Gagamitin ito upang payagan ang paglikha ng isang gumagamit, na maiimbak sa aming database, at payagan ang gumagamit na mag-login sa pamamagitan ng pag-check sa database.

gumagamit.js

var express = nangangailangan ('express'); var router = express. Router (); var passport = kailangan ('passport'); var LocalStrategy = nangangailangan ('passport-local'). Stratehiya; var User = nangangailangan ('../ mga modelo / gumagamit'); // Register router.get ('/ register', function (req, res) {res.render ('register');}); // Register User router.post ('/ register', function (req, res) {var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.).notEmpty (); req.checkBody ('email', 'Ang email ay hindi wasto'). ayEmail (); req.checkBody ('username', 'Username ay kinakailangan'). notEmpty (); req.checkBody (' password ',' Kailangan ang password '). notEmpty (); req.checkBody (' password2 ',' Ang mga password ay hindi tumutugma '). ay katumbas ng (req.body.password); var error = req.validationErrors (); kung (error) {res.render ('register', {error: error});} iba pa {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', 'Nakarehistro ka at maaari ka nang mag-login'); res.redirect (' /mag log in'); } });

Pinaghihiwa-hiwalay ito

Isinasama muna namin ang lahat ng kinakailangan sa gitna-ware, pagkatapos ay isinasama namin ang aming modelo ng file na ipinaliwanag sa ibaba. Nagruta kami mula sa tag ng rehistro at ipinapakita ang teksto ng aming rehistro ng mga handlebars. Pagkatapos ang mahalagang pag-andar ay dumating. Pinapayagan kaming magparehistro ng isang bagong gumagamit sa aming database. Sinusuri ng pag-andar upang matiyak na ang lahat ng mga patlang ay wasto at kasama sa form, kung hindi ito mag-uudyok para sa kanila. Susunod na sinusuri nito ang mga error, at kung walang mga error na nangyayari lumilikha ito ng isang bagong gumagamit na may ibinigay na impormasyon. Pagkatapos ay muling mga ruta sa pahina ng pag-login, pinapayagan kang mag-login.

pag-login.js

var express = nangangailangan ('express');

var router = express. Router (); var passport = nangangailangan ('passport'); var LocalStrategy = nangangailangan ('passport-local'). Stratehiya; var User = nangangailangan ('../ mga modelo / gumagamit'); / * KUMUHA ng listahan ng mga gumagamit. * / // Homepage router.get ('/', pagpapaandar (req, res) {res.render ('login');}); passport.use (bagong LocalStrategy (pagpapaandar (username, password, tapos) {User.getUserByUsername (username, function (err, user) {kung (err) magtapon ng maling; kung (! gumagamit) {return tapos (null, false, { mensahe: 'Hindi Kilalang Gumagamit'});} User.comparePassword (password, user.password, function (err, isMatch) {kung (err) magtapon; kung (isMatch) {return tapos (null, user);} iba pa { tapos nang bumalik (null, false, {message: 'Invalid password'});}});});})); passport.serializeUser (pagpapaandar (gumagamit, tapos na) {tapos (null, user.id);}); passport.deserializeUser (function (id, tapos) {User.getUserById (id, function (err, user) {tapos (err, user);});}); router.post ('/ login', passport.authenticate ('local', {successRedirect: '/', failedRedirect: '/ login', failedFlash: true}), function (req, res) {res.redirect ('/ dashboard ');}); router.get ('/ logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You are logged out'); res.redirect ('/ homepage');});

module.exports = router;

Isinasama muna namin ang lahat ng kinakailangan sa gitna-ware, pagkatapos ay isinasama namin ang aming modelo ng file na ipinaliwanag sa ibaba. Nagruta kami mula sa tag sa pag-login at ipinapakita ang aming teksto ng mga handlebars sa pag-login. Gumagamit kami pagkatapos ng ilang mga pagpapaandar sa pasaporte upang kunin ang ipinasok na pangalan ng gumagamit at password at suriin ang mga ito laban sa aming database. Gagamit din kami ng naka-encrypt na password na maaaring makapagpabagal ng kaunting pag-login sa isang raspberry pi. Ipinapaliwanag ko pa ito sa susunod. Matapos mapatunayan ang pangalan ng gumagamit at password, mai-redirect ka sa homepage na magpapakita sa dashboard habang itinatakda namin ito sa aming index file. Nagdagdag din kami dito ng kakayahang mag-logout.

Tulad ng dati kong nabanggit kakailanganin din nating lumikha ng isang modelo upang suriin ang database.

Ginagawa ito sa pamamagitan ng paglikha ng isang folder sa ilalim ng iyong pangunahing folder ng application na tinatawag na mga modelo. Sa folder na ito kailangan din ng isang file ng user.js.

modelo / gumagamit.js

var mongoose = nangangailangan ('mongoose');

var bcrypt = nangangailangan ('bcryptjs'); // User Schema var UserSchema = mongoose. Schema ({username: {type: String, index: true}, password: {type: String}, email: {type: String}, name: {type: String}}); var User = module.exports = mongoose.model ('Gumagamit', 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 = function (username, callback) {var query = {username: username}; User.findOne (query, callback); } module.exports.getUserById = function (id, callback) {User.findById (id, callback); } module.exports.comparePassword = function (kandidatPassword, hash, callback) {bcrypt.compare (kandidatPassword, hash, pagpapaandar (err, isMatch) {kung (mali) magtapon ng mali; callback (null, isMatch);}); }

Binabalangkas ng modelong ito kung ano ang magiging hitsura ng aming mga parameter ng gumagamit pati na rin kung paano namin maa-access ang mga ito. Nabanggit ko dati na mai-encrypt namin ang aming mga password. ito ay upang walang mga password na nakaimbak sa database sakaling magkaroon ng paglabag. Ang mga password ay na-hash gamit ang middle-ware bcrypt.

Hakbang 5: Traffic Counter

Nais kong makita kung gaano karaming mga natatanging mga gumagamit ang bumisita sa aking web page at bilangin ang bilang ng mga "hit". Maraming paraan upang magawa ito, ipapaliwanag ko kung paano ko ito ginawa.

Gumagamit ito ng isang koleksyon ng mongodb upang subaybayan kung gaano karaming mga gumagamit ang bumisita sa aking pahina at kung gaano karaming beses bumisita ang bawat natatanging bisita.

Dahil napag-usapan na natin ang tungkol sa pagse-set up ng isang mongoDB hindi ko ito pagdadaanan muli.

Maaaring kailanganin mong magdagdag ng dalawang mga koleksyon sa iyong database upang makapag-ipon. Upang magawa ito maaari mong mai-install ang RoboMongo kung gumagamit ng isang UI, subalit kung gumagamit ka ng isang walang ulo na prambuwesas na tulad ko ay masisiyahan ka sa mga sumusunod na utos.

Mongo shell

Upang i-edit ang isang db, kumuha ng impormasyon, o lumikha ng isang koleksyon kakailanganin mo ang mongo shell sa isang walang yunit na yunit.

Takbo

mongo

Bubuksan nito ang shell.

Magdagdag ng isang koleksyon

Sa aking kaso, ang database ay tinatawag na loginapp, maaari mo itong pangalanan kahit anong gusto mo.

gumamit ng nameofyourdb

Kailangan namin ng isang koleksyon upang hawakan ang lahat ng aming ip address ng mga gumagamit na bumibisita sa aming site.

db.creatCollection ("ip")

Susunod na lumikha kami ng isang koleksyon upang mabilang ang mga natatanging mga hit sa aming site. Pinasimulan ito sa isang id at bilangin na nagsisimula sa 0.

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

Subaybayan ang mga IP Address

Upang magawa ito ay hilahin namin ang mga gumagamit ng Ip kapag binisita nila ang aming home page, nadagdagan ang aming bilang, at iimbak ang mga ito upang ihambing ang mga ito sa paglaon.

Kailangan naming lumikha ng ilang mga modelo upang maiimbak ang aming mga mongoose scheme, at magdagdag ng ilang code sa aming homepage.js file.

Lumilikha kami ng mga count.js at ip.js at iniimbak ang mga ito sa aming mga folder ng mga modelo.

Ang ip.js file ay isang iskema lamang para sa aming ip address

var mongoose = nangangailangan ('mongoose'); // package handler para sa mongo

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

tatawagin ang count.js ng aming homepage upang simulan ang pagsubaybay sa hit. Ginagawa ito nang sa ibaba.

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

Count.getCount (koleksyon, ipc, Public_ip, pagpapaandar (bilang) {

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

Nangyayari ito sa tuwing may pupunta sa aming homepage, sa kasong ito theinternet.onthewifi.com/homepage.

Sinusuri nito ang IP ng gumagamit, ip4 o ip6, at pagkatapos ay iniimbak ang halagang iyon kung saan ipinapadala ito sa count.get.collection na isang pagpapaandar na nakaimbak sa aming count.js file.

Matapos suriin ang pagiging natatangi ng gumagamit pagkatapos ay babalik at mai-post ang halaga ng bilang sa homepage bilang isang variable ng handlebars.

Ang file ng count.js ay ang mga sumusunod.

//count.jsvar mongo = nangangailangan ('mongodb'); // sumusuporta sa database var mongoose = nangangailangan ('mongoose'); // package handler para sa mongoose.connect ('mongodb: // localhost / loginapp'); var db = mongoose.connection; var Ip = nangangailangan ('../ mga modelo / 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 isunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add isang bagong ip kung wala sa database, at i-update ang counter {var new_ip = bagong Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // magdagdag ng bagong ip sa database count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} iba pa // i-update ang tukoy na ip counter, upang makita kung sino ang bibisita sa pinaka {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Lumilikha ito ng count schema, at ang aming function na.getCount. Sinusuri ng pagpapaandar ng.getCount ang DB para sa isang ip ng mga gumagamit at kung mahahanap ito, ang pagpapaandar ay nagdaragdag ng bilang ng gumagamit na iyon, hindi ang hit counter. Gayunpaman kung hindi nahanap ang mga gumagamit ay lilikha ito ng isang bagong object ng koleksyon sa mga ip ng gumagamit at nadagdagan ang hit counter ng 1.

Pagkatapos ay ibabalik ito at ipapakita sa webpage.

Mayroong mayroon kang isang ip counter hit counter.

Hakbang 6: Blog

Kasalukuyan akong sumusubok na bumuo ng isang blog na nakasentro sa aking mga interes tungkol sa software, mga smart home, at Polaroids. Kaya gumawa ako ng isang seksyon ng blog. Gumagamit ang blog ng mga static na pahina ng html at balangkas ng mga handlebars. Matapos tumingin sa mga mas mahusay na teknolohiya upang gawing mas madali ang pag-blog na mayroon ako mula nang muling idisenyo ang aking website gamit ang hugo. Ang Hugo ay isang static na generator ng html. Pinag-uusapan ko pa tungkol dito sa nabanggit na tutorial.

Hakbang 7: Tapos na

Doon pumunta ka sa isang malalim na tutorial sa aking node.js website na naka-host nang lokal sa aking raspberry pi. Kung mayroon kang mga katanungan o puna mangyaring iwanan ang mga ito sa ibaba.

Inaasahan kong makakatulong ito sa iba doon.

Para sa ibang diskarte sa site na ito gamit ang hugo, isang static na web page generator tingnan ang aking iba pang tutorial (paparating na).