فهرست مطالب:

صفحه وب Node.js قسمت 2: 7 مرحله
صفحه وب Node.js قسمت 2: 7 مرحله

تصویری: صفحه وب Node.js قسمت 2: 7 مرحله

تصویری: صفحه وب Node.js قسمت 2: 7 مرحله
تصویری: آموزش کامل Node.js [قسمت 2] : Modules و ساخت سرور 2024, جولای
Anonim
صفحه وب Node.js قسمت 2
صفحه وب Node.js قسمت 2

به قسمت 2 خوش آمدید !!

این قسمت 2 آموزش برنامه کاربردی وب سایت Node.js من است. من این آموزش را به دو قسمت تقسیم کردم زیرا آنهایی که فقط نیاز به معرفی مختصر دارند و کسانی که می خواهند یک آموزش کامل در یک صفحه وب داشته باشند را از هم جدا می کند.

من قصد دارم مراحل ایجاد سایت خود را بررسی کنم. مال شما ممکن است متفاوت باشد ، بنابراین روش من را دنبال کنید و تکنیک های مورد استفاده را بیاموزید. هنگامی که یک قالب HTML متفاوت انتخاب می کنید ، جریان فقط کمی متفاوت خواهد بود. این را در نظر داشته باشید.

مرحله 1: ساختار برنامه

ساختار برنامه
ساختار برنامه

بنابراین سایت من از ژنراتور اکسپرس پیروی می کند ، با این حال من بیشتر از دسته فرمان استفاده کردم تا یشم. اگر یشم را دوست دارید بروید! Jade یک HTML کوتاه دستی است بدون همه براکت ها و div ها. اگر نمی دانید که ممکن است بخواهید از یوتیوب دیدن کرده و برخی از آموزش های HTML را تماشا کنید.

من ترجیح می دهم و با HTML و فرمان راحت تر هستم ، بنابراین من از آن استفاده می کنم. برای ایجاد یک پروژه اکسپرس با فرمان ، دستور express را اجرا کنید.

express --hbs nameofmyapp

سپس مراحل نصب قسمت اول را برای نصب تمام وسایل ادامه دهید.

Express یک ساختار برنامه بسیار خاص ایجاد می کند و بسیار کاربردی ترین برنامه های node.js این فرم را با کمی تغییر دنبال می کنند.

در عکس پیوست شده می توانید پوشه ها و فایل های مختلف را مشاهده کنید ، در زیر سعی می کنم همه این موارد را توضیح دهم.

صندوقچه

این پوشه ای است که ابتدا هنگام راه اندازی node.js سرور شما اجرا می شود. به فایل www نگاه می کند و برای اجرا این فایل را دنبال می کند. فایل www به node.js می گوید که یک سرور را در پورت 3000 راه اندازی کند (این مورد می تواند تقریباً به هر چیزی تغییر کند) و برخی کارهای دیگر مانند شنونده رویداد و موارد دیگر را انجام دهد. مهمترین نکته پورت است که برنامه شما در آن تنظیم شده است.

node_modules

در این پوشه چیزی وجود دارد که به آن middle-ware گفته می شود. وسایل داخلی من دوست دارم به عنوان یک نرم افزار اضافی توضیح دهم تا کد نویسی برای شما آسان شود. Theya اساساً کتابخانه های دیگر با عملکردهایی است که از قبل برای استفاده شما آماده شده است. برخی وسایل اضافی دیگر که من برای این پروژه استفاده کردم Nodemailer ، Passport ، Nodemon ، bycrypt و دیگران بود.

عمومی

اینجاست که همه تصاویر ، CSS و جاوا اسکریپت شما برای وب سایت شما پیش می رود. اینها مستقیماً توسط صفحات وب مورد استفاده قرار می گیرند.

مسیرها

اینها مسیرهایی برای سایت شما تعریف می کند. مانند صفحه اصلی ، صفحه ورود و سایر موارد.

دیدگاه ها

همانطور که می بینید نماها فایل های.hbs یا.handlebars هستند ، یا کار می کند ، فقط نیاز به دستکاری فایل app.js است. اینها صفحات html فرمان شما هستند که در مرورگر نمایش داده می شوند. Layout فایل طرح بندی اصلی شما است و گاهی در زیر پوشه طرح بندی خاص خود قرار دارد. فایل طرح بندی اصلی با سایر دسته های فرمان شما تماس می گیرد و آنها را نمایش می دهد ، وقتی در کد غوطه ور شویم ، این امر منطقی تر خواهد بود.

app.js

این فایل برنامه اصلی شما است ، گاهی اوقات به آن سرور می گویند ، فقط به راه اندازی بستگی دارد. این فایل دارای تمام پیکربندی سرور و حتی برخی عملکردهای خاص است. همچنین یک کنترل کننده خطا خواهد بود.

package.json

این فایل توسط express ایجاد می شود و به npm کلیه وسایل میانی که می خواهید در پروژه خود استفاده کنید می گوید. هنگامی که npm install را اجرا می کنید ، تمام وسایل وسط فراخوانی شده در این فایل در پوشه node_modules نصب می شوند.

مرحله 2: قالب خود را طرح بندی کنید

می توانید تمام HTML خود را از ابتدا ایجاد کنید یا می توانید از الگو استفاده کنید. من از قالب برای این سایت استفاده کرده ام. سایر سایتهایی که به توسعه آنها کمک کرده ام از ابتدا کدگذاری کرده ام. انتخاب با شماست ، این مرحله طرح قالب را توضیح می دهد.

برنامه وب من از یک قالب bootstrap استفاده می کند که در ساخت CSS شگفت انگیز عالی است. برای یافتن الگوها به این سایت مراجعه کنید. همانطور که قبلاً در مرحله قبل گفته شد ، همه فایلهای مورد نیاز css ، js و img در پوشه عمومی قرار دارند. این فایل ها باعث می شوند سایت از متن ساده و نحوه استفاده از تصاویر در سایت بهتر به نظر برسد.

برای اینکه سبک قالب فرمان با الگو کار کند ، صفحات به دو قسمت تقسیم می شوند. اولین موردی است که از آن به عنوان "طرح بندی" یاد می شود. طرح بندی ویژگی هایی است که می خواهید در هر صفحه وب سایت شما نمایش داده شود. در مورد من این سرصفحه است که دارای نوار ناوبری است و پاورقی است که قطعات ناوبری و نمایشگر بیشتری را در خود جای داده است.

فایل طرح بندی و سایر فایلهای فرمان در پوشه views قرار دارند. من یک طرح ساده تر از ژنراتور اکسپرس که قبلاً برای نشان دادن نحوه عملکرد مفهوم استفاده کرده اید را مرور می کنم ، سپس می توانید کد من را ببینید و آنها را مقایسه کنید.

اکسپرس فایل layout.handlebars ایجاد شده است

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

جادوی واقعی فرمان در فرمان {{عنوان}} و {{{بدن}}} است. بنابراین این دو متفاوت عمل می کنند {{title}} متغیری است که از فایل index.js در مسیرها منتقل می شود ، پس از انتقال به قالب نمایش داده می شود. برچسب {{{body}}} چیزی را که در تابع render در فایل route js شما نامیده می شود ، می گیرد. در مورد ما index.js این خط را دارد:

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

این فایل "index" از آنچه که استفاده می کنید را می نامد ، یشم ، فرمان ، و غیره ، بنابراین در مورد ما index.handlebars.

index.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 ({service: 'gmail'، author: {type: 'OAuth2'، user: '[email protected]'، clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontontonto، مشتری: 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 () + ']'؛} 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 phone = 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 Send')؛}}) res.render ('index')؛ // render صفحه اصلی جدید ، نحوه انجام این کار با پیام موفقیت آمیز را بررسی کنید ، مانند صفحه خروج})

فلاش

از فلش برای نشان دادن پیامها پس از انجام اقدامات استفاده می شود. هنگامی که یک فرم ارسال می کنید ، یا فیلدی را به درستی وارد نمی کنید ، می توانید این را مشاهده کنید.

فلش را دقیقاً مانند سایر وسایل npm نصب کنید.

sudo npm اتصال فلش را نصب کنید

var flash = require ('connect-flash')؛ // دارای قابلیت فلش برای نمایش روی پیام های صفحه بود

// اتصال Flashapp.use (فلش ()) ؛

فلش را فعال کنید که پیامها را در صفحه وب فشار می دهد و به روز می کند. اینها پیامهایی هستند که مواردی مانند موفقیت یا اطلاعات اشتباه وارد شده است.

// Global Vars

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 در زیر پوشه route خود ایجاد کنید. این مورد برای اجازه ایجاد یک کاربر ، که در پایگاه داده ما ذخیره می شود ، استفاده می شود و با بررسی پایگاه داده به کاربر اجازه ورود به سیستم را می دهد.

user.js

var express = require ('express')؛ var router = express. Router ()؛ var گذرنامه = نیاز ('گذرنامه') ؛ var LocalStrategy = نیاز ('گذرنامه محلی'). var کاربر = نیاز ('../ models/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.body.password؛ var password2 = req.body.password2؛ // اعتبار سنجی req.checkBody ("name"، "name is required"). notEmpty ()؛ req.checkBody ("email"، "Email is required")).notEmpty ()؛ req.checkBody ("ایمیل" ، "ایمیل معتبر نیست"). isEmail () ؛ req.checkBody ("نام کاربری" ، "نام کاربری مورد نیاز است"). notEmpty () ؛ req.checkBody (" رمز عبور '،' گذرواژه لازم است '). notEmpty () ؛ req.checkBody (' password2 '،' کلمات عبور مطابقت ندارند '). برابر است (req.body.password) ؛ خطاهای var = req.validationErrors () ؛ اگر (خطاها) {res.render ('ثبت نام' ، {خطاها: خطاها})؛} else {var newUser = کاربر جدید ({نام: نام ، ایمیل: ایمیل ، نام کاربری: نام کاربری ، رمز عبور: رمز عبور}) ؛ User.createUser (newUser، function (err، user) {if (err) throw err؛ console.log (user)؛})؛ req.flash ('success_msg'، 'شما ثبت نام کرده اید و اکنون می توانید وارد شوید')؛ res.redirect (' /وارد شدن')؛ } })؛

این را تکه تکه بشکنید

ابتدا همه وسایل مورد نیاز را وارد می کنیم ، سپس فایل مدل خود را که در زیر توضیح داده شده است ، قرار می دهیم. ما از برچسب ثبت مسیر می کنیم و متن فرمان دستی خود را نمایش می دهیم. سپس عملکرد مهم فرا می رسد. این به ما امکان می دهد تا کاربر جدیدی را در پایگاه داده خود ثبت کنیم. تابع بررسی می کند تا مطمئن شود همه فیلدها معتبر هستند و در فرم گنجانده شده اند ، در غیر این صورت آنها را درخواست می کند. سپس خطاها را بررسی می کند و در صورت عدم وجود خطا ، کاربر جدیدی را با اطلاعات داده شده ایجاد می کند. سپس دوباره به صفحه ورود وارد می شود و به شما امکان می دهد وارد شوید.

login.js

var express = require ('express')؛

var router = express. Router () ؛ گذرنامه var = نیاز ('گذرنامه') ؛ var LocalStrategy = نیاز ('گذرنامه محلی'). var کاربر = نیاز ('../ models/user')؛ /* دریافت لیست کاربران. */// صفحه اصلی router.get ('/' ، تابع (req ، res) {res.render ('ورود') ؛}) ؛ pasport.use (LocalStrategy جدید (عملکرد (نام کاربری ، رمز عبور ، انجام شده)) {User.getUserByUsername (نام کاربری ، عملکرد (خطا ، کاربر) {اگر (خطا) پرتاب خطا ؛ اگر (! کاربر) {بازگشت انجام شده (تهی ، نادرست ، { پیام: 'کاربر ناشناس'})؛} User.comparePassword (گذرواژه ، user.password ، تابع (err، isMatch) {if (err) throw err؛ if (isMatch) {return done (null، user)؛} else { بازگشت انجام شده (تهی ، نادرست ، {پیام: 'رمز عبور نامعتبر'})؛}})؛})؛}))؛ pasport.serializeUser (عملکرد (کاربر ، انجام شده) {انجام شده (null ، user.id) ؛}) ؛ pasport.deserializeUser (تابع (شناسه ، انجام شده) {User.getUserById (شناسه ، عملکرد (خطا ، کاربر) {انجام شده (خطا ، کاربر) ؛}) ؛}) ؛ router.post ('/login'، pasport.authenticate ('local'، {successRedirect: '/'، failureRedirect: '/login'، failureFlash: true})، عملکرد (req، res) {res.redirect ('/ داشبورد')؛ })؛ router.get ('/logout'، function (req، res) {req.logout ()؛ req.flash ('success_msg'، 'You logged out')؛ res.redirect ('/homepage')؛}) ؛

module.exports = روتر ؛

ابتدا همه وسایل مورد نیاز را وارد می کنیم ، سپس فایل مدل خود را که در زیر توضیح داده شده است ، قرار می دهیم. ما از برچسب ورود به سیستم حرکت می کنیم و متن فرمان فرمان ورود خود را نمایش می دهیم. سپس از برخی از عملکردهای گذرنامه برای گرفتن نام کاربری و رمز عبور وارد شده و بررسی آنها در پایگاه داده خود استفاده می کنیم. ما همچنین از رمز عبور رمزگذاری شده استفاده می کنیم که می تواند ورود به سیستم را در رزبری پای کمی کند کند. این را در ادامه بیشتر توضیح می دهم. پس از تأیید نام کاربری و رمز عبور ، به صفحه اصلی هدایت می شوید که همانطور که این مورد را در پرونده فهرست خود تنظیم کرده ایم ، داشبورد را نشان می دهد. همچنین در اینجا قابلیت خروج از سیستم را اضافه می کنیم.

همانطور که قبلاً اشاره کردم ، ما همچنین باید مدلی برای بررسی پایگاه داده ایجاد کنیم.

این کار با ایجاد یک پوشه در زیر پوشه اصلی برنامه شما به نام model انجام می شود. در این پوشه یک فایل user.js نیز مورد نیاز است.

model/user.js

var mongoose = نیاز ('mangoose')؛

var bcrypt = نیاز ('bcryptjs')؛ // User Schema var UserSchema = mongoose. Schema ({نام کاربری: {نوع: رشته ، فهرست: درست} ، رمز عبور: {type: String} ، ایمیل: {type: String} ، نام: {type: String}}) ؛ var User = module.exports = mongoose.model ('User'، UserSchema)؛

module.exports.createUser = تابع (newUser ، callback) {

bcrypt.genSalt (10 ، تابع (خطا ، نمک) {bcrypt.hash (newUser.password ، نمک ، عملکرد (خطا ، هش) {newUser.password = هش ؛ newUser.save (تماس تلفنی) ؛})؛})} ؛ } module.exports.getUserByUsername = تابع (نام کاربری ، تماس تلفنی) {var query = {نام کاربری: نام کاربری}؛ User.findOne (پرس و جو ، پاسخ به تماس) ؛ } module.exports.getUserById = تابع (شناسه ، پاسخ به تماس) {User.findById (شناسه ، تماس تلفنی) ؛ } module.exports.comparePassword = تابع (candidPassword ، هش ، تماس تلفنی) {bcrypt.compare (candidPassword ، هش ، تابع (err، isMatch) {if (err) throw err؛ callback (null، isMatch)؛})؛ }

این مدل پارامترهای کاربر ما و نحوه دسترسی ما به آنها را نشان می دهد. قبلاً اشاره کردم که ما رمزهای عبور خود را رمزگذاری می کنیم. این به این دلیل است که در صورت نقض ، هیچ رمز عبور در پایگاه داده ذخیره نمی شود. گذرواژه ها با استفاده از bcrypt وسایل متوسط هش می شوند.

مرحله 5: شمارنده ترافیک

شمارنده ترافیک
شمارنده ترافیک

می خواستم ببینم چند کاربر منحصر به فرد از صفحه وب من دیدن کرده و تعداد "بازدیدها" را می شمارند. روش های زیادی برای انجام این کار وجود دارد ، من توضیح خواهم داد که چگونه این کار را کردم.

این از یک مجموعه mongodb برای ردیابی تعداد کاربرانی که از صفحه من بازدید کرده اند و هر بازدید کننده منحصر به فرد چند بار بازدید کرده است ، استفاده می کند.

از آنجا که ما قبلاً در مورد راه اندازی mongoDB صحبت کرده ایم ، دیگر از آن استفاده نمی کنم.

به منظور گردآوری ، ممکن است لازم باشد دو مجموعه را به پایگاه داده خود اضافه کنید. برای انجام این کار می توانید RoboMongo را در صورت استفاده از رابط کاربری نصب کنید ، اما اگر از پی تمشک بی سر مانند من استفاده می کنید ، دستورات زیر را سرگرم خواهید کرد.

پوسته مونگو

برای ویرایش db ، کسب اطلاعات یا ایجاد مجموعه ، به پوسته mongo در یک واحد بدون سر نیاز دارید.

اجرا کن

مانگو

با این کار پوسته باز می شود.

افزودن مجموعه

در مورد من ، پایگاه داده loginapp نامیده می شود ، شما می توانید نام آن را هرطور که می خواهید بگذارید.

از nameofyourdb استفاده کنید

ما به مجموعه ای نیاز داریم که تمام آدرس IP کاربران را که از سایت ما بازدید می کنند ، در خود نگه دارد.

db.creatCollection ("ip")

در مرحله بعد ما مجموعه ای را برای شمارش بازدیدهای منحصر به فرد سایت خود ایجاد می کنیم. این با یک شناسه و شمارش از 0 شروع می شود.

db.createCollection ("تعداد" ، {id: "ضربه شمارنده" ، تعداد: 0})

پیگیری آدرس های IP

برای انجام این کار ، هنگامی که کاربران از صفحه اصلی ما دیدن می کنند ، IP آنها را بکشیم ، تعداد ما را افزایش دهیم و آنها را ذخیره کنیم تا بعداً آنها را مقایسه کنیم.

ما باید مدلهایی برای ذخیره طرحهای مانگوس خود ایجاد کنیم و مقداری کد به فایل homepage.js خود اضافه کنیم.

count.js و ip.js ایجاد می کنیم و آنها را در پوشه مدل های خود ذخیره می کنیم.

فایل ip.js فقط یک طرحواره برای آدرس IP ما است

var mongoose = نیاز ('mangoose')؛ // دسته گیر برای مانگو

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

برای شروع ردیابی ضربه ، count.js توسط صفحه اصلی ما فراخوانی می شود. این کار به شرح زیر انجام می شود.

//Homepagerouter.get('/ '، تابع (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 (مجموعه ، ipc ، Public_ip ، تابع (تعداد) {

})؛ count = db.collection ('count'). findOne ({id: "counter 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 = require ('mangoose') را پشتیبانی می کند؛ // کنترل کننده بسته برای mongoose.connect ('mongodb: // localhost/loginapp') ؛ var db = mongoose.connection؛ var Ip = require ('../ 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 = تابع (شمارش ، ipc ، Public_ip ، callback) {// شمارش آزمایشی است ، عملکرد callback ispc.findOne ({ip: Public_ip} ، عملکرد (err، iptest) {if (! iptest) // افزودن یک ip جدید اگر در پایگاه داده نیست ، و counter counter {var new_ip = new Ip ({ip: Public_ip، count: 1})؛ db.collection ('ip'). ذخیره (new_ip)؛ // افزودن IP جدید به database 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 دارید.

مرحله ششم: وبلاگ

وبلاگ
وبلاگ

من در حال حاضر سعی دارم یک وبلاگ متمرکز بر علایق خود در مورد نرم افزار ، خانه های هوشمند و Polaroids ایجاد کنم. بنابراین من یک بخش وبلاگ ایجاد کردم. این وبلاگ از صفحات HTML ثابت و چارچوب فرمان استفاده می کند. پس از بررسی فناوری های بهتر برای سهولت وبلاگ نویسی ، از آن زمان وب سایت خود را با استفاده از هوگو طراحی مجدد کردم. هوگو یک مولد HTML ثابت است. من در این مورد در آموزش زیر بیشتر صحبت می کنم.

مرحله 7: تمام شد

در آنجا می توانید یک آموزش عمیق در وب سایت node.js من که به صورت محلی در Pi تمشک من میزبانی شده است ، مشاهده کنید. اگر س questionsال یا نظری دارید ، لطفاً آنها را در زیر بگذارید.

امیدوارم این به دیگران در آنجا کمک کند.

برای رویکرد متفاوت به این سایت با استفاده از هوگو ، یک تولید کننده صفحات وب ایستا ، آموزش دیگر من را ببینید (به زودی).

توصیه شده: