🧑🏾 👶 💤 Django के साथ VueJS का उपयोग करना ✋🏻 🎰 💇🏻

पायथन वेब डेवलपर पाठ्यक्रम की शुरुआत से पहले लेख का अनुवाद तैयार किया गया था ।

परिचय

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

मैं Django की सभी कार्यक्षमता का उपयोग करता हूं, जो विकास को गति देता है, और मैं इसके टेम्पलेट इंजन की दृष्टि खोना नहीं चाहूंगा। इसलिए, Django के लिए बैकएंड और जावास्क्रिप्ट स्पा के लिए दृश्यपटल मेरे लिए एक विकल्प नहीं है। हालांकि, यहां तक कि सबसे अधिक शौकीन चावला बैकएंड डेवलपर को यह स्वीकार करना होगा कि क्लाइंट की ओर से कुछ चीजों को लागू करने की आवश्यकता है। मामूली उपयोगकर्ता क्रियाओं के लिए पृष्ठ पुनः लोड करने की आवश्यकता नहीं होनी चाहिए। इसके अलावा, वेब एप्लिकेशन के कुछ हिस्से जो मैं बनाता हूं उन्हें एक जटिल उपयोगकर्ता सहभागिता की आवश्यकता होती है।

परंपरा के अनुसार, व्यक्ति व्यवहार को पाने के लिए Django और jQuery को मिला सकता है। लेकिन अब रिएक्ट और वीयू जैसी नई जावास्क्रिप्ट तकनीकें हैं। चूँकि हमारा लक्ष्य एक ऐसा ढाँचा खोजना है जिसे हम Django के साथ खरोंच से सब कुछ फिर से लिखने के बिना उपयोग कर सकते हैं, हम एक आसान विकल्प के रूप में Vue का उपयोग करेंगे। इस लेख में, मैं आपको दिखाऊंगा कि कैसे न्यूनतम प्रयास के साथ Django के साथ Vue का उपयोग करना शुरू करें।

स्थापना और सेटअप

Vue का उपयोग करने के कारणों में से एक इसका उत्कृष्ट दस्तावेज है । इसके कई उदाहरण हैं, एक अच्छी खोज और सामग्री की एक स्पष्ट तालिका। इस लेख का उद्देश्य यह दिखाना है कि आप अपने Django प्रोजेक्ट्स में Vue का उपयोग करना शुरू कर सकते हैं, बिना जटिल घंटों के सेटअप के। इसलिए, हम सरलतम कनेक्शन विधि का उपयोग करेंगे Vue.js, इसे टैग के माध्यम से जोड़ेंगे <script>।

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

अब हम अपना पहला उदाहरण बनाने के लिए तैयार हैं Vue.js:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

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

Vue से Django डेटा तक पहुँचें

सबसे आसान तरीका है डेटा प्राप्त करने में निर्मित फिल्टर का उपयोग करने के लिए है jscon_scriptसे Django । इस तरह, आप तुरंत Vue उदाहरणों के डेटा के रूप में अपने Django मॉडल का उपयोग शुरू कर सकते हैं।

HTML में:

{{ django_template_variable|json_script:"djangoData" }}

और फिर जावास्क्रिप्ट में हम डेटा को एक चर में लोड करते हैं:

let jsVariable = JSON.parse(document.getElementById('djangoData').textContent);

और वह Vue के साथ उपयोग के लिए तैयार है:

new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: jsVariable
})

बैकएंड पर अतुल्यकालिक अनुरोध चला रहा है

Vue के सामने के छोर पर सबसे आम कार्यों में से एक है बैकएंड पर सर्वर एप्लिकेशन को क्वेरी करना। एक पूर्ण Django ऐप के साथ, हमें प्रत्येक उपयोगकर्ता कार्रवाई के साथ ऐसा करने की आवश्यकता नहीं है। कुछ मामलों में, एक पूर्ण पृष्ठ रीलोड महान है, और Django टेम्पलेट सिस्टम सभी लाभ प्रदान करेगा। लेकिन उपयोगकर्ता अनुभव को बेहतर बनाने और Vue का पूरा लाभ उठाने के लिए, हमें अभी भी कुछ मामलों में बैकएंड अनुरोध करने की आवश्यकता हो सकती है।

Vue खुद नहीं जानता कि अनुरोधों को कैसे संभालना है। इस लेख में मैं axios का उपयोग करूँगाजैसा कि यह आधिकारिक Vue प्रलेखन द्वारा भी अनुशंसित है। आप अन्य विकल्प चुन सकते हैं। Django के CSRF सुरक्षा तंत्र को पारित करने के लिए, axios को अपने अनुरोधों में उपयुक्त कुकी को शामिल करना होगा। सबसे आसान तरीका डिफ़ॉल्ट रूप से वैश्विक अक्षीय मान सेट करना है:

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";

इसके अलावा, हम आवश्यक सेटिंग्स के साथ एक अक्षीय उदाहरण बना सकते हैं:

var instance = axios.create({
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: "X-CSRFTOKEN",
});

आपके Django टेम्पलेट में एक टैग होना चाहिए {% csrf_token %}या, वैकल्पिक रूप से, संबंधित दृश्य को एक डेकोरेटर का उपयोग करना चाहिए ensure_csrf_cookie()। प्रमाणीकरण के लिए एक Django सत्र के लिए डिफ़ॉल्ट बैकएंड के बाकी बॉक्स से बाहर काम करेंगे, जिसका अर्थ है कि आप loginRequiredइस तरह की चीजों के साथ बैकएंड पर अपनी सेवाओं की व्याख्या कर सकते हैं और यह बस काम करेगा। अनुरोध करने के लिए, आप axios का उपयोग कर सकते हैं:

axios.post('/django/backend/endpoint', {
    data: jsVariable 
})
    .then(function (response) {
        // handle response
    })
    .catch(function (error) {
        // handle error
    });

यह कॉल mountedVue उदाहरण के हुक से या किसी अन्य स्थान से किया जा सकता है जहाँ आप जावास्क्रिप्ट कोड डाल सकते हैं।

यदि आपने CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLYसेटिंग्स में Django को सक्रिय किया है, तो आपको DOM से CSRF टोकन पढ़ना होगा। इस बारे में अधिक जानने के लिए, आधिकारिक Django प्रलेखन देखें ।

निष्कर्ष

जब आप Django + Vue के बारे में गूगल करते हैं, तो अधिकांश खोज परिणाम बैकेंड पर Django का उपयोग करने के तरीके के बारे में होंगे, और दृश्यपटल पर एक अलग परियोजना के लिए Vue। दो स्वतंत्र प्रोजेक्ट होने से काम जटिल हो जाता है, और आप Django टेम्पलेट सिस्टम तक पहुंच खो देते हैं, जो समय बचाने के लिए एक बहुत प्रभावी तरीका है। दूसरी ओर, वीयू जैसे ढांचे तक पहुंच वेब अनुप्रयोगों की दुनिया में चमत्कार कर सकती है जो सीआरयूडी कार्यक्षमता से परे हैं।

सौभाग्य से, हमें उनके बीच चयन करने की आवश्यकता नहीं है। यह गाइड दर्शाता है कि आप दो खरगोशों के साथ अच्छी तरह से रख सकते हैं!

Django (मुफ्त वेबिनार) की क्षमताओं का विस्तार ।

Django के साथ VueJS का उपयोग करना

परिचय

स्थापना और सेटअप

Vue से Django डेटा तक पहुँचें

बैकएंड पर अतुल्यकालिक अनुरोध चला रहा है

निष्कर्ष

More articles: