جدول المحتويات:

صفحة ويب Node.js الجزء 2: 7 خطوات
صفحة ويب Node.js الجزء 2: 7 خطوات

فيديو: صفحة ويب Node.js الجزء 2: 7 خطوات

فيديو: صفحة ويب Node.js الجزء 2: 7 خطوات
فيديو: احذر ان تبدأ مسار تعلمك مع HTML and CSS #programming #shorts 2024, شهر نوفمبر
Anonim
صفحة ويب Node.js الجزء 2
صفحة ويب Node.js الجزء 2

مرحبًا بكم في الجزء 2 !!

هذا هو الجزء الثاني من البرنامج التعليمي لتطبيق موقع Node.js الخاص بي. لقد قسمت هذا البرنامج التعليمي إلى جزأين لأنه يفصل بين أولئك الذين يحتاجون فقط إلى مقدمة موجزة وأولئك الذين يريدون درسًا تعليميًا كاملاً على صفحة ويب.

سأذهب من خلال إنشاء موقعي. قد تكون لك مختلفة ، لذا اتبع عملي وتعلم التقنيات المستخدمة. بمجرد اختيار قالب HTML مختلف ، سيختلف التدفق قليلاً. ضعه بمخيلتك.

الخطوة 1: بنية التطبيق

هيكل التطبيق
هيكل التطبيق

لذلك يتبع موقعي المولد السريع ، لكنني استخدمت المقاود بدلاً من اليشم. إذا كنت تحب اليشم اذهب لذلك! Jade هو اختصار HTML بدون كل الأقواس و div. إذا كنت لا تفهم أنك قد ترغب في زيارة youtube ومشاهدة بعض دروس HTML.

أنا أفضل استخدام HTML والمقاود وأنا أكثر ارتياحًا لذلك هذا ما استخدمته. لإنشاء مشروع سريع باستخدام المقاود ، قم بتشغيل الأمر express.

صريح - hbs nameofmyapp

ثم تابع اتباع الخطوة في الجزء 1 لتثبيت جميع الأدوات الوسطى.

يقوم Express بإنشاء بنية تطبيق محددة جدًا وهيكل مفيد للغاية تتبع معظم تطبيقات node.js هذا النموذج مع بعض الاختلاف.

في الصورة المرفقة ، يمكنك رؤية مجلدات وملفات مختلفة ، أدناه أحاول شرح كل هذه.

سلة مهملات

هذا هو المجلد الذي يتم تشغيله أولاً عندما يبدأ node.js خادمك. يبحث في ملف www ويتبع هذا الملف للتنفيذ. يخبر ملف www node.js ببدء تشغيل خادم في المنفذ 3000 (يمكن أن يتغير هذا إلى أي شيء تقريبًا) والقيام ببعض الأشياء الأخرى مثل مستمع الأحداث وما شابه. الشيء الرئيسي المهم هو المنفذ الذي تم إعداد تطبيقك عليه.

node_modules

في هذا المجلد هو ما يسمى الأوسط وير. أود أن أشرح الأدوات الوسيطة كبرنامج إضافي لتسهيل كتابة التعليمات البرمجية. إنها في الأساس مكتبات أخرى ذات وظائف معدة مسبقًا لتستخدمها. بعض الأدوات الوسيطة الإضافية التي استخدمتها لهذا المشروع كانت Nodemailer و Passport و Nodemon و bycrypt وغيرها.

عام

هذا هو المكان الذي ستذهب إليه جميع صورك و CSS وجافا سكريبت لموقعك على الويب. يتم استخدام هذه مباشرة من قبل صفحات الويب.

الطرق

تحدد هذه المسارات لموقعك. مثل الصفحة الرئيسية وصفحة تسجيل الدخول وغيرها.

الآراء

كما ترى ، فإن طرق العرض هي ملفات.hbs أو.handlebars ، فإما أنها ستعمل فقط فهي تتطلب بعض التلاعب في ملف app.js. هذه هي صفحات html للمقود الخاصة بك التي سيتم عرضها على المتصفح. التخطيط هو ملف التخطيط الرئيسي الخاص بك وأحيانًا يكون في مجلد التخطيط الفرعي الخاص به. يستدعي ملف التخطيط الرئيسي ملفات المقاود الأخرى ويعرضها ، وسيكون هذا أكثر منطقية عندما نتعمق في الكود.

app.js

هذا هو ملف التطبيق الرئيسي الخاص بك ، وأحيانًا يسمى هذا الخادم ، ويعتمد فقط على الإعداد. يحتوي هذا الملف على جميع التكوينات الخاصة بالخادم وحتى بعض الوظائف الخاصة. سيكون أيضًا معالج أخطاء.

package.json

تم إنشاء هذا الملف بواسطة express ويخبر npm بجميع البرامج الوسيطة التي تريد استخدامها في مشروعك. بمجرد تشغيل تثبيت npm ، سيتم تثبيت جميع البرامج الوسطى التي تم استدعاؤها في هذا الملف في مجلد node_modules.

الخطوة 2: تخطيط النموذج الخاص بك

يمكنك إنشاء كل HTML الخاص بك من البداية أو يمكنك استخدام قالب. لقد استخدمت نموذجًا لهذا الموقع. المواقع الأخرى التي ساعدت في تطويرها قمت بترميزها من البداية. الخيار لك ، تشرح هذه الخطوة تخطيط القالب.

يستخدم تطبيق الويب الخاص بي نموذج bootstrap الذي يعد رائعًا في إنشاء CSS مذهلة. للعثور على القوالب قم بزيارة هذا الموقع. كما هو مذكور سابقًا في الخطوة السابقة ، توجد جميع ملفات css و js و img المطلوبة ضمن المجلد العام. تجعل هذه الملفات الموقع يبدو أفضل من النص العادي وكيفية استخدام الصور على الموقع.

من أجل جعل نمط قوالب المقاود يعمل مع قالب يتم تقسيم الصفحات إلى جزأين. الأول هو ما يُحكم عليه باسم "التصميم". التخطيط هو الخصائص التي تريد عرضها على كل صفحة ويب داخل موقعك. في حالتي ، هذا هو الرأس ، الذي يحتوي على شريط التنقل ، والتذييل ، والذي يحتوي على أجزاء إضافية للتنقل والعرض.

يوجد ملف التخطيط وملفات المقاود الأخرى في مجلد طرق العرض. سأنتقل إلى تخطيط أكثر بساطة من المولد السريع الذي استخدمته سابقًا لعرض كيفية عمل المفهوم ، ثم يمكنك رؤية الكود الخاص بي ومقارنته.

تم إنشاء ملف layout.handlebars السريع

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

سحر المقاود الحقيقي يكمن في المقاود {{title}} و {{{الجسم}}}. إذاً هذين يعملان بشكل مختلف {{title}} هو متغير يتم تمريره من ملف index.js في المسارات ، بمجرد تمريره إلى القالب يتم عرضه. تأخذ العلامة {{body}}} كل ما يتم استدعاؤه في وظيفة العرض في ملف المسار js. في حالتنا ، يحتوي index.js على هذا السطر:

res.render ('index'، {title: 'Express'، count: userCount}) ؛

هذا يستدعي ملف "الفهرس" لأي محرك تستخدمه ، اليشم ، المقاود ، وما إلى ذلك ، لذلك في حالتنا index.handlebars.

تم إنشاء الفهرس السريع

{{لقب}}

مرحبًا بك في {{title}}

يتم تمرير ملف index.handlebars كمتغير إلى العلامة {{{body}}} ويتم عرضه على صفحة الويب الخاصة بك.

يتيح لك ذلك الحصول على جزء ثابت من موقع الويب الخاص بك وجزء متغير. هذا يجعل الرؤوس والتذييلات لطيفة لأنك لست مضطرًا لإعادة عرض الصفحة بأكملها ، عند تحميل صفحة جديدة ، يتم تغيير بعض المعلومات فقط.

الخطوة 3: نموذج الاتصال

نموذج الاتصال
نموذج الاتصال
نموذج الاتصال
نموذج الاتصال
نموذج الاتصال
نموذج الاتصال

لقد أدرجت نموذج اتصال في صفحة الويب الخاصة بي حتى يتمكن أي شخص من إرسال بريد إلكتروني إلى موقعي عبر البريد الإلكتروني ، مع طرح أسئلة أو تعليقات.

