תבניות Jinja מציעות שפה רבת עוצמה שבה תוכל להשתמש כדי ליצור דפי אינטרנט דינמיים בקלות.

שילוב Jinja עם FastAPI מאפשר לך ליצור דפי אינטרנט דינמיים הממזגים בצורה חלקה את Python קוד עם HTML, המאפשר לך להפריד את שכבת המצגת של היישום שלך מההיגיון שִׁכבָה. עם דפי אינטרנט דינמיים, אתה יכול ליצור תוכן מותאם אישית ומונחה נתונים, ולשפר את חוויות המשתמש.

מה זה ג'ינג'ה?

Jinja הוא מנוע תבניות חזק ועתיר תכונות עבור Python שיוצר דפי אינטרנט דינמיים. Jinja Templating תומך בירושה, הצהרות מותנות, לולאות ותכונות שונות המפשטות את היצירה של דפי אינטרנט דינמיים.

אתה יכול לשלב FastAPI ו-Jinja כדי ליצור דפי אינטרנט עם פריסה עקבית שיכולה להציג נתונים בזמן אמת ולטפל בקלט המשתמש. אתה יכול גם להשיג הפרדת דאגות, מה שהופך את הקוד שלך לתחזוקה וקל יותר להבנה.

הגדר פרויקט FastAPI

כדי להתחיל, תצטרך להגדיר פרויקט FastAPI.

  1. צור והפעל סביבה וירטואלית באמצעות פקודות הטרמינל הבאות:
    python -m venv env
    # ב-Unix/MacOS: 
    מקור venv/bin/activate
    # בווינדוס:
    .\venv\Scripts\להפעיל
  2. התקן את FastAPI ואת התלות הנדרשת.
    pip התקנת "fastapi[all]"
  3. צור ספריית פרויקטים הבלוג שלי.
    4. instagram viewer
  4. צור קובץ Python main.py בספריית הפרויקט שלך.
  5. הוסף את הקוד הבא ל- main.py קוֹבֶץ:
    מ fastapi יְבוּא FastAPI
    fake_posts_db = [{
    'כותרת': 'פוסט בלוג ראשון',
    'תוֹכֶן': 'תוכן הפוסט הראשון בבלוג.',
    'מְחַבֵּר': 'פלוני אלמוני',
    'תאריך פרסום': '2023-06-20',
    'תגובות': [
     {'מְחַבֵּר': 'אליס', 'תוֹכֶן': 'פוסט מעולה!'},
     {'מְחַבֵּר': 'בוב', 'תוֹכֶן': 'קריאה מעניינת'.}
     ],
    'סטָטוּס': 'יצא לאור'
    },{
    'כותרת': 'פוסט שני בבלוג',
    'תוֹכֶן': 'תוכן הפוסט השני בבלוג'.,
    'מְחַבֵּר': 'ג'יין סמית',
    'תאריך פרסום': אף אחד,
    'תגובות': [],
    'סטָטוּס': 'טְיוּטָה'
    }]
    

    app = FastAPI()
    @app.get("/about")
    defעל אודות():
    לַחֲזוֹר"כל מה שאתה צריך לדעת על Simple Blog"
    הקוד שלמעלה יוצר אפליקציית FastAPI פשוטה עם נקודת קצה אחת המחזירה תגובת JSON כאשר הגישה אליה היא דרך כתובת האתר המתאימה. אתה יכול השתמש במילון Python כמו זה במקום מסד נתונים בפועל; זה עוזר להפחית את המורכבות תוך התמקדות במטרה העיקרית.
  6. הפעל את השרת.
    uvicorn main: app --טען מחדש

לְבַקֵר http://localhost: 8000 לערך בדפדפן שלך כדי לראות את תגובת השרת.

שילוב תבנית Jinja

לאחר הגדרת הפרויקט שלך בהצלחה, כעת תוכל להוסיף לו תבנית Jinja.

  1. בתוך ה main.py קובץ, ייבא את המודולים הבאים:
    מ fastapi.templating יְבוּא Jinja2Templates
    מ fastapi.staticfiles יְבוּא StaticFiles
  2. מתחת אפליקציה משתנה, צור מופע של Jinja2Templates מחלקה והעבירו את הספרייה שתכיל את התבניות שלכם.
    templates = Jinja2Templates (ספרייה="תבניות")
  3. לאחר תבניות משתנה, הוסף את שורת הקוד הבאה:
    app.mount("/סטָטִי", StaticFiles (ספרייה="סטָטִי"), שם="סטָטִי")
    הקוד שלמעלה מעלה את סטָטִי מדריך ומורה ל-FastAPI להגיש קבצים סטטיים כלשהם שנמצאים בספרייה כאשר כתובת URL של בקשה מתחילה עם /static.
  4. ב הבלוג שלי ספרייה ליצור שתי ספריות, תבניות להחזיק קבצי HTML ו סטָטִי שיכיל את כל הקבצים הסטטיים.

עם השלמת השלבים האלה, שילבת בהצלחה את Jinja Templating עם הפרויקט שלך.

יצירת דף אינטרנט דינמי עם Jinja

Jinja מספק קבוצה עשירה של תחביר ותכונות ליצירת תבניות דינמיות.

בסעיף זה, תראה כיצד להשתמש בתחביר תבנית Jinja ליצירת דפי אינטרנט דינמיים.

צרף תגיות תבנית עם א פלטה מתולתלת ו סמל אחוז בשני הצדדים. אתה יכול להשתמש בתגים כאלה כדי לבצע פעולות זרימה ולוגיקה בקרה בתבנית. כמה תגיות תבניות נפוצות כוללות:

  • מַצָב: מפעיל את גוש הקוד אם התנאי נכון.
    {% אם תנאי %}...{% endif %}
  • לוּלָאָה: חוזר על איטרנס ומריץ את גוש הקוד עבור כל פריט.
    {% ל פריט ב ניתן לחזור על %}...{% endfor %}
  • לִכלוֹל: כולל תבנית נוספת בתוך התבנית הנוכחית.
    {% כוללים 'template_name.html' %}
  • לַחסוֹם: מגדיר בלוק שתבניות צאצא יכולות לעקוף באמצעות ירושה.
    {% block_name %}...{% endblock %}
  • לְהַאֲרִיך: מאפשר לתבנית הצאצא לרשת ולהרחיב את תבנית האב.
    {% extend parent_temp.html %}

תגים אלו מספקים דרך גמישה ואקספרסיבית ליצור תוכן HTML המבוסס על נתונים דינמיים ולשלוט בלוגיקה של היישום שלך.

ירושה של תבנית

Jinja Templating תומך בירושה של תבנית. זה מאפשר לך להגדיר תבנית בסיס (אב) עם פריסה משותפת וקטעים שתבנית צאצא יכולה להרחיב או לעקוף. תבנית ילד יכולה להשתמש ב- לְהַאֲרִיך תג כדי לרשת ולהרחיב את תבנית האב.

ליצור base.html קובץ ב- תבניות ספרייה עם הקוד הבא.

html>
<html>
<רֹאשׁ>
<כותרת>{% block title %}בלוג פשוט{% endblock %}כותרת>
רֹאשׁ>
<גוּף>
<h1>{% block heading %}בלוג פשוט{% endblock %}h1>
 {% block content %}
 {% endblock %}
 {% include "footer.html" %}
גוּף>
html>

בדרך זו, יש לך תבנית אב המכילה את הקוד המשותף לכל התבניות שלך, המאפשרת לתבנית הצאצא לרשת ולהרחיב אותה כנדרש.

בתוך ה תבניות ספרייה ליצור א footer.html קובץ עם הקוד הבא.

<כותרת תחתונה>
<ע>© 2023 בלוג פשוט. כל הזכויות שמורות.ע>
<אhref="{{ url_for('about') }}">על אודותא>
כותרת תחתונה>

footer.html היא תבנית כלולה המכילה את קוד ה-HTML עבור קטע הכותרת התחתונה. אתה יכול לעשות בו שימוש חוזר על פני מספר דפים על ידי הכללתו בתבנית הבסיס באמצעות ה- לִכלוֹל תָג.

בתוך ה תבניות ספרייה ליצור א blog.html קובץ עם הקוד הבא.

{% מרחיב את "base.html" %}
{% block title %}בלוג פשוט - דף בלוג{% endblock %}


{% block heading %}בלוג פשוט - דף בלוג{% endblock %}


{% block content %}
<h2>מספר כולל של פוסטים: {{ פוסטים|אורך }}h2>


 {% לפוסט בפוסטים %}
<divמעמד="הודעה">


 {% if post.status == 'פורסם' %}
<h3>{{ post.title }}h3>
<ע>{{ post.content|קטוע }}ע>
<ע>פורסם בתאריך: {{ post.publication_date }}ע>


<h4>הערות:h4>
<ul>
 {% עבור תגובה ב-post.comments %}
<לימעמד="תגובה">{{ comment.author }}-: {{ comment.content }}לי>
 {% endfor %}
ul>
 {% אחר %}
<ע>הפוסט הזה עדיין במצב טיוטה.ע>
 {% endif %}
div>
<שעה>
 {% endfor %}
{% endblock %}

תבנית צאצא זו יורשת מ base.html משתמש ב לְהַאֲרִיך תָג. הוא עוקף בלוקים ספציפיים שהוגדרו בתבנית הבסיס כדי לספק תוכן מותאם אישית עבור דף הבלוג. זה כולל גם את ההיגיון והאיטרציה הדרושים להצגת פוסט והערות קשורות.

ביטויים

Jinja תומך במגוון רחב של ביטויים, כולל פעולות אריתמטיות, השוואות ופעולות לוגיות. לדוגמה:

{{2 + 2}} // פלט: 4

החלפה משתנה

כדי להפיק משתנים בתבנית, סגרו אותם בסוגריים כפולים מתולתלים. לדוגמה:

{{post.title}} // פלט: 'פוסט בלוג ראשון'

מסננים

מסננים משנים את הפלט של משתנה. אתה יכול להוסיף אחד אחרי משתנה באמצעות סמל הצינור (|). לדוגמה:

{{פוסט|length}} // פלט: 2

אתה יכול להוסיף הערות מוטבעות והערות מרובות שורות בתבניות שלך. Jinja תתעלם מההערות הללו במהלך עיבוד התבנית, כך שהן שימושיות להוספת הסברים בתוך תבנית.

{# #} // בשורה
{% תגובה %}... {% end comment %} // multiline

כתובות אתרים

כדי לאפשר לך ליצור היפר-קישורים נכונים לדפים אחרים בתוך היישום, ההקשר של תבנית Jinja כולל א url_for פוּנקצִיָה. לדוגמה:

<אhref="{{ url_for('about') }}">על אודותא>

הקוד למעלה הופך http://localhost: 8000 לערך. תראה גם איך להשתמש ב- url_for פונקציה כדי לקבל נתיבים סטטיים של קבצים מאוחר יותר.

אלו הם רק חלק מההיבטים הבסיסיים של תחביר תבנית Jinja. Jinja Templating מספק הרבה יותר תכונות ופונקציונליות, כגון פקודות מאקרו, הקשר תבנית ועוד, כדי להפוך את היצירה וההתאמה האישית של תבנית ליעילים וגמישים.

העברת נתונים לתבניות

כעת, כאשר התבניות שלך מוכנות, עליך להעביר נתונים מנקודות הקצה של FastAPI שלך לתבניות לעיבוד.

הוסף את הקוד הבא ל- main.py קוֹבֶץ:

מ fastapi יְבוּא FastAPI, בקשה
מ fastapi.תגובות יְבוּא HTMLResponse
@app.get("/", response_class=HTMLResponse)
אסינכרוןdefלקרוא_פוסטים(בקשה: בקשה):
לַחֲזוֹר תבניות. TemplateResponse("blog.html", {"בַּקָשָׁה": בקשה, 
"פוסטים": fake_posts_db})

הקוד מגדיר נקודת קצה FastAPI המטפלת בבקשת GET לכתובת השורש ("/") ומחזירה HTMLResponse שנוצר מה blog.html תבנית. הוא מעביר מילון הקשר, המכיל את הזרם אובייקט בקשה ו fake_posts_db, לתוך התבנית. כך 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פיקסלים;
}


.הודעהul {
סוג רשימה: אף אחד;
ריפוד-שמאל: 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/ בדפדפן שלך.

אותם נהלים חלים על הגשת קובצי תמונה ו-JavaScript.

זכור לפעול לפי השיטות המומלצות

כאשר עובדים עם Jinja Templating ב-FastAPI, חשוב לעקוב אחר שיטות עבודה מומלצות מסוימות כדי להבטיח בסיס קוד מאורגן ויעיל.

  • ארגן תבניות בספרייה ייעודית ושקול להשתמש בספריות משנה לתבניות קשורות.
  • השתמש בירושה של תבניות כדי ליצור תבניות בסיס לשימוש חוזר ולהרחיב אותן עבור תוכן ספציפי.
  • בחר בקפידה את הנתונים שיעבירו לתבניות, שמור על המטען קל משקל, והשתמש במעבדי הקשר או בתוכנת ביניים עבור נתונים נפוצים.
  • השתמש בתכונות של Jinja Templating כמו פקודות מאקרו, מסננים ומבני בקרה לשיפור יכולת השימוש החוזר והקריאה בקוד.
  • בצע אופטימיזציה של הביצועים על ידי הטמעת אסטרטגיות אחסון במטמון עבור תבניות סטטיות, שימוש בכותרות מטמון HTTP ויצירת פרופילים לצווארי בקבוק בביצועים.

על ידי ביצוע שיטות עבודה מומלצות אלה, תוכל לשמור על פרויקט מובנה, לייעל את ביצועי העיבוד ולמנף ביעילות את התכונות של Jinja Templating ביישומי FastAPI שלך.

שימוש ב-FastAPI לבניית RestAPIs

מלבד בניית אפליקציות הדורשות עיבוד תבניות. FastAPI מצטיין בבניית RestAPIs בשל הביצועים הגבוהים, התחביר הקל לשימוש, הפקת התיעוד האוטומטי והיכולת המדרגית שלו. תכונות אלו הופכות את FastAPI לאידיאלי לפיתוח יעיל של ממשקי API אינטרנטיים חזקים.