خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه ایجاد صفحات وب پویا با قالب Jinja در FastAPI

ارشیا یوسفی ادیب ۱۴ تیر, ۱۴۰۲ 6 min read

قالب های Jinja زبان قدرتمندی را ارائه می دهند که می توانید از آن برای ایجاد صفحات وب پویا به راحتی استفاده کنید.

ادغام Jinja با FastAPI شما را قادر می سازد صفحات وب پویا ایجاد کنید که کد پایتون را به طور یکپارچه با HTML ترکیب می کند و به شما امکان می دهد لایه ارائه برنامه خود را از لایه منطقی جدا کنید. با صفحات وب پویا، می‌توانید محتوای شخصی‌شده و مبتنی بر داده تولید کنید و تجربیات کاربر را افزایش دهید.

جینجا چیست؟

Jinja یک موتور قالب قوی و غنی برای پایتون است که صفحات وب پویا تولید می کند. Jinja Templating از وراثت، عبارات شرطی، حلقه‌ها و ویژگی‌های مختلف پشتیبانی می‌کند که ایجاد صفحات وب پویا را ساده می‌کند.

می‌توانید FastAPI و Jinja را برای ایجاد صفحات وب با طرح‌بندی ثابتی که می‌تواند داده‌های بلادرنگ را نمایش می‌دهد و ورودی‌های کاربر را مدیریت کند، ترکیب کنید. همچنین می‌توانید نگرانی‌ها را از هم جدا کنید و کد خود را قابل نگهداری‌تر و درک آسان‌تر کنید.

یک پروژه FastAPI راه اندازی کنید

برای شروع، باید یک پروژه FastAPI راه اندازی کنید.

  1. با استفاده از این دستورات ترمینال یک محیط مجازی ایجاد و فعال کنید: python -m venv env# در Unix/MacOS: source venv/bin/activate# در ویندوز:.\venv\Scripts\activate
  2. FastAPI و وابستگی های مورد نیاز را نصب کنید. pip install “fastapi[all]”
  3. یک فهرست پروژه my_blog ایجاد کنید.
  4. یک فایل پایتون main.py در فهرست پروژه خود ایجاد کنید.
  5. کد زیر را به فایل main.py اضافه کنید: from fastapi import FastAPIfake_posts_db = [{    ‘title’: ‘First Blog Post’,    ‘content’: ‘Content of the first blog.’,    ‘author’: ‘John Doe’ ,    ‘publication_date’: ‘2023-06-20’,    ‘comments’: [        {‘author’: ‘Alice’, ‘content’: ‘Post عالی!’},        {‘author’: ‘Bob’, ‘t’ : «خواندنی جالب.»}    ]،    «وضعیت»: «منتشر شده»}،{    «عنوان»: «پست دوم وبلاگ»،    «محتوا»: «محتوای پست وبلاگ دوم».،    «نویسنده»: «جین اسمیت» ‘،    «publication_date»: هیچ،    «نظرات»: []،    «وضعیت»: «پیش‌نویس»}]app = FastAPI()@app.get(“/about”)def about():    «همه چیزی که باید درباره Simple Blog بدانید” کد بالا یک برنامه کاربردی FastAPI ساده با یک نقطه پایانی ایجاد می کند که در صورت دسترسی از طریق URL مربوطه، یک پاسخ JSON را برمی گرداند. می توانید از دیکشنری پایتون مانند این به جای پایگاه داده واقعی استفاده کنید. این به کاهش پیچیدگی در عین تمرکز بر هدف اولیه کمک می کند.
  6. سرور را اجرا کنید. Uvicorn main:app –reload
python -m venv env

# On Unix/MacOS: 
source venv/bin/activate

# On Windows:
.\venv\Scripts\activate
pip install "fastapi[all]"
from fastapi import FastAPI

fake_posts_db = [{
    'title': 'First Blog Post',
    'content': 'Content of the first blog post.',
    'author': 'John Doe',
    'publication_date': '2023-06-20',
    'comments': [
        {'author': 'Alice', 'content': 'Great post!'},
        {'author': 'Bob', 'content': 'Intresting read.'}
    ],
    'status': 'published'
},{
    'title': 'Second Blog Post',
    'content': 'Content of the second blog post.',
    'author': 'Jane Smith',
    'publication_date': None,
    'comments': [],
    'status': 'draft'
}]

app = FastAPI()

@app.get("/about")
def about():
    return "All you need to know about Simple Blog"
uvicorn main:app --reload

برای مشاهده پاسخ سرور، از http://localhost:8000/about در مرورگر خود دیدن کنید.

یکپارچه سازی قالب Jinja

پس از راه اندازی موفقیت آمیز پروژه خود، اکنون می توانید قالب Jinja را به آن اضافه کنید.

  1. در فایل main.py، ماژول‌های زیر را وارد کنید: from fastapi.templating import Jinja2Templates  from fastapi.staticfiles StaticFiles را وارد کنید
  2. در زیر متغیر برنامه، یک نمونه از کلاس Jinja2Templates ایجاد کنید و دایرکتوری حاوی قالب های شما را ارسال کنید. templates = Jinja2Templates(directory=”templates”)
  3. بعد از متغیر الگوها، خط کد زیر را اضافه کنید: app.mount(“/static”, StaticFiles(directory=”static”), name=”static”) کد بالا دایرکتوری استاتیک را نصب می کند و به FastAPI دستور می دهد تا هر گونه استاتیک را ارائه کند. هنگامی که URL درخواست با /static شروع می شود، فایل هایی در دایرکتوری قرار می گیرند.
  4. در دایرکتوری my_blog دو دایرکتوری ایجاد کنید، قالب هایی برای نگهداری فایل های HTML و static که شامل تمام فایل های استاتیک می شود.
from fastapi.templating import Jinja2Templates
  from fastapi.staticfiles import StaticFiles
templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="static"), name="static")

طرح فعلی پروژه

با انجام این مراحل، شما با موفقیت Jinja Templating را با پروژه خود ادغام کرده اید.

مطلب مرتبط:   نحوه استفاده از دکوراتور خروجی در Angular

ایجاد صفحه وب پویا با Jinja

Jinja مجموعه ای غنی از نحو و ویژگی ها را برای ایجاد قالب های پویا فراهم می کند.

در این بخش، نحوه استفاده از نحو قالب بندی Jinja را برای ایجاد صفحات وب پویا خواهید دید.

برچسب های قالب

تگ های الگو را با پرانتز فرفری و نماد درصد در دو طرف محصور کنید. شما می توانید از چنین برچسب هایی برای انجام عملیات کنترل جریان و منطق در قالب استفاده کنید. برخی از تگ های قالب رایج عبارتند از:

  • شرط: اگر شرط درست باشد بلوک کد را اجرا می کند. {% اگر شرط %}…{% endif %}
  • حلقه: روی یک تکرار شونده تکرار می شود و بلوک کد را برای هر آیتم اجرا می کند. {% برای مورد در قابل تکرار %}…{% endfor %}
  • Include: شامل قالب دیگری در قالب فعلی است. {% شامل ‘template_name.html’ %}
  • Block: بلوکی را تعریف می کند که الگوهای فرزند می توانند با استفاده از ارث بری آن را لغو کنند. {% block block_name %}…{% endblock %}
  • Extend: به الگوی فرزند اجازه می دهد تا الگوی والد را به ارث برده و گسترش دهد. {% extension parent_temp.html %}
{% if condition %}...{% endif %}
{% for item in iterable %}...{% endfor %}
{% include 'template_name.html' %}
{% block block_name %}...{% endblock %}
{% extend parent_temp.html %}

این تگ ها روشی انعطاف پذیر و گویا برای تولید محتوای HTML بر اساس داده های پویا و کنترل منطق برنامه شما ارائه می دهند.

وراثت الگو

Jinja Templating از وراثت قالب پشتیبانی می کند. این به شما امکان می‌دهد یک الگوی پایه (والد) را با طرح‌بندی مشترک و بخش‌هایی که یک الگوی فرزند می‌تواند گسترش دهد یا لغو کند، تعریف کنید. یک الگوی فرزند می تواند از تگ Extend برای به ارث بردن و گسترش الگوی والد استفاده کند.

با کد زیر در پوشه templates یک فایل base.html ایجاد کنید.

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Simple Blog{% endblock %}</title>
</head>
<body>
    <h1>{% block heading %}Simple Blog{% endblock %}</h1>

    {% block content %}
    {% endblock %}

    {% include "footer.html" %}
</body>
</html>

به این ترتیب، شما یک الگوی والد دارید که حاوی کد مشترک برای همه الگوهای شما است و به الگوی فرزند اجازه می‌دهد آن را در صورت نیاز به ارث برده و گسترش دهد.

در پوشه templates یک فایل footer.html با کد زیر ایجاد کنید.

<footer>
    <p>&copy; 2023 Simple Blog. All rights reserved.</p>
    <a href="{{ url_for('about') }}">About</a>
</footer>

footer.html یک قالب شامل کد HTML برای بخش پاورقی است. می‌توانید با قرار دادن آن در قالب پایه با استفاده از تگ Include از آن در چندین صفحه استفاده مجدد کنید.

مطلب مرتبط:   یک CRUD REST API با نماهای کلاس محور در چارچوب Django REST بسازید

در پوشه templates یک فایل blog.html با کد زیر ایجاد کنید.

{% extends "base.html" %}

{% block title %}Simple Blog - Blog Page{% endblock %}

{% block heading %}Simple Blog - Blog Page{% endblock %}

{% block content %}
    <h2>Total Number of Posts: {{ posts|length }}</h2>

    {% for post in posts %}
        <div class="post">

            {% if post.status == 'published' %}
                <h3>{{ post.title }}</h3>
                <p>{{ post.content|truncate }}</p>
                <p>Published on: {{ post.publication_date }}</p>

                <h4>Comments:</h4>
                <ul>
                    {% for comment in post.comments %}
                        <li class="comment">{{ comment.author }}-: {{ comment.content }}</li>
                        

                    {% endfor %}
                </ul>
            {% else %}
                <p>This post is still in draft mode.</p>
            {% endif %}
        </div>
        <hr>
    {% endfor %}
{% endblock %}

این الگوی فرزند از base.html با استفاده از تگ Extend ارث می برد. بلوک های خاصی را که در قالب پایه تعریف شده است لغو می کند تا محتوای سفارشی شده برای صفحه وبلاگ ارائه شود. همچنین شامل منطق و تکرار لازم برای نمایش یک پست و نظرات مرتبط است.

اصطلاحات

Jinja از طیف گسترده ای از عبارات، از جمله عملیات حسابی، مقایسه و عملیات منطقی پشتیبانی می کند. مثلا:

{{2 + 2}} // output: 4

جایگزینی متغیر

برای خروجی متغیرها در الگو، آنها را در داخل پرانتزهای فرفری دوتایی قرار دهید. مثلا:

{{post.title}} // output: 'First Blog Post'

فیلترها

فیلترها خروجی یک متغیر را تغییر می دهند. می توانید با استفاده از نماد لوله (|) یکی را بعد از متغیر اضافه کنید. مثلا:

{{post|length}} // output: 2

نظرات

می توانید نظرات درون خطی و نظرات چند خطی را در قالب های خود اضافه کنید. Jinja این نظرات را در طول رندر قالب نادیده می گیرد، بنابراین برای اضافه کردن توضیحات در قالب مفید هستند.

{# #} // inline

{% comment %} ... {% end comment %} // multiline

URL ها

برای اینکه بتوانید پیوندهای صحیحی به صفحات دیگر در برنامه ایجاد کنید، زمینه قالب Jinja شامل یک تابع url_for است. مثلا:

<a href="{{ url_for('about') }}">About</a>

کد بالا http://localhost:8000/about می شود. همچنین خواهید دید که چگونه از تابع url_for برای دریافت مسیرهای فایل استاتیک بعدا استفاده کنید.

اینها فقط برخی از جنبه های اساسی نحو قالب بندی Jinja هستند. Jinja Templating بسیاری از ویژگی‌ها و قابلیت‌های بیشتری مانند ماکروها، زمینه قالب و موارد دیگر را برای ایجاد و سفارشی‌سازی قالب کارآمد و انعطاف‌پذیر فراهم می‌کند.

انتقال داده ها به قالب ها

اکنون که قالب‌های خود را آماده کرده‌اید، باید داده‌ها را از نقاط انتهایی FastAPI خود به قالب‌ها برای رندر ارسال کنید.

کد زیر را به فایل main.py اضافه کنید:

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse

@app.get("/", response_class=HTMLResponse)
async def read_posts(request: Request):
    return templates.TemplateResponse("blog.html", {"request": request, 
                                                    "posts": fake_posts_db})

کد یک نقطه پایانی FastAPI را تعریف می کند که درخواست GET را به URL ریشه (“/”) رسیدگی می کند و یک HTMLResponse تولید شده از قالب blog.html را برمی گرداند. این یک فرهنگ لغت زمینه، حاوی شی درخواست فعلی و fake_posts_db را در قالب ارسال می کند. به این ترتیب Jinja می تواند داده های دقیق و پویا را ارائه دهد.

مطلب مرتبط:   9 دوره آنلاین رایگان برای مبتدیان پایتون

در مرورگر خود از http://localhost:8000/ دیدن کنید و باید چیزی شبیه به این را ببینید:

نمایش صفحه وب

شما با موفقیت داده ها را به قالب ها برای رندر ارسال کردید.

ارائه فایل های استاتیک

علاوه بر رندر قالب های پویا، FastAPI همچنین قابلیت هایی را برای ارائه فایل های ثابت مانند فایل های CSS، فایل های جاوا اسکریپت و تصاویر ارائه می دهد.

شما از CSS برای بهبود ظاهر و احساس صفحه استفاده خواهید کرد.

در پوشه استاتیک، یک فایل styles.css با کد زیر ایجاد کنید.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

h1, h2, h3, h4 {
    color: #333;
}

.post {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post h3 {
    margin-top: 0;
}

.post p {
    margin-bottom: 10px;
}

.post ul {
    list-style-type: none;
    padding-left: 0;
}

.comment {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

footer {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: center;
}

عنصر head قالب base.html را به صورت زیر تغییر دهید:

<head>
    <title>{% block title %}Simple Blog{% endblock %}</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>

تابع url_for() یک URL (مسیر) برای فایل styles.css (/static/styles.css) در دایرکتوری استاتیک ایجاد می کند که سپس به طور خودکار توسط FastAPI ارائه می شود.

در مرورگر خود از http://localhost:8000/ دیدن کنید.

نمایش صفحه بعد از اعمال css

رویه های مشابهی برای ارائه فایل های تصویر و جاوا اسکریپت اعمال می شود.

به یاد داشته باشید که بهترین روش ها را دنبال کنید

هنگام کار با Jinja Templating در FastAPI، پیروی از بهترین روش‌ها برای اطمینان از یک پایگاه کد به خوبی سازمان‌یافته و کارآمد مهم است.

  • قالب ها را در یک فهرست اختصاصی سازماندهی کنید و از زیر شاخه ها برای قالب های مرتبط استفاده کنید.
  • از وراثت قالب برای ایجاد الگوهای پایه قابل استفاده مجدد و گسترش آنها برای محتوای خاص استفاده کنید.
  • داده ها را با دقت انتخاب کنید تا به الگوها منتقل شوند، وزن محموله را سبک نگه دارید، و از پردازنده های زمینه یا میان افزار برای داده های رایج استفاده کنید.
  • از ویژگی‌های قالب‌سازی Jinja مانند ماکروها، فیلترها و ساختارهای کنترلی برای بهبود قابلیت استفاده مجدد و خوانایی کد استفاده کنید.
  • با پیاده‌سازی استراتژی‌های کش برای قالب‌های استاتیک، با استفاده از هدرهای ذخیره‌سازی HTTP و پروفایل‌سازی برای گلوگاه‌های عملکرد، عملکرد را بهینه کنید.

با پیروی از این بهترین شیوه‌ها، می‌توانید یک پروژه ساختاریافته را حفظ کنید، عملکرد رندر را بهینه کنید، و به طور موثر از ویژگی‌های قالب‌سازی Jinja در برنامه‌های FastAPI خود استفاده کنید.

استفاده از FastAPI برای ساخت RestAPI

جدای از ساخت برنامه هایی که نیاز به رندر قالب دارند. FastAPI در ساخت RestAPIها به دلیل عملکرد بالا، نحو با استفاده آسان، تولید اسناد خودکار و مقیاس پذیری عالی است. این ویژگی ها FastAPI را برای توسعه کارآمد API های وب قوی ایده آل می کند.

Tags: