MongoDB डेटाबेस में रिएक्ट फॉर्म डेटा को कैसे स्टोर करें

MySQL जैसे संबंधपरक डेटाबेस पारंपरिक रूप से गो-टू डेटाबेस विकल्प रहे हैं। हालाँकि, MongoDB जैसे NoSQL डेटाबेस डेटा स्टोरेज के लिए अपनी लचीली संरचना और डेटा को जल्दी से स्टोर करने और पुनः प्राप्त करने की क्षमता के कारण लोकप्रियता में वृद्धि हुई है।

ये डेटाबेस एक वैकल्पिक क्वेरी भाषा प्रदान करते हैं जिसे आप आधुनिक वेब और मोबाइल ऐप्स के साथ समेकित रूप से एकीकृत कर सकते हैं। MongoDB डेटाबेस में रिएक्ट डेटा को स्टोर करने का तरीका जानने के लिए आगे पढ़ें।

नोएसक्यूएल डाटाबेस क्या है?

NoSQL न केवल SQL, एक गैर-संबंधपरक डेटाबेस के लिए खड़ा है। इस प्रकार का डेटाबेस पारंपरिक रिलेशनल डेटाबेस मॉडल पर निर्भर नहीं करता है। इसमें परिभाषित स्तंभ-पंक्ति संरचना नहीं है और डेटा को विभिन्न स्वरूपों में संग्रहीत कर सकता है, जिससे यह अधिक लचीला और स्केलेबल हो जाता है।

NoSQL और संबंधपरक डेटाबेस के बीच मुख्य अंतर यह है कि NoSQL डेटाबेस पंक्तियों और स्तंभों के बजाय दस्तावेज़ों में डेटा संग्रहीत करता है, जिसमें एक गतिशील संरचना होती है।

एक मोंगोडीबी डाटाबेस सेट अप करें

MongoDB सबसे लोकप्रिय NoSQL डेटाबेस है। यह एक ओपन-सोर्स डेटाबेस है जो संग्रह (डेटाबेस) के अंदर JSON जैसे दस्तावेज़ों (तालिकाओं) में डेटा संग्रहीत करता है।

यहाँ एक साधारण MongoDB दस्तावेज़ संरचना कैसी दिखती है:

{
 पहला नाम: 'एंड्रयू',
 भूमिका: 'बैकएंड डेवलपर'
}

आरंभ करने के लिए, आपको पहले चाहिए एक MongoDB डेटाबेस सेट अप करें. MongoDB को कॉन्फ़िगर करने के बाद, MongoDB Compass ऐप खोलें। फिर, क्लिक करें नया कनेक्शन स्थानीय रूप से चल रहे मोंगोडीबी सर्वर के साथ कनेक्शन बनाने के लिए बटन।

यदि आपके पास MongoDB कम्पास GUI टूल तक पहुंच नहीं है, तो आप इसका उपयोग कर सकते हैं डेटाबेस और संग्रह बनाने के लिए MongoDB शेल टूल.

कनेक्शन यूआरआई और कनेक्शन का नाम प्रदान करें, फिर हिट करें सहेजें और कनेक्ट करें.

अंत में, क्रिएट डेटाबेस बटन पर क्लिक करें, डेटाबेस नाम भरें, और डेमो संग्रह के लिए संग्रह नाम प्रदान करें।

एक रिएक्ट क्लाइंट बनाएँ

आप इस एप्लिकेशन का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

रिएक्ट एप्लिकेशन को जल्दी से बूटस्ट्रैप करने के लिए, अपनी स्थानीय मशीन पर एक प्रोजेक्ट फोल्डर बनाएं, उस डायरेक्टरी में बदलाव करें और डेवलपमेंट सर्वर बनाने और स्पिन करने के लिए इन टर्मिनल कमांड को चलाएं:

npx create-react-app my-app
सीडी माय-ऐप
एनपीएम प्रारंभ

अगला, Axios स्थापित करें। यह पैकेज आपको अपने MongoDB डेटाबेस में डेटा स्टोर करने के लिए अपने बैकएंड Express.js सर्वर पर HTTP अनुरोध भेजने में सक्षम करेगा।

एनपीएम अक्षीय स्थापित करें

उपयोगकर्ता डेटा एकत्र करने के लिए एक डेमो फॉर्म बनाएँ

खोलें src/App.js फ़ाइल, बॉयलरप्लेट रिएक्ट कोड को हटा दें, और इसे निम्नलिखित से बदलें:

आयात'./App.css';
आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया';
आयात Axios से'अक्षीय';
समारोहअनुप्रयोग() {
कॉन्स्ट [नाम, सेटनाम] = उपयोगस्टेट ("")
कॉन्स्ट [रोल, सेटरोल] = यूज़स्टेट ("")
कॉन्स्ट हैंडल सबमिट करें = (इ) => {
 e.preventDefault ();
 Axios.post (' http://localhost: 4000/डालें', {
 पूरा नाम: नाम,
 कंपनी भूमिका: भूमिका
 })
 }
वापस करना (

"अनुप्रयोग">
"ऐप-हेडर"> 
"लॉगिन फॉर्म">


प्रथम नाम</p>
 वर्गनाम = "नाम"
 टाइप ="मूलपाठ"
 प्लेसहोल्डर ="पहला नाम ..."
 onChange={(e) => {setName (e.target.value)}}
 />

 कंपनी भूमिका</p>
 वर्गनाम = "भूमिका"
 टाइप ="मूलपाठ"
 प्लेसहोल्डर = "भूमिका..."
 onChange={(e) => {setRole (e.target.value)}}
 />
"जमा करना">जमा करें</button>
 </form>
 </div>
 </header>
 </div>
 );
}


निर्यातगलती करना अनुप्रयोग;

आइए इसे तोड़ दें:

• यूज़स्टेट हुक का उपयोग करके इनपुट फ़ील्ड से एकत्र किए गए उपयोगकर्ता डेटा को होल्ड करने के लिए दो राज्यों, एक नाम और एक रोल स्टेट की घोषणा करें।
• परिवर्तन पर प्रत्येक इनपुट फ़ील्ड की विधि एक कॉलबैक चलाती है जो उपयोगकर्ता द्वारा फॉर्म के माध्यम से सबमिट किए गए डेटा को कैप्चर और स्टोर करने के लिए राज्य विधियों का उपयोग करती है।
• बैकएंड सर्वर पर डेटा सबमिट करने के लिए, ऑनसबमिट हैंडलर फ़ंक्शन उपयोग करता है Axios.post बैकएंड एपीआई समापन बिंदु के लिए एक वस्तु के रूप में राज्यों से पारित डेटा जमा करने की विधि।

रेंडर किए गए फॉर्म को स्टाइल करने के लिए, निम्न कोड को App.css फ़ाइल में जोड़ें।

* {
गद्दी: 0;
अंतर: 0;
बॉक्स आकार: सीमा बॉक्स;
}
शरीर {
फुहारा परिवार: 'पोप्पिंस', सान्स सेरिफ़;
पृष्ठभूमि का रंग: #8EC1D6;
}
।लॉगिन फॉर्म {
अंतर: 100पिक्सलऑटो;
चौड़ाई: 200पिक्सल;
ऊंचाई: 250पिक्सल;
पृष्ठभूमि का रंग: #फफ्फ;
बॉर्डर-त्रिज्या: 10पिक्सल; 
}
।लॉगिन फॉर्मपी {
पाठ संरेखित: केंद्र;
फ़ॉन्ट आकार: 12पिक्सल;
फ़ॉन्ट वजन: 600;
रंग: #B8BFC6;
गद्दी: 10पिक्सल 10पिक्सल;
}
।लॉगिन फॉर्मइनपुट {
दिखाना: अवरोध पैदा करना;
चौड़ाई: 80%;
ऊंचाई: 40पिक्सल;
अंतर: 10पिक्सलऑटो;
सीमा: 1पिक्सलठोस#सीसीसी;
बॉर्डर-त्रिज्या: 5पिक्सल;
गद्दी: 0 10पिक्सल;
फ़ॉन्ट आकार: 16पिक्सल;
रंग: काला;
}
।लॉगिन फॉर्मबटन {
पृष्ठभूमि का रंग: #8EC1D6;
रंग: #फफ्फ;
कर्सर: सूचक;
फ़ॉन्ट आकार: 15पिक्सल;
बॉर्डर-त्रिज्या:7 पीएक्स;
गद्दी: 5पिक्सल 10पिक्सल;
सीमा: कोई नहीं;
}

अब, परिवर्तनों को अपडेट करने और नेविगेट करने के लिए डेवलपमेंट सर्वर को स्पिन करें http://localhost: परिणाम देखने के लिए आपके ब्राउज़र पर 3000।

एक Express.js बैकएण्ड बनाएँ

एक एक्सप्रेस बैकएंड आपके रिएक्ट क्लाइंट और MongoDB डेटाबेस के बीच मिडलवेयर के रूप में कार्य करता है। सर्वर से, आप अपने डेटा स्कीमा को परिभाषित कर सकते हैं और क्लाइंट और डेटाबेस के बीच संबंध स्थापित कर सकते हैं।

एक एक्सप्रेस वेब सर्वर बनाएँ और इन दो पैकेजों को स्थापित करें:

एनपीएम नेवला कोर्स स्थापित करें

Mongoose, MongoDB और Node. यह आपके एप्लिकेशन डेटा को मॉडल करने और इसे MongoDB डेटाबेस में संग्रहीत करने के लिए एक सरलीकृत स्कीमा-आधारित विधि प्रदान करता है।

CORS (क्रॉस-ऑरिजनल रिसोर्स शेयरिंग) पैकेज एपीआई एंडपॉइंट्स के माध्यम से संचार और डेटा पास करने के लिए बैकएंड सर्वर और फ्रंटएंड क्लाइंट के लिए एक तंत्र प्रदान करता है।

डेटा स्कीमा बनाएँ

अपने सर्वर प्रोजेक्ट फोल्डर की रूट डायरेक्टरी में एक नया फोल्डर बनाएं और उसे नाम दें मॉडल. इस फ़ोल्डर में एक नई फ़ाइल बनाएँ: dataSchema.js.

एक स्कीमा, इस मामले में, आपके डेटाबेस की तार्किक संरचना का प्रतिनिधित्व करता है। यह दस्तावेज़ों (रिकॉर्ड्स) और फ़ील्ड्स (गुणों) को परिभाषित करता है जो डेटाबेस के भीतर संग्रह बनाते हैं।

निम्नलिखित कोड को dataSchema.js में जोड़ें:

कॉन्स्ट नेवला = ज़रूरत होना(नेवला);
कॉन्स्ट ReactFormDataSchema = नया नेवला। स्कीमा({
 नाम: {
 प्रकार: डोरी,
 आवश्यक: सत्य
 },
 भूमिका: {
 प्रकार: डोरी,
 आवश्यक: सत्य
 }
});
कॉन्स्ट उपयोगकर्ता = नेवला.मॉडल ('उपयोगकर्ता', रिएक्टफॉर्मडेटास्केमा);
मापांक.निर्यात = उपयोगकर्ता;

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

एक्सप्रेस सर्वर सेट करें

अगला, खोलें index.js सर्वर प्रोजेक्ट फ़ोल्डर में फ़ाइल करें, और यह कोड जोड़ें:

कॉन्स्ट एक्सप्रेस = ज़रूरत होना('अभिव्यक्त करना');
कॉन्स्ट नेवला = ज़रूरत होना(नेवला);
कॉन्स्ट कॉर्स = ज़रूरत होना('कॉर्स');
कॉन्स्ट ऐप = एक्सप्रेस ();
कॉन्स्ट उपयोगकर्ता = ज़रूरत होना('./models/ReactDataSchema')
app.use (express.json ());
app.use (cors ());
नेवला.कनेक्ट ('मोंगोडब: // लोकलहोस्ट: 27017/रिएक्टडेटा', { NewUrlParser का उपयोग करें: सत्य });
ऐप पोस्ट ('/डालना', async(अनुरोध, रेस) => {
कॉन्स्ट फर्स्टनाम = req.body.firstName
कॉन्स्ट CompanyRole = req.body.companyRole
कॉन्स्ट फॉर्मडाटा = नया उपयोक्ता({
 नाम पहला नाम,
 भूमिका: कंपनीभूमिका
 })
कोशिश {
इंतजार फॉर्मडाटा.सेव ();
 पुनः भेजें ("डेटा डाला गया ..")
 } पकड़ना(गलती) {
सांत्वना देना.लॉग (त्रुटि)
 }
});
कॉन्स्ट बंदरगाह = प्रक्रिया.env। पोर्ट || 4000;
app.listen (बंदरगाह, () => {
सांत्वना देना।लकड़ी का लट्ठा(`पोर्ट पर सर्वर शुरू हुआ ${पोर्ट}`);
});

आइए इसे तोड़ दें:

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

अंत में, परिवर्तनों को अपडेट करने के लिए विकास सर्वर को स्पिन करें और अपने ब्राउज़र में अपने रिएक्ट क्लाइंट पर जाएं। प्रपत्र पर कोई भी डेटा टाइप करें, और MongoDB डेटाबेस पर परिणाम देखें।

एप्लिकेशन बनाने के लिए MERN स्टैक का उपयोग करना

MERN स्टैक अनुप्रयोगों के निर्माण के लिए एक कुशल और शक्तिशाली टूल सेट प्रदान करता है। आप MongoDB, Express, React, और Node.js का उपयोग करके पूरी तरह से वास्तविक दुनिया के एप्लिकेशन बना सकते हैं।

रिएक्ट इकोसिस्टम आपको वेब फॉर्म के साथ काम करने में मदद करने के लिए पैकेज भी प्रदान करता है। सबसे लोकप्रिय में से कुछ फॉर्मिक, केंडोरिएक्ट फॉर्म और रिएक्ट हुक फॉर्म हैं।