Სარჩევი:

Node.js ვებ გვერდი ნაწილი 2: 7 ნაბიჯი
Node.js ვებ გვერდი ნაწილი 2: 7 ნაბიჯი

ვიდეო: Node.js ვებ გვერდი ნაწილი 2: 7 ნაბიჯი

ვიდეო: Node.js ვებ გვერდი ნაწილი 2: 7 ნაბიჯი
ვიდეო: Vue.js სრული კურსი დამწყებთათვის! 2024, ნოემბერი
Anonim
Node.js ვებ გვერდი ნაწილი 2
Node.js ვებ გვერდი ნაწილი 2

კეთილი იყოს თქვენი მობრძანება მეორე ნაწილში !!

ეს არის ჩემი Node.js ვებსაიტის პროგრამის სამეურვეო ნაწილი 2. მე ეს გაკვეთილი ორ ნაწილად დავყავი, რადგან ის ჰყოფს მათ, ვისაც მოკლე შესავალი სჭირდება და მათ, ვისაც სურს სრული გაკვეთილი ვებგვერდზე.

მე ვაპირებ გავლა ჩემი საიტის შექმნაზე. თქვენი შეიძლება იყოს განსხვავებული, ასე რომ მიჰყევით ჩემსას და ისწავლეთ გამოყენებული ტექნიკა. მას შემდეგ რაც აირჩევთ სხვა HTML შაბლონს, ნაკადი ოდნავ განსხვავებული იქნება. გაითვალისწინეთ ეს.

ნაბიჯი 1: აპლიკაციის სტრუქტურა

აპლიკაციის სტრუქტურა
აპლიკაციის სტრუქტურა

ასე რომ, ჩემი საიტი მიჰყვება ექსპრეს გენერატორს, თუმცა მე გამოვიყენე საჭე და არა ჟადე. თუ ჯადე მოგწონთ, წადით! Jade არის მოკლე ხელით HTML ყველა ფრჩხილისა და div- ის გარეშე. თუ არ გესმით, რომ შეიძლება გინდათ ეწვიოთ YouTube- ს და ნახოთ HTML გაკვეთილები.

მე მირჩევნია და უფრო კომფორტულად ვარ HTML და საჭე, ასე რომ მე ვიყენებ. საჭესთან ექსპრეს პროექტის შესაქმნელად გაუშვით ექსპრეს ბრძანება.

express -hbs nameofmyapp

შემდეგ გააგრძელეთ პირველი ნაწილის ნაბიჯის გადადგმა ყველა შუა მოწყობილობის დაყენების მიზნით.

ექსპრესი ქმნის ძალიან სპეციფიკურ აპლიკაციის სტრუქტურას და ძალიან სასარგებლოა node.js პროგრამები ამ ფორმას მიჰყვება გარკვეული ვარიაციით.

მიმაგრებულ ფოტოში შეგიძლიათ ნახოთ სხვადასხვა საქაღალდე და ფაილი, ქვემოთ ვცდილობ აგიხსნათ ეს ყველაფერი.

ურნა

ეს არის საქაღალდე, რომელიც გაშვებულია პირველად, როდესაც node.js იწყებს თქვენს სერვერს. ის გამოიყურება www ფაილზე და მიჰყვება ამ ფაილს შესასრულებლად. Www ფაილი ეუბნება node.js– ს დაიწყოს სერვერი 3000 პორტში (ეს შეიძლება შეიცვალოს თითქმის ყველაფერზე) და გააკეთოს სხვა რამ, როგორიცაა ღონისძიების მსმენელი და სხვა. მთავარია, იყოს პორტი, რომელზედაც დაყენებულია თქვენი აპლიკაცია.

node_modules

ამ საქაღალდეში არის ის, რასაც შუა ნაწარმი ჰქვია. საშუალო აღჭურვილობა მე მინდა განვმარტო, როგორც დამატებითი პროგრამული უზრუნველყოფა, რომ გაგიადვილოთ კოდირება. ეს არის ძირითადად სხვა ბიბლიოთეკები, რომლებსაც აქვთ წინასწარ გამოსაყენებელი ფუნქციები. ამ პროექტისთვის მე გამოვიყენე დამატებითი საშუალო ნაწარმი იყო Nodemailer, Passport, Nodemon, bycrypt და სხვა.

საჯარო

ეს არის ის, სადაც თქვენი ვებ – გვერდის ყველა სურათი, CSS და javascript მიდის. ისინი პირდაპირ გამოიყენება ვებგვერდებზე.

მარშრუტები

ეს არის მარშრუტები თქვენი საიტისთვის. როგორიცაა საწყისი გვერდი, შესვლის გვერდი და სხვა.

დათვალიერება

როგორც ხედავთ, შეხედულებებია.hbs ფაილები ან.handlebars, ან იმუშავებს, უბრალოდ საჭიროა app.js ფაილის მანიპულირება. ეს არის თქვენი საჭის html გვერდები, რომლებიც გამოჩნდება ბრაუზერში. განლაგება არის თქვენი ძირითადი განლაგების ფაილი და ზოგჯერ მისი განლაგების ქვესაქაღალდეშია. ძირითადი განლაგების ფაილი იძახებს თქვენს სხვა საჭის ფაილებს და აჩვენებს მათ, ეს უფრო აზრიანი გახდება, როდესაც ჩვენ ჩავუღრმავდებით კოდს.

app.js

ეს არის თქვენი ძირითადი პროგრამის ფაილი, ზოგჯერ ამას სერვერი ეწოდება, მხოლოდ დამოკიდებულია დაყენებაზე. ამ ფაილს აქვს სერვერის კონფიგურაცია და სპეციალური ფუნქციებიც კი. ეს ასევე იქნება შეცდომის დამმუშავებელი.

პაკეტი. ჯონსონი

ეს ფაილი შექმნილია ექსპრესის მიერ და ეუბნება npm ყველა შუამავლებს, რომელთა გამოყენებაც გსურთ თქვენს პროექტში. მას შემდეგ რაც გაუშვებთ npm ინსტალაციას, ამ ფაილში გამოძახებული ყველა შუალედური მოწყობილობა დაინსტალირდება node_modules საქაღალდეში.

ნაბიჯი 2: თქვენი შაბლონის განლაგება

თქვენ შეგიძლიათ შექმნათ ყველა თქვენი HTML ნულიდან ან შეგიძლიათ გამოიყენოთ შაბლონი. მე გამოვიყენე შაბლონი ამ საიტისთვის. სხვა საიტები, რომლებიც მე დამეხმარა შემუშავებაში, მე მაქვს კოდირებული ნულიდან. არჩევანი თქვენზეა, ეს ნაბიჯი განმარტავს შაბლონის განლაგებას.

ჩემი ვებ პროგრამა იყენებს ჩატვირთვის შაბლონს, რომელიც შესანიშნავია გასაოცარი CSS– ის შესაქმნელად. შაბლონების მოსაძებნად ეწვიეთ ამ საიტს. როგორც წინა საფეხურზე აღვნიშნეთ, ყველა საჭირო css, js და img ფაილი საჯარო საქაღალდეშია. ეს ფაილები საიტს უკეთესად გამოიყურება ვიდრე უბრალო ტექსტი და მისი გამოსახულებები როგორ გამოიყენება საიტზე.

სახელურების შაბლონის სტილი შაბლონთან მუშაობის მიზნით, გვერდები ორ ნაწილად იყოფა. პირველი არის ის, რასაც მოიხსენიებენ როგორც "განლაგებას". განლაგება არის ის თვისებები, რაც გსურთ რომ ნახოთ თქვენს ვებგვერდის ყველა ვებ გვერდზე. ჩემს შემთხვევაში ეს არის სათაური, რომელსაც აქვს ნავიგაციის ზოლი და ქვედა კოლონტიტული, რომელსაც აქვს დამატებითი სანავიგაციო და საჩვენებელი ნაწილები.

განლაგების ფაილი და სხვა საჭის ფაილები ნახვების საქაღალდეშია. მე გავაანალიზებ უფრო მარტივ განლაგებას ექსპრეს გენერატორისგან, რომელიც ადრე გამოიყენეთ, რათა წარმოაჩინოთ როგორ მუშაობს კონცეფცია, შემდეგ შეგიძლიათ ნახოთ ჩემი კოდი და შეადაროთ ისინი.

ექსპრესი გენერირებული განლაგება.ხელიანი ფაილი

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

საჭის ნამდვილი მაგია არის საჭეებში {{title}} და {{{body}}}. ეს ორი განსხვავებულად მოქმედებს {{title}} არის ცვლადი, რომელიც გადადის index.js ფაილიდან მარშრუტებში, მას შემდეგ რაც გადაეცემა შაბლონს და გამოჩნდება. {{{სხეული}}} ტეგი იღებს იმას, რასაც ოდესმე უწოდებენ რენდერის ფუნქციას თქვენი მარშრუტის js ფაილში. ჩვენს შემთხვევაში index.js– ს აქვს ეს ხაზი:

res.render ('ინდექსი', {სათაური: 'ექსპრესი', რაოდენობა: userCount});

ეს უწოდებს "ინდექსის" ფაილს იმისა, თუ რა ძრავაა თქვენი გამოყენებისათვის, ჟადე, საჭე და ასე შემდეგ, ასე რომ ჩვენს შემთხვევაში index.handlebars.

ექსპრესი გენერირებული ინდექსი.ხელები

{{title}}

კეთილი იყოს თქვენი მობრძანება {{title}}

Index.handlebars ფაილი ცვლადივით გადაეცემა {{{{body}}} ტეგს და გამოჩნდება თქვენს ვებგვერდზე.

ეს საშუალებას გაძლევთ გქონდეთ თქვენი ვებსაიტის სტატიკური ნაწილი და ცვლადი ნაწილი. ეს ქმნის სათაურებს და ქვედა კოლონტიტულებს, რადგან თქვენ არ გჭირდებათ მთელი გვერდის ხელახალი გაცემა, ახალი გვერდის ჩატვირთვისას მხოლოდ ზოგიერთი ინფორმაცია იცვლება.

ნაბიჯი 3: საკონტაქტო ფორმა

საკონტაქტო ფორმა
საკონტაქტო ფორმა
საკონტაქტო ფორმა
საკონტაქტო ფორმა
საკონტაქტო ფორმა
საკონტაქტო ფორმა

მე დავამატე საკონტაქტო ფორმა ჩემს ვებ გვერდზე, ასე რომ ნებისმიერს შეეძლო ელექტრონული ფოსტით გაგზავნა ჩემი საიტის ელ.ფოსტა, კითხვებით ან კომენტარებით.

ამ საკონტაქტო ფორმამ გამოიყენა npm საშუალო მოწყობილობა, რომელსაც ეწოდება Node Mailer.

Node Mailer– ის დაყენება

Node-mailer– ის ინსტალაციისთვის თქვენ უბრალოდ უნდა აწარმოოთ ქვემოთ მოყვანილი კოდი თქვენს ზედა დონის ფაილში, ჩვენს შემთხვევაში, myapp.

sudo npm დააინსტალირეთ nodemailer

დაინსტალირების შემდეგ თქვენ უნდა დააყენოთ რამდენიმე რამ თქვენს app.js ფაილში.

პირველი არის მხოლოდ დამოკიდებულება, ეს ეუბნება კვანძს, რომ ჩვენ ვგეგმავთ ამ შუა პროგრამის გამოყენებას.

var nodemailer = მოითხოვს ('nodemailer');

მეორე არის ჩვენი გადამზიდავი, ტრანსპორტიორი გამოიყენება თქვენს საფოსტო სერვერთან დასაკავშირებლად, ჩემს შემთხვევაში gmail.

// ტრანსპორტიორი იყენებდა gmail ანგარიშს

var transporter = nodemailer.createTransport ({სერვისი: "gmail", author: {type: "OAuth2", მომხმარებელი: "[email protected]", clientId: "139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontontonto: "Q775xefdHA_BGu3ZnY9-6sP-", refreshToken: 1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc ", accessToken: ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7 '}})

თუ იყენებთ nodemailer– ს სხვა საფოსტო სერვერთან ერთად, გთხოვთ, მოიძიოთ აქ დოკუმენტაცია და დახმარება.

რამდენიმე რამ შეიცვლება ადამიანიდან ადამიანზე: მომხმარებელი, clientId, clientSecret. refreshToken და accessToken.

თქვენი userId არის ელ.ფოსტა, რომლის გამოყენებაც გსურთ, მე გავაკეთე ახალი სახელწოდებით იგივე, რაც ჩემი საიტი.

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 () + ']';} return {param: formParam, msg: msg, value: value};}}));

ჩვენ ახლა უნდა მივიღოთ ინფორმაცია ჩვენს ვებგვერდზე არსებული საკონტაქტო ფორმისგან და გავაგზავნოთ შეტყობინება.

// გამოქვეყნება კონტაქტის წარდგენის ღილაკიდან, თქვენ უნდა შექმნათ საწყისი გვერდი წარმატებული შეტყობინებით წარმოდგენილი formsapp.post ('/contact_Form', function (req, res) {// მიიღეთ ინფორმაცია საკონტაქტო ფორმიდან, საწყისი გვერდიდან. Hbs var სახელი = req.body.name; var email = req.body.email; var ტელეფონი = req.body.phone; var message = 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 გაგზავნილი');}}) res.render ('ინდექსი'); // რენდერი ახალი საწყისი გვერდი, შეხედეთ როგორ გავაკეთოთ ეს წარმატებული შეტყობინებით, მაგალითად გასვლის გვერდი})

ფლეშ

Flash გამოიყენება მოქმედებების დასრულების შემდეგ შეტყობინებების საჩვენებლად. ამის დანახვა შეგიძლიათ ფორმის წარდგენისას, ან ველში სწორად შეყვანისას.

დააინსტალირეთ Flash ისევე, როგორც სხვა npm middleware.

sudo npm დააინსტალირეთ connect-flash

var flash = მოითხოვს ('დაკავშირება-ფლეშ'); // ჰქონდა ფლეშ ფუნქცია ეკრანზე შეტყობინებების საჩვენებლად

// დაკავშირება Flashapp.use (ფლეშ ());

ჩართეთ ფლეშ, რომელიც უბიძგებს და განაახლებს შეტყობინებებს ვებ გვერდზე. ეს არის შეტყობინებები, რომლებიც ამბობენ ისეთ რამეს, როგორიცაა წარმატება, ან ინფორმაცია არასწორად იყო შეყვანილი.

// გლობალური ვარსი

app.use (ფუნქცია (req, res, next) {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 router = express.outer (); var პასპორტი = მოითხოვს ('პასპორტი'); var LocalStrategy = მოითხოვს ('პასპორტი-ადგილობრივი'). სტრატეგია; var მომხმარებელი = მოითხოვს ('../ მოდელები/მომხმარებელი'); // რეგისტრაცია 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.body.password; var password2 = req.body.password2; // ვალიდაცია req.checkBody ('სახელი', 'სახელი აუცილებელია'). notEmpty (); req.checkBody ('ელფოსტა', 'ელფოსტა საჭიროა').notEmpty (); req.checkBody ('email', 'Email is not valid'). isEmail (); req.checkBody ('მომხმარებლის სახელი', 'მომხმარებლის სახელი აუცილებელია'). notEmpty (); req.checkBody (' პაროლი ',' პაროლი საჭიროა '). notEmpty (); req.checkBody (' password2 ',' პაროლები არ ემთხვევა '). უდრის (req.body.password); var შეცდომები = req.validationErrors (); თუ (შეცდომები) {res.render ("რეგისტრაცია", {შეცდომები: შეცდომები});} else {var newUser = ახალი მომხმარებელი ({სახელი: სახელი, ელ. ფოსტა, მომხმარებლის სახელი: მომხმარებლის სახელი, პაროლი: პაროლი}); User.createUser (newUser, ფუნქცია (err, მომხმარებელი) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'თქვენ დარეგისტრირებული ხართ და ახლა შეგიძლიათ შეხვიდეთ'); res.redirect (' /შესვლა'); } });

დაარღვიე ეს ნაწილებად

პირველ რიგში ჩვენ შევიტანთ საჭირო ყველა საშუალო აღჭურვილობას, შემდეგ ჩვენ ჩავთვლით ჩვენს მოდელ ფაილს, რომელიც ქვემოთ არის განმარტებული. ჩვენ მივდივართ რეგისტრაციის ტეგიდან და ვაჩვენებთ ჩვენი რეგისტრის სახელურების ტექსტს. შემდეგ მოდის მნიშვნელოვანი ფუნქცია. ეს გვაძლევს საშუალებას დავარეგისტრიროთ ახალი მომხმარებელი ჩვენს მონაცემთა ბაზაში. ფუნქცია ამოწმებს, რომ დარწმუნდეს, რომ ყველა ველი სწორია და შეტანილია ფორმაში, თუ არა, ეს მათ მოთხოვნის. შემდეგ ის ამოწმებს შეცდომებს და თუ შეცდომები არ მოხდება ის ქმნის ახალ მომხმარებელს მოცემული ინფორმაციით. შემდეგ ის გადამისამართდება შესვლის გვერდზე, რაც საშუალებას მოგცემთ შეხვიდეთ სისტემაში.

შესვლა. js

var express = მოითხოვს ('ექსპრესი');

var როუტერი = ექსპრესი. მარშრუტიზატორი (); var პასპორტი = მოითხოვს ('პასპორტი'); var LocalStrategy = მოითხოვს ('პასპორტი-ადგილობრივი'). სტრატეგია; var მომხმარებელი = მოითხოვს ('../ მოდელები/მომხმარებელი'); /* მიიღეთ მომხმარებელთა სია. */// საწყისი გვერდი router.get ('/', ფუნქცია (მოთხოვნა, რეს) {res.render ('შესვლა');}); პასპორტი. გამოყენება (ახალი LocalStrategy (ფუნქცია (მომხმარებლის სახელი, პაროლი, დასრულებული)) {User.getUserByUsername (მომხმარებლის სახელი, ფუნქცია (err, მომხმარებელი) {if (err) throw err; if (! user) {return done (null, false, { შეტყობინება: 'უცნობი მომხმარებელი'});} User.comparePassword (პაროლი, user.password, ფუნქცია (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} სხვა { დაბრუნება შესრულებულია (null, false, {message: 'invvalid password'});}});});})); პასპორტი. serializeUser (ფუნქცია (მომხმარებელი, შესრულებულია) {შესრულებულია (null, user.id);}); პასპორტი. deserializeUser (ფუნქცია (id, შესრულებულია) {User.getUserById (id, ფუნქცია (err, user) {შესრულებულია (err, მომხმარებელი);});}); router.post ('/შესვლა', პასპორტი. ავთენტიფიკაცია ('ადგილობრივი', {successRedirect: '/', failureRedirect: '/login', failureFlash: true}), ფუნქცია (მოთხოვნა, რეს) {res.redirect ('/ დაფა ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'თქვენ გამოსული ხართ'); res.redirect ('/homepage');});

module.exports = როუტერი;

პირველ რიგში ჩვენ შევიტანთ საჭირო ყველა საშუალო აღჭურვილობას, შემდეგ ჩვენ ჩავთვლით ჩვენს მოდელ ფაილს, რომელიც ქვემოთ არის განმარტებული. ჩვენ გავდივართ შესვლის ტეგიდან და ვაჩვენებთ ჩვენი შესვლის სახელურების ტექსტს. ჩვენ ვიყენებთ პასპორტის ზოგიერთ ფუნქციას, რომ მივიღოთ შეყვანილი მომხმარებლის სახელი და პაროლი და შევამოწმოთ ისინი ჩვენს მონაცემთა ბაზასთან. ჩვენ ასევე გამოვიყენებთ დაშიფრულ პაროლს, რომელსაც შეუძლია შეაფერხოს ჟოლოს პიზე წვდომა. ამას უფრო დეტალურად განვმარტავ შემდეგში. მომხმარებლის სახელისა და პაროლის გადამოწმების შემდეგ თქვენ გადამისამართდებით მთავარ გვერდზე, რომელიც გამოჩნდება საინფორმაციო დაფაზე, როგორც ამას ჩვენ ვაყენებთ ჩვენს ინდექსში. ჩვენ ასევე დავამატებთ აქ გამოსვლის შესაძლებლობას.

როგორც უკვე აღვნიშნე, ჩვენ ასევე დაგვჭირდება მოდელის შექმნა მონაცემთა ბაზის შესამოწმებლად.

ეს კეთდება საქაღალდის შექმნით თქვენი ძირითადი პროგრამის საქაღალდის ქვეშ, რომელსაც ეწოდება მოდელები. ამ საქაღალდეში ასევე საჭიროა user.js ფაილი.

მოდელი/მომხმარებელი. js

var mongoose = მოითხოვს ('მანგუსტი');

var bcrypt = მოითხოვს ('bcryptjs'); // მომხმარებლის სქემა var UserSchema = mongoose. Schema ({მომხმარებლის სახელი: {ტიპი: სიმებიანი, ინდექსი: ჭეშმარიტი}, პაროლი: {ტიპი: სიმებიანი}, ელფოსტა: {ტიპი: სიმებიანი}, სახელი: {ტიპი: სიმებიანი}}); var მომხმარებელი = module.exports = mongoose.model ('მომხმარებელი', UserSchema);

module.exports.createUser = ფუნქცია (ახალი მომხმარებელი, გამოძახება) {

bcrypt.genSalt (10, ფუნქცია (err, მარილი) {bcrypt.hash (newUser.password, მარილი, ფუნქცია (err, hash) {newUser.password = hash; newUser.save (გამოძახება);});}); } module.exports.getUserByUsername = ფუნქცია (მომხმარებლის სახელი, გამოძახება) {var query = {მომხმარებლის სახელი: მომხმარებლის სახელი}; User.findOne (მოთხოვნა, გამოძახება); } module.exports.getUserById = ფუნქცია (id, გამოძახება) {User.findById (id, callback); } module.exports.comparePassword = ფუნქცია (andidPassword, hash, callback) {bcrypt.compare (andidPassword, hash, ფუნქცია (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 როდესაც ისინი ეწვევიან ჩვენს მთავარ გვერდს, გავზარდოთ ჩვენი რაოდენობა და შევინახავთ მათ შემდგომ შესადარებლად.

ჩვენ უნდა შევქმნათ რამდენიმე მოდელი ჩვენი მანგუს სქემების შესანახად და დავამატოთ კოდი ჩვენს მთავარ გვერდზე. Js ფაილს.

ჩვენ ვქმნით count.js და ip.js და ვინახავთ მათ ჩვენი მოდელების საქაღალდეში.

Ip.js ფაილი მხოლოდ სქემაა ჩვენი ip მისამართისთვის

var mongoose = მოითხოვს ('მანგუსტი'); // პაკეტის დამმუშავებელი მონგო

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

count.js იქნება გამოძახებული ჩვენი საწყისი გვერდი, რათა დაიწყოს ჰიტების თვალყურის დევნება. ეს კეთდება ისე, როგორც ქვემოთ.

//Homepagerouter.get('/ ', ფუნქცია (მოთხოვნა, რეს) {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"}, ფუნქცია (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 მონგო = მოითხოვს ('მონღოდბ'); // მხარს უჭერს მონაცემთა ბაზას var mongoose = მოითხოვს ('მანგუსტი'); // პაკეტის დამმუშავებელი mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = მოითხოვს ('../ მოდელები/ip'); // Count Schema var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var რაოდენობა = 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'). შენახვა (new_ip); // ახალი ip დამატება მონაცემთა ბაზა count.update (// განახლება hit counter {id: "hit counter"}, {$ inc: {count: 1}})} სხვა // განახლება კონკრეტული ip მრიცხველი, რომ ნახოთ ვინ სტუმრობს ყველაზე მეტად {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

ეს ქმნის დათვლის სქემას და ჩვენს.getCount ფუნქციას.. GetCount ფუნქცია ამოწმებს DB მომხმარებლების ip- ს და თუ აღმოაჩენს, ფუნქცია ზრდის ამ მომხმარებლის რაოდენობას და არა დარტყმის მრიცხველს. თუმცა, თუ მომხმარებლის ip არ იქნა ნაპოვნი, ის შექმნის კოლექციის ახალ ობიექტს მომხმარებლის ip– ით და გაზრდის დარტყმის მრიცხველს 1 -ით.

ამის შემდეგ ის ბრუნდება და გამოჩნდება ვებგვერდზე.

აქ თქვენ გაქვთ IP თვალთვალის დარტყმის მრიცხველი.

ნაბიჯი 6: ბლოგი

ბლოგი
ბლოგი

მე ამჟამად ვცდილობ განვავითარო ბლოგი, რომელიც დაფუძნებულია ჩემს ინტერესებზე პროგრამული უზრუნველყოფის, ჭკვიანი სახლებისა და პოლაროიდების შესახებ. ამიტომ შევქმენი ბლოგის განყოფილება. ბლოგი იყენებს სტატიკურ html გვერდებს და სახელურების ჩარჩოს. მას შემდეგ, რაც შევხედე უკეთეს ტექნოლოგიებს, რათა ბლოგინგი გამიადვილდეს, მას შემდეგ განვაახლე ჩემი ვებ – გვერდი ჰიუგოს გამოყენებით. უგო არის HTML სტატიკური გენერატორი. მე ამაზე უფრო მეტს ვისაუბრებ ქვემოთ მოცემულ სამეურვეოში.

ნაბიჯი 7: დასრულდა

აქ გადიხარ სიღრმისეულ გაკვეთილზე ჩემს node.js ვებსაიტზე, რომელიც მასპინძლობს ადგილობრივად ჩემს ჟოლოს პიზე. თუ თქვენ გაქვთ შეკითხვები ან კომენტარები, გთხოვთ დატოვეთ ისინი ქვემოთ.

ვიმედოვნებ, რომ ეს სხვებს ეხმარება.

ამ საიტის განსხვავებული მიდგომისთვის ჰიუგოს გამოყენებით, სტატიკური ვებ გვერდის გენერატორი იხილეთ ჩემი სხვა გაკვეთილი (მალე).

გირჩევთ: