تم إعداد ترجمة للمقال قبل بدء دورة Python Web Developer .
المقدمة
الآن أعمل على مشروع مثير جدا للاهتمام. وكل شيء معقد فيه ، لأن المشروع نفسه واسع النطاق للغاية ، وأتعامل معه بمفردي في وقت فراغي ، بينما أعمل بدوام كامل. لذلك ، يجب أن أكون فعالاً. لحسن الحظ ، أنا أستخدم Django مع نهج "البطارية مشمول بها" .أستخدم جميع وظائف Django ، التي تسرع بالتنمية ، ولا أريد أن أغفل محرك القالب الخاص بها. لذلك ، فإن الواجهة الخلفية لـ Django والواجهة الأمامية لـ JavaScript SPA ليست خيارًا بالنسبة لي. ومع ذلك ، يجب أن يعترف حتى أكثر مطوري الواجهة الخلفية شغفًا ببعض الأشياء التي يجب تنفيذها على جانب العميل. يجب ألا تتطلب إجراءات المستخدم الثانوية إعادة تحميل الصفحة. بالإضافة إلى ذلك ، تتطلب بعض أجزاء تطبيق الويب التي أنشأتها تفاعل مستخدم معقدًا إلى حد ما.بالتقليد ، يمكن للمرء أن يخلط Django و jQuery للحصول على السلوك المطلوب. ولكن الآن هناك تقنيات JavaScript أحدث مثل React و Vue. نظرًا لأن هدفنا هو العثور على إطار عمل يمكننا استخدامه مع Django دون إعادة كتابة كل شيء من البداية ، فسوف نستخدم Vue كبديل أسهل. في هذه المقالة ، سأوضح لك كيفية البدء في استخدام Vue مع Django بأقل جهد.التثبيت والإعداد
أحد أسباب استخدام Vue هو توثيقه الممتاز . لديها العديد من الأمثلة ، بحث لائق وجدول محتويات واضح. الغرض من هذه المقالة هو إظهار أنه يمكنك البدء في استخدام Vue في مشاريع Django الخاصة بك على الفور بدون إعداد معقد لمدة ساعات. لذلك ، سنستخدم أبسط طريقة اتصال 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 نفس علامات القالب. لذلك ، نحتاج إلى فصل Vue بشكل واضح عن Django لتجنب التضارب مع محرك قالب Django.الوصول إلى بيانات Django من Vue
أسهل طريقة للحصول على البيانات هي استخدام عامل التصفية المدمج jscon_scriptمن Django . بهذه الطريقة ، يمكنك البدء فورًا في استخدام نماذج Django الخاصة بك كبيانات لحالات Vue.في 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 نفسها لا تعرف كيفية التعامل مع الطلبات. في هذه المقالة سأستخدم المحاوركما هو موصى به أيضًا من خلال وثائق Vue الرسمية. يمكنك اختيار بدائل أخرى. لتمرير آلية حماية Django CSRF ، يجب أن تتضمن المحاور ملف تعريف الارتباط المناسب في طلباتها. أسهل طريقة هي تعيين قيم المحاور العالمية افتراضيًا: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.post('/django/backend/endpoint', {
data: jsVariable
})
.then(function (response) {
// handle response
})
.catch(function (error) {
// handle error
});
يمكن إجراء هذه المكالمة من خلال mountedربط مثيل Vue أو من أي مكان آخر يمكنك وضع شفرة JavaScript فيه.إذا قمت بتنشيط CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLYDjango في الإعدادات ، فستحتاج إلى قراءة رمز CSRF المميز من DOM. لمعرفة المزيد عن هذا ، تحقق من وثائق Django الرسمية .استنتاج
عندما تبحث في google عن Django + Vue ، فإن معظم نتائج البحث ستكون حول كيفية استخدام Django على الواجهة الخلفية ، و Vue لمشروع منفصل على الواجهة الأمامية. إن وجود مشروعين مستقلين يعقد العمل ، وتفقد الوصول إلى نظام قالب Django ، والذي يعد بدوره وسيلة فعالة جدًا لتوفير الوقت. من ناحية أخرى ، فإن الوصول إلى إطار مثل Vue يمكن أن يفعل العجائب في عالم تطبيقات الويب التي تتجاوز وظائف CRUD.لحسن الحظ ، لسنا بحاجة للاختيار بينهما. يوضح هذا الدليل أنه يمكنك مواكبة اثنين من الأرانب!
توسيع قدرات Django (ندوة مجانية).