Шаблоните на Jinja предлагат мощен език, който можете да използвате за лесно създаване на динамични уеб страници.

Интегрирането на Jinja с FastAPI ви позволява да създавате динамични уеб страници, които безпроблемно съчетават Python код с HTML, което ви позволява да отделите презентационния слой на вашето приложение от логиката слой. С динамични уеб страници можете да генерирате персонализирано и управлявано от данни съдържание, подобрявайки изживяването на потребителите.

Какво е Джинджа?

Jinja е стабилна, богата на функции машина за шаблони за Python, която генерира динамични уеб страници. Jinja Templating поддържа наследяване, условни изрази, цикли и различни функции, които опростяват създаването на динамични уеб страници.

Можете да комбинирате FastAPI и Jinja, за да създадете уеб страници с последователно оформление, което може да показва данни в реално време и да обработва въвеждането на потребителя. Можете също да постигнете разделяне на загрижеността, правейки вашия код по-лесен за поддръжка и разбираем.

instagram viewer

Настройте проект FastAPI

За да започнете, ще трябва да настроите FastAPI проект.

  1. Създайте и активирайте виртуална среда използвайки тези терминални команди:
    python -m venv env
    # Под Unix/MacOS: 
    източник venv/bin/activate
    # В Windows:
    .\venv\Scripts\activate
  2. Инсталирайте FastAPI и необходимите зависимости.
    pip инсталирайте "fastapi[всички]"
  3. Създайте директория на проекта Моят блог.
  4. Създайте файл на Python main.py в директорията на вашия проект.
  5. Добавете следния код към main.py файл:
    от fastapi импортиране FastAPI
    fake_posts_db = [{
    'заглавие': „Първа публикация в блог“,
    "съдържание": „Съдържание на първата публикация в блога.“,
    "автор": 'Джон Доу',
    'дата на публикуване': '2023-06-20',
    "коментари": [
     {"автор": "Алиса", "съдържание": „Страхотен пост!“},
     {"автор": "Боб", "съдържание": „Интересно четиво.“}
     ],
    "статус": "публикуван"
    },{
    'заглавие': „Втора публикация в блог“,
    "съдържание": „Съдържание на втората публикация в блога.“,
    "автор": "Джейн Смит",
    'дата на публикуване': Нито един,
    "коментари": [],
    "статус": "чернова"
    }]
    

    приложение = FastAPI()
    @app.get("/about")
    дефотносно():
    връщане„Всичко, което трябва да знаете за Simple Blog“
    Кодът по-горе създава просто приложение FastAPI с една крайна точка, която връща JSON отговор при достъп чрез съответния URL адрес. Можеш използвайте речник на Python като това на мястото на действителна база данни; помага за намаляване на сложността, като същевременно се фокусира върху основната цел.
  6. Стартирайте сървъра.
    uvicorn main: приложение --reload

Посетете http://localhost: 8000/около във вашия браузър, за да видите отговора на сървъра.

Интегриране на Jinja шаблони

След като успешно настроите проекта си, сега можете да добавите Jinja шаблон към него.

  1. В main.py файл, импортирайте следните модули:
    от fastapi.шаблон импортиране Jinja2Templates
    от fastapi.staticfiles импортиране Статични файлове
  2. Под ап променлива, създайте екземпляр на Jinja2Templates клас и предайте директорията, която ще съдържа вашите шаблони.
    шаблони = Jinja2Templates (директория="шаблони")
  3. След шаблони променлива, добавете следния ред код:
    app.mount("/статичен", StaticFiles (директория="статичен"), име="статичен")
    Кодът по-горе монтира статичен директория и инструктира FastAPI да обслужва всички статични файлове, намиращи се в директорията, когато URL адрес на заявка започва с /static.
  4. в Моят блог директория създайте две директории, шаблони за съхранение на HTML файлове и статичен който ще съдържа всички статични файлове.

След като завършите тези стъпки, вие успешно сте интегрирали Jinja Templating с вашия проект.

Създаване на динамична уеб страница с Jinja

Jinja предоставя богат набор от синтаксис и функции за създаване на динамични шаблони.

В този раздел ще видите как да използвате синтаксиса за шаблони на Jinja за създаване на динамични уеб страници.

Оградете етикетите на шаблона с a къдрава скоба и символ за процент от двете страни. Можете да използвате такива етикети за извършване на контролен поток и логически операции в шаблона. Някои често използвани шаблонни тагове включват:

  • Състояние: Изпълнява блока от код, ако условието е вярно.
    {% ако условие %}...{% endif %}
  • Цикъл: Итерира итерируем и изпълнява блока от код за всеки елемент.
    {% за вещ в итерируем %}...{% endfor %}
  • Включете: Включва друг шаблон в текущия шаблон.
    {% включват 'име_на_шаблон.html' %}
  • Блокирайте: Дефинира блок, който дъщерните шаблони могат да заменят с помощта на наследяване.
    {% block block_name %}...{% endblock %}
  • Разшири: Позволява на дъщерния шаблон да наследява и разширява родителския шаблон.
    {% extend parent_temp.html %}

Тези тагове осигуряват гъвкав и изразителен начин за генериране на HTML съдържание въз основа на динамични данни и контрол на логиката на вашето приложение.

Наследяване на шаблони

Jinja Templating поддържа наследяване на шаблони. Това ви позволява да дефинирате основен (родителски) шаблон с общо оформление и секции, които дъщерният шаблон може да разшири или замени. Дъщерен шаблон може да използва Разшири етикет за наследяване и разширяване на родителския шаблон.

Създавам база.html файл в шаблони директория със следния код.

html>
<html>
<глава>
<заглавие>{% block title %}Прост блог{% endblock %}заглавие>
глава>
<тяло>
<h1>{% block heading %}Прост блог{% endblock %}h1>
 {% блокиране на съдържанието %}
 {% endblock %}
 {% включват "footer.html" %}
тяло>
html>

По този начин имате родителски шаблон, който съдържа общия код за всички ваши шаблони, което позволява на дъщерния шаблон да го наследи и разшири, както е необходимо.

В шаблони създаване на директория a долен колонтитул.html файл със следния код.

<долен колонтитул>
<стр>© 2023 Прост блог. Всички права запазени.стр>
<аhref=„{{ url_for('about') }}“>относноа>
долен колонтитул>

долен колонтитул.html е включен шаблон, който съдържа HTML кода за долния колонтитул. Можете да го използвате повторно на няколко страници, като го включите в основния шаблон с помощта на Включете етикет.

В шаблони създаване на директория a blog.html файл със следния код.

{% разширява "base.html" %}
{% block title %}Опростен блог – страница на блог{% endblock %}


{% block heading %}Прост блог – страница на блог{% endblock %}


{% блокиране на съдържанието %}
<h2>Общ брой публикации: {{ публикации|дължина }}h2>


 {% за публикация в публикации %}
<дивклас="пост">


 {% if post.status == 'published' %}
<h3>{{ post.title }}h3>
<стр>{{ post.content|отрязване }}стр>
<стр>Публикувано на: {{ post.publication_date }}стр>


<h4>коментари:h4>
<ул>
 {% за коментар в post.comments %}
<ликлас="коментар">{{ comment.author }}-: {{ comment.content }}ли>
 {% endfor %}
ул>
 {% else %}
<стр>Тази публикация все още е в режим на чернова.стр>
 {% endif %}
див>
<ч>
 {% endfor %}
{% endblock %}

Този дъщерен шаблон наследява от база.html използвайки Разшири етикет. Той заменя конкретни блокове, дефинирани в основния шаблон, за да предостави персонализирано съдържание за страницата на блога. Той също така включва необходимата логика и итерация за показване на публикация и свързани коментари.

Изрази

Jinja поддържа широк набор от изрази, включително аритметични операции, сравнения и логически операции. Например:

{{2 + 2}} // изход: 4

Променливо заместване

За да изведете променливи в шаблона, оградете ги в двойни фигурни скоби. Например:

{{post.title}} // изход: „Първа публикация в блог“

Филтри

Филтрите променят изхода на променлива. Можете да добавите един след променлива, като използвате символа за вертикална черта (|). Например:

{{post|length}} // изход: 2

Можете да добавяте вградени коментари и многоредови коментари във вашите шаблони. Jinja ще игнорира тези коментари по време на рендиране на шаблон, така че те са полезни за добавяне на обяснения в шаблон.

{# #} // в редица
{% коментар %}... {% край на коментара %} // многоред

URL адреси

За да ви позволи да генерирате правилни хипервръзки към други страници в приложението, контекстът на шаблона на Jinja включва a url_за функция. Например:

<аhref=„{{ url_for('about') }}“>относноа>

Кодът по-горе става http://localhost: 8000/около. Ще видите също как да използвате url_за функция за получаване на пътеки към статични файлове по-късно.

Това са само някои от основните аспекти на синтаксиса на Jinja Templating. Jinja Templateing предоставя много повече функции и функционалности, като макроси, контекст на шаблона и други, за да направи създаването и персонализирането на шаблон ефективно и гъвкаво.

Предаване на данни към шаблони

Сега, след като сте подготвили своите шаблони, трябва да предадете данни от вашите крайни точки на FastAPI в шаблоните за изобразяване.

Добавете следния код към main.py файл:

от fastapi импортиране FastAPI, заявка
от fastapi.отговори импортиране HTMLResponse
@app.get("/", response_class=HTMLResponse)
асинхронендефread_posts(заявка: Заявка):
връщане шаблони. TemplateResponse("blog.html", {"заявка": заявка, 
"постове": fake_posts_db})

Кодът дефинира крайна точка на FastAPI, която обработва GET заявка към основния URL ("/") и връща HTMLResponse генерирани от blog.html шаблон. Той предава контекстен речник, съдържащ текущия обект на заявка и fake_posts_db, в шаблона. По този начин Jinja може да визуализира точни и динамични данни.

Посетете http://localhost: 8000/ на вашия браузър и трябва да видите нещо подобно:

Успешно предадохте данни в шаблоните за изобразяване.

Обслужване на статични файлове

В допълнение към изобразяването на динамични шаблони, FastAPI също така предоставя функционалност за обслужване на статични файлове като CSS файлове, JavaScript файлове и изображения.

Ще използвате CSS, за да подобрите външния вид и усещането на страницата.

В статичен директория, създайте a styles.css файл със следния код.

тяло {
шрифтово семейство: Arial, безсерифен;
марж: 0;
подплата: 20px;
Цвят на фона: #f5f5f5;
}
h1, h2, h3, h4 {
цвят: #333;
}


.пост {
Цвят на фона: #Ф ф ф;
подплата: 20px;
margin-bottom: 20px;
граница-радиус: 5px;
кутия-сянка: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.постh3 {
margin-top: 0;
}


.постстр {
margin-bottom: 10px;
}


.постул {
списък-стил-тип: нито един;
padding-left: 0;
}


.коментирайте {
margin-bottom: 10px;
подплата: 10px;
Цвят на фона: #f9f9f9;
граница-радиус: 5px;
}
долен колонтитул {
Цвят на фона: #f2f2f2;
подплата: 10px;
подравняване на текст: център;
}

Променете глава елемент на база.html шаблон, както следва:

<глава>
<заглавие>{% block title %}Прост блог{% endblock %}заглавие>
<връзкаhref="{{ url_for('static', path='/styles.css') }}"отн="стилов лист">
глава>

Функцията url_for() генерира URL (път) за styles.css (/static/styles.css) файл в статичен директория, която след това се обслужва автоматично от FastAPI.

Посетете http://localhost: 8000/ на вашия браузър.

Същите процедури се прилагат за обслужване на файлове с изображения и JavaScript.

Не забравяйте да следвате най-добрите практики

Когато работите с Jinja Templating в FastAPI, е важно да следвате определени най-добри практики, за да осигурите добре организирана и ефективна кодова база.

  • Организирайте шаблоните в специална директория и обмислете използването на поддиректории за свързани шаблони.
  • Използвайте наследяването на шаблони, за да създадете базови шаблони за многократна употреба и да ги разширите за конкретно съдържание.
  • Внимателно изберете данните, които да прехвърлите към шаблоните, като поддържате лек товар и използвайте контекстни процесори или междинен софтуер за често използвани данни.
  • Използвайте функциите на Jinja Templating като макроси, филтри и контролни структури за подобрена повторна употреба и четливост на кода.
  • Оптимизирайте производителността чрез внедряване на стратегии за кеширане за статични шаблони, използване на HTTP кеширащи заглавки и профилиране за тесни места в производителността.

Като следвате тези най-добри практики, можете да поддържате структуриран проект, да оптимизирате производителността на рендиране и ефективно да използвате функциите на Jinja Templating във вашите приложения FastAPI.

Използване на FastAPI за изграждане на RestAPI

Освен изграждането на приложения, които изискват шаблони за изобразяване. FastAPI превъзхожда изграждането на RestAPI благодарение на своята висока производителност, лесен за използване синтаксис, автоматично генериране на документация и мащабируемост. Тези характеристики правят FastAPI идеален за ефективно разработване на стабилни уеб API.