استخدم نموذج الاتصال هذا أداة وسطية npm تسمى Node Mailer.

إعداد Node Mailer

لتثبيت node-mailer ، تحتاج فقط إلى تشغيل الكود أدناه في ملف المستوى الأعلى الخاص بك ، في حالتنا ، myapp.

sudo npm تثبيت nodemailer

بمجرد التثبيت ، ستحتاج إلى إعداد بعض الأشياء في ملف app.js الخاص بك.

الأول هو التبعية فقط ، وهذا يخبر العقدة أننا نخطط لاستخدام هذه البرامج الوسيطة.

var nodemailer = يتطلب ('nodemailer') ؛

الثاني هو الناقل الخاص بنا ، يتم استخدام الناقل للاتصال بخادم البريد الخاص بك ، في حالتي gmail.

// استخدام الناقل للحصول على حساب بريد جوجل

var transporter = nodemailer.createTransport ({service: 'gmail'، المصادقة: {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 '}})

إذا كنت تستخدم nodemailer مع خادم بريد مختلف ، فيرجى البحث هنا للحصول على الوثائق والمساعدة.

ستتغير بعض الأشياء من شخص لآخر: user، clientId، clientSecret. RefreshToken و accessToken.

معرف المستخدم الخاص بك هو البريد الإلكتروني الذي تريد استخدامه ، لقد قمت بإنشاء واحد جديد باسم نفس موقعي.

يجب العثور على 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' ، الوظيفة (مطلوب ، الدقة) {// احصل على معلومات من نموذج الاتصال ، من homepage.hbs var name = req.body.name؛ var email = req.body.email؛ var phone = req.body.phone؛ var message = req.body.message؛ var mailOptions = {// ينشئ المعلومات المستخدمة عند إرسال رسالة من: ' بريد إلكتروني تلقائي ، إلى: '[email protected]' ، الموضوع: 'نموذج الاتصال بموقع الويب:' + الاسم ، النص: 'لقد تلقيت رسالة جديدة من نموذج الاتصال بموقعك على الويب. / n / n' + 'هنا التفاصيل: / n / n الاسم: '+ name +' / n / n البريد الإلكتروني: '+ email +' / n / n الهاتف: '+ phone +' / n / n الرسالة: / n '+ message} transporter.sendMail (mailOptions ، function (err، res) {if (err) {console.log ('Error')؛} else {console.log ('Email Sent')؛}}) res.render ('index')؛ // تقديم الصفحة الرئيسية الجديدة ، انظر في كيفية القيام بذلك برسالة النجاح ، مثل صفحة تسجيل الخروج})

فلاش

يستخدم الفلاش لإظهار الرسائل بعد الانتهاء من الإجراءات. يمكنك رؤية هذا عند إرسال نموذج أو عدم إدخال حقل بشكل صحيح.

قم بتثبيت الفلاش تمامًا مثل البرامج الوسيطة npm الأخرى.

تثبيت sudo npm connect-flash

فار فلاش = يتطلب ("اتصال فلاش") ؛ // لديها وظيفة فلاش لتظهر على رسائل الشاشة

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

تمكين الفلاش الذي يدفع الرسائل ويحدّثها على صفحة الويب. هذه هي الرسائل التي تقول أشياء مثل النجاح ، أو تم إدخال المعلومات بشكل غير صحيح.

// جلوبال فارز

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 ('error')؛ res.locals.user = req.user || null؛ next ()؛})؛

يحتاج البعض إلى متغيرات مرتبطة بالفلاش.

ها أنت ذاهب إلى نموذج اتصال مصنوع.

الخطوة 4: صفحة تسجيل الدخول

صفحة تسجيل الدخول
صفحة تسجيل الدخول

كان هذا مجرد شيء كنت أرغب في رؤيته إذا كان بإمكاني فعله وربما سأستخدمه في المستقبل. أردت فقط شرح الكود كما هو في مستودع git الخاص بي.

لذلك يستخدم هذا الجزء عددًا قليلاً من الأدوات المتوسطة نانومتر في الدقيقة. قم بتثبيت ما يلي باستخدام الأوامر أدناه.

npm تثبيت جواز السفر && npm تثبيت جواز السفر المحلي && npm تثبيت bcryptjs

يتيح لك && تشغيل أوامر متعددة بسطر واحد.

تسجيل الدخول والمستخدمين

ستحتاج إلى إنشاء ملف login.js و user.js ضمن مجلد المسارات. سيتم استخدام هذا للسماح بإنشاء مستخدم ، والذي سيتم تخزينه في قاعدة البيانات الخاصة بنا ، والسماح للمستخدم بتسجيل الدخول عن طريق التحقق من قاعدة البيانات.

user.js

var express = يتطلب ('express') ؛ var router = express. Router () ؛ var جواز السفر = يتطلب ("جواز سفر") ؛ var LocalStrategy = تتطلب ('جواز سفر محلي'). var المستخدم = يتطلب ('../ نماذج / مستخدم') ؛ // 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.body.password؛ var password2 = req.body.password2؛ // Validation req.checkBody ('name'، 'Name is required'). notEmpty ()؛ req.checkBody ('البريد الإلكتروني' ، 'البريد الإلكتروني مطلوب').notEmpty ()؛ req.checkBody ("البريد الإلكتروني" ، "البريد الإلكتروني غير صالح"). isEmail () ؛ req.checkBody ("اسم المستخدم" ، "اسم المستخدم مطلوب"). notEmpty () ؛ req.checkBody (' كلمة المرور '،' كلمة المرور مطلوبة '). notEmpty () ؛ req.checkBody (' password2 '،' كلمات المرور غير متطابقة '). يساوي (req.body.password) ؛ أخطاء var = req.validationErrors () ؛ إذا (أخطاء) {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 (مستخدم)؛}) ؛ req.flash ('Success_msg'، 'أنت مسجل ويمكنك الآن تسجيل الدخول')؛ res.redirect (' /تسجيل الدخول')؛ } })؛

تقسيم هذا الجزء قطعة قطعة

أولاً نقوم بتضمين جميع الأدوات المتوسطة المطلوبة ، ثم نقوم بتضمين ملف النموذج الخاص بنا الموضح أدناه. نسير من علامة التسجيل ونعرض نص مقاود التسجيل لدينا. ثم تأتي الوظيفة المهمة. هذه تسمح لنا بتسجيل مستخدم جديد في قاعدة البيانات الخاصة بنا. تتحقق الوظيفة للتأكد من أن جميع الحقول صالحة ومضمنة في النموذج ، وإذا لم يكن الأمر كذلك ، فسوف تطالب بها. بعد ذلك ، يتحقق من وجود أخطاء ، وإذا لم تحدث أخطاء ، فإنه ينشئ مستخدمًا جديدًا بالمعلومات المقدمة. ثم يقوم بإعادة التوجيه إلى صفحة تسجيل الدخول ، مما يسمح لك بتسجيل الدخول.

login.js

var express = يتطلب ('express') ؛

var router = express. Router () ؛ var جواز = يتطلب ('جواز سفر') ؛ var LocalStrategy = تتطلب ('جواز سفر محلي'). var المستخدم = يتطلب ('../ نماذج / مستخدم') ؛ / * الحصول على قائمة المستخدمين. * / // Homepage router.get ('/'، function (req، res) {res.render ('login')؛})؛ Passport.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 (كلمة المرور ، user.password ، الوظيفة (err ، isMatch) {إذا (يخطئ) يخطئ ؛ إذا (isMatch) {تم الإرجاع (فارغ ، مستخدم) ؛} آخر { تم إرجاعه (فارغ ، خطأ ، {message: 'Invalid password'}) ؛}}) ؛}) ؛})) ؛ Passport.serializeUser (function (user، done) {done (null، user.id)؛})؛ جواز سفر. router.post ('/ login'، passport.authenticate ('local'، {successRedirect: '/'، failureRedirect: '/ login'، failureFlash: true})، function (req، res) {res.redirect ('/ لوحة القيادة')؛ })؛ router.get ('/ logout'، function (req، res) {req.logout ()؛ req.flash ('Success_msg'، 'You are logged')؛ res.redirect ('/ homepage')؛}) ؛

module.exports = جهاز التوجيه ؛

أولاً نقوم بتضمين جميع الأدوات المتوسطة المطلوبة ، ثم نقوم بتضمين ملف النموذج الخاص بنا الموضح أدناه. نسير من علامة تسجيل الدخول ونعرض نص مقاود تسجيل الدخول. ثم نستخدم بعض وظائف جواز السفر لأخذ اسم المستخدم وكلمة المرور المُدخلين والتحقق من وجودهما في قاعدة البيانات الخاصة بنا. سنستخدم أيضًا كلمة مرور مشفرة والتي يمكن أن تجعل تسجيل الدخول بطيئًا بعض الشيء على raspberry pi. سأشرح هذا أكثر بعد ذلك. بعد التحقق من صحة اسم المستخدم وكلمة المرور ، تتم إعادة توجيهك إلى الصفحة الرئيسية التي ستعرض لوحة القيادة أثناء إعدادنا هذا في ملف الفهرس الخاص بنا. نضيف هنا أيضًا القدرة على تسجيل الخروج.

كما ذكرت سابقًا ، سنحتاج أيضًا إلى إنشاء نموذج للتحقق من قاعدة البيانات الخاصة به.

يتم ذلك عن طريق إنشاء مجلد تحت مجلد التطبيق الرئيسي يسمى النماذج. في هذا المجلد ، هناك حاجة أيضًا إلى ملف user.js.

نموذج / user.js

var mongoose = يتطلب ('mongoose') ؛

var bcrypt = يتطلب ('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 ('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 = function (username، callback) {var query = {username: username}؛ User.findOne (استعلام ، رد اتصال) ؛ } module.exports.getUserById = function (id، callback) {User.findById (id، callback)؛ } module. }

يوضح هذا النموذج الشكل الذي ستبدو عليه معلمات المستخدم الخاصة بنا وكذلك كيفية الوصول إليها. لقد ذكرت من قبل أننا سنعمل على تشفير كلمات المرور الخاصة بنا. هذا حتى لا يتم تخزين كلمة مرور أي شخص في قاعدة البيانات في حالة حدوث خرق. يتم تجزئة كلمات المرور باستخدام bcrypt للأدوات الوسطى.

الخطوة 5: عداد المرور

عداد المرور
عداد المرور

كنت أرغب في معرفة عدد المستخدمين الفريدين الذين زاروا صفحة الويب الخاصة بي وإحصاء عدد "الزيارات". هناك العديد من الطرق للقيام بذلك ، وسأشرح كيف قمت بذلك.

يستخدم هذا مجموعة mongodb لتتبع عدد المستخدمين الذين زاروا صفحتي وعدد المرات التي زارها كل زائر فريد.

نظرًا لأننا تحدثنا بالفعل عن إعداد mongoDB ، فلن أعود إليه مرة أخرى.

قد تحتاج إلى إضافة مجموعتين إلى قاعدة البيانات الخاصة بك من أجل التحويل البرمجي. للقيام بذلك ، يمكنك إما تثبيت RoboMongo إذا كنت تستخدم واجهة مستخدم ، ولكن إذا كنت تستخدم raspberry pi مقطوعة الرأس مثل I am ، فسوف تستمتع بالأوامر التالية.

صدفة مونغو

لتحرير db أو الحصول على معلومات أو إنشاء مجموعة ، ستحتاج إلى mongo shell على وحدة مقطوعة الرأس.

يركض

المونغو

هذا سيفتح القشرة.

أضف مجموعة

في حالتي ، تسمى قاعدة البيانات loginapp ، يمكنك تسميتها كما تريد.

استخدام nameofyourdb

نحتاج إلى مجموعة تحتوي على جميع عناوين IP الخاصة بنا للمستخدمين الذين يزورون موقعنا.

db.creatCollection ("ip")

بعد ذلك نقوم بإنشاء مجموعة لحساب الزيارات الفريدة لموقعنا. تتم تهيئة هذا بمعرف ويبدأ العد من 0.

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

تتبع عناوين IP

للقيام بذلك ، سنقوم بسحب المستخدمين Ip عند زيارتهم لصفحتنا الرئيسية ، وزيادة عددنا ، وتخزينهم لمقارنتهم لاحقًا.

نحتاج إلى إنشاء بعض النماذج لتخزين مخططات النمس ، وإضافة بعض الأكواد إلى ملف homepage.js.

نقوم بإنشاء count.js و ip.js وتخزينهما في مجلد النماذج الخاص بنا.

ملف ip.js هو مجرد مخطط لعنوان IP الخاص بنا

var mongoose = يتطلب ('mongoose') ؛ // معالج الحزمة لـ mongo

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

سيتم استدعاء count.js بواسطة صفحتنا الرئيسية لبدء تتبع النتائج. يتم ذلك على النحو التالي.

//Homepagerouter.get('/ '، function (req، 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 (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})؛ }) ؛ }) ؛

يحدث هذا في كل مرة ينتقل فيها شخص ما إلى صفحتنا الرئيسية ، في هذه الحالة theinternet.onthewifi.com/homepage.

يتحقق من عنوان IP الخاص بالمستخدم ، ip4 أو ip6 ، ثم يخزن تلك القيمة حيث يرسلها إلى count.get.collection وهي وظيفة مخزنة في ملف count.js الخاص بنا.

بعد التحقق من تفرد المستخدم ، يقوم بعد ذلك بإرجاع قيمة العد ونشرها إلى الصفحة الرئيسية كمتغير للمقود.

ملف count.js هو كما يلي.

//count.jsvar mongo = تتطلب ('mongodb') ؛ // يدعم قاعدة البيانات var mongoose = يتطلب ('mongoose') ؛ // معالج الحزمة لـ mongo mongoose.connect ('mongodb: // localhost / loginapp') ؛ var db = mongoose.connection ؛ var Ip = يتطلب ('../ 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 عنوان IP جديد إذا لم يكن في قاعدة البيانات ، وتحديث العداد {var new_ip = new Ip ({ip: Public_ip، count: 1})؛ db.collection ('ip'). save (new_ip)؛ // add new ip to قاعدة البيانات count.update (// update hit counter {id: "hit counter"}، {$ inc: {count: 1}})} else // update specific ip counter ، لمعرفة من يزور أكثر {ipc.update ({ip: Public_ip}، {$ inc: {count: 1}})}}) ؛ }

يؤدي هذا إلى إنشاء مخطط العد ، ووظيفة.getCount الخاصة بنا. تتحقق وظيفة.getCount في قاعدة البيانات من عنوان IP الخاص بالمستخدمين وإذا عثرت عليها ، تقوم الوظيفة بزيادة عدد هذا المستخدم ، وليس عداد الدخول. ومع ذلك ، إذا لم يتم العثور على IP للمستخدمين ، فسيتم إنشاء كائن مجموعة جديد باستخدام IP للمستخدمين وزيادة عداد الدخول بمقدار 1.

ثم يتم إرجاع هذا وعرضه على صفحة الويب.

يوجد لديك عداد الدخول لتتبع الملكية الفكرية.

الخطوة 6: المدونة

مدونة او مذكرة
مدونة او مذكرة

أحاول حاليًا تطوير مدونة تتمحور حول اهتماماتي حول البرامج والمنازل الذكية والبولارويد. لذلك قمت بإنشاء قسم مدونة. تستخدم المدونة صفحات html ثابتة وإطار عمل المقاود. بعد البحث عن تقنيات أفضل لتسهيل التدوين ، قمت منذ ذلك الحين بإعادة تصميم موقع الويب الخاص بي باستخدام hugo. هوغو هو منشئ html ثابت. أتحدث أكثر عن هذا في البرنامج التعليمي المذكور أدناه.

الخطوة 7: انتهى

هناك تذهب إلى برنامج تعليمي متعمق على موقع الويب الخاص بي node.js المستضاف محليًا على raspberry pi. إذا كانت لديك أسئلة أو تعليقات ، فالرجاء تركها أدناه.

آمل أن يساعد هذا الآخرين هناك.

للحصول على نهج مختلف لهذا الموقع باستخدام hugo ، منشئ صفحات الويب الثابتة ، راجع البرنامج التعليمي الآخر (قريبًا).

موصى به: