🤶🏼 🌁 👩🏻‍🏫 नोड.जेएस लिंक शॉर्टनर 🏼 🤗 ⏏️

हेलो, हेब्र! इस लेख में, मैं आपको एक सरल वेब एप्लिकेशन बनाने की प्रक्रिया के माध्यम से चलता हूँ - नोड.जेएस लिंक शॉर्टनर mysql-libmysqlclient, MooTools का उपयोग सर्वर पर, और jQuery क्लाइंट पर। लेख मानता है कि पाठक पहले से ही "हैलो दुनिया" व्यायाम पूरा कर चुके हैं और नोड की मूल बातें समझ चुके हैं।

मुझे आपको तुरंत चेतावनी देनी चाहिए - मैं खुद को नोड में विशेषज्ञ नहीं मानता हूं। मैं कोड पर चर्चा करने और आदर्श के साथ एक साथ आने का प्रस्ताव करता हूं। शायद एक साथ हम शुरुआती लोगों के लिए एक महान उदाहरण बनाएंगे। इसलिए - रचनात्मक आलोचना का स्वागत किया जाता है।

सर्वर MooTools

मैं आवश्यक-अनावश्यक के विषय पर होलीवेट नहीं करना चाहता हूं, मैं उपयोग करना पसंद करता हूं, आप अन्यथा निर्णय ले सकते हैं।

आप MooTools को तुरंत कनेक्ट नहीं कर सकते - आप इसे बस नहीं ले सकते, सर्वर फ़ाइल डाउनलोड करें और इसके लिए ('./ MooTools') की आवश्यकता होगी।

मुझे 12 जुलाई को MooTools के ट्वीट और लिंक davidwalsh.name/mootools-node/s द्वारा मदद मिली थी। परिणामस्वरूप, पुस्तकालय इस तरह जुड़ा:

require('./Lib/MooTools').apply(GLOBAL);

MySQL

इस एप्लिकेशन के लिए कुछ NoSQL डेटाबेस अधिक उपयुक्त है, लेकिन मेरा लक्ष्य नोड में MySQL के साथ काम करना सीखना था।

मैंने बुकमार्क से Node-mysql-libmysqlclient के बारे में एक विषय लिया, सभी आवश्यक जानकारी ली और मैनुअल का उपयोग करके किसी भी समस्या के बिना क्लाइंट को इकट्ठा किया।

मैंने स्क्रिप्ट को प्रोजेक्ट में Lib

फ़ोल्डर में ही फेंक दिया, क्योंकि यह आसानी से इस तरह से शुरू किया गया है:

 var conn = require('./Lib/mysql/mysql-libmysqlclient').createConnectionSync(); conn.connectSync('localhost', 'NAME', 'PASS', 'nodejs');

ServerResponse बढ़ाएँ

एप्लिकेशन और रीडायरेक्ट में हेडर निर्दिष्ट करने के लिए इसे सुविधाजनक बनाने के लिए, मैंने MooTools लागू विधि का उपयोग करके ServerResponse प्रोटोटाइप (मेरा मानना है कि यह दृष्टिकोण जावास्क्रिप्ट विचारधारा से मेल खाती है) का विस्तार करने का निर्णय लिया:

 var http = require('http'); http.ServerResponse.implement({ // code -    .   ,  200 (Ok)  404 (Not Found) // plain -     true,  - html header : function (code, plain) { this.writeHead(code, { 'Content-Type': plain ? 'text/plain' : 'text/html' }); }, // response.redirect('http://example.com')      redirect : function (url, status) { this.writeHead(status || 302, { 'Content-Type' : 'text/plain', 'Location' : url }); this.write('Redirecting to ' + url); this.end(); } });

अनुप्रयोग वायरफ़्रेम

 http.createServer(function (req, res) { // code will be here }).listen(8124, "127.0.0.1"); console.log('Server running at http://127.0.0.1:8124/');

लिंक, `Link.js`

फ़ाइल

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

हम डेटाबेस के लिए अलग से कोड नहीं लिखेंगे, लेकिन इसे आईडी के आधार पर प्राप्त करेंगे, इसे 36-बिट संख्या प्रणाली ([0-9a-z]) में अनुवाद करेंगे।

 Link.getCode = function (id) { return id ? id.toString(36) : null; }; Link.fromCode = function (code) { return code ? parseInt(code, 36) : null; };

इसके आधार पर, हम लिंक क्लास का निर्माण स्वयं करते हैं, जिसे हम स्टैटिक विधियों से पहले रखते हैं:

 Link = new Class({ initialize : function (obj) { //      -      this.setId(obj.id).id || this.setCode(obj.code); this.setUrl(obj.url); }, setId : function (id) { // id    int this.id = (isNaN(id) || id <= 0) ? null : parseInt(id); return this; }, getId : function () { return this.id; }, setUrl : function (url) { this.url = url || null; return this; }, getUrl : function () { return this.url; }, setCode : function (code) { this.id = Link.fromCode(code); return this; }, getCode : function () { return Link.getCode(this.id); } });

डेटाबेस में, एक साधारण तालिका बनाएं और लिंक प्राप्त करने और सम्मिलित करने के लिए एक मॉडल लिखें:

 CREATE TABLE `shortLinks` ( `id` int(11) NOT NULL AUTO_INCREMENT, `url` varchar(512) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 Model = new Class({ initialize : function (conn) { //       this.conn = conn; }, create : function (args) { //     ,     return new Link(args); }, get : function (link, fn) { //     if (!link.getId()) throw 'EmptyId'; //  .  ,  link.id    int var q = 'SELECT * FROM `shortLinks` WHERE `id` = ' + link.getId(); //    .   . this.conn.query(q, function (err, res) { if (err) throw err; res.fetchAll(function (err, rows) { if (err) throw err; //     -,    fn(rows.length ? link.setUrl(rows[0].url) : null); res.freeSync(); }); }); }, put : function (link, fn) { // url - ,  !!    var q = 'INSERT INTO `shortLinks` (`id`, `url`) ' + 'VALUES (NULL , "' + this.conn.escapeSync(link.getUrl()) + '");' this.conn.query(q, function (err, res) { if (err) throw err; //       fn(link.setId( //       this.conn.lastInsertIdSync() )); }.bind(this)); } }); //     exports.Link = Link; exports.Model = Model;

आप निम्नलिखित लाइन को आरंभीकरण में जोड़ सकते हैं:

 var linkModel = new (require('./Link').Model)(conn);

ध्यान दें कि आसपास के कोष्ठकों की require('./Link').Model

की आवश्यकता होती है, अन्यथा यह एक require

वस्तु बनाने की कोशिश करेगा।

रेंडरर, `Renderer.js`

फ़ाइल

 //        require('./Lib/MooTools').apply(GLOBAL); //     var url = require('url'); //      var fs = require('fs'); exports.Renderer = new Class({ initialize : function (linkModel) { this.link = linkModel; } });

Link.Model की तरह रेंडरर, केवल एक बार एप्लिकेशन इनिशियलाइजेशन के दौरान बनाया जाएगा और प्रत्येक अनुरोध उसी का उपयोग किया जाता है, जिसके कारण हम कीमती मिलीसेकेंड नहीं खोते हैं।

आधार रन विधि होगी:

 run : function (req, res) { var path = url.parse(req.url, true); if (path.query && 'add' in path.query) { var addUrl = path.query.add; //      , , "example.com" //        ,   default- if (!url.parse(addUrl).protocol) { addUrl = 'http://' + addUrl; } //    this.add(res, addUrl); //     ( url/!abc12 ) } else if (path.pathname.test(/^\/![0-9a-z]+$/)) { //      (/!)    this.send(res, path.pathname.substr(2)); } else { //        this.index(res); } },

हम अभी तक नहीं भूले हैं - हम थोड़ा संपादित ./init.js

 var linkModel = new (require('./Link').Model)(conn); var renderer = new (require('./Renderer').Renderer)(linkModel); http.createServer(function (req, res) { renderer.run(req, res); }).listen(8124, "127.0.0.1");

क्योंकि लिंक हमारे द्वारा जोड़ा जाएगा ajax, हम सभी की जरूरत है डेटाबेस के लिए लिंक लिखने और उसके कोड को वापस करने के लिए है:

 add : function (res, url) { res.header(200); this.link.put( this.link.create({ url : url }), function (link) { res.end(link.getCode()); } ); },

यदि उपयोगकर्ता छोटे लिंक पर क्लिक करना चाहता है - उसे हेलमेट भेजें जहाँ आवश्यक हो, या सूचित करें कि ऐसा कोई लिंक नहीं है

 send : function (res, code) { this.link.get( this.link.create({ code : code }), function (link) { if (link) { res.redirect(link.getUrl()); } else { res.header(404, true); res.end('There is not such url'); } } ); },

मुख्य पृष्ठ के लिए - बस index.html फ़ाइल प्रिंट करें। कृपया ध्यान दें कि मैं शुरुआत में __dirname के साथ पथ निर्दिष्ट करने की सलाह देता हूं अन्यथा आप परेशानी में पड़ सकते हैं

 index : function (res) { fs.readFile(__dirname + '/index.html', function (err, data) { if (err) throw err; res.header(200); res.end(data); }) }

मुख्य पृष्ठ

मुख्य पृष्ठ पर, हम बस इतना ही करेंगे - हम Google gikvery को रैप से जोड़ेंगे, एक इनपुट फ़ील्ड जोड़ेंगे और जब उपयोगकर्ता लिंक को छोटा करना चाहेगा - तो हमें ajax के साथ नए लिंक के लिए कोड प्राप्त होगा, हम इनपुट फ़ील्ड के तहत सुंदर डिस्प्ले डिस्प्ले करेंगे।

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>   node.js</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script>

 $(function () { $('input[type=submit]').click(function() { var input = $('input[type=text]'); var url = input.val(); input.val(''); url && $.ajax({ url : './', data: ({ add : url }), success : function (data) { var result = location.protocol + '//' + location.host + '/!' + data; $('#url') .prepend( $('<dd>').append( $('<a>') .text(result) .attr('href', result) ) .hide() .fadeIn() ) .prepend( $('<dt>') .text(url) .hide() .fadeIn() ); } }); }) });

  </script> </head> <body> <div id="form"> <input type="text" /> <input type="submit" /> </div> <dl id="url"></dl> </body> </html>

वह सब है।

परिणाम

मुझे आपको तुरंत चेतावनी देनी चाहिए - मैं आपके लिंक की सुरक्षा की गारंटी नहीं दे सकता, सेवा अत्यंत प्रदर्शनकारी है।

पेस्टबिन पर एक ही स्थान पर सभी कोड

नोड.जेएस लिंक शॉर्टनर