🤙🏼 🤚🏼 🏺 अभ्यास से अंत तक Node.js सीखना। भाग 1 📏 👾 🤮

प्रागितिहास

Node.js मॉड्यूल और किसी भी तरह के तैयार किए गए समाधानों पर बहुत सारे प्रलेखन हैं, लेकिन जब आप किसी साइट को लिखना शुरू करते हैं, तो आप समस्या में भाग लेते हैं: "कहां से शुरू करें?"। मैं आपको व्यवहार में Node.js सीखने का अपना अनुभव बताना चाहता हूं। कार्य काफी सरल और सीधा है - एक इंटरनेट सेवा के साथ जीपीएस ट्रैकर जो हमारे ट्रांसमीटरों को एक नक्शे पर प्रदर्शित करता है, एक यात्रा मार्ग, आदि को खींचता है, कल्पना कितनी देर तक ले जाती है। यह परियोजना व्यावसायिक नहीं है और अपने ~~लिए मानव जाति के लाभ के लिए~~ लिखी गई है।

हम कार्यस्थल को सुसज्जित करते हैं

मुझे काम और घर दोनों जगह काम करना है, काम किसी भी तरह से साइट बिल्डिंग से जुड़ा नहीं है और इसे वर्कफ़्लो में हस्तक्षेप नहीं करना चाहिए। इसलिए, एक आईडीई चुनने पर, विकल्प क्लाउड 9 आईडीई पर गिर गया। सुविधा के लिए, वेबस्टोर का उपयोग घर पर किया गया था । सभी साइट डेटा को कहीं संग्रहीत करने की आवश्यकता है, सैद्धांतिक भाग का अध्ययन करने के बाद, इस प्रकार के डीबीएमएस से परिचित होने का अभ्यास करने का निर्णय लिया गया था। कार्यस्थल से जुड़े नहीं होने के लिए, MongoDB और mongohq.com में आधार के लिए मुफ्त होस्टिंग को DBMS के रूप में चुना गया था।
इसलिए, हमारे पास एक खाली परियोजना और एक खाली आधार है। आप आगे बढ़ सकते हैं।
1. वेब एप्लिकेशन फ्रेमवर्क, सबसे आम में से एक एक्सप्रेस है ।
2. साइट को पूरी तरह से एचटीएमएल 5 में लिखने का निर्णय लिया गया था, इसलिए ईजेएस को टेम्पलेट इंजन के रूप में चुना गया था।
3. MongoDB ड्राइवर, उनमें से एक संख्या है, लेकिन मेरी पसंद mongodb थी ।
4. उपयोगकर्ता इनपुट, नोड-सत्यापनकर्ता का सत्यापन।

साइट संरचना

 BigBrother - \
       नियंत्रक (डेटाबेस के साथ काम करने के लिए सभी ऑब्जेक्ट)
       - सार्वजनिक - \ (सांख्यिकीय फ़ाइलें (सीएसएस, जेएस, चित्र))
             - सी.एस.एस.
             - जे.एस.
             - चित्र
       - मार्ग (साइट मार्ग)
       - दृश्य (पेज टेम्प्लेट)
       - config.js (सेटिंग्स, उदाहरण के लिए, डेटाबेस कनेक्शन)
       - server.js (स्वयं सर्वर)

पहला कदम: लॉग इन करें

विषय का उपयोग अध्ययन सामग्री के रूप में किया गया था और कार्य विशिष्ट था, उपयोगकर्ताओं को पंजीकरण करने, पासवर्ड पुनर्प्राप्त करने, साइट पर लॉगिन याद रखने, मेल की निगरानी करने और स्वयं लॉग इन करने के लिए सक्षम करने के लिए।

1. साइट का चेहरा

आइडिया: स्क्रीन के कोने में, बटन पर क्लिक करें, दर्ज की गई डेटा की आंशिक जाँच के साथ साइट में प्रवेश करने / दर्ज करने की क्षमता के साथ एक मोडल विंडो दिखाई देती है (भविष्य में, यह चेक को जटिल कर सकती है)।

शैली पत्रक शैली

@import url(http://fonts.googleapis.com/css?family=Tenor+Sans&subset=latin,cyrillic); body{ font-family: 'Tenor Sans', sans-serif; } #mainmap{ width : 100%; } #topmenu{ width: 100%; height: 80px; background-color: white; } #topmenu #user{ background-color: rgb(228, 228, 228); cursor: pointer; position: absolute; top: 20px; right: 20px; vertical-align: middle; text-align: center; padding: 10px; border: 1px solid gray; } #topmenu #user:hover{ background-color: rgb(188, 188, 188); border: 1px solid gray; } .window{ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(40,40,40,0.5); z-index: 9999; color: rgb(80,80,80); display: none; } .window .back{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; } .window .wrap{ position: fixed; width: 500px; height: 400px; top: 50%; left: 50%; margin: -200px -250px; background-color: white; border: 1px solid silver; padding: 10px; z-index: 1; } .window .wrap .header{ font-size: 25px; color: rgb(40,40,40); width: 100%; border-bottom: 1px solid gray; padding-bottom: 5px; } .window .wrap .header .active{ color: rgb(40,90,40); background-color: rgb(220,200,200); } .window .wrap .header div{ display: inline; cursor: pointer; background-color: rgb(230,240,240); padding: 2px; } .window .wrap .header div:hover{ color: rgb(40,40,90); background-color: rgb(230,230,230); } .window .wrap .msg{ display: none; position: absolute; top: 41px; left: 10px; width: 480px; background-color: rgb(220,100,100); padding: 10px; color: black; } .window .wrap .line{ margin-top: 10px; margin-left: 50px; } .window .wrap .line .label{ font-size: 20px; } .window .wrap .line .edit input[type='text'], .window .wrap .line .edit input[type='email'], .window .wrap .line .edit input[type='password']{ width: 400px; height: 25px; margin-top: 5px; border: 1px solid silver; font-size: 20px; } .window .wrap .line .edit input[type='text'], .window .wrap .line .edit input[type='email'], .window .wrap .line .edit input[type='password']:focus{ border: 1px solid gray; } .window .wrap .line .edit .error{ border-color: red; } .window .wrap .buttons{ position: absolute; width: 100%; height: 40px; left: 0; bottom: 0; background-color: rgb(240,240,240); color: rgb(40,40,40); } .window .wrap .buttons .button{ float: right; padding: 5px; border: 1px solid gray; margin: 5px; cursor: pointer; } .window .wrap .buttons .button:hover{ background-color: rgb(188, 188, 188); border: 1px solid gray; }

Index.ejs होम

  <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" > <!-- CSS !--> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <!-- Utils !--> <script src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/core.js"></script> <title>BigBrother - <%= title %></title> </head> <body> <div id="topmenu"> <div id="user"> Login </div> </div> <div class="window" id="login"> <div class="wrap"> <div class="header"> <div id="pagelogin" class="active">Login</div> / <div id="pageregister" class="">Registration</div> </div> <div class="line" style="margin-top: 80px"> <div class="label">Email:</div> <div class="edit"><input type="email" id="email"/></div> </div> <div class="line" style="margin-top: 10px"> <div class="label">Password:</div> <div class="edit"><input type="password" id="password"/></div> </div> <div class="line" style="margin-top: 10px" id="confirmationpassworddiv"> <div class="label">Confirmation password:</div> <div class="edit"><input type="password" id="confirmationpassword"/></div> </div> <div class="line" style="margin-top: 10px"> <div class="label">Stay online:</div> <div class="edit"><input type="checkbox" id="stayonline"/></div> </div> <div class="buttons"> <div class="button" id="logincancel">cancel</div> <div class="button" id="loginsbmt">login</div> </div> <div class="msg"> </div> </div> <div class="back"></div> </div> <script type="text/javascript"> jQuery(window).load(function(){ Init(); }); </script> </body> </html>

Core.js ईवेंट्स और हैंडलर

 function Init(){ /* LOGIN WINDOW */ //Init vars var user = jQuery('#user'); var loginwindow = jQuery('#login'); var loginemail = jQuery('#email'); var loginpassword = jQuery('#password'); var confirmationpassword = jQuery('#confirmationpassword'); var pagelogin = jQuery('#pagelogin'); var pageregister = jQuery('#pageregister'); var confirmationpassworddiv = jQuery('#confirmationpassworddiv'); var loginmsg = jQuery(jQuery('.msg',loginwindow)[0]); var stayonline = jQuery('#stayonline'); confirmationpassworddiv.hide(); loginmsg.hide(); //Set events confirmationpassword.keypress(inputkeypress); loginpassword.keypress(inputkeypress); loginemail.keypress(inputkeypress); user.click(function(){ loginwindow.fadeIn('fast'); }); jQuery('#logincancel').click(function(){ hidewindow(); }); jQuery('#loginsbmt').click(function(){ var isLogin = pagelogin.hasClass('active'); var error = false; var errormsg = ''; if (loginemail.val()===''){ error = true; loginemail.addClass('error'); errormsg += 'Type your email'; }else loginemail.removeClass('error'); if (!isLogin){ if (loginpassword.val()===''){ error = true; loginpassword.addClass('error'); errormsg += '<br/>Type your password'; }else loginpassword.removeClass('error'); if (confirmationpassword.val()===''){ error = true; confirmationpassword.addClass('error'); errormsg += '<br/>Type your confirmation password'; }else confirmationpassword.removeClass('error'); if (confirmationpassword.val()!=loginpassword.val()){ error = true; confirmationpassword.addClass('error'); errormsg += '<br/>Password not same'; } } if (!error) { if (!isLogin) registeruser(); else loginuser(); }else{ loginmsg.html(errormsg); loginmsg.show(); } }); jQuery('.back',loginwindow).click(function(){ hidewindow(); }); pagelogin.click(function(){ pagelogin.addClass('active'); pageregister.removeClass('active'); confirmationpassworddiv.hide(); loginmsg.hide(); jQuery('#loginsbmt').html('login'); }); pageregister.click(function(){ pagelogin.removeClass('active'); pageregister.addClass('active'); confirmationpassworddiv.show(); loginmsg.hide(); jQuery('#loginsbmt').html('register'); }); //Check login state checklogin(); //Other function function inputkeypress(){ if (jQuery(this).val()!=='') jQuery(this).removeClass('error'); } //Hide login window and clear state function hidewindow(){ loginwindow.fadeOut('fast',function(){ loginmsg.hide(); confirmationpassword.removeClass('error'); loginpassword.removeClass('error'); loginemail.removeClass('error'); pagelogin.click(); }); } //Do login function loginuser(){ jQuery.ajax({ type: "POST", url: "/auth", data: { email: loginemail.val(), password: loginpassword.val(), stayonline: stayonline.val()==='1'} }).done(function( msg ) { loginpassword.val(''); if (msg.error){ loginmsg.html(msg.msg); loginmsg.show(); }else{ jQuery.cookie('sessionid',msg.sessionid); loginmsg.html(msg.msg); loginmsg.show(); setTimeout(function() { hidewindow(); checklogin(); }, 1000); } }); } //Check login state function checklogin(){ user.html('loading...'); jQuery.ajax({ type: "GET", url: "/auth" }).done(function( msg ) { if (msg.error) { user.html('login'); user.unbind('click'); user.click(function(){loginwindow.fadeIn('fast');}); } else { user.html(msg.displayname); user.unbind('click'); user.click(logout); } }); } //Do log out function logout(){ jQuery.ajax({ type: "DELETE", url: "/auth" }).done(function(msg){ if (msg.error){ alert(msg.msg); return; } user.html('login'); user.unbind('click'); user.click(function(){ loginwindow.fadeIn('fast'); }); }); } //Register new user function registeruser(){ jQuery.ajax({ type: "POST", url: "/auth/register", data: { email: loginemail.val(), password: loginpassword.val(), confirmationpassword: confirmationpassword.val(), stayonline: stayonline.val()==='1'} }).done(function( msg ) { loginpassword.val(''); confirmationpassword.val(''); if (msg.error){ loginmsg.html(msg.msg); loginmsg.show(); }else{ loginmsg.html(msg.msg); loginmsg.show(); setTimeout(function() { hidewindow(); checklogin(); }, 1000); } }); } /* LOGIN WINDOW */ };

2. सर्वर भाग

दिन की शुरुआत, एक डेटाबेस नियंत्रक बनाएँ। इसका कार्य डेटाबेस से कनेक्ट करना है, साथ ही कुछ अन्य अक्सर उपयोग की जाने वाली प्रक्रियाओं को वहां संग्रहीत किया जाएगा, /controllers/db.js :

 exports.opendb = function(settings, callback){ var mongo = require('mongodb'), Server = mongo.Server, Db = mongo.Db; var server = new Server(settings.host, settings.port, {auto_reconnect: settings.auto_reconnect}); var db = new Db(settings.db, server); db.open(function(err, db) { if(!err) { db.authenticate(settings.username, settings.password, function(){callback(false, db);}); } else callback(true, db); }); }; exports.criptpassword = function(string){ var crypto = require('crypto'); return crypto.createHash('md5').update(string+global.saldo).digest("hex"); };

काम करते समय चर का एक बड़ा गुच्छा उत्पन्न नहीं करने के लिए, नियंत्रक फ़ोल्डर में एक index.js फ़ाइल बनाएं। इस मामले में, अगर हम लिखते हैं

 global.controllers = require('./controllers');

हमारे index.js को वैरिएबल में जोड़ा जाएगा:

 exports.db = require('./db'); exports.users = require('./users'); exports.stayonlinesessions = require('./stayonlinesessions');

अगला चरण स्टार्ट पेज /routers/index.js के लिए एक राउटर बनाना है

 exports.index = function(req, res){ res.render('index',{title: 'Home'}); }; exports.auth = require('./auth');

हम अपने डेटाबेस में उपयोगकर्ता सत्रों को संग्रहीत करेंगे, हम इसके लिए कनेक्ट-मोंगो पैकेज का उपयोग करते हैं ।
और वास्तव में हमारे server.js ।
वैश्विक मॉड्यूल और वैरिएबल को प्रारंभ करें

 //Modules var express = require("express"); var app = express(); var MongoStore = require('connect-mongo')(express); var dbsettings = require('./config').settings; //Server configuration global.saldo = 'fewfwef352tFRWEQF'; global.controllers = require('./controllers'); //Controllers var routers = require('./routers'); //Routers var viewEngine = 'ejs';

एक्सप्रेस सर्वर कॉन्फ़िगर करें

 // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', viewEngine); app.use(express.cookieParser()); app.use(express.session({ secret: 'fegwegwe', store: new MongoStore(dbsettings), cookie: { path: '/', httpOnly: true, maxAge: 1000*60*60*24 } })); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + '/public')); });

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

सही ढंग से

 // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', viewEngine); /*---------------------------------------------------*/ app.use(express.cookieParser()); app.use(express.session({ secret: 'fegwegwe', store: new MongoStore(dbsettings), cookie: { path: '/', httpOnly: true, maxAge: 1000*60*60*24 } })); /*---------------------------------------------------*/ app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + '/public')); });

ग़लत

 // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', viewEngine); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + '/public')); /*---------------------------------------------------*/ app.use(express.cookieParser()); app.use(express.session({ secret: 'fegwegwe', store: new MongoStore(dbsettings), cookie: { path: '/', httpOnly: true, maxAge: 1000*60*60*24 } })); /*---------------------------------------------------*/ });

हमने मार्ग निर्धारित किए

 app.get('/',routers.index); //  app.post('/auth/register',routers.auth.register); //  app.post('/auth',routers.auth.login); //   app.get('/auth',routers.auth.getlogin); //  :    app.del('/auth',routers.auth.logout); //

डेटाबेस से कनेक्ट करें, यदि सफल हो, तो सर्वर शुरू करें

 //Connect to db and start global.controllers.db.opendb(dbsettings, function(error,db){ if (!error){ global.db = db; app.listen(process.env.PORT); } else console.log('Error connect to db'); });

हम शुरू करने की कोशिश करते हैं, मुख्य पृष्ठ को देखते हैं, यह काम करता है।
अब हम साइट उपयोगकर्ताओं के लिए जिम्मेदार नियंत्रक का वर्णन करेंगे: /controllers/users.js
उपयोगकर्ता पंजीकरण:

 exports.register = function(email, password, callback){ global.db.collection('users', function(err, collection) { if (err){ callback(true); return; } collection.findOne({email: email.toLowerCase()}, function(eror, item){ if (item === null){ collection.insert({email: email.toLowerCase(), password: global.controllers.db.criptpassword(password), emailchack: true, roles: []},{safe:true},function(error, result){ if (err){ callback(true); return; } callback(false, result[0]); }); }else callback(true, null, 'User already exists'); }); }); };

आईडी द्वारा उपयोगकर्ता प्राप्त करें

 exports.getuser = function(id, callback){ global.db.collection('users', function(err, collection) { if (err){ callback(true); return; } var ObjectID = require('mongodb').ObjectID; if (typeof id === 'string') id = new ObjectID(id); collection.findOne({_id: id}, function(eror, item){ if (err){ callback(true); return; } callback(false, item); }); }); };

जांचें कि क्या उपयोगकर्ता के लिए लॉग इन करना संभव है

 exports.checkuser = function(email, password, callback){ global.db.collection('users', function(err, collection) { if (err){ callback(true); return; } collection.findOne({email: email.toLowerCase(), password: global.controllers.db.criptpassword(password)}, function(error,item){ if (item === null) item = {}; callback(error, item.emailchack, item); }); }); };

यदि उपयोगकर्ता "मुझे याद रखें" चेकबॉक्स पर टिक करता है, तो हम कुकीज़ में हैशेड उपयोगकर्ता आईडी जोड़ देंगे और हम "रिओनलाइनशीट्स" दस्तावेज़ नियंत्रक में सब कुछ संग्रहीत करेंगे। चलिए सेशन / कंट्रोलर के लिए जिम्मेदार कंट्रोलर लिखते हैं

  exports.savesession = function(user_id, callback){ global.db.collection('stayonlinesessions', function(err, collection) { if (err){ callback(true); return; } var hash = global.controllers.db.criptpassword(user_id.toString()); collection.insert({user_id: user_id, hash: hash, createdate: new Date()},{safe:true},function(error, result){ if (err){ callback(true); return; } callback(false, hash); }); }); }; exports.getsession = function(hash, callback){ global.db.collection('stayonlinesessions', function(err, collection) { if (err){ callback(true); return; } collection.findOne({hash: hash}, function(error,item){ if (err || item === null){ callback(true); return; } global.controllers.users.getuser(item.user_id, function(error, user){ if (err || user === null){ callback(true); return; } callback(false, user); }); }); }); }; exports.delsession = function(hash, callback){ global.db.collection('stayonlinesessions', function(err, collection) { if (err){ callback(true); return; } collection.remove({hash: hash}, {safe: true}, function(err,removed){ if (err || !removed){ callback(true); return; } callback(false); }); }); };

इसलिए, हमारे पास ऐसे नियंत्रक हैं जो पंजीकरण और सत्रों के लिए जिम्मेदार हैं, अब हमें प्राधिकरण मार्गों को लागू करने की आवश्यकता है। हम इन कार्यों /routers/auth.js के लिए जिम्मेदार होंगे ।
उपयोगकर्ता पंजीकरण

 exports.register = function(req, res){ var email = req.body.email; var password = req.body.password; var confirmationpassword = req.body.confirmationpassword; var stayonline = req.body.stayonline; //   var check = require('validator').check; if (!check(email).len(6, 64).isEmail() || !check(password).notNull() || !check(password).equals(confirmationpassword)){ res.send({ error: true, msg: 'Check your' }); return; } //   global.controllers.users.register(email, password, function(error, user, msg){ if (error){ if (typeof msg == 'undefined' || msg===null ) msg = 'Register error'; res.send({ error: true, msg: msg }); return; } //  req.session.authorized = true; req.session.user_id = user._id; req.session.username = user.email; //   " "        if (stayonline){ global.controllers.stayonlinesessions.savesession(user._id, function(error, hash){ res.send({ error: false, msg: 'Success register email: '+email, sessionid: hash }); }); }else{ res.send({ error: false, msg: 'Success register email: '+email }); } }); };

साइट पर लॉगिन करें

 exports.login = function(req, res){ var email = req.body.email; var password = req.body.password; var stayonline = req.body.stayonline; global.controllers.users.checkuser(email, password, function(error, canlogin, user){ if (error || !canlogin){ res.send({ error: true, msg: 'Check your email or password' }); return; } req.session.authorized = true; req.session.user_id = user._id; req.session.username = user.email; if (stayonline){ global.controllers.stayonlinesessions.savesession(user._id, function(error, hash){ res.send({ error: false, msg: 'Success login email: '+user.email, sessionid: hash }); }); } else { res.send({ error: false, msg: 'Success login email: '+user.email }); } }); };

बाहर निकलें साइट

 exports.logout = function(req, res){ if (!req.session.authorized){ res.send({ error: true, msg: 'You are not loggined' }); return; } req.session.authorized = false; delete req.session.username; delete req.session.user_id; //     ,    if (typeof req.cookies.sessionid !== 'undefined' && req.cookies.sessionid !== ''){ global.controllers.stayonlinesessions.delsession(req.cookies.sessionid, function(error){ if (error){ console.log('Session was not deleted'); return; } }); } res.send({ error: false }); };

वर्तमान प्राधिकरण स्थिति प्राप्त करना

 exports.getlogin = function(req, res){ if (!req.session.authorized){ //   ,         global.controllers.stayonlinesessions.getsession(req.cookies.sessionid, function(error, user){ if (error){ res.send({ error: true, msg: 'You are not loggined' }); return; } req.session.authorized = true; req.session.user_id = user._id; req.session.username = user.email; res.send({ error: false, displayname: req.session.username }); }); }else{ res.send({ error: false, displayname: req.session.username }); } };

कुकीज़ के बारे में कुछ बिंदु। यदि सत्र मॉड्यूल के प्रारंभ के दौरान हम भंडारण समय निर्दिष्ट नहीं करते हैं, तो वे ब्राउज़र में बिल्कुल भी संग्रहीत नहीं हैं। यह एक साधारण सेटअप के साथ व्यवहार किया जाता है।

 app.use(express.session({ secret: 'fegwegwe', store: new MongoStore(dbsettings), cookie: { path: '/', httpOnly: true, maxAge: 1000*60*60*24 } // maxAge -     }));

क्लाइंट की तरफ, कुकीज़ के साथ काम करना काफी सरल है। मैंने jquery.cookie.js प्लगइन का उपयोग किया

 jQuery.cookie('sessionid',msg.sessionid);

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

अभ्यास से अंत तक Node.js सीखना। भाग 1