Node.js वेबपेज भाग 2: 7 चरण

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:21

भाग 2 में आपका स्वागत है !!

यह मेरे Node.js वेबसाइट एप्लिकेशन ट्यूटोरियल का भाग 2 है। मैंने इस ट्यूटोरियल को दो भागों में विभाजित किया है क्योंकि यह उन लोगों को अलग करता है जिन्हें केवल एक संक्षिप्त परिचय की आवश्यकता है और जो एक वेबपेज पर एक पूर्ण ट्यूटोरियल चाहते हैं।

मैं अपनी साइट निर्माण के माध्यम से जा रहा हूँ। आपका अलग हो सकता है, इसलिए मेरा अनुसरण करें और उपयोग की जाने वाली तकनीकों को सीखें। एक बार जब आप एक अलग HTML टेम्पलेट चुनते हैं तो प्रवाह थोड़ा अलग होगा। इसे ध्यान में रखो।

चरण 1: ऐप संरचना

तो मेरी साइट एक्सप्रेस जनरेटर का अनुसरण करती है, हालांकि मैंने जेड के बजाय हैंडलबार का इस्तेमाल किया। अगर आपको जेड पसंद है तो इसके लिए जाएं! जेड सभी कोष्ठकों और डिव के बिना शॉर्ट हैंड एचटीएमएल है। यदि आप यह नहीं समझते हैं कि आप youtube पर जाना चाहते हैं और कुछ HTML ट्यूटोरियल देखना चाहते हैं।

मैं एचटीएमएल और हैंडलबार्स को पसंद करता हूं और अधिक सहज हूं, इसलिए मैंने यही इस्तेमाल किया। हैंडलबार के साथ एक एक्सप्रेस प्रोजेक्ट बनाने के लिए एक्सप्रेस कमांड चलाएँ।

एक्सप्रेस --hbs nameofmyapp

फिर सभी मध्य-वेयर को स्थापित करने के लिए भाग 1 में दिए गए चरण का पालन करना जारी रखें।

एक्सप्रेस एक बहुत ही विशिष्ट ऐप संरचना बनाता है और एक बहुत ही उपयोगी एक सबसे अधिक नोड.जेएस एप्लिकेशन कुछ भिन्नता के साथ इस फॉर्म का पालन करते हैं।

संलग्न फोटो में आप अलग-अलग फोल्डर और फाइल देख सकते हैं, नीचे मैं इन सभी को समझाने की कोशिश करता हूं।

बिन

यह वह फ़ोल्डर है जो सबसे पहले तब चलाया जाता है जब node.js आपका सर्वर शुरू करता है। यह www फ़ाइल को देखता है और निष्पादन के लिए इस फ़ाइल का अनुसरण करता है। www फ़ाइल node.js को पोर्ट 3000 पर एक सर्वर शुरू करने के लिए कहती है (यह लगभग किसी भी चीज़ में बदल सकती है) और कुछ अन्य चीजें जैसे ईवेंट श्रोता और इस तरह से करें। मुख्य महत्वपूर्ण बात वह पोर्ट है जिस पर आपका ऐप सेट है।

नोड_मॉड्यूल

इस फोल्डर में मिडिल-वेयर कहलाता है। मिडल-वेयर मैं आपके लिए कोड को आसान बनाने के लिए अतिरिक्त सॉफ़्टवेयर के रूप में समझाना पसंद करता हूं। वे मूल रूप से आपके उपयोग के लिए पूर्व-निर्मित कार्यों के साथ अन्य पुस्तकालय हैं। इस परियोजना के लिए मैंने जिन कुछ अतिरिक्त मिडल-वेयर का उपयोग किया, वे थे Nodemailer, Passport, Nodemon, bycrypt, और अन्य।

सह लोक

यह वह जगह है जहां आपकी वेबसाइट के लिए आपकी सभी छवियां, सीएसएस और जावास्क्रिप्ट जाएंगे। ये सीधे वेबपेजों द्वारा उपयोग किए जाते हैं।

मार्गों

ये आपकी साइट के लिए मार्ग निर्धारित करते हैं। जैसे होमपेज, लॉगिन पेज और अन्य।

विचारों

जैसा कि आप देख सकते हैं कि विचार.hbs फ़ाइलें या.handlebars हैं, या तो काम करेंगे, यह केवल app.js फ़ाइल में कुछ हेरफेर करता है। ये आपके हैंडलबार html पृष्ठ हैं जो ब्राउज़र पर प्रदर्शित होंगे। लेआउट आपकी मुख्य लेआउट फ़ाइल है और कभी-कभी अपने स्वयं के लेआउट उप फ़ोल्डर में होती है। मुख्य लेआउट फ़ाइल आपकी अन्य हैंडलबार फ़ाइलों को कॉल करती है और उन्हें प्रदर्शित करती है, जब हम कोड में गोता लगाते हैं तो यह अधिक समझ में आता है।

app.js

यह आपकी मुख्य ऐप फ़ाइल है, कभी-कभी इसे सर्वर कहा जाता है, बस सेट अप पर निर्भर करता है। इस फ़ाइल में सर्वर के लिए सभी कॉन्फ़िगरेशन और यहां तक कि कुछ विशेष कार्य भी हैं। यह एक त्रुटि हैंडलर भी होगा।

पैकेज.जेसन

यह फ़ाइल एक्सप्रेस द्वारा बनाई गई है और npm को उन सभी मिडलवेयर को बताती है जिन्हें आप अपने प्रोजेक्ट में उपयोग करना चाहते हैं। एक बार जब आप npm इंस्टाल चलाते हैं, तो इस फाइल में बताए गए सभी मिडल-वेयर, नोड_मॉड्यूल्स फोल्डर में इंस्टॉल हो जाएंगे।

चरण 2: अपना टेम्पलेट लेआउट करें

आप अपने सभी HTML को खरोंच से बना सकते हैं या आप एक टेम्पलेट का उपयोग कर सकते हैं। मैंने इस साइट के लिए एक टेम्पलेट का उपयोग किया है। अन्य साइटें जिन्हें मैंने विकसित करने में मदद की है, मैंने स्क्रैच से कोड किया है। चुनाव आपका है, यह चरण टेम्पलेट लेआउट की व्याख्या करता है।

मेरा वेब एप्लिकेशन बूटस्ट्रैप टेम्पलेट का उपयोग करता है जो अद्भुत सीएसएस बनाने में बहुत अच्छा है। टेम्प्लेट खोजने के लिए इस साइट पर जाएँ। जैसा कि पिछले चरण में पहले कहा गया था, सभी आवश्यक सीएसएस, जेएस और आईएमजी फाइलें सार्वजनिक फ़ोल्डर के अंतर्गत हैं। ये फ़ाइलें साइट को सादे पाठ से बेहतर बनाती हैं और साइट पर छवियों का उपयोग कैसे किया जाता है।

हैंडलबार को टेम्पलेट शैली के साथ काम करने के लिए टेम्पलेट के साथ पृष्ठों को दो टुकड़ों में विभाजित किया जाता है। पहला वह है जिसे "लेआउट" कहा जाता है। लेआउट वह गुण है जिसे आप अपनी साइट के प्रत्येक वेब पेज पर प्रदर्शित करना चाहते हैं। मेरे मामले में यह हेडर है, जिसमें नेविगेशन बार है, और पाद लेख है, जिसमें अतिरिक्त नेविगेशन और डिस्प्ले पीस हैं।

लेआउट फ़ाइल और अन्य हैंडलबार फ़ाइलें दृश्य फ़ोल्डर में हैं। अवधारणा कैसे काम करती है, यह प्रदर्शित करने के लिए मैं पहले इस्तेमाल किए गए एक्सप्रेस जनरेटर से अधिक सरल लेआउट पर जाऊंगा, फिर आप मेरा कोड देख सकते हैं और उनकी तुलना कर सकते हैं।

एक्सप्रेस जनरेटेड लेआउट.हैंडलबार्स फ़ाइल

{{शीर्षक}} {{{बॉडी}}}

असली हैंडलबार का जादू हैंडलबार {{शीर्षक}} और {{{body}}} में है। तो ये दोनों अलग-अलग कार्य करते हैं {{title}} एक वेरिएबल है जो index.js फ़ाइल से रूट्स में पास किया जाता है, एक बार टेम्प्लेट को पास करने के बाद इसे प्रदर्शित किया जाता है। {{{body}}} टैग आपके रूट जेएस फ़ाइल में रेंडर फ़ंक्शन में जो भी कहा जाता है उसे लेता है। हमारे मामले में index.js में यह लाइन है:

res.render ('इंडेक्स', {शीर्षक: 'एक्सप्रेस', गिनती: यूजरकाउंट});

यह आपके द्वारा उपयोग किए जाने वाले इंजन, जेड, हैंडलबार आदि की 'इंडेक्स' फ़ाइल को कॉल करता है, इसलिए हमारे मामले में index.handlebars।

एक्सप्रेस जनरेटेड इंडेक्स.हैंडलबार्स

{{शीर्षक}}

{{शीर्षक}} में आपका स्वागत है

index.handlebars फ़ाइल को वेरिएबल की तरह {{{body}}} टैग में पास किया जाता है और आपके वेबपेज पर प्रदर्शित किया जाता है।

यह आपको अपनी वेबसाइट का एक स्थिर भाग और एक परिवर्तनशील भाग रखने की अनुमति देता है। यह शीर्षलेख और पादलेख को अच्छा बनाता है क्योंकि आपको पूरे पृष्ठ को फिर से प्रस्तुत करने की आवश्यकता नहीं होती है, एक नया पृष्ठ लोड करते समय, केवल कुछ जानकारी बदल जाती है।

चरण 3: संपर्क फ़ॉर्म

मैंने अपने वेब पेज में एक संपर्क फ़ॉर्म शामिल किया है ताकि कोई भी मेरी साइट ईमेल को प्रश्नों या टिप्पणियों के साथ ईमेल कर सके।

इस संपर्क फ़ॉर्म में एक npm मिडिल-वेयर का उपयोग किया गया है जिसे नोड मेलर कहा जाता है।

नोड मेलर की स्थापना

नोड-मेलर स्थापित करने के लिए आपको बस अपनी शीर्ष स्तरीय फ़ाइल में नीचे दिए गए कोड को चलाने की आवश्यकता है, हमारे मामले में, myapp.

sudo npm नोडमेलर स्थापित करें

एक बार इंस्टॉल हो जाने पर आपको अपनी ऐप.जेएस फाइल में कुछ चीजें सेट करनी होंगी।

पहला सिर्फ निर्भरता है, यह नोड को बताता है कि हम इस मिडलवेयर का उपयोग करने की योजना बना रहे हैं।

var nodemailer = आवश्यकता ('नोडेमेलर');

दूसरा हमारा ट्रांसपोर्टर है, ट्रांसपोर्टर का उपयोग आपके मेल सर्वर से जुड़ने के लिए किया जाता है, मेरे मामले में जीमेल।

// ट्रांसपोर्टर को जीमेल अकाउंट मिलता था

वर ट्रांसपोर्टर = nodemailer.createTransport ({सेवा: 'जीमेल', प्रमाणीकरण: { प्रकार: 'OAuth2', उपयोगकर्ता: '[email protected]', क्लाइंट आईडी: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontent.com', clientSecret: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

यदि किसी भिन्न मेल सर्वर के साथ नोडमेलर का उपयोग कर रहे हैं तो कृपया दस्तावेज़ीकरण और सहायता के लिए यहां देखें।

कुछ चीजें एक व्यक्ति से दूसरे व्यक्ति में बदल जाएंगी: उपयोगकर्ता, क्लाइंट आईडी, क्लाइंटसीक्रेट। रीफ्रेश टोकन, और एक्सेस टोकन।

आपका उपयोगकर्ता आईडी वह ईमेल है जिसमें आप उपयोग करना चाहते हैं, मैंने अपनी साइट के नाम से एक नया नाम बनाया है।

क्लाइंट आईडी, क्लाइंटसीक्रेट, रीफ्रेश टोकन, और एक्सेस टोकन को आपके Google खाते के माध्यम से ढूंढना होगा।

अगर आपको और मदद की जरूरत है तो आप यहां इस वीडियो का अनुसरण कर सकते हैं।

एक बार वे सभी फ़ील्ड भर जाने के बाद हम अपना संदेश विवरण जोड़ देंगे।

इसके बाद हमें यह सत्यापित करने की आवश्यकता है कि हमारे फॉर्म में सभी फ़ील्ड दर्ज किए गए हैं और मान्य प्रतिक्रियाएं हैं।

// एक्सप्रेस Validatorapp.use(expressValidator({errorFormatter: function(param, msg, value) { var namespace = param.split('.'), root = namespace.shift(), formParam = root; जबकि(namespace.length)) {formParam += '[' + namespace.shift() + ']'; } वापसी {परम: फॉर्मपरम, संदेश: संदेश, मान: मान};}}));

अब हमें अपने वेबपेज पर अपने संपर्क फ़ॉर्म से जानकारी प्राप्त करने और एक संदेश भेजने की आवश्यकता है।

// संपर्क सबमिट बटन से पोस्ट करें, सबमिट किए गए फॉर्म के लिए सफलता संदेश के साथ एक होमपेज बनाने की जरूरत है = req.body.name; var ईमेल = req.body.email; var phone = req.body.phone; var संदेश = req.body.message; var mailOptions = {// से संदेश भेजते समय उपयोग की जाने वाली जानकारी बनाता है: ' स्वचालित ईमेल', को: '[email protected]', विषय: 'वेबसाइट संपर्क फ़ॉर्म:' + नाम, पाठ: 'आपको अपने वेबसाइट संपर्क फ़ॉर्म से एक नया संदेश प्राप्त हुआ है।\n\n' + 'यहाँ विवरण हैं:\n\nनाम:' + नाम + '\n\nईमेल:' + ईमेल + '\n\nफोन:' + फोन + '\n\nसंदेश:\n' + संदेश } ट्रांसपोर्टर.भेजेंमेल(मेलविकल्प, फ़ंक्शन (गलती, रेस) {अगर (गलती) {कंसोल.लॉग ('त्रुटि'); } और { कंसोल. नया होमपेज, सफलता संदेश के साथ इसे कैसे करें, इस पर गौर करें, जैसे लॉगआउट पेज})

Chamak

फ्लैश का उपयोग क्रियाओं के बाद संदेश दिखाने के लिए किया जाता है। आप इसे तब देख सकते हैं जब आप कोई फ़ॉर्म सबमिट करते हैं, या कोई फ़ील्ड सही ढंग से दर्ज नहीं करते हैं।

अन्य npm मिडलवेयर की तरह ही फ्लैश स्थापित करें।

sudo npm कनेक्ट-फ्लैश स्थापित करें

वर फ्लैश = आवश्यकता ('कनेक्ट-फ्लैश'); // स्क्रीन संदेशों पर दिखाने के लिए फ्लैश कार्यक्षमता थी

// Flashapp.use (फ्लैश ()) से कनेक्ट करें;

फ्लैश सक्षम करें जो वेबपेज पर संदेशों को पुश और अपडेट करता है। ये वे संदेश हैं जो कहते हैं कि सफलता, या जानकारी गलत दर्ज की गई थी।

// ग्लोबल वार्स

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 फ्लैश ('त्रुटि'); res.locals.user = req.user || शून्य; अगला ();});

कुछ को फ्लैश से जुड़े चर की आवश्यकता होती है।

वहाँ फिर एक बनाया संपर्क फ़ॉर्म जाओ।

चरण 4: लॉगिन पेज

यह कुछ ऐसा था जिसे मैं देखना चाहता था कि क्या मैं कर सकता हूं और शायद मैं भविष्य में इसका इस्तेमाल करूंगा। मैं सिर्फ कोड की व्याख्या करना चाहता था क्योंकि यह मेरे गिट भंडार में है।

तो यह भाग कुछ और npm मिडिल-वेयर का उपयोग करता है। नीचे दिए गए आदेशों का उपयोग करके निम्नलिखित स्थापित करें।

npm पासपोर्ट स्थापित करें && npm पासपोर्ट-स्थानीय स्थापित करें && npm bcryptjs स्थापित करें

&& आपको एक लाइन के साथ कई कमांड चलाने की अनुमति देता है।

लॉगिन और उपयोगकर्ता

आपको अपने रूट्स फोल्डर के तहत एक login.js और user.js फाइल बनानी होगी। इसका उपयोग उपयोगकर्ता के निर्माण की अनुमति देने के लिए किया जाएगा, जो हमारे डेटाबेस में संग्रहीत किया जाएगा, और उपयोगकर्ता को डेटाबेस की जांच करके लॉगिन करने की अनुमति देगा।

user.js

वर एक्सप्रेस = आवश्यकता ('एक्सप्रेस'); वर राउटर = एक्सप्रेस। राउटर (); var पासपोर्ट = आवश्यकता ('पासपोर्ट'); var LocalStrategy = आवश्यकता ('पासपोर्ट-स्थानीय')। रणनीति; वर उपयोगकर्ता = आवश्यकता ('../मॉडल/उपयोगकर्ता'); // राउटर रजिस्टर करें। // रजिस्टर यूजर राउटर.पोस्ट ('/ रजिस्टर', फंक्शन (req, res) { var name = req.body.name; var ईमेल = req.body.email; var यूजरनेम = req.body.username; var पासवर्ड = req.body.password; var password2 = req.body.password2; // सत्यापन req.checkBody ('नाम', 'नाम आवश्यक है')। खाली नहीं (); req.checkBody ('ईमेल', 'ईमेल आवश्यक है' खाली नहीं (); req.checkBody ('ईमेल', 'ईमेल मान्य नहीं है')। isEmail (); req.checkBody ('उपयोगकर्ता नाम', 'उपयोगकर्ता नाम आवश्यक है')। खाली नहीं (); req.checkBody (' पासवर्ड', 'पासवर्ड आवश्यक है')। खाली नहीं (); req.checkBody ('पासवर्ड 2', 'पासवर्ड मेल नहीं खाते')। त्रुटियाँ) { res.render ('रजिस्टर', {त्रुटियाँ: त्रुटियाँ}); } अन्य { var newUser = नया उपयोगकर्ता ({नाम: नाम, ईमेल: ईमेल, उपयोगकर्ता नाम: उपयोगकर्ता नाम, पासवर्ड: पासवर्ड}); User.createUser(newUser, function(err, user){ if(err) throw err; console.log(user); }); req.flash('success_msg', 'आप पंजीकृत हैं और अब लॉगिन कर सकते हैं'); res.redirect(' /लॉग इन करें'); } });

इस टुकड़े को टुकड़े करके तोड़ना

पहले हम सभी आवश्यक मध्य-वेयर शामिल करते हैं, फिर हम अपनी मॉडल फ़ाइल शामिल करते हैं जिसे नीचे समझाया गया है। हम रजिस्टर टैग से रूट करते हैं और अपना रजिस्टर हैंडलबार टेक्स्ट प्रदर्शित करते हैं। फिर महत्वपूर्ण कार्य आता है। ये हमें अपने डेटाबेस में एक नया उपयोगकर्ता पंजीकृत करने की अनुमति देते हैं। फ़ंक्शन यह सुनिश्चित करने के लिए जाँच करता है कि सभी फ़ील्ड मान्य हैं और फ़ॉर्म में शामिल हैं, यदि नहीं तो यह उनके लिए संकेत देगा। इसके बाद यह त्रुटियों की जांच करता है, और यदि कोई त्रुटि नहीं होती है तो यह दी गई जानकारी के साथ एक नया उपयोगकर्ता बनाता है। यह फिर लॉगिन पृष्ठ पर जाता है, जिससे आप लॉगिन कर सकते हैं।

लॉगिन.जेएस

वर एक्सप्रेस = आवश्यकता ('एक्सप्रेस');

वर राउटर = एक्सप्रेस। राउटर (); वर पासपोर्ट = आवश्यकता ('पासपोर्ट'); var LocalStrategy = आवश्यकता ('पासपोर्ट-स्थानीय')। रणनीति; वर उपयोगकर्ता = आवश्यकता ('../मॉडल/उपयोगकर्ता'); /* उपयोगकर्ता सूची प्राप्त करें। */ // होमपेज राउटर.गेट ('/', फंक्शन (req, res){ res.render('login'); }); पासपोर्ट.यूज (नया लोकलस्ट्रेटी (फ़ंक्शन (उपयोगकर्ता नाम, पासवर्ड, किया गया)) { User.getUserByUsername (उपयोगकर्ता नाम, फ़ंक्शन (गलती, उपयोगकर्ता) {अगर (गलती) गलत फेंक; अगर (! उपयोगकर्ता) {वापसी किया (शून्य, गलत, { संदेश: 'अज्ञात उपयोगकर्ता'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) थ्रो इरेट; अगर (isMatch) {वापसी किया (शून्य, उपयोगकर्ता); } और { वापसी की गई (शून्य, गलत, {संदेश: 'अमान्य पासवर्ड'}); }}); }); })); Passport.serializeUser (फ़ंक्शन (उपयोगकर्ता, किया गया) { किया (शून्य, user.id); }); Passport.deserializeUser (फ़ंक्शन (आईडी, किया गया) { User.getUserById (आईडी, फ़ंक्शन (गलती, उपयोगकर्ता) { किया (गलती, उपयोगकर्ता); }); }); राउटर। पोस्ट ('/ लॉगिन', पासपोर्ट। प्रमाणीकरण ('स्थानीय', {सफलता रीडायरेक्ट:'/', विफलता रीडायरेक्ट: '/ लॉगिन', विफलता फ्लैश: सच}), फ़ंक्शन (req, res) { res.redirect ('/ डैशबोर्ड');}); Router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'You are log out'); res.redirect('/homepage'); });

मॉड्यूल.एक्सपोर्ट = राउटर;

पहले हम सभी आवश्यक मध्य-वेयर शामिल करते हैं, फिर हम अपनी मॉडल फ़ाइल शामिल करते हैं जिसे नीचे समझाया गया है। हम लॉगिन टैग से रूट करते हैं और अपना लॉगिन हैंडलबार टेक्स्ट प्रदर्शित करते हैं। फिर हम दर्ज किए गए उपयोगकर्ता नाम और पासवर्ड लेने के लिए कुछ पासपोर्ट कार्यों का उपयोग करते हैं और उन्हें हमारे डेटाबेस के खिलाफ जांचते हैं। हम एक एन्क्रिप्टेड पासवर्ड का भी उपयोग करेंगे जो रास्पबेरी पाई पर लॉगिन को थोड़ा धीमा कर सकता है। मैं इसे आगे और समझाता हूं। उपयोगकर्ता नाम और पासवर्ड को मान्य करने के बाद, आपको होमपेज पर भेज दिया जाता है जो डैशबोर्ड दिखाएगा जैसा कि हम इसे अपनी अनुक्रमणिका फ़ाइल में सेट करते हैं। हम यहां लॉगआउट करने की क्षमता भी जोड़ते हैं।

जैसा कि मैंने पहले उल्लेख किया है, हमें डेटाबेस की जांच के लिए एक मॉडल बनाने की भी आवश्यकता होगी।

यह आपके मुख्य एप्लिकेशन फ़ोल्डर के अंतर्गत मॉडल नामक फ़ोल्डर बनाकर किया जाता है। इस फोल्डर में एक user.js फाइल की भी जरूरत होती है।

मॉडल/user.js

वर नेवला = आवश्यकता ('नेवला');

var bcrypt = आवश्यकता ('bcryptjs'); // उपयोगकर्ता स्कीमा var UserSchema = mongoose. Schema ({उपयोगकर्ता नाम: {प्रकार: स्ट्रिंग, अनुक्रमणिका: सत्य}, पासवर्ड: {प्रकार: स्ट्रिंग}, ईमेल: {प्रकार: स्ट्रिंग}, नाम: {प्रकार: स्ट्रिंग}}); वर उपयोगकर्ता = मॉड्यूल। निर्यात = mongoose.model ('उपयोगकर्ता', UserSchema);

मॉड्यूल.एक्सपोर्ट्स.क्रिएट यूज़र = फंक्शन (न्यूयूज़र, कॉलबैक) {

bcrypt.genSalt(10, function(err, Salt) { bcrypt.hash(newUser.password, Salt, function(err, hash) { newUser.password = हैश; newUser.save(callback);}); }); } मॉड्यूल.exports.getUserByUsername = फ़ंक्शन (उपयोगकर्ता नाम, कॉलबैक) { वर क्वेरी = {उपयोगकर्ता नाम: उपयोगकर्ता नाम}; User.findOne (क्वेरी, कॉलबैक); } मॉड्यूल.exports.getUserById = फ़ंक्शन (आईडी, कॉलबैक) { User.findById (आईडी, कॉलबैक); } मॉड्यूल.एक्सपोर्ट्स.कंपेयरपासवर्ड = फ़ंक्शन (उम्मीदवार पासवर्ड, हैश, कॉलबैक) { bcrypt.compare (उम्मीदवार पासवर्ड, हैश, फ़ंक्शन (गलती, isMatch) {अगर (गलती) फेंक गलती; कॉलबैक (शून्य, isMatch); }); }

यह मॉडल बताता है कि हमारे उपयोगकर्ता पैरामीटर क्या दिखेंगे और साथ ही हम उन तक कैसे पहुंचेंगे। मैंने पहले उल्लेख किया था कि हम अपने पासवर्ड को एन्क्रिप्ट करेंगे। ऐसा इसलिए है ताकि उल्लंघन की स्थिति में कोई भी पासवर्ड डेटाबेस में स्टोर न हो। पासवर्ड को मिडिल-वेयर bcrypt का उपयोग करके हैश किया जाता है।

चरण 5: ट्रैफिक काउंटर

मैं देखना चाहता था कि कितने अद्वितीय उपयोगकर्ता मेरे वेब पेज पर आए और "हिट" की संख्या गिनें। ऐसा करने के कई तरीके हैं, मैं समझाऊंगा कि मैं इसके बारे में कैसे गया।

यह ट्रैक करने के लिए एक mongodb संग्रह का उपयोग करता है कि कितने उपयोगकर्ता मेरे पृष्ठ पर आए हैं और प्रत्येक अद्वितीय आगंतुक कितनी बार गए हैं।

चूंकि हम पहले ही एक mongoDB स्थापित करने के बारे में बात कर चुके हैं, इसलिए मैं इसे फिर से नहीं देखूंगा।

संकलन करने के लिए आपको अपने डेटाबेस में दो संग्रह जोड़ने पड़ सकते हैं। ऐसा करने के लिए आप या तो UI का उपयोग करते हुए RoboMongo स्थापित कर सकते हैं, हालाँकि यदि आप एक हेडलेस रास्पबेरी पाई का उपयोग कर रहे हैं जैसे कि मैं हूँ तो आप निम्नलिखित कमांड का मज़ा लेंगे।

मोंगो खोल

एक डीबी संपादित करने, जानकारी प्राप्त करने, या एक संग्रह बनाने के लिए आपको एक हेडलेस यूनिट पर मोंगो शेल की आवश्यकता होगी।

Daud

मोंगो

इससे खोल खुल जाएगा।

एक संग्रह जोड़ें

मेरे मामले में, डेटाबेस को लॉगिनएप कहा जाता है, आप इसे जो चाहें नाम दे सकते हैं।

nameofyourdb. का प्रयोग करें

हमारी साइट पर आने वाले उपयोगकर्ताओं के हमारे सभी आईपी पते को रखने के लिए हमें एक संग्रह की आवश्यकता है।

db.creatCollection("ip")

इसके बाद हम अपनी साइट पर अद्वितीय हिट की गणना करने के लिए एक संग्रह बनाते हैं। यह एक आईडी के साथ आरंभ किया जाता है और 0 से शुरू होता है।

db.createCollection ("गिनती", {आईडी: "हिट काउंटर", गिनती: 0})

ट्रैक आईपी पते

ऐसा करने के लिए हम उपयोगकर्ताओं के आईपी को खींचेंगे जब वे हमारे होम पेज पर आएंगे, हमारी गिनती बढ़ाएंगे, और बाद में उनकी तुलना करने के लिए उन्हें स्टोर करेंगे।

हमें अपने नेवले स्कीमा को स्टोर करने के लिए कुछ मॉडल बनाने होंगे, और हमारे होमपेज.जेएस फ़ाइल में कुछ कोड जोड़ने होंगे।

हम count.js और ip.js बनाते हैं और उन्हें अपने मॉडल फोल्डर में स्टोर करते हैं।

ip.js फ़ाइल हमारे ip पते के लिए सिर्फ एक स्कीमा है

वर नेवला = आवश्यकता ('नेवला'); // मोंगो के लिए पैकेज हैंडलर

// गणना स्कीमा var IpSchema = mongoose. Schema ({आईपी: {प्रकार: स्ट्रिंग,}, गिनती: {प्रकार: संख्या,}}); वर आईपी = मॉड्यूल.एक्सपोर्ट्स = mongoose.model('Ip', IpSchema);

हमारे होमपेज द्वारा count.js को हिट ट्रैकिंग शुरू करने के लिए बुलाया जाएगा। यह नीचे के रूप में किया जाता है।

// Homepagerouter.get('/', function(req, res){ publicIp.v4().then(ip => {public_ip = ip; console.log("ipv4:"+ Public_ip); //=> ' 46.5.21.123'}); publicIp.v6().then(ip => {कंसोल.लॉग("ipv6" + ip); Public_ip=ip; //=> 'fe80::200:f8ff:fe21:67cf' });

काउंट.गेटकाउंट (संग्रह, आईपीसी, पब्लिक_आईपी, फंक्शन (काउंट) {

}); गिनती = डीबी.संग्रह ('गिनती')। FindOne ({id: "हिट काउंटर"}, फ़ंक्शन (गलती, गिनती) {userCount = count.count; res.render ('होमपेज', {गिनती: उपयोगकर्ता गणना}); }); });

ऐसा हर बार होता है जब कोई हमारे होमपेज पर जाता है, ऐसे में theinternet.onthewifi.com/homepage.

यह उपयोगकर्ता, ip4 या ip6 के आईपी की जांच करता है, और फिर उस मूल्य को संग्रहीत करता है जहां वह इसे count.get.collection पर भेजता है जो कि हमारी गिनती.जेएस फ़ाइल में संग्रहीत एक फ़ंक्शन है।

उपयोगकर्ता की विशिष्टता की जाँच करने के बाद यह वापस लौटता है और गिनती मान को एक हैंडलबार चर के रूप में होमपेज पर पोस्ट करता है।

गिनती.जेएस फ़ाइल इस प्रकार है।

//count.jsvar mongo = आवश्यकता ('मोंगोडब'); // डेटाबेस का समर्थन करता है var mongoose = आवश्यकता ('नेवला'); // mongo mongoose.connect के लिए पैकेज हैंडलर ('mongodb://localhost/loginapp'); वर डीबी = mongoose.connection; वर आईपी = की आवश्यकता है ('../मॉडल/आईपी'); // काउंट स्कीमा var CountSchema = mongoose. Schema ({आईडी: {टाइप: स्ट्रिंग,}, काउंट: {टाइप: नंबर,}}); var काउंट = मॉड्यूल.एक्सपोर्ट्स = mongoose.model ('काउंट', काउंटस्केमा); मॉड्यूल.एक्सपोर्ट्स.गेटकाउंट = फ़ंक्शन (गिनती, आईपीसी, पब्लिक_आईपी, कॉलबैक) {//गिनती परीक्षण है, कॉलबैक isfunction ipc.findOne ({ip: Public_ip}, फ़ंक्शन (गलती, iptest) {if (! iptest) // जोड़ें एक नया आईपी अगर डेटाबेस में नहीं है, और काउंटर अपडेट करें {var new_ip = new Ip({ ip: Public_ip, count: 1}); db. Collection('ip').save(new_ip);// में नया आईपी जोड़ें डेटाबेस काउंट.अपडेट (//अपडेट हिट काउंटर {आईडी: "हिट काउंटर"}, {$inc: {काउंट: 1}})} और // विशिष्ट आईपी काउंटर को अपडेट करें, यह देखने के लिए कि कौन सबसे ज्यादा विजिट करता है {आईपीसी.अपडेट ({आईपी: पब्लिक_आईपी}, { $inc: {गिनती: 1}})}}); }

यह गणना स्कीमा और हमारा.getCount फ़ंक्शन बनाता है।.getCount फ़ंक्शन उपयोगकर्ताओं के आईपी के लिए डीबी की जांच करता है और यदि यह इसे पाता है, तो फ़ंक्शन उस उपयोगकर्ता की गिनती बढ़ाता है, हिट काउंटर नहीं। हालांकि यदि उपयोगकर्ता आईपी नहीं मिला है तो यह उपयोगकर्ता आईपी के साथ एक नया संग्रह ऑब्जेक्ट बनाएगा और हिट काउंटर को 1 से बढ़ा देगा।

इसके बाद इसे वापस कर दिया जाता है और वेबपेज पर प्रदर्शित किया जाता है।

वहां आपके पास एक आईपी ट्रैकिंग हिट काउंटर है।

चरण 6: ब्लॉग

मैं वर्तमान में सॉफ्टवेयर, स्मार्ट होम और पोलेरॉइड के बारे में अपनी रुचियों पर केंद्रीकृत एक ब्लॉग विकसित करने का प्रयास कर रहा हूं। इसलिए मैंने एक ब्लॉग सेक्शन बनाया। ब्लॉग स्थिर html पृष्ठों और हैंडलबार ढांचे का उपयोग करता है। ब्लॉगिंग को आसान बनाने के लिए बेहतर तकनीकों को देखने के बाद मैंने ह्यूगो का उपयोग करके अपनी वेबसाइट को फिर से डिज़ाइन किया है। ह्यूगो एक स्थिर HTML जनरेटर है। मैं नीचे दिए गए ट्यूटोरियल में इसके बारे में और बात करता हूं।

चरण 7: समाप्त

वहां आप मेरी रास्पबेरी पाई पर स्थानीय रूप से होस्ट की गई मेरी नोड.जेएस वेबसाइट पर एक गहन ट्यूटोरियल में जाते हैं। यदि आपके कोई प्रश्न या टिप्पणियां हैं तो कृपया उन्हें नीचे छोड़ दें।

मुझे उम्मीद है कि इससे दूसरों को वहां मदद मिलेगी।

ह्यूगो का उपयोग करके इस साइट के लिए एक अलग दृष्टिकोण के लिए, एक स्थिर वेब पेज जनरेटर मेरा अन्य ट्यूटोरियल देखें (जल्द ही आ रहा है)।