एमवीसी आर्किटेक्चर का परिचय: उदाहरण समझाया गया

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

एमवीसी आर्किटेक्चर पत्र के लिए चिंताओं के सिद्धांत को अलग करने का पालन करता है। वास्तव में, MVC के संक्षिप्त रूप में प्रत्येक अक्षर आपके आवेदन के एक अनिवार्य भाग का प्रतिनिधित्व करता है। यह आलेख MVC आर्किटेक्चर के प्रत्येक अनुभाग की विस्तार से पड़ताल करता है और आपको दिखाता है कि सॉफ़्टवेयर विकसित करने के लिए उनका उपयोग कैसे किया जाए।

मॉडल क्या है?

MVC आर्किटेक्चर का मॉडल डिजाइन पैटर्न का एक प्रमुख घटक है। ऐसा इसलिए है क्योंकि आपके एप्लिकेशन का मॉडल डेटा लॉजिक को स्टोर करता है। मॉडल तय करता है कि आप अपने डेटा को कैसे स्टोर और पुनर्प्राप्त करते हैं।

MVC कंट्रोलर आर्किटेक्चर का उपयोग करने वाले एप्लिकेशन के लिए, डेटा इसके संचालन का एक अनिवार्य घटक है।

दृश्य क्या है?

MVC आर्किटेक्चर का दृश्य आपके एप्लिकेशन का यूजर इंटरफेस (UI) है। UI वह है जो एक उपयोगकर्ता अपने डिवाइस पर देखता है जब वे आपके प्रोग्राम के साथ इंटरैक्ट करते हैं। दृश्य की स्थिति मॉडल का उपयोग करके संग्रहीत डेटा पर निर्भर करती है।

नियंत्रक क्या है?

आप नियंत्रक को मॉडल और दृश्य घटकों के बीच एक सेतु के रूप में सोच सकते हैं।

जब कोई उपयोगकर्ता आपके उपयोगकर्ता इंटरफ़ेस (दृश्य) के माध्यम से डेटा की आपूर्ति करता है, तो दृश्य उस डेटा को नियंत्रक को भेजता है। नियंत्रक उस डेटा का उपयोग डेटाबेस (मॉडल के माध्यम से) को अद्यतन करने के लिए करता है। नियंत्रक डेटाबेस से (मॉडल के माध्यम से) डेटा भी खींचता है और इसे दृश्य में लौटाता है।

डेटा चैनल होने के अलावा, नियंत्रक ऑपरेशन का दिमाग भी है। यह तय करता है कि किस डेटा पर कौन सा ऑपरेशन करना है, और कौन सा डेटा UI पर वापस आना है।

यह सब एक साथ कैसे आता है?

MVC आर्किटेक्चर एक अर्ध-बंद लूप बनाता है जो पर्याप्त रूप से कार्य करने के लिए सभी घटकों पर निर्भर करता है। निम्नलिखित उदाहरण दर्शाता है कि MVC आर्किटेक्चर कैसे संचालित होता है।

जैसा कि आप ऊपर दिए गए उदाहरण से देख सकते हैं, MVC एप्लिकेशन को UI के माध्यम से उपयोगकर्ता से डेटा का प्रारंभिक इनपुट प्राप्त होता है। फिर एप्लिकेशन उस डेटा को एमवीसी आर्किटेक्चर के विभिन्न घटकों के माध्यम से पास करता है, और कुछ उदाहरणों में, उस डेटा को नियंत्रक घटक में हेरफेर करता है।

MVC आर्किटेक्चर लागू करना

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

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

एप्लिकेशन मॉडल बनाना

// जावा लाइब्रेरी
आयात java.io. सीरियल करने योग्य;
जनताकक्षा गैस मूल्य मॉडल औजार सीरियल करने योग्य{
 //attributes
निजीस्थिरअंतिमलंबासीरियलवर्जनयूआईडी = 1 एल;
निजी स्ट्रिंग ड्राइवरनाम;
निजीपानी पर तैरना गैस राशि;
निजी स्ट्रिंग गैस प्रकार;
निजीपानी पर तैरना लागत;
// डिफ़ॉल्ट कंस्ट्रक्टर
जनता गैसप्राइसमॉडल () {
यहड्राइवरनाम = "";
यह.gasAmount = 0.00f;
यह.गैस टाइप = "";
यहलागत = 0.00f;
 }
 // प्राथमिक निर्माणकर्ता
जनता GasPriceModel (स्ट्रिंग ड्राइवर का नाम, पानी पर तैरना गैसअमाउंट, स्ट्रिंग गैस टाइप, पानी पर तैरना लागत) {
यहड्राइवर का नाम = ड्राइवर का नाम;
यह.gasAmount = गैसअमाउंट;
यहगैस टाइप = गैस टाइप;
यहलागत = लागत;
 }
 // गेटर्स और सेटर्स जो डेटा को पुनः प्राप्त और हेरफेर करते हैं
जनता स्ट्रिंग getDriverName () {
वापसी चालक का नाम;
 }
जनताशून्य सेटड्राइवरनाम (स्ट्रिंग ड्राइवरनाम) {
यहड्राइवर का नाम = ड्राइवर का नाम;
 }
जनतापानी पर तैरना गेटगैसअमाउंट () {
वापसी गैस राशि;
 }
जनताशून्य सेटगैसअमाउंट(पानी पर तैरना गैसअमाउंट) {
यह.gasAmount = गैसअमाउंट;
 }
जनता स्ट्रिंग गेटगैस टाइप () {
वापसी गैस प्रकार;
 }
जनताशून्य सेटगैस टाइप (स्ट्रिंग गैस टाइप) {
यहगैस टाइप = गैस टाइप;
 }
जनतापानी पर तैरना गेटकॉस्ट () {
वापसी लागत;
 }
जनताशून्य निर्धारित लागत (पानी पर तैरना लागत) {
यहलागत = लागत;
 }
}

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

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

एप्लिकेशन नियंत्रक बनाना

// जावा पुस्तकालय
आयात java.io. फ़ाइल;
आयात java.io. फ़ाइल नॉटफाउंड अपवाद;
आयात java.io. फ़ाइलऑटपुटस्ट्रीम;
आयात java.io. आईओएक्सप्शन;
आयात java.io. ऑब्जेक्टऑटपुटस्ट्रीम;
जनताकक्षा गैसप्राइस नियंत्रक {
 // ग्राहक की गैस की लागत की गणना करता है और उसे लौटाता है
जनतापानी पर तैरना गणना लागत (पानी पर तैरना राशि, स्ट्रिंग गैस टाइप) {
पानी पर तैरना लागत = 0.00f;
अंतिमपानी पर तैरना डीजलप्राइस = 4.925f;
अंतिमपानी पर तैरना प्रीमियमप्राइस = 5.002f;
अंतिमपानी पर तैरना नियमित मूल्य = 4.680f;
अगर (गैस टाइप == "डीजल")
 लागत = राशि * डीजल मूल्य;
अगर (गैस टाइप == "प्रीमियम")
 लागत = राशि * प्रीमियम मूल्य;
अगर (गैस टाइप == "नियमित")
 लागत = राशि * नियमित मूल्य;
वापसी लागत;
 }
// मॉडल का उपयोग करके प्रत्येक बिक्री से डेटा को फ़ाइल में सहेजता है
जनताबूलियन saveEntry (GasPriceModel डेटा) {
कोशिश करो {
फाइलऑटपुटस्ट्रीम एफएस = नया फ़ाइलऑटपुटस्ट्रीम(नया फ़ाइल ("डेटा। डेटा"), सच);
 ऑब्जेक्टऑटपुटस्ट्रीम ओएस = नया ऑब्जेक्टऑटपुटस्ट्रीम (एफएस);
 os.writeObject (डेटा);
 ओएस फ्लश ();
 ओएस बंद ();
वापसीसच;
 } पकड़ (फाइल नॉटफाउंड अपवाद ई) {
 ई.प्रिंटस्टैकट्रेस ();
 } पकड़ (आईओएक्सप्शन ई) {
 ई.प्रिंटस्टैकट्रेस ();
 }
वापसीअसत्य;
 }
}

उपरोक्त नियंत्रक दो चीजें करता है, यह दृश्य से प्राप्त डेटा पर गणना करता है, और यह तय करता है कि कौन सा डेटा वापस करना है। उपरोक्त नियंत्रक, दृश्य इनपुट से बनाई गई वस्तुओं को संग्रहीत करने के लिए एप्लिकेशन मॉडल का भी उपयोग करता है सेवएंट्री () तरीका।

एप्लिकेशन व्यू बनाना

// जावा पुस्तकालय
आयात java.awt. सीमा लेआउट;
आयात java.awt. जाली का नक्शा;
आयात java.awt.event. एक्शनइवेंट;
आयात java.awt.event. एक्शन लिस्टनर;
आयात javax.swing. जेबटन;
आयात javax.swing. जेकॉम्बोबॉक्स;
आयात javax.swing. जेफ्रेम;
आयात javax.swing. जेलेबेल;
आयात javax.swing. जॉप्शनपेन;
आयात javax.swing. जेपीनेल;
आयात javax.swing. जेटीटेक्स्टफिल्ड;
पब्लिक क्लास GasPriceView JFrame का विस्तार करता है ActionListener को लागू करता है {
//attributes
 निजी स्थिर अंतिम लंबा सीरियलवर्जनयूआईडी = 1 एल;
 निजी गैसप्राइस नियंत्रक नियंत्रक;
 निजी जेएलएबल ड्राइवरनाम;
 निजी JTextField नाम फ़ील्ड;
 निजी जेएलएबल गैसअमाउंट;
 निजी JTextField राशि फ़ील्ड;
 निजी जेएलएबल गैस टाइप;
 निजी JComboBox कॉम्बो टाइप करें;
 निजी जेबटन बीटीएन साफ़ करें;
 निजी जेबटन बीटीएनसेव;
 निजी स्थिर अंतिम स्ट्रिंग [] प्रकार =
 {"डीजल", "प्रीमियम", "नियमित"};
// डिफ़ॉल्ट कंस्ट्रक्टर
 सार्वजनिक गैसप्राइस व्यू () {
 यह (नया GasPriceController ());
 }
// प्राथमिक कंस्ट्रक्टर जो UI का कारण बनता है
 सार्वजनिक GasPriceView (GasPriceController नियंत्रक) {
सुपर ("गैस बिक्री आवेदन");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 सेटसाइज (400,500);
 सेटविजिबल (सच);
यह नियंत्रक = नियंत्रक;
कॉन्फ़िगर व्यू ();
 }
// एप्लिकेशन के लिए UI जनरेट करें
 निजी शून्य कॉन्फ़िगर करें () {
सेटलेआउट (नया बॉर्डरलाउट ());
 जेपीनल पीएनएल = नया जेपीनल (नया ग्रिडलाउट (4,2,2,2));
ड्राइवर का नाम = नया जेएलएबल ("चालक का नाम:");
 pnl.add (ड्राइवरनाम);
 नाम फ़ील्ड = नया JTextField ();
 pnl.add (नाम फ़ील्ड);
 गैसअमाउंट = नया जेएलएबल ("गैस राशि (गैलन):");
 pnl.add (गैसअमाउंट);
 राशि फ़ील्ड = नया JTextField ();
 pnl.add (राशि फ़ील्ड);
 गैस टाइप = नया जेएलएबल ("गैस प्रकार:");
 pnl.add (गैस टाइप);
 टाइपकॉम्बो = नया JComboBox(प्रकार);
 pnl.add (टाइपकॉम्बो);
 btnClear = नया जेबटन ("साफ़ करें");
 pnl.add (btnClear);
 btnSave = नया जेबटन ("सहेजें");
 pnl.add (btnSave);
जोड़ें (पीएनएल, बॉर्डरलाउट. केंद्र);
एक्शन लिस्टनर ();
}
 // दो बटनों में से एक के क्लिक के लिए सुनता है
 सार्वजनिक शून्य एक्शन लिस्टनर () {
 btnClear.addActionListener (यह);
btnSave.addActionListener (यह);
 }
// यदि कोई विशिष्ट बटन क्लिक किया जाता है तो एक क्रिया करता है
 @ ओवरराइड
 सार्वजनिक शून्य कार्रवाई की गई (एक्शनइवेंट ev) {
अगर (ev.getSource ()। बराबर (btnClear)) {
 nameField.setText ("");
 राशिफिल्ड.सेटटेक्स्ट ("");
 }
अगर (ev.getSource ()। बराबर (btnSave)) {
स्ट्रिंग गैस टाइप = (स्ट्रिंग) typeCombo.getSelectedItem ();
 फ्लोट गैसअमाउंट = फ्लोट.पार्सफ्लोट (amountField.getText ());
 फ्लोट ड्राइवर टोटल = कंट्रोलर.कैलकुलेटकॉस्ट (गैसअमाउंट, गैस टाइप);
 स्ट्रिंग ड्राइवरनाम = nameField.getText ();
 JOptionPane.showMessageDialog (शून्य, ड्राइवरनाम +" को $" + DriverTotal का भुगतान करना चाहिए);
GasPriceModel ग्राहक = नया GasPriceModel (driverName, gasAmount, GasType, DriverTotal);
controler.saveEntry (ग्राहक);
 }
}
}

उपरोक्त दृश्य का उपयोग करके एक यूजर इंटरफेस बनाता है कॉन्फिगर व्यू () तरीका। यह तब एक घटना होने के बाद डेटा एकत्र करता है (एक क्रिया श्रोता के माध्यम से)। ऊपर का दृश्य तब एकत्रित डेटा को नियंत्रक को भेजता है, जो तब कुछ गणना करता है और डेटा को दृश्य में लौटाता है।

एमवीसी अनुप्रयोग निष्पादित करना

आयात java.awt. घटना कतार;
जनताकक्षा अनुप्रयोग {
जनतास्थिरशून्य मुख्य (स्ट्रिंग आर्ग []) {
 घटना कतार।बाद में आह्वान करें(
नया चलने योग्य () {
@ ओवरराइड
जनताशून्य दौड़ना() { 
 गैसप्राइस नियंत्रक नियंत्रक = नया गैसप्राइस नियंत्रक (); 
नया GasPriceView (नियंत्रक); 
 }
 });
 }
}

निष्पादित करना अनुप्रयोग उपरोक्त वर्ग निम्नलिखित UI उत्पन्न करेगा:

प्रासंगिक डेटा के साथ UI को पॉप्युलेट करने से निम्न पॉपअप UI जनरेट होगा:

यदि आप ऊपर की छवि के बाईं ओर देखते हैं, तो आप देखेंगे कि एप्लिकेशन ने एक नई फ़ाइल भी बनाई है जिसे कहा जाता है "डेटा.डेट।" तो, यह एमवीसी एप्लिकेशन यूआई (व्यू) के माध्यम से उपयोगकर्ता से डेटा एकत्र करता है, जो उस डेटा को भेजता है नियंत्रक। नियंत्रक कुछ गणना करके डेटा में हेरफेर करता है, फिर वह उस डेटा को मॉडल का उपयोग करके फ़ाइल में संग्रहीत करता है। सम्बंधित: जावा इनपुट और आउटपुट: एक शुरुआती गाइड

जावा इनपुट और आउटपुट: एक शुरुआती गाइड

यदि आप इस लेख में बनाए गए एप्लिकेशन पर करीब से नज़र डालते हैं, तो कई स्पष्ट लाभ हैं। इनमें से कुछ लाभों में शामिल हैं:

• अनुमापकता
• आसान कोड परीक्षण
• अधिक संक्षिप्त कोड का निर्माण

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

डिज़ाइन पैटर्न का उपयोग करके जावास्क्रिप्ट में पुन: प्रयोज्य कोड कैसे बनाएं

डिज़ाइन पैटर्न का उपयोग करने के तरीके को समझना आपको जावास्क्रिप्ट में पुन: प्रयोज्य कोड का उपयोग करने में सक्षम करेगा। यहां आपको जानने की जरूरत है।

आगे पढ़िए

लेखक के बारे में