Шаблоны Jinja предлагают мощный язык, который вы можете использовать для легкого создания динамических веб-страниц.

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

Что такое Джинджа?

Jinja — это надежный, многофункциональный механизм шаблонов для Python, который создает динамические веб-страницы. Jinja Templating поддерживает наследование, условные операторы, циклы и различные функции, которые упрощают создание динамических веб-страниц.

Вы можете комбинировать FastAPI и Jinja для создания веб-страниц с единообразным макетом, которые могут отображать данные в реальном времени и обрабатывать вводимые пользователем данные. Вы также можете достичь разделение интересов, делая ваш код более удобным для сопровождения и понятным.

instagram viewer

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

Для начала вам необходимо настроить проект FastAPI.

  1. Создать и активировать виртуальную среду используя эти команды терминала:
    python -m venv env
    # В Unix/MacOS: 
    источник venv/bin/активировать
    # В Windows:
    .\venv\скрипты\активировать
  2. Установите FastAPI и необходимые зависимости.
    pip установить "fastapi [все]"
  3. Создать каталог проекта мой блог.
  4. Создайте файл Python main.py в каталоге вашего проекта.
  5. Добавьте следующий код в main.py файл:
    от Фастапи Импортировать FastAPI
    поддельные_сообщения_дб = [{
    'заголовок': «Первая запись в блоге»,
    'содержание': «Содержание первого сообщения в блоге».,
    'автор': 'Джон Доу',
    'Дата публикации': '2023-06-20',
    'Комментарии': [
     {'автор': Алиса, 'содержание': «Отличный пост!»},
     {'автор': 'Боб', 'содержание': «Интересно читать».}
     ],
    'положение дел': "опубликовано"
    },{
    'заголовок': «Вторая запись в блоге»,
    'содержание': «Содержание второго сообщения в блоге».,
    'автор': 'Джейн Смит',
    'Дата публикации': Никто,
    'Комментарии': [],
    'положение дел': 'черновик'
    }]
    

    приложение = FastAPI()
    @app.get("/о")
    дефо():
    возвращаться«Все, что вам нужно знать о Simple Blog»
    Приведенный выше код создает простое приложение FastAPI с одной конечной точкой, которая возвращает ответ JSON при доступе через соответствующий URL-адрес. Ты можешь использовать словарь Python вот так вместо фактической базы данных; это помогает уменьшить сложность, сосредоточив внимание на основной цели.
  6. Запустите сервер.
    uvicorn главное: приложение --reload

Посещать http://localhost: 8000/об в браузере, чтобы увидеть ответ сервера.

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

Успешно настроив свой проект, теперь вы можете добавить к нему шаблоны Jinja.

  1. в main.py файл, импортируйте следующие модули:
    от fastapi.templating Импортировать Jinja2Шаблоны
    от fastapi.staticfiles Импортировать Статические файлы
  2. Ниже приложение переменная, создайте экземпляр Jinja2Шаблоны class и передайте каталог, который будет содержать ваши шаблоны.
    шаблоны = Jinja2Templates (каталог ="шаблоны")
  3. После шаблоны переменная, добавьте следующую строку кода:
    приложение.mount("/ статический", StaticFiles (каталог="статический"), имя ="статический")
    Приведенный выше код монтирует статический каталог и указывает FastAPI обслуживать любые статические файлы, расположенные в каталоге, когда URL-адрес запроса начинается с /static.
  4. В мой блог каталог создать два каталога, шаблоны для хранения файлов HTML и статический который будет содержать все статические файлы.

Выполнив эти шаги, вы успешно интегрировали шаблоны Jinja в свой проект.

Создание динамической веб-страницы с Jinja

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

В этом разделе вы увидите, как использовать синтаксис шаблонов Jinja для создания динамических веб-страниц.

Заключите теги шаблона с изогнутая скобка и символ процента с обеих сторон. Вы можете использовать такие теги для выполнения потока управления и логических операций в шаблоне. Некоторые часто используемые теги шаблонов включают в себя:

  • Состояние: Запускает блок кода, если условие истинно.
    {% если условие %}...{% endif %}
  • Петля: перебирает итерируемый объект и запускает блок кода для каждого элемента.
    {% для элемент в итерируемый %}...{% endfor %}
  • Включать: Включает другой шаблон в текущий шаблон.
    {% включать 'имя_шаблона.html' %}
  • Блокировать: определяет блок, который дочерние шаблоны могут переопределять с помощью наследования.
    {% block имя_блока %}...{% endblock %}
  • Продлевать: позволяет дочернему шаблону наследовать и расширять родительский шаблон.
    {% расширить parent_temp.html %}

Эти теги обеспечивают гибкий и выразительный способ создания содержимого HTML на основе динамических данных и управления логикой вашего приложения.

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

Jinja Templating поддерживает наследование шаблонов. Это позволяет определить базовый (родительский) шаблон с общим макетом и разделами, которые дочерний шаблон может расширять или переопределять. Дочерний шаблон может использовать Продлевать тег для наследования и расширения родительского шаблона.

Создать base.html файл в шаблоны каталог со следующим кодом.

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

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

в шаблоны каталог создать нижний колонтитул.html файл со следующим кодом.

<нижний колонтитул>
<п>© 2023 Простой блог. Все права защищены.п>
<аhref="{{ url_for('о') }}">Оа>
нижний колонтитул>

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

в шаблоны каталог создать блог.html файл со следующим кодом.

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


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


{% заблокировать содержимое %}
<h2>Общее количество сообщений: {{ сообщений|длина }}h2>


 {% для сообщения в сообщениях %}
<дивсорт="почта">


 {% if post.status == 'опубликовано' %}
