الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

جانب الخادم ميت! يعيش جانب الخادم (+ HTMX)

يحتوي هذا المستودع على نموذج التعليمات البرمجية والشرائح الخاصة بالمحادثة "لقد مات جانب الخادم! يعيش جانب الخادم (+ HTMX)"، المقدم في DjangoCon US 2021 ثم (تم تعديله) لـ Code Code Code في ديسمبر من عام 2021.

محتويات

  • أمثلة

    • وظيفة البريد الوارد للرسائل (القراءة/الأرشفة)

    • إعدادات بنقرة واحدة

    • نماذج متعددة في علامات تبويب متعددة

    • النوافذ المنبثقة البطيئة للبيانات

  • الشرائح

  • فيديو

  • موارد

أمثلة

فيما يلي لقطات شاشة للأمثلة التي أتحدث عنها، والانتقال من قوالب Django البسيطة (بالإضافة إلى القليل من ajax في مثال settings )، إلى Django + HTMX. يحتوي مجلد examples على مشروع Django مع كل من هذه الأمثلة.

ضع في اعتبارك أن هذه الأمثلة قد تم تجريدها إلى الحد الأدنى المطلق من أجل جعل المفاهيم التي أناقشها في الحديث واضحة قدر الإمكان، وبالتالي فإن الأمثلة لا تأخذ في الاعتبار أفضل الممارسات الأمنية. على سبيل المثال، في مثال settings ، قد ترغب في تزيين العرض باستخدام @login_required .

يتضمن المثال تجهيزات للتشغيل السريع. بعد الترحيل وتحميل التركيبات وبدء تشغيل خادم التشغيل، قم بتسجيل الدخول إلى admin (http://127.0.0.1:8000/admin/) باستخدام pass user الخاص ببيانات الاعتماد، ثم انتقل إلى الصفحة الرئيسية (http://127.0.0.1:8000/) .

المراسلة

كيف يمكنك إضافة إمكانية النقر على أيقونة لأرشفة الرسائل، دون الحاجة إلى تحديث الصفحة بأكملها لرؤية التغييرات؟ هنا مثال.

إعدادات

في هذا المثال، نسمح للمستخدم الحالي بتغيير إعداداته عبر مجموعة من مربعات الاختيار (التي تتعلق بحقول BooleanField في قاعدة البيانات) دون تحديث الصفحة. ويحصلون أيضًا على تنبيه مؤقت بالتحديث.

علامات التبويب مع النماذج

يقدم هذا المثال حالة استخدام حيث تكون هناك حاجة إلى نماذج متعددة على صفحة ويب واحدة، كل منها مخفي داخل علامة التبويب الخاصة به. نحن نستخدم HTMLX لتحميل محتويات كل علامة تبويب عند الحاجة فقط ولإرسال كل نموذج دون الحاجة إلى تحديث الصفحة.

خرائط مع Popovers البيانات كسول

يقدم هذا المثال حالة استخدام حيث تستخدم الخريطة الغنية بالبيانات (أو قاعدة البيانات، وما إلى ذلك) العناصر المنبثقة مع معلومات إضافية. بدلاً من تحميل كل محتوى العنصر المنبثق عند تحميل الصفحة، يمكننا تحميل محتويات العنصر المنبثق بتكاسل عندما ينقر المستخدم على ميزة الخريطة.

مشروع مظاهرة

يتم تقديم مشروع توضيحي مع كل نمط تمت مناقشته في المحادثة.

  1. قم بتثبيت المتطلبات pip install -r requirements.txt

  2. ترحيل python manage.py migrate

  3. تثبيت التركيبات python manage.py loaddata fixtures.json

  4. قم بتشغيل الخادم python manage.py runserver

  5. قم بتسجيل الدخول إلى المشرف http://127.0.0.1:8000/admin/ باستخدام بيانات الاعتماد: user pass

  6. انتقل إلى الصفحة الرئيسية http://127.0.0.1:8000/ واستخدم خيارات التنقل لتجربة العروض التوضيحية المتنوعة. تلميح: افتح جزء أدوات التطوير في متصفحك.

الشرائح

الشرائح متوفرة في مجلد الوسائط. يمكنك الوصول إليهم مباشرة هنا:

  • قم بتنزيل ملف العرض التقديمي OpenDocument

  • عرض ملف العرض التقديمي OpenDocument Flat XML

فيديو

فيديو على قائمة تشغيل YouTube DjangoConUS 2021 فيديو على قائمة تشغيل Code Code Code على YouTube

موارد

المصادر المذكورة في الحديث:

  • htmx.org - موقع أمثلة ومراجع وموارد إضافية لـ HTML.

  • django-htmx - حزمة django الخاصة بآدم جونسون مع أدوات مساعدة مفيدة لتسهيل عملية دمج Django وHTMX.

  • Awesome-htmx - روابط للمحادثات ومنشورات المدونات والأمثلة وأشياء أخرى متعلقة بـHTMX.

  • HTMX Discord - مجلس مجتمع نشط للغاية لمناقشة HTMX وDjango + HTMX.

  • r/htmx على رديت

  • HTMLX على جيثب

  • _hyperscript - مكتبة جافا سكريبت تأملية مصممة للعمل جنبًا إلى جنب مع HTML. يبسط كتابة معالجات الأحداث وتطوير واجهات مستخدم عالية الاستجابة.

  • Alpine.js - مكتبة جافا سكريبت خفيفة الوزن لتأليف السلوك مباشرة في الترميز الخاص بك والتي تعمل بشكل جيد مع HTMX.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل