Node.js վեբ էջ Մաս 2: 7 քայլեր

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:48

Բարի գալուստ ՄԱՍ 2 !!

Սա իմ Node.js վեբ կայքի կիրառման ձեռնարկի 2 -րդ մասն է: Ես այս ձեռնարկը բաժանեցի երկու մասի, քանի որ այն առանձնացնում է նրանց, ովքեր պարզապես կարճ ներածության կարիք ունեն, և նրանց, ովքեր ցանկանում են ամբողջական ձեռնարկ ձեռնարկել վեբ էջում:

Ես պատրաստվում եմ անցնել իմ կայքի ստեղծման միջոցով: Ձերը կարող է տարբեր լինել, այնպես որ հետևեք իմին և սովորեք օգտագործվող տեխնիկան: Երբ ընտրեք այլ HTML ձևանմուշ, հոսքը փոքր -ինչ այլ կլինի: Սա մտքում պահեք:

Քայլ 1: Հավելվածի կառուցվածքը

Այսպիսով, իմ կայքը հետևում է էքսպրես գեներատորին, սակայն ես ավելի շատ օգտագործել եմ ղեկ, այլ ոչ թե ջադ: Եթե սիրում եք ջադ, գնացեք դրան: Jade- ը կարճ ձեռքի HTML է ՝ առանց բոլոր փակագծերի և div- երի: Եթե չեք հասկանում, որ գուցե ցանկանաք այցելել youtube և դիտել HTML- ի որոշ ձեռնարկներ:

Ես նախընտրում եմ և ավելի հարմար եմ HTML- ի և ղեկի հետ, այնպես որ դա այն է, ինչ ես օգտագործել եմ: Handեկավարներով ճեպընթաց նախագիծ ստեղծելու համար գործարկեք express հրամանը:

express -hbs nameofmyapp

Այնուհետև շարունակեք հետևել 1-ին մասի քայլին ՝ ամբողջ միջին սարքավորումները տեղադրելու համար:

Express- ը ստեղծում է հավելվածների շատ կոնկրետ կառուցվածք, և շատ օգտակար node.js ծրագրերը հետևում են այս ձևին ՝ որոշակի տատանումներով:

Կցված լուսանկարում կարող եք տեսնել տարբեր թղթապանակներ և ֆայլեր, ներքևում ես փորձում եմ բացատրել այս բոլորը:

աղբարկղ

Սա այն թղթապանակն է, որն առաջինը գործարկվում է, երբ node.js- ը սկսում է ձեր սերվերը: Այն նայում է www ֆայլին և հետևում այս ֆայլին ՝ կատարման համար: Www ֆայլը node.js- ին ասում է, որ սերվերը սկսի 3000 պորտից (սա կարող է փոխվել գրեթե ամեն ինչի) և որոշ այլ բաներ անել, ինչպիսիք են իրադարձությունների ունկնդիրը և այլն: Ամենակարևորը նավահանգիստն է, որի վրա տեղադրված է ձեր ծրագիրը:

node_modules

Այս թղթապանակում կա այն, ինչ կոչվում է միջին սարքավորում: Միջին սարքավորում Ես սիրում եմ բացատրել որպես լրացուցիչ ծրագրակազմ ՝ ձեր համար կոդավորումը հեշտացնելու համար: Հիմնականում դրանք այլ գրադարաններ են, որոնց գործառույթները նախապես պատրաստված են ձեր օգտագործման համար: Այս նախագծի համար օգտագործված լրացուցիչ միջին սարքավորումները եղել են Nodemailer, Passport, Nodemon, bycrypt և այլն:

հանրային

Սա այն վայրն է, որտեղ կգնային ձեր վեբ կայքի բոլոր պատկերները, CSS- ը և javascript- ը: Դրանք ուղղակիորեն օգտագործվում են վեբ էջերի կողմից:

երթուղիներ

Սրանք ձեր կայքի երթուղիներ են: Օրինակ ՝ գլխավոր էջ, մուտքի էջ և այլն:

դիտումներ

Ինչպես տեսնում եք, դիտումները.hbs ֆայլեր կամ.handlebars են, կամ կաշխատեն, այն պարզապես պահանջում է app.js ֆայլի մանիպուլյացիա: Սրանք ձեր ղեկի html էջերն են, որոնք կցուցադրվեն դիտարկիչում: Դասավորությունը ձեր հիմնական դասավորության ֆայլն է և երբեմն գտնվում է իր դասավորության ենթապանակում: Հիմնական դասավորության ֆայլը կանչում է ձեր մյուս ղեկի ֆայլերին և ցուցադրում դրանք, սա ավելի իմաստալից կլինի, երբ մենք սուզվենք կոդի մեջ:

app.js

Սա ձեր հիմնական հավելվածի ֆայլն է, երբեմն դա սերվեր է կոչվում, ուղղակի կախված է կարգավորումից: Այս ֆայլն ունի սերվերի բոլոր կազմաձևերը և նույնիսկ որոշ հատուկ գործառույթներ: Այն նաև կլինի սխալների վարիչ:

փաթեթ. json

Այս ֆայլը ստեղծվում է express- ի միջոցով և npm- ին պատմում է այն բոլոր միջին ծրագրակազմը, որը ցանկանում եք օգտագործել ձեր նախագծում: Երբ գործարկեք npm install- ը, այս ֆայլում կանչված բոլոր միջին սարքավորումները կտեղադրվեն node_modules պանակում:

Քայլ 2: Տեղադրեք ձեր ձևանմուշը

Դուք կարող եք ստեղծել ձեր ամբողջ HTML- ը զրոյից կամ կարող եք օգտագործել ձևանմուշ: Այս կայքի համար ես օգտագործել եմ ձևանմուշ: Այլ կայքեր, որոնց ես օգնել եմ մշակել, կոդավորել եմ զրոյից: Ընտրությունը ձերն է, այս քայլը բացատրում է կաղապարի դասավորությունը:

Իմ վեբ ծրագիրը օգտագործում է bootstrap ձևանմուշ, որը հիանալի է զարմանալի CSS- ի պատրաստման համար: Կաղապարներ գտնելու համար այցելեք այս կայքը: Ինչպես և նախորդ քայլում նշվեց, բոլոր անհրաժեշտ css, js և img ֆայլերը գտնվում են հանրային թղթապանակի տակ: Այս ֆայլերը կայքին ավելի լավ տեսք են տալիս, քան պարզ տեքստը և դրա պատկերների օգտագործումը կայքում:

Որպեսզի ղեկի ձևանմուշի ոճը աշխատի ձևանմուշով: Էջերը բաժանված են երկու մասի: Առաջինը այն է, ինչին անվանում են «դասավորություն»: Դասավորությունը այն հատկություններն են, որոնք կցանկանայիք ցուցադրվել ձեր կայքի յուրաքանչյուր վեբ էջում: Իմ դեպքում սա վերնագիրն է, որն ունի նավիգացիոն գոտի և տողատակը, որը պարունակում է լրացուցիչ նավարկության և ցուցադրման կտորներ:

Դասավորության ֆայլը և ղեկի այլ ֆայլերը դիտումների պանակում են: Ես կանդրադառնամ ավելի պարզ դասավորությանը, որն ավելի վաղ օգտագործել էիք ՝ ցուցադրելու համար, թե ինչպես է աշխատում հայեցակարգը, այնուհետև կարող եք տեսնել իմ ծածկագիրը և համեմատել դրանք:

Էքսպրես առաջացած layout.handlebars ֆայլ

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

Handեկի իսկական կախարդանքը ղեկի {{վերնագիր}} և {{{մարմին}}} մեջ է: Այսպիսով, այս երկուսը տարբեր կերպ են գործում {{title}} փոփոխական է, որը փոխանցվում է index.js ֆայլից երթուղիներում, ձևանմուշին փոխանցվելուց հետո այն ցուցադրվում է: {{{Մարմին}}} պիտակը վերցնում է այն, ինչ երբևէ կոչվում է ձեր երթուղու js ֆայլում մատուցման գործառույթում: Մեր դեպքում index.js- ն ունի այս տողը.

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

Սա կոչում է «ինդեքսի» ֆայլ, թե որն է ձեր շարժիչը, ժեդը, ղեկը և այլն, այնպես որ մեր դեպքում index.handlebars:

Էքսպրես գեներացվող ինդեքս. Handlebars

{{կոչում}}

Բարի գալուստ {{title}}

Index.handlebars ֆայլը փոփոխականի պես փոխանցվում է {{{{body}}} պիտակին և ցուցադրվում ձեր վեբ էջում:

Սա թույլ է տալիս ունենալ ձեր կայքի ստատիկ և փոփոխական հատված: Սա գեղեցիկ է դարձնում վերնագրերն ու տողատակը, քանի որ անհրաժեշտ չէ ամբողջ էջը նորից մատուցել: Նոր էջ բեռնելիս միայն որոշ տեղեկություններ են փոխվում:

Քայլ 3: Կոնտակտային ձև

Կոնտակտային ձևը ներառեցի իմ վեբ էջի մեջ, որպեսզի որևէ մեկը կարողանա էլեկտրոնային փոստով ուղարկել իմ կայքի էլ.

Այս կոնտակտային ձևը օգտագործել է npm միջին սարք, որը կոչվում է Node Mailer:

Node Mailer- ի ստեղծում

Node-mailer տեղադրելու համար պարզապես անհրաժեշտ է գործարկել ստորև նշված ծածկագիրը ձեր բարձր մակարդակի ֆայլում, մեր դեպքում `myapp:

sudo npm տեղադրել nodemailer

Տեղադրվելուց հետո ձեզ հարկավոր կլինի մի քանի բան կարգավորել ձեր app.js ֆայլում:

Առաջինը միայն կախվածությունն է, սա հանգույցին ասում է, որ մենք նախատեսում ենք օգտագործել այս միջնակարգ ծրագիրը:

var nodemailer = պահանջում ('nodemailer');

Երկրորդը մեր փոխադրողն է, փոխադրողը օգտագործվում է ձեր փոստի սերվերին, իմ դեպքում gmail- ին միանալու համար:

// Transporter- ը gmail հաշիվ էր ստանում

var transporter = nodemailer.createTransport ({ծառայություն ՝ «gmail», author: {type: «OAuth2», օգտվող ՝ «[email protected]», clientId: «Q775xefdHA_BGu3ZnY9-6sP- ', refreshToken:' 1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc ', accessToken« ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

եթե այլ փոստային սերվերի հետ nodemailer եք օգտագործում, խնդրում ենք այստեղ փնտրել փաստաթղթեր և օգնություն:

Անձից մարդուն մի քանի բան կփոխվի ՝ օգտվող, clientId, clientSecret: refreshToken, և accessToken:

Ձեր userId- ն այն էլ.փոստն է, որը ցանկանում եք օգտագործել, ես պատրաստել եմ նորը, որը նույնն է, ինչ իմ կայքը:

The clientId, clientSecret, refreshToken և accessToken անհրաժեշտ է գտնել ձեր Google հաշվի միջոցով:

Եթե ավելի շատ օգնության կարիք ունեք, կարող եք հետևել այս տեսանյութին այստեղ:

Բոլոր այդ դաշտերը լրացնելուց հետո մենք կավելացնենք մեր հաղորդագրության մանրամասները:

Հաջորդը մենք պետք է հաստատենք, որ մեր ձևի բոլոր դաշտերը մուտքագրված են և վավեր պատասխաններ են:

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + namespace.shift () + ']';} վերադարձնել {param: formParam, msg: msg, value: value};}}));

Այժմ մենք պետք է տեղեկատվություն ստանանք մեր վեբ էջի մեր կոնտակտային ձևից և հաղորդագրություն ուղարկենք:

// Փակցնել կոնտակտների ներկայացման կոճակից, անհրաժեշտ է ստեղծել formsapp.post- ի համար հաջողված հաղորդագրությամբ գլխավոր էջ ('/contact_Form', գործառույթ (պահանջ, res) {// Ստանալ տեղեկատվություն կոնտակտային ձևից ՝ homepage.hbs var անունից = req.body.name; var էլփոստ = req.body.email; var հեռախոս = req.body.phone; var հաղորդագրություն = req.body.message; var mailOptions = {// ստեղծում է տեղեկատվություն, որն օգտագործվում է հետևյալից հաղորդագրություն ուղարկելու ժամանակ: ' Ավտոմատ էլփոստ », հասցեով ՝« [email protected] », թեմա ՝« Վեբ կայքի կոնտակտային ձև ՝ » + անուն, տեքստ ՝« Դուք ստացել եք նոր հաղորդագրություն ձեր վեբ կայքի կոնտակտային ձևից: / n / n ' +' Այստեղ մանրամասներն են ՝ / n / n Անուն ՝ ' + անուն +' / n / n Էլ. փոստ ՝ ' + էլփոստ +' / n / n Հեռախոս `' + հեռախոս +' / n / n Հաղորդագրություն. / n ' + հաղորդագրություն} transporter.sendMail (mailOptions, գործառույթը (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Send');}}) res.render ('index'); // render նոր գլխավոր էջ, նայեք, թե ինչպես դա անել հաջողության հաղորդագրությամբ, օրինակ ՝ ելքի էջը))

Ֆլեշ

Flash- ը օգտագործվում է գործողությունները կատարելուց հետո հաղորդագրությունները ցուցադրելու համար: Դուք կարող եք դա տեսնել, երբ ձև եք ներկայացնում կամ դաշտը ճիշտ չեք մուտքագրում:

Տեղադրեք ֆլեշը, ինչպես մյուս npm միջնակարգ ծրագիրը:

sudo npm տեղադրել connect-flash

var flash = պահանջում ('connect-flash'); // ուներ ֆլեշ գործառույթ ՝ էկրանին հաղորդագրությունները ցուցադրելու համար

// Միացրեք Flashapp.use (ֆլեշ ());

Միացնել ֆլեշը, որը մղում և թարմացնում է հաղորդագրությունները վեբ էջում: Սրանք այն հաղորդագրություններն են, որոնք ասում են այնպիսի բաներ, ինչպիսիք են հաջողությունը, կամ տեղեկատվությունը սխալ է մուտքագրվել:

// Գլոբալ Վարս

app.use (գործառույթ (req, res, հաջորդ) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('սխալ'); res.locals.user = req.user || null; հաջորդ ();});

Ոմանց համար անհրաժեշտ են փոփոխականներ, որոնք կապված են բռնկման հետ:

Այնտեղ գնում եք պատրաստված կոնտակտային ձև:

Քայլ 4: Մուտքի էջ

Սա պարզապես մի բան էր, որը ես ուզում էի տեսնել, արդյոք կարո՞ղ եմ անել, և գուցե այն օգտագործեմ ապագայում: Ես պարզապես ուզում էի բացատրել կոդը, քանի որ այն գտնվում է իմ git շտեմարանում:

Այսպիսով, այս հատվածը օգտագործում է ևս մի քանի npm միջին սարք: Տեղադրեք հետևյալը ՝ օգտագործելով ստորև բերված հրամանները:

npm տեղադրել անձնագիր && npm տեղադրել անձնագիր-տեղական && npm տեղադրել bcryptjs

&&- ն թույլ է տալիս գործարկել բազմաթիվ հրամաններ մեկ տողով:

Մուտք և օգտվողներ

Ձեր երթուղիների պանակի տակ պետք է ստեղծեք login.js և user.js ֆայլ: Սա կօգտագործվի օգտվողի ստեղծման համար, որը կպահվի մեր տվյալների բազայում, և թույլ կտա օգտվողին մուտք գործել ՝ ստուգելով տվյալների բազան:

user.js

var express = պահանջում ('express'); var երթուղիչ = express. Router (); var անձնագիր = պահանջում («անձնագիր»); var LocalStrategy = պահանջում («անձնագիր ՝ տեղական»): Ռազմավարություն; var User = պահանջում ('../ մոդելներ/օգտվող'); // Գրանցեք router.get ('/register', function (req, res) {res.render ('register');}); // Գրանցել օգտվողին 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 (« գաղտնաբառ 2 »,« Գաղտնաբառերը չեն համընկնում »): հավասար է (req.body.password); var սխալներ = req.validationErrors (); եթե (սխալներ) {res.render ('գրանցվել', {սխալներ `սխալներ});} else {var newUser = նոր օգտվող ({անուն ՝ անուն, էլ. փոստ, օգտվողի անուն ՝ օգտվողի անուն, գաղտնաբառ ՝ գաղտնաբառ}); User.createUser (newUser, գործառույթը (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Դուք գրանցված եք և այժմ կարող եք մուտք գործել'); res.redirect (' /մուտք »);}});

Կոտրելով սա մաս առ մաս

Սկզբում մենք ներառում ենք անհրաժեշտ բոլոր միջին սարքավորումները, այնուհետև ներառում ենք մեր մոդելային ֆայլը, որը բացատրված է ստորև: Մենք անցնում ենք գրանցման պիտակից և ցուցադրում մեր գրանցամատյանի ղեկի տեքստը: Այնուհետեւ գալիս է կարեւոր գործառույթը: Դրանք թույլ են տալիս գրանցել նոր օգտվող մեր տվյալների բազայում: Ֆունկցիան ստուգում է, որպեսզի համոզվի, որ բոլոր դաշտերը վավեր են և ներառված են ձևի մեջ, եթե ոչ, դրանք կհրապարակեն դրանք: Հաջորդը այն ստուգում է սխալները, և եթե սխալներ չլինեն, դա նոր օգտվող է ստեղծում `տրված տեղեկատվությամբ: Այնուհետև այն վերադառնում է դեպի մուտքի էջ ՝ թույլ տալով մուտք գործել:

login.js

var express = պահանջում ('արտահայտել');

var router = express. Router (); var անձնագիր = պահանջում («անձնագիր»); var LocalStrategy = պահանջում («անձնագիր ՝ տեղական»): Ռազմավարություն; var User = պահանջում ('../ մոդելներ/օգտվող'); /* Ստացեք օգտվողների ցուցակ: */// Գլխավոր էջ router.get ('/', գործառույթ (պահանջ, res) {res.render ('login');}); Passport.use (նոր LocalStrategy (գործառույթ (օգտվողի անուն, գաղտնաբառ, կատարված)) {User.getUserByUsername (օգտվողի անուն, գործառույթ (սխալ, օգտվող) {եթե (սխալ) սխալ է նետում, եթե (! օգտվող) {վերադարձը կատարված է (զրո, կեղծ, { հաղորդագրություն ՝ 'Անհայտ օգտվող'});}} User.comparePassword (գաղտնաբառ, user.password, գործառույթ (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} else { վերադարձը կատարված է (null, false, {message: 'Invalid password'});}});});})); Passport.serializeUser (գործառույթը (օգտվողը, կատարված է) {կատարված է (null, user.id);}); Passport.deserializeUser (գործառույթը (id, ավարտված է) {User.getUserById (id, գործառույթը (err, user) {done (err, user);});}); երթուղիչ վահանակ ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Դուք դուրս եք եկել'); res.redirect ('/homepage');});

module.exports = երթուղիչ;

Սկզբում մենք ներառում ենք անհրաժեշտ բոլոր միջին սարքավորումները, այնուհետև ներառում ենք մեր մոդելային ֆայլը, որը բացատրված է ստորև: Մենք անցնում ենք մուտքի պիտակից և ցուցադրում մեր մուտքի ղեկի տեքստը: Այնուհետև մենք օգտագործում ենք անձնագրի որոշ գործառույթներ ՝ մուտքագրված մուտքագրված օգտվողի անունն ու գաղտնաբառը և դրանք ստուգելու մեր տվյալների շտեմարանին համապատասխան: Մենք կօգտագործենք նաև գաղտնագրված գաղտնաբառ, որը կարող է մի փոքր դանդաղեցնել մուտքը ազնվամորու pi- ով: Սա ավելի մանրամասն բացատրում եմ հաջորդիվ: Օգտվողի անունը և գաղտնաբառը վավերացնելուց հետո դուք կուղղորդվեք դեպի գլխավոր էջ, որը ցույց կտա վահանակը, քանի որ մենք դա տեղադրել ենք մեր ինդեքսի ֆայլում: Մենք այստեղ ավելացնում ենք նաև դուրս գալու հնարավորությունը:

Ինչպես արդեն նշեցի, մենք նաև պետք է ստեղծենք մոդել ՝ տվյալների բազան ստուգելու համար:

Դա արվում է ՝ ձեր հիմնական հավելվածի թղթապանակի ներքո մոդելներ կոչվող թղթապանակ ստեղծելով: Այս թղթապանակում անհրաժեշտ է նաև user.js ֆայլ:

model/user.js

var մանգուս = պահանջել ('մանգուշ');

var bcrypt = պահանջել ('bcryptjs'); // User Schema var UserSchema = mongoose. Schema ({օգտվողի անունը ՝ {տիպը ՝ տող, ինդեքսը ՝ ճշմարիտ}, գաղտնաբառը ՝ {տիպը ՝ լարային}, էլ. var User = module.exports = mongoose.model («Օգտվող», UserSchema);

module.exports.createUser = գործառույթը (նոր օգտվող, հետադարձ) {

bcrypt.genSalt (10, գործառույթ (սխալ, աղ)) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = գործառույթը (օգտվողի անուն, հետադարձ) {var query = {username: username}; User.findOne (հարցում, հետադարձ); } module.exports.getUserById = գործառույթը (id, հետադարձ) {User.findById (id, հետադարձ զանգ); } module.exports.comparePassword = գործառույթ (թեկնածուական գաղտնաբառ, հեշ, հետադարձ) {bcrypt.compare (candidPassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Այս մոդելը նախանշում է, թե ինչպիսին կլինեն մեր օգտագործողի պարամետրերը, ինչպես նաև այն, թե ինչպես ենք դրանք հասանելի լինելու: Նախկինում նշեցի, որ մենք ծածկագրելու ենք մեր գաղտնաբառերը: սա այն է, որ խախտման դեպքում տվյալների բազայում ոչ մեկի գաղտնաբառ չի պահվում: Գաղտնաբառերը խափանվում են միջին պարագաների bcrypt- ի միջոցով:

Քայլ 5: Երթևեկության հաշվիչ

Ես ուզում էի տեսնել, թե քանի եզակի օգտվող է այցելել իմ վեբ էջը և հաշվել «հարվածների» թիվը: Կան բազմաթիվ եղանակներ դա անելու համար, ես կբացատրեմ, թե ինչպես եմ դա արել:

Սա օգտագործում է mongodb հավաքածու ՝ հետևելու համար, թե քանի օգտվող է այցելել իմ էջը և քանի անգամ է այցելել յուրաքանչյուր եզակի այցելու:

Քանի որ մենք արդեն խոսել ենք mongoDB ստեղծելու մասին, ես այլևս չեմ անցնի դրա միջով:

Կազմելու համար գուցե անհրաժեշտ լինի երկու հավաքածու ավելացնել ձեր տվյալների բազայում: Դա անելու համար կարող եք կամ տեղադրել RoboMongo- ն, եթե օգտվում եք միջերեսից, սակայն եթե դուք օգտագործում եք անգլուխ ազնվամորու պի, ինչպիսին ես եմ, դուք կզվարճանաք հետևյալ հրամաններով:

Մոնգոյի պատյան

Db խմբագրելու, տեղեկատվություն ստանալու կամ հավաքածու ստեղծելու համար ձեզ հարկավոր կլինի մոնգոյի կեղևը անգլուխ միավորի վրա:

Վազիր

մոնգո

Սա կբացի պատյանը:

Ավելացնել հավաքածու

Իմ դեպքում տվյալների շտեմարանը կոչվում է loginapp, կարող եք այն անվանել ինչ ուզում եք:

օգտագործել nameofyourdb

Մեզ անհրաժեշտ է հավաքածու ՝ մեր կայք այցելած օգտվողների մեր բոլոր IP հասցեները պահելու համար:

db.creatCollection ("ip")

Հաջորդը մենք ստեղծում ենք հավաքածու `մեր կայքի յուրահատուկ հիթերը հաշվելու համար: Սա նախաստորագրվում է id- ով և հաշվարկվում է 0 -ից:

db.createCollection («հաշվել», {id ՝ «հարվածի հաշվիչ», հաշվել ՝ 0})

Հետևեք IP հասցեներին

Դա անելու համար մենք կքաշենք օգտվողների Ip- ն, երբ նրանք այցելեն մեր գլխավոր էջ, ավելացնենք մեր հաշվարկը և կպահենք ՝ հետագայում դրանք համեմատելու համար:

Մենք պետք է որոշ մոդելներ ստեղծենք մեր մանգուսի սխեմաները պահելու համար և որոշ կոդ ավելացնենք մեր homepage.js ֆայլում:

Մենք ստեղծում ենք count.js և ip.js և պահում դրանք մեր մոդելների պանակում:

Ip.js ֆայլը պարզապես մեր IP հասցեի սխեման է

var մանգուս = պահանջել ('մանգուշ'); // փաթեթ վարող մոնգոյի համար

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

count.js- ը կհրավիրվի մեր գլխավոր էջի կողմից `հարվածների հետևումը սկսելու համար: Դա արվում է այնպես, ինչպես ստորև:

//Homepagerouter.get('/ ', գործառույթ (պահանջ, res) {publicIp.v4 (). Ապա (ip => {Public_ip = ip; console.log ("ipv4:"+ Public_ip); // =>' 46.5.21.123 '}); publicIp.v6 (). Ապա (ip => {console.log ("ipv6" + ip); Public_ip = ip; // =>' fe80:: 200: f8ff: fe21: 67cf ' });

Count.getCount (հավաքածու, ipc, Public_ip, գործառույթ (հաշվարկ) {

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

Դա տեղի է ունենում ամեն անգամ, երբ ինչ -որ մեկը գնում է մեր գլխավոր էջ, այս դեպքում theinternet.onthewifi.com/homepage:

Այն ստուգում է օգտվողի IP- ն ՝ ip4 կամ ip6, այնուհետև պահում է այդ արժեքը այնտեղ, որտեղ այն ուղարկում է count.get.collection, որը մեր count.js ֆայլում պահվող գործառույթ է:

Օգտվողի յուրահատկությունը ստուգելուց հետո այն վերադառնում է և տեղադրում է հաշվարկի արժեքը հիմնական էջում ՝ որպես ղեկի փոփոխական:

Count.js ֆայլը հետևյալն է.

//count.jsvar մոնգո = պահանջել ('mongodb'); // աջակցում է տվյալների բազա var mongoose = պահանջում ('մանգուս'); // փաթեթների մշակող mongo mongoose.connect- ի համար ('mongodb: // localhost/loginapp'); var db = մանգուս. միացում; var Ip = պահանջում ('../ մոդելներ/ip'); // Count Schema var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = գործառույթը (հաշվարկ, ipc, Public_ip, հետադարձ) {// համարը թեստային է, հետադարձման գործառույթը ipc.findOne ({ip: Public_ip}, գործառույթը (err, iptest) {if (! iptest) // ավելացնել նոր ip, եթե ոչ տվյալների բազայում, և թարմացնող հաշվիչ {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // ավելացնել նոր ip տվյալների բազա count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // թարմացնել կոնկրետ ip հաշվիչը, տեսնելու, թե ով է ամենից շատ այցելում {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Սա ստեղծում է հաշվարկի սխեման և մեր.getCount գործառույթը:. GetCount գործառույթը ստուգում է DB- ն օգտվողների ip- ի համար, և եթե այն գտնում է, գործառույթը ավելացնում է այդ օգտագործողի թիվը, այլ ոչ թե հարվածների հաշվիչը: Այնուամենայնիվ, եթե օգտագործողների ip- ը չգտնվի, այն կստեղծի հավաքման նոր օբյեկտ օգտվողների ip- ով և հարվածի հաշվիչը կավելացնի 1 -ով:

Այնուհետև այն վերադարձվում և ցուցադրվում է վեբ էջին:

Այնտեղ դուք ունեք ip tracking hit counter:

Քայլ 6: Օրագիր

Ես ներկայումս փորձում եմ մշակել բլոգ, որը կենտրոնացած կլինի ծրագրերի, խելացի տների և Polaroids- ի վերաբերյալ իմ հետաքրքրությունների վրա: Այսպիսով, ես ստեղծեցի բլոգի բաժին: Բլոգը օգտագործում է ստատիկ html էջեր և ղեկի շրջանակ: Բլոգավարությունն ավելի դյուրին դարձնելու համար ավելի լավ տեխնոլոգիաներ փնտրելուց հետո ես այնուհետև վերափոխեցի իմ կայքը `օգտագործելով hugo- ն: Hugo- ն ստատիկ html գեներատոր է: Այս մասին ես ավելի շատ եմ խոսում ստորև նշված ձեռնարկում:

Քայլ 7: Ավարտված

Այնտեղ դուք անցնում եք իմ node.js վեբ կայքի խորացված ձեռնարկով, որը տեղակայված է իմ ազնվամորու pi- ում: Եթե ունեք հարցեր կամ մեկնաբանություններ, խնդրում ենք թողնել դրանք ստորև:

Հուսով եմ, որ սա կօգնի մյուսներին:

Hugo- ի միջոցով այս կայքի նկատմամբ այլ մոտեցման համար, ստատիկ վեբ էջերի գեներատոր, տես իմ մյուս ձեռնարկը (շուտով):