كيفية إنشاء صفحات ويب ديناميكية باستخدام قالب Jinja في FastAPI

يتيح لك دمج Jinja مع FastAPI إنشاء صفحات ويب ديناميكية تمزج لغة Python بسلاسة كود مع HTML ، مما يسمح لك بفصل طبقة العرض التقديمي للتطبيق الخاص بك عن المنطق طبقة. باستخدام صفحات الويب الديناميكية ، يمكنك إنشاء محتوى مخصص وقائم على البيانات ، مما يعزز تجارب المستخدم.

ما هو جينجا؟

Jinja هو محرك قالب قوي وغني بالميزات لبايثون يقوم بإنشاء صفحات ويب ديناميكية. يدعم Jinja Templating الوراثة والجمل الشرطية والحلقات والميزات المختلفة التي تبسط إنشاء صفحات الويب الديناميكية.

يمكنك الجمع بين FastAPI و Jinja لإنشاء صفحات ويب ذات تخطيط متناسق يمكنه عرض البيانات في الوقت الفعلي والتعامل مع إدخال المستخدم. يمكنك أيضًا تحقيق فصل الاهتمامات، مما يجعل شفرتك أكثر قابلية للصيانة وأسهل في الفهم.

قم بإعداد مشروع FastAPI

للبدء ، ستحتاج إلى إعداد مشروع FastAPI.

1. إنشاء وتفعيل بيئة افتراضية باستخدام هذه الأوامر الطرفية:

   python -m venv env
   # في نظام التشغيل Unix / MacOS: 
   مصدر venv / بن / تفعيل
   # على نظام Windows:
   . \ venv \ Scripts \ تفعيل
   

2. قم بتثبيت FastAPI والتبعيات المطلوبة.

   تثبيت نقطة "fastapi [الكل]"
   

instagram viewer
3. إنشاء دليل المشروع مدونتي.
4. قم بإنشاء ملف بايثون main.py في دليل مشروعك.
5. أضف التعليمات البرمجية التالية إلى ملف main.py ملف:

   من fastapi يستورد FastAPI
   fake_posts_db = [{
   'عنوان': "أول منشور مدونة",
   'محتوى': "محتوى منشور المدونة الأول".,
   'مؤلف': 'فلان الفلاني',
   'تاريخ النشر': '2023-06-20',
   'تعليقات': [
    {'مؤلف': "أليس", 'محتوى': 'ملصق ممتاز!'},
    {'مؤلف': "بوب", 'محتوى': "قراءة ممتعة."}
    ],
   'حالة': 'نشرت'
   },{
   'عنوان': "منشور المدونة الثاني",
   'محتوى': "محتوى منشور المدونة الثاني".,
   'مؤلف': 'جين سميث',
   'تاريخ النشر': لا أحد,
   'تعليقات': [],
   'حالة': 'مسودة'
   }]
   التطبيق = FastAPI ()
   @ app.get ("/ about")
   defعن():
   يعود"كل ما تريد معرفته عن Simple Blog"

   يُنشئ الرمز أعلاه تطبيق FastAPI بسيطًا بنقطة نهاية واحدة تعرض استجابة JSON عند الوصول إليها عبر عنوان URL المقابل. أنت تستطيع استخدم قاموس بايثون مثل هذا بدلاً من قاعدة بيانات فعلية ؛ يساعد في تقليل التعقيد مع التركيز على الهدف الأساسي.
6. قم بتشغيل الخادم.

   uvicorn main: التطبيق - إعادة تحميل
   

يزور http://localhost: 8000 / حوالي في متصفحك لمعرفة استجابة الخادم.

دمج قالب Jinja

بعد إعداد مشروعك بنجاح ، يمكنك الآن إضافة قالب Jinja إليه.

1. في ال main.py ملف ، قم باستيراد الوحدات التالية:

   من fastapi.templating يستورد جينجا 2 القوالب
   من fastapi.staticfiles. الملفات يستورد ملفات ثابتة
   

2. تحت ال برنامج متغيرًا ، فقم بإنشاء مثيل لـ جينجا 2 القوالب class وتمرير الدليل الذي سيحتوي على القوالب الخاصة بك.

   القوالب = Jinja2Templates (الدليل ="قوالب")
   

3. بعد القوالب متغير ، أضف السطر التالي من التعليمات البرمجية:

   app.mount ("/ثابتة"، StaticFiles (الدليل ="ثابتة") ، الاسم ="ثابتة")
   

   الكود أعلاه يتصاعد ثابتة الدليل ويوجه FastAPI لخدمة أي ملفات ثابتة موجودة في الدليل عندما يبدأ عنوان URL للطلب بـ /static.
4. في مدونتي دليل إنشاء دليلين ، القوالب لعقد ملفات HTML و ثابتة والتي ستحتوي على جميع الملفات الثابتة.

مع اكتمال هذه الخطوات ، نجحت في دمج قالب Jinja مع مشروعك.

إنشاء صفحة ويب ديناميكية باستخدام Jinja

يوفر Jinja مجموعة غنية من البنية والميزات لإنشاء قوالب ديناميكية.

في هذا القسم ، سترى كيفية استخدام بناء جملة Jinja Templating لإنشاء صفحات ويب ديناميكية.

قم بإرفاق علامات النموذج بامتداد قوس مجعد و رمز النسبة المئوية على كلا الجانبين. يمكنك استخدام هذه العلامات لأداء عمليات التحكم في التدفق والمنطق في القالب. تتضمن بعض علامات النماذج الشائعة الاستخدام ما يلي:

• حالة: تشغيل كتلة التعليمات البرمجية إذا كان الشرط صحيحًا.

  {% لو الحالة٪}... {٪ endif٪}
  

• حلقة: يتكرر عبر عنصر متكرر ويقوم بتشغيل كتلة التعليمات البرمجية لكل عنصر.

  {% ل غرض في قابل للتكرار٪}... {٪ endfor٪}
  

• يشمل: يتضمن نموذجًا آخر داخل القالب الحالي.

  {٪ يشمل "template_name.html" %}
  

• حاجز: يحدد الكتلة التي يمكن للقوالب الفرعية تجاوزها باستخدام الوراثة.

  {٪ block_name٪}... {٪ endblock٪}
  

• يمتد: يسمح للقالب الفرعي بوراثة القالب الأصلي وتوسيعه.

  {٪ extension parent_temp.html٪}
  

توفر هذه العلامات طريقة مرنة ومعبرة لإنشاء محتوى HTML استنادًا إلى البيانات الديناميكية والتحكم في منطق التطبيق الخاص بك.

وراثة النموذج

Jinja Templating يدعم وراثة القالب. يتيح لك هذا تحديد قالب أساسي (أصلي) بتخطيط مشترك وأقسام يمكن للقالب الفرعي توسيعها أو تجاوزها. يمكن للقالب الفرعي استخدام ملف يمتد علامة لوراثة القالب الأصلي وتوسيعه.

إنشاء base.html ملف في القوالب دليل مع الكود التالي.

لغة البرمجة>
<لغة البرمجة>
<رأس>
<عنوان>{٪ block title٪} مدونة بسيطة {٪ endblock٪}عنوان>
رأس>
<جسم>
<h1>{٪ blockhead٪} مدونة بسيطة {٪ endblock٪}h1>
 {٪ حظر المحتوى٪}
 {٪ endblock٪}
 {٪ include "footer.html"٪}
جسم>
لغة البرمجة>

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

في ال القوالب دليل إنشاء ملف footer.html ملف مع الكود التالي.

<تذييل>
<ص>© 2023 مدونة بسيطة. كل الحقوق محفوظة.ص>
<أhref="{{url_for ('about')}}">عنأ>
تذييل>

footer.html هو قالب مضمن يحتوي على كود HTML لقسم التذييل. يمكنك إعادة استخدامه عبر صفحات متعددة من خلال تضمينه في القالب الأساسي باستخدام ملف يشمل بطاقة شعار.

في ال القوالب دليل إنشاء ملف blog.html ملف مع الكود التالي.

{٪ يوسع "base.html"٪}
{٪ block title٪} مدونة بسيطة - صفحة مدونة {٪ endblock٪}
{٪ block العنوان٪} مدونة بسيطة - صفحة المدونة {٪ endblock٪}
{٪ حظر المحتوى٪}
<h2>إجمالي عدد المشاركات: {{posts | length}}h2>
 {٪ للنشر في المشاركات٪}
<شعبةفصل="بريد">
 {٪ if post.status == 'تم النشر'٪}
<h3>{{post.title}}h3>
<ص>{{post.content | truncate}}ص>
<ص>تم النشر في: {{post.publication_date}}ص>
<h4>تعليقات:h4>
<ماي>
 {٪ للتعليق في post.comments٪}
<ليفصل="تعليق">{{comment.author}} -: {{comment.content}}لي>
 {٪ endfor٪}
ماي>
 {٪ آخر ٪}
<ص>هذا المنشور لا يزال في وضع المسودة.ص>
 {٪ إنهاء إذا ٪}
شعبة>
<ساعة>
 {٪ endfor٪}
{٪ endblock٪}

هذا القالب الفرعي يرث من base.html باستخدام يمتد بطاقة شعار. إنه يتجاوز الكتل المحددة المحددة في القالب الأساسي لتوفير محتوى مخصص لصفحة المدونة. يتضمن أيضًا المنطق الضروري والتكرار لعرض منشور والتعليقات المرتبطة به.

التعبيرات

تدعم Jinja نطاقًا واسعًا من التعبيرات ، بما في ذلك العمليات الحسابية والمقارنات والعمليات المنطقية. على سبيل المثال:

{{2 + 2}} // الإخراج: 4

استبدال متغير

لإخراج المتغيرات في القالب ، قم بتضمينها داخل أقواس مزدوجة متعرجة. على سبيل المثال:

{{post.title}} // output: "أول مشاركة في المدونة"

المرشحات

تقوم المرشحات بتعديل إخراج المتغير. يمكنك إضافة واحد بعد متغير باستخدام رمز الأنبوب (|). على سبيل المثال:

{{post | length}} // الإخراج: 2

يمكنك إضافة تعليقات مضمنة وتعليقات متعددة الأسطر في القوالب الخاصة بك. سيتجاهل Jinja هذه التعليقات أثناء عرض القالب ، لذا فهي مفيدة لإضافة تفسيرات داخل القالب.

{# #} // في النسق
{٪ تعليق ٪}... {٪ end comment٪} // متعدد الأسطر

عناوين URL

للسماح لك بإنشاء ارتباطات تشعبية صحيحة لصفحات أخرى داخل التطبيق ، يشتمل سياق قالب Jinja على ملف url_for وظيفة. على سبيل المثال:

<أhref="{{url_for ('about')}}">عنأ>

يصبح الرمز أعلاه http://localhost: 8000 / حوالي. سترى أيضًا كيفية استخدام ملف url_for وظيفة للحصول على مسارات ملفات ثابتة في وقت لاحق.

هذه ليست سوى بعض الجوانب الأساسية في بناء جملة Jinja Templating. يوفر Jinja Templating العديد من الميزات والوظائف ، مثل وحدات الماكرو ، وسياق القالب ، والمزيد ، لجعل إنشاء القالب والتخصيص أكثر كفاءة ومرونة.

تمرير البيانات إلى القوالب

الآن بعد أن أصبحت قوالبك جاهزة ، تحتاج إلى تمرير البيانات من نقاط نهاية FastAPI إلى القوالب للعرض.

أضف التعليمات البرمجية التالية إلى ملف main.py ملف:

من fastapi يستورد FastAPI ، طلب
من fastapi.Responses يستورد استجابة HTML
@ app.get ("/"، response_class = HTMLResponse)
غير متزامنdefread_posts(طلب: طلب):
يعود القوالب. نموذج الاستجابة ("blog.html", {"طلب": طلب، 
"دعامات": fake_posts_db})

يحدد الرمز نقطة نهاية FastAPI التي تعالج طلب GET إلى عنوان URL الجذر ("/") وترجع استجابة HTML ولدت من blog.html نموذج. يقوم بتمرير قاموس سياق يحتوي على الملف الحالي طلب الكائن و المشاركات_المزيفة، في النموذج. بهذه الطريقة يمكن لـ Jinja تقديم بيانات دقيقة وديناميكية.

يزور http://localhost: 8000/ على متصفحك وسترى شيئًا مثل هذا:

لقد نجحت في تمرير البيانات إلى القوالب للعرض.

خدمة الملفات الثابتة

بالإضافة إلى عرض القوالب الديناميكية ، يوفر FastAPI أيضًا وظائف لخدمة الملفات الثابتة مثل ملفات CSS وملفات JavaScript والصور.

ستستخدم CSS لتحسين شكل الصفحة ومظهرها.

في ال ثابتة الدليل ، قم بإنشاء ملف Styles.css ملف مع الكود التالي.

جسم {
خط العائلة: اريال, بلا الرقيق;
هامِش: 0;
حشوة: 20مقصف;
لون الخلفية: # f5f5f5;
}
h1, h2, h3, h4 {
لون: #333;
}
.بريد {
لون الخلفية: #fff;
حشوة: 20مقصف;
الهامش السفلي: 20مقصف;
نصف قطر الحد: 5مقصف;
مربع الظل: 0 2مقصف 4مقصفrgba(0, 0, 0, 0.1);
}
.بريدh3 {
الهامش العلوي: 0;
}
.بريدص {
الهامش السفلي: 10مقصف;
}
.بريدماي {
قائمة على غرار نوع: لا أحد;
المساحة المتروكة لليسار: 0;
}
.تعليق {
الهامش السفلي: 10مقصف;
حشوة: 10مقصف;
لون الخلفية: # f9f9f9;
نصف قطر الحد: 5مقصف;
}
تذييل {
لون الخلفية: # f2f2f2;
حشوة: 10مقصف;
محاذاة النص: مركز;
}

تعديل رأس عنصر base.html نموذج على النحو التالي:

<رأس>
<عنوان>{٪ block title٪} مدونة بسيطة {٪ endblock٪}عنوان>
<وصلةhref="{{url_for ('static'، path = '/ styles.css')}}"rel="ورقة الأنماط">
رأس>

تقوم الوظيفة url_for () بإنشاء عنوان URL (مسار) لملف Styles.css (/static/styles.css) في ملف ثابتة الدليل الذي يتم تقديمه تلقائيًا بواسطة FastAPI.

يزور http://localhost: 8000/ على متصفحك.

تنطبق نفس الإجراءات على خدمة ملفات الصور وجافا سكريبت.

تذكر اتباع أفضل الممارسات

عند العمل مع Jinja Templating في FastAPI ، من المهم اتباع أفضل الممارسات لضمان قاعدة تعليمات برمجية جيدة التنظيم وفعالة.

• نظم القوالب في دليل مخصص وفكر في استخدام الدلائل الفرعية للقوالب ذات الصلة.
• استخدم وراثة القالب لإنشاء قوالب أساسية قابلة لإعادة الاستخدام وتوسيعها لمحتوى معين.
• حدد البيانات بعناية لتمريرها إلى القوالب ، مع الحفاظ على الحمولة خفيفة الوزن ، واستخدام معالجات السياق أو البرامج الوسيطة للبيانات شائعة الاستخدام.
• استفد من ميزات Jinja Templating مثل وحدات الماكرو والفلاتر وهياكل التحكم لتحسين إمكانية إعادة استخدام الكود وقابليته للقراءة.
• قم بتحسين الأداء من خلال تنفيذ استراتيجيات التخزين المؤقت للقوالب الثابتة ، واستخدام رؤوس التخزين المؤقت لـ HTTP ، والتنميط لاختناقات الأداء.

باتباع أفضل الممارسات هذه ، يمكنك الحفاظ على مشروع منظم ، وتحسين أداء العرض ، والاستفادة بكفاءة من ميزات Jinja Templating في تطبيقات FastAPI الخاصة بك.

استخدام FastAPI لبناء RestAPIs

بصرف النظر عن إنشاء التطبيقات التي تتطلب تقديم القوالب. يتفوق FastAPI في بناء RestAPIs نظرًا لأدائه العالي ، وبناء الجملة سهل الاستخدام ، وإنشاء الوثائق تلقائيًا ، وقابلية التوسع. تجعل هذه الميزات FastAPI مثاليًا للتطوير الفعال لواجهات برمجة تطبيقات الويب القوية.