<h3>{{ Заголовок поста }}h3>
<п>{{ post.content|урезать }}п>
<п>Опубликовано: {{ post.publication_date }}п>


<h4>Комментарии:h4>
<ул>
 {% для комментария в post.comments %}
<лисорт="комментарий">{{ comment.author }}-: {{ comment.content }}ли>
 {% конец для %}
ул>
 {% еще %}
<п>Этот пост все еще находится в режиме черновика.п>
 {% конец%}
див>
<час>
 {% конец для %}
{% конечный блок%}

Этот дочерний шаблон наследуется от base.html используя Продлевать ярлык. Он переопределяет определенные блоки, определенные в базовом шаблоне, чтобы предоставить настраиваемый контент для страницы блога. Он также включает в себя необходимую логику и итерацию для отображения поста и связанных с ним комментариев.

Выражения

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

{{2 + 2}} // вывод: 4

Замена переменной

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

{{post.title}} // вывод: 'Первая запись в блоге'

Фильтры

Фильтры изменяют вывод переменной. Вы можете добавить единицу после переменной, используя символ вертикальной черты (|). Например:

{{сообщение|длина}} // вывод: 2

В шаблоны можно добавлять встроенные и многострочные комментарии. Jinja будет игнорировать эти комментарии во время рендеринга шаблона, поэтому они полезны для добавления пояснений в шаблон.

{# #} // в соответствии
{% комментарий %}... {% конец комментария %} // многострочный

URL-адреса

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

<аhref="{{ url_for('о') }}">Оа>

Приведенный выше код становится http://localhost: 8000/об. Вы также увидите, как использовать url_for функция для получения статических путей к файлам позже.

Это лишь некоторые из фундаментальных аспектов синтаксиса шаблонов Jinja. Jinja Templating предоставляет множество дополнительных функций и функций, таких как макросы, контекст шаблона и многое другое, чтобы сделать создание и настройку шаблона эффективным и гибким.

Передача данных в шаблоны

Теперь, когда у вас есть готовые шаблоны, вам нужно передать данные из ваших конечных точек FastAPI в шаблоны для рендеринга.

Добавьте следующий код в main.py файл:

от Фастапи Импортировать FastAPI, Запрос
от fastapi.ответы Импортировать HTMLответ
@app.get("/", response_class=HTMLResponse)
асинхронныйдефread_posts(запрос: запрос):
возвращаться шаблоны. ШаблонОтвет("блог.html", {"запрос": запрос, 
"сообщения": fake_posts_db})

Код определяет конечную точку FastAPI, которая обрабатывает запрос GET к корневому URL-адресу ("/") и возвращает HTMLответ генерируется из блог.html шаблон. Он передает контекстный словарь, содержащий текущий объект запроса и fake_posts_db, в шаблон. Таким образом, Jinja может отображать точные и динамичные данные.

Посещать http://localhost: 8000/ в вашем браузере, и вы должны увидеть что-то вроде этого:

Вы успешно передали данные в шаблоны для рендеринга.

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

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

Вы будете использовать CSS для улучшения внешнего вида страницы.

в статический каталог, создайте стили.css файл со следующим кодом.

тело {
семейство шрифтов: Ариал, без засечек;
допуск: 0;
набивка: 20пикс.;
фоновый цвет: #f5f5f5;
}
h1, h2, h3, h4 {
цвет: #333;
}


.почта {
фоновый цвет: #ффф;
набивка: 20пикс.;
нижняя граница: 20пикс.;
радиус границы: 5пикс.;
коробка-тень: 0 2пикс. 4пикс.RGBA(0, 0, 0, 0.1);
}


.почтаh3 {
верхняя граница: 0;
}


.почтап {
нижняя граница: 10пикс.;
}


.почтаул {
список стилей: никто;
padding-left: 0;
}


.комментарий {
нижняя граница: 10пикс.;
набивка: 10пикс.;
фоновый цвет: #f9f9f9;
радиус границы: 5пикс.;
}
нижний колонтитул {
фоновый цвет: #f2f2f2;
набивка: 10пикс.;
выравнивание текста: центр;
}

Изменить голова элемент base.html шаблон следующим образом:

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

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

Посещать http://localhost: 8000/ в вашем браузере.

Те же процедуры применяются к обслуживанию изображений и файлов JavaScript.

Не забывайте следовать рекомендациям

При работе с шаблонами Jinja в FastAPI важно следовать определенным рекомендациям, чтобы обеспечить хорошо организованную и эффективную базу кода.

  • Организуйте шаблоны в специальном каталоге и рассмотрите возможность использования подкаталогов для связанных шаблонов.
  • Используйте наследование шаблонов, чтобы создавать повторно используемые базовые шаблоны и расширять их для определенного контента.
  • Тщательно выбирайте данные для передачи в шаблоны, сохраняя небольшую нагрузку, и используйте процессоры контекста или промежуточное ПО для часто используемых данных.
  • Используйте функции шаблонов Jinja, такие как макросы, фильтры и управляющие структуры, для улучшения возможности повторного использования и удобочитаемости кода.
  • Оптимизируйте производительность за счет реализации стратегий кэширования статических шаблонов, использования заголовков кэширования HTTP и профилирования узких мест производительности.

Следуя этим рекомендациям, вы сможете поддерживать структурированный проект, оптимизировать производительность рендеринга и эффективно использовать функции шаблонов Jinja в своих приложениях FastAPI.

Использование FastAPI для создания RestAPI

Помимо создания приложений, требующих шаблонов рендеринга. FastAPI отлично подходит для создания RestAPI благодаря высокой производительности, простому в использовании синтаксису, автоматическому созданию документации и масштабируемости. Благодаря этим функциям FastAPI идеально подходит для эффективной разработки надежных веб-API.