⏱️ ✌🏼 ⬛️ शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी। भाग 6. सर्वर इंटरैक्शन ⏫ 🏆 🖐🏻

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

सिक्स प्रोब्लम

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

निम्नलिखित कार्यों पर विचार करें:

एप्लिकेशन के सर्वर साइड को कनेक्ट करना;
सर्वर अनुरोध के तरीके;
डाउनलोड परिणाम को कैसे ट्रैक करें;
बचत के परिणाम को कैसे ट्रैक करें।

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

लेख के साथ काम करने के स्रोत यहां स्थित हैं ।

तैयार आवेदन यहां पाया जा सकता है ।

एप्लिकेशन के सर्वर साइड को कनेक्ट करना

यहाँ तालिका विजेट पर आधारित एक उदाहरण है। स्रोत संरचना ने अब एप्लिकेशन की संरचना बदल दी है। पहले, यह एक सामान्य index.html फ़ाइल थी जिसमें js फाइलें इससे जुड़ी थीं। अब दो फ़ोल्डर्स जोड़े गए हैं - बैकएंड नोडज और ऐप फ़ोल्डर पर एक सरल सर्वर स्क्रिप्ट के साथ, जहां सभी लिखित क्लाइंट कोड निहित हैं। प्रत्येक विजेट के लिए सर्वर संचालन अलग-अलग फ़ाइलों में वर्णित हैं। टेबल विजेट के लिए, यह फ़िल्मों की फ़ाइल है।

टेबल विजेट के लिए कोड ऐप फ़ोल्डर की टेबल.जेएस फ़ाइल में स्थित है और "डैशबोर्ड" टैब में प्रदान किया गया है।

सबसे पहले, एप्लिकेशन को स्थानीय सर्वर पर चलाएँ।

एप्लिकेशन के साथ फ़ोल्डर के लिए कमांड लाइन खोलें और क्रमिक रूप से निम्नलिखित कमांड दर्ज करें:

npm स्थापित
npm रन सर्वर

उसके बाद, टर्मिनल में निम्नलिखित प्रविष्टि दिखाई देगी:

सर्वर पोर्ट 3000 पर चल रहा है ... ब्राउज़र में स्थानीय होस्ट : 3000 / ऐप
खोलें

निर्दिष्ट पता / लिंक ब्राउज़र में खोला गया है।

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

करने के लिए , इसकी url संपत्ति में स्क्रिप्ट का पथ निर्दिष्ट करें।

url: "/samples/server/films"

सेव रिक्वेस्ट भेजने के लिए - सेव प्रॉपर्टी में स्क्रिप्ट की राह निर्दिष्ट है। पथ url की तरह ही होगा, केवल शेष उपसर्ग के साथ। हम नीचे आराम के बारे में बात करेंगे।

save:"rest->/samples/server/films"

क्वेरी विधियाँ निर्धारित करती हैं कि हम संसाधन के साथ क्या करना चाहते हैं। डिफ़ॉल्ट रूप से, Webix GET और POST विधियों का उपयोग करता है, लेकिन हम RESTful API और हमारे डेटा संचालन के लिए उपयुक्त सभी विधियों का उपयोग करेंगे: GET, POST, PUT और DELETE। शेष

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

विधि प्राप्त करें ।

हम पेज को रिफ्रेश करेंगे और स्क्रिप्ट रिक्वेस्ट पर क्लिक करेंगे films।

डिफ़ॉल्ट रूप से, इस अनुरोध में कोई पैरामीटर नहीं होगा, क्योंकि हम घटक में पहले डेटा लोडिंग के साथ काम कर रहे हैं।

परिणामस्वरूप, सर्वर सभी डेटा के साथ एक JSON सरणी देता है।

GET अनुरोध का परिणाम: POST पद्धति का

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

{ "id":"ImurRuK1k59qzy2f" }

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

डेटा को पंक्तियों में बदलने के लिए, PUT विधि का उपयोग किया जाता है ।

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

सर्वर प्रतिक्रिया में एक विशिष्ट स्थिति नहीं होनी चाहिए (एक खाली वस्तु भी उत्तर हो सकती है, जैसा कि नीचे दिखाया जाएगा), लेकिन हमारे मामले में सर्वर निम्नलिखित JSON को वापस कर देगा:

{ status: “updated” }

डेटा को हटाने के लिए , DELETE पद्धति का उपयोग करें ।

क्रॉस पर क्लिक करके पहली पंक्ति को हटाएं।

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

सर्वर एक खाली वस्तु लौटाएगा, क्योंकि इस तरह के ऑपरेशन की विशेष पुष्टि आवश्यक नहीं है।

ट्रैक डाउनलोड परिणाम

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

हैंडलर को बुलाया जाता है। हैंडलर के अंदर, हम फंक्शन को काउंट मेथड कहते हैं । इसे कॉल करने के बाद, स्क्रीन के ऊपरी दाएं कोने में एक संदेश दिखाई देगा ।webix.message()“Loaded 250 records!”

const table = {
// code the widget Table
    ready(){
        webix.message({
            text:`Loaded ${this.count()} records!`, 
            type:"success"
        });
    }
}

डेटा लोड करने का क्षण:

यदि डेटा लोड करने के दौरान कोई त्रुटि हुई है, तो onLoadError घटना में आग लग जाएगी :

$$("datatable").attachEvent("onLoadError", function(xhr){
    webix.message("Error!");
});

ट्रैकिंग परिणाम सहेजें

जोड़ने, संपादन और हटाने जैसे कार्यों से बचत करने पर आपको सर्वर की प्रतिक्रिया मिल सकती है। टेबल विजेट के उदाहरण पर विचार करें।

इसके लिए, सर्वर के साथ इंटरैक्ट करने के लिए डेटाप्रोसेसर मॉड्यूल का उपयोग किया जाता है। इस मॉड्यूल के एपीआई का उपयोग डाटा स्टोरेज को ट्यून करने के लिए किया जा सकता है। हमें केवल बचत के क्षण को ट्रैक करने की आवश्यकता है - इसलिए हम इसकी एक घटना का उपयोग करते हैं - onAfterSync ।

DataProcessor मॉड्यूल को सेटिंग द्वारा एक्सेस किया जाता है। webix.dp(id)

सर्वर से प्रतिक्रिया मिलने और संसाधित होने के बाद onAfterSync ईवेंट को उठाया जाता है। इस घटना के लिए, के माध्यम से एक संदेश प्रदर्शित करें webix.message()। सहेजने के बाद, संदेश - ऊपरी दाएं कोने में दिखाई देगा “Saved!”।

हम तालिका में पहली पंक्ति हटाते हैं और परिणाम को देखते हैं।

Webix आरंभीकरण के बाद script.js फ़ाइल में घटना कोड:

let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
    webix.message({
        text:"Saved!",
        type:"success"
    })
});

इस मामले में त्रुटियों को onAfterSaveError घटना के साथ पकड़ा जा सकता है :

dp.attachEvent("onAfterSaveError", function(id, status, response, details){
    webix.message("Error!");
});

सामान्यकरण

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

तैयार आवेदन का कोड यहां पाया जा सकता है ।

शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी। भाग 6. सर्वर इंटरैक्शन

सिक्स प्रोब्लम

एप्लिकेशन के सर्वर साइड को कनेक्ट करना

ट्रैक डाउनलोड परिणाम

ट्रैकिंग परिणाम सहेजें

सामान्यकरण

More articles: