Шаблоны Flask

На чтение28 мин

Обновлено1 год назад

Просмотров

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

Введение в шаблоны Flask

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

Шаблоны Flask построены на шаблонизаторе Jinja2. Они позволяют нам создавать динамические и интерактивные веб-страницы, комбинируя HTML с кодом Python.

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

Примечание: это расширенная статья о Flask, поэтому, чтобы извлечь из нее максимальную пользу, вам необходимо иметь общее представление о том, как работает Flask. Чтобы быстро освоиться с основами Flask, ознакомьтесь с этим введением в Flask.

Почему шаблоны важны в Flask?

Шаблоны являются ключевыми в Flask, поскольку они способствуют организации кода, сопровождаемости и повторному использованию. Отделяя логику представления от бизнес-логики, шаблоны упрощают управление пользовательским интерфейсом и его обновление без изменения базового кода приложения. Такое разделение улучшает сотрудничество между разработчиками и дизайнерами, позволяя каждой команде работать над различными аспектами приложения независимо.

Ниже описаны некоторые преимущества использования шаблонов во Flask.

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

Улучшенная читабельность. Отделение HTML-кода от кода на Python оставляет нам чистый код, облегчающий его чтение и понимание.

Простота обслуживания. Основываясь на улучшенной удобочитаемости, разделение кода упрощает его обслуживание. Мы можем обновить бизнес-логику, не затрагивая шаблон или код презентации, или мы можем обновить шаблоны, не затрагивая код Python.

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

Создание и рендеринг шаблонов

Основываясь на философии простоты Flask, работа с шаблонами, как правило, проста. Одним из важных требований является то, что шаблоны в Flask должны находиться в каталоге с именем templates, и этот каталог должен находиться в том же каталоге, что и файл нашего приложения.

Вот пример структуры приложения:

my_app/
├── app.py
└── templates/
  └── index.html

Приведенный выше блок кода представляет собой текстовое представление того, как могло бы быть структурировано наше приложение. На нем показан проект Flask с именем my_app, который имеет app. py файл, который будет содержать логику приложения, и каталог шаблонов, содержащий index. html файл. Структурирование приложения таким образом гарантирует, что наша бизнес-логика (код на Python) отделена от логики представления (шаблонов).

Поскольку Flask использует механизм создания шаблонов Jinja2, он может отображать файлы с различными расширениями, такими как. svg,. html,. csv. Однако для этой статьи мы будем использовать расширение. html, поскольку все файлы, с которыми мы будем работать и рендерить, являются HTML-документами.

Затем давайте создадим шаблон с именем index.html и поместите его в каталог шаблонов:

<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
      <title>Index</title>
  </head>
  <body>
      <h1>Welcome</h1>
      <p>This is the index page.</p>
  </body>
</html>

Это базовый HTML-шаблон: в нем есть раздел head и body. Для рендеринга шаблонов в Flask модуль flask имеет метод render_template(), который принимает имя файла шаблона в качестве первого аргумента, а также принимает необязательные аргументы ключевого слова, представляющие данные, которые мы, возможно, захотим передать шаблону.

Вот пример:

# sample.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
  return render_template('index.html')

if __name__ == '__main__':
  app.run()

В приведенном выше приложении Flask мы импортируем Flask и render_template() из модуля flask. Класс Flask помогает нам создать экземпляр приложения Flask. Функция render_template() выполнит рендеринг и вернет index. html шаблон.

index() - это функция просмотра, которая будет обрабатывать запросы с корневого URL-адреса. В этом примере например, эта функция просто вернет шаблон, отрисованный функцией render_template().

Итак, подводя итог, мы создаем шаблон, помещаем его в каталог templates, а затем используем функцию render_template(), чтобы вернуть шаблон пользователю.

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

Наследование в объектно-ориентированном программировании - это концепция, которая позволяет классам наследовать или приобретать свойства и поведение другого класса. Наследование в контексте шаблонов в Flask - это функция, предоставляемая Flask и механизмом создания шаблонов Jinja2, которая позволяет нам определять базовый шаблон и дочерние шаблоны.

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

Создание базового шаблона

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

Вот пример базового шаблона с именем base. html:

 <!--base.html-->
<!DOCTYPE html>
<html>
  <head>
        <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
      <nav>
            <!-- navigation menu will go in here -->
      </nav>
      <div class="content">
            {% block content %}{% endblock %}
      </div>
      <footer>
            <!-- the footer code will go in here -->
      </footer>
  </body>
</html>

В этом примере показан HTML-документ. Он включает в себя некоторые теги, такие как {% block %}. Теги блоков важны при наследовании шаблона, поскольку они указывают весь код, который дочерний шаблон может переопределить. Тег блока обычно содержит описание условное имя, указывающее на тип содержимого, ожидаемого блоком. Он отмечен открывающим и закрывающим блоками. Таким образом, base. html шаблон состоит из двух блоков: заголовка и блока содержимого. Любой дочерний шаблон, наследующий этот шаблон, способен предоставлять свое собственное конкретное содержимое для двух блоков.

Расширение базового шаблона в дочерних шаблонах

Расширение (наследование) базового шаблона, как правило, является простым делом. Чтобы показать, что шаблон наследуется от определенного шаблона, мы используем тег {% extends %}, за которым следует путь к шаблону, который мы наследуем. Как только мы укажем шаблон, который мы расширяем, мы можем продолжить и переопределить блоки, определенные в родительском шаблоне.

Вот пример дочернего шаблона с именем home. html это расширяет base. html шаблон:

<!--home.html-->
{% extends 'base.html' %}

{% block title %}Home - My Website{% endblock %}

{% block content %}
  <h1>Welcome to My Website</h1>
  <p>This is the home page content.</p>
{% endblock %}

В примере ab итак, первый оператор - это тег extends ({% extends ‘base. html ’ %}). Это утверждение сообщает Flask, что home. html шаблон расширяет base. html шаблон. Теги {% block title %} и {% block content %} переопределяют соответствующие блоки в базовом шаблоне, предоставляя конкретное содержимое для домашней страницы.

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

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

Переменные шаблона и управляющие структуры

Чтобы иметь возможность создать dy в динамических приложениях нам нужна возможность передавать данные в шаблоны из нашего приложения на Python. Чтобы передать переменные из функции просмотра Flask в шаблон, мы можем включить их в качестве аргументов при вызове функции render_template() в виде пар ключ–значение или в контекстный словарь. Пары ключ–значение представляют имя переменной в шаблоне, в то время как значение - это фактическое значение переменной.

Вот пример передачи переменных в виде пар ключ=значение:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
  name = "Antony"
  age = 30
  return render_template('index.html', name=name, age=age)

В приведенном выше примере у нас есть функция index(), которая объявляет две переменные — имя и возраст — которые передаются шаблону в качестве необязательных аргументов функции render_template().

Вот пример того, как мы можем передавать переменные в качестве контекстных словарей в шаблон:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
  name = "John"
  age = 25
  context = {
      'name': name,
      'age': age
  }
  return render_template('index.html', **context)

Приведенный выше пример аналогичен первому с точки зрения функциональности. Однако в этом примере мы создаем контекстный словарь с именем context, который содержит пары ключ–значение наших переменных name и age. Затем мы передаем информацию в функцию render_template() с именем шаблона index. html в качестве первого аргумента и контекстного словаря в качестве второго аргумента. Однако мы будем использовать контекстную нотацию ** для распаковки контекстного словаря.

Как только мы передаем переменные в шаблон, мы можем получить к ним доступ, используя синтаксис {{ имя_переменной }} в шаблоне. Переменные могут представлять любой тип данных, таких как строки, числа, списки или даже более сложные объекты.

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

Вот пример, где мы извлекаем переменные имени и возраста:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Hello, {{ name }}!</h1>
  <p>You are {{ age }} years old.</p>
</body>
</html>

В этом примере у нас есть заполнители {{ name }} и {{ age }}, которые заменяются фактическими значениями, передаваемыми из функции просмотра. Передача переменных с использованием контекстного словаря позволяет нам сделать нашу функцию render_template() более чистой, не передавая все переменные одну за другой.

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

Использование управляющих структур в шаблонах

Управляющие структуры в программировании - это конструкции, которые определяют порядок выполнения блоков кода на основе определенных условий. Они позволяют нам контролировать выполнение программы, указывая последовательность и условия, при которых должны выполняться различные действия. В шаблонах Flask мы можем использовать управляющие структуры Python, такие как условные выражения (if, else, если) или структуры управления итерацией (for, while).

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

Условные обозначения (if, else, elif)

Условные операторы позволяют нашему веб-приложению выбирать разные пути или выполнять разные действия в зависимости от того, оценивается ли условие как true или false. Теги {% if %}, {% else %} и{% elif %} используются для условных выражений. Используя условные операторы, мы можем отображать определенные данные или работать с ними, чтобы получить другой результат в зависимости от различных условий.

Вот пример:

{% if temperature > 30 %}
  <p>It's a hot day!</p>
{% elif temperature > 20 %}
  <p>It's a pleasant day.</p>
{% else %}
  <p>It's a cold day!</p>
{% endif %}

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

Мы могли бы комбинировать условные выражения с логическими операторами (and, or, not) или операторами сравнения (==, <, > и т. д. ), чтобы создавать более сложные условные операторы в наших шаблонах, расширяя возможности нашего приложения.

Циклы (for, while)

Используя циклы, мы можем перебирать последовательность элементов или повторять фрагмент кода до тех пор, пока не будет выполнено условие. Цикл {% for %} используется для перебора последовательности, такой как список или словарь.

Вот пример:

<ul>
  {% for item in my_list %}
  <li>{{ item }}</li>
  {% endfor %}
</ul>

В приведенном выше примере у нас есть список с именем my_list. Мы используем цикл for для итерации по нему, чтобы получить отдельные элементы (item), а затем отобразить их с помощью элемента списка.

Цикл {% while %} используется для повторения части кода до тех пор, пока условие не станет ложным или истинным. Вот пример, в котором мы выполняем итерацию по счетчику, установленному на ноль, до тех пор, пока значение не станет равным пяти, а затем условие while будет приходит значение false, и цикл while завершается:

{% set counter = 0 %}
{% while counter < 5 %}
  <p>Iteration {{ counter + 1 }}</p>
  {% set counter = counter + 1 %}
{% endwhile %}

Используя переменные и управляющие структуры в шаблонах Flask, мы можем обрабатывать динамические данные, применять условную логику и выполнять итерации по последовательностям. Эти функции дают нам гибкость при создании динамичных и интерактивных веб-страниц.

Контекст шаблона и глобальные переменные

Контекст шаблона относится к набору переменных и значений, доступных шаблону при его отображении. Контекст шаблона предоставляет необходимые данные, необходимые шаблону для динамической генерации HTML-содержимого шаблона.

Понимание контекста шаблона

Контекст шаблона доступен при рендеринге шаблона с помощью функции render_template(). Функция позволяет нам передавать переменные из наших функций просмотра в шаблон для отображения или обработки. По умолчанию Flask предоставляет следующие переменные контексту шаблона:

запрос: продолжение предоставляет информацию о текущем запросе, чтобы мы могли получить доступ к входящим данным запроса, хотя она будет недоступна, если шаблон отображается без активного контекста запроса
сессия: предоставляет нам информацию о сессии, позволяя нам запоминать информацию от одного запроса к другому
конфигурация: содержит информацию о конфигурации нашего приложения
url_for(): функция (используемая для генерации динамических URL-адресов) для маршрутов в нашем приложении
g: позволяет нам устанавливать глобальные переменные, доступные во всем приложении

Использование глобальных переменных в шаблонах

Бывают моменты, когда мы можем захотеть передать одну и ту же информацию или какое-то общее состояние в нашем приложении и сделать так, чтобы оно оставалось неизменным на протяжении всего срока действия одного активного запроса. Для этой цели Flask предоставляет объект глобального пространства имен (g), который можно использовать для хранения глобальных переменных и доступа к ним.

Чтобы использовать глобальную переменную в шаблоне, нам нужно присвоить значение объекту g в функции просмотра.

Вот пример где мы распространяем название сайта по всему миру:

from flask import Flask, render_template, g

app = Flask(__name__)

@app.before_request
def set_global_variables():
  g.site_title = "My Website"

@app.route('/')
def index():
  return render_template('index.html')

Чтобы использовать объект g, мы должны импортировать его из модуля Flask, и поскольку мы хотим, чтобы переменная title была доступна для каждого запроса, мы используем декоратор before_request. Это означает, что переменная всегда будет устанавливаться перед каждым запросом, поступающим в наше приложение. Затем мы создаем пользовательскую функцию с именем set_global_variables(), где мы задаем переменные, к которым мы хотим иметь глобальный доступ в нашем приложении.

Чтобы получить доступ к переменным в шаблонах, мы должны использовать обозначение {{ g. name_of_the_variable }}.

Вот пример:

<!DOCTYPE html>
<html>
<head>
  <title>{{ g.site_title }}</title>
</head>
</html>

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

Шаблонные формы и пользовательский ввод

Формы важны в Интернете. Они представляют собой способ получения входных данных от пользователей, которые могут быть сохранены или обработаны. Flask предоставляет функции и инструменты для обработки форм, построения интерфейсов форм в шаблонах, проверки и обработки данных форм и отображения ошибок форм.

Создание форм в шаблонах Flask

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

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

Давайте посмотрим примеры того, как мы можем создавать формы в Flask, используя оба метода.

Построение формы using HTML

Чтобы создать форму в шаблонах, мы можем использовать HTML-теги вместе с различными элементами ввода, такими как , и . Мы можем указать, предназначена ли форма для получения данных с сервера или для отправки данных на сервер, используя HTTP-методы GET или POST соответственно, или через действие (URL-адрес, по которому отправлена форма) в открывающем теге <form>.

Вот пример:

<form method="POST" action="{{ url_for('submit_form') }}">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

В этом примере показана базовая форма, которая содержит два поля ввода — имя пользователя и пароль — и кнопку отправки. Открывающий тег <form> означает, что эта форма будет отправлять данные на сервер с использованием метода="POST". Часть action="{{ url_for(submit_form) }}" указывает, что данные формы будут отправлены в URL /submit_form на сервере.

Как только форма будет создана, мы отобразим ее при посещении пользователем это URL-адрес где их просят ввести свое имя пользователя и пароль. Давайте посмотрим, как мы можем обрабатывать данные формы в Flask:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
  if request.method == 'POST':
      username = request.form['username']
      password = request.form['password']
      # Process the form data
      # Redirect or perform other actions
  return render_template('index.html')

if __name__ == '__main__':
  app.run()

Этот пример представляет собой базовое приложение Flask, у которого есть один маршрут для обработки пользовательского запроса, когда пользователь посещает корневой маршрут. Маршрут принимает два HTTP-метода: GET и POST. Это означает, что шаблон формы будет отображаться при посещении пользователем маршрута, поскольку это запрос GET. Когда пользователь заполнит данные, требуемые формой, и нажмет кнопку отправить, это будет запрос на публикацию.

В POST-запросе, когда данные будут отправлены на сервер, мы сможем получить доступ к отправленному data, используя request. form[‘имя пользователя’] и request. form[‘пароль’]. Делая это, мы получаем доступ к данным, введенным пользователем, и как только они у нас будут, мы сможем сохранить их в описательной переменной для дальнейшей обработки.

Создание формы с использованием HTML непосредственно в шаблоне дает нам контроль над ее структурой. Это потребует больше усилий, чем использование класса form из библиотеки WTForms. Например, форма, которую мы создали выше, не включает в себя какой-либо тип обработки ошибок и проверки подлинности. Нам нужно будет обработать это в нашем приложении Flask. Это делается путем создания пользовательских функций, которые проверяют данные перед их использованием в серверной части. Это также требует, чтобы мы написали некоторый JavaScript-код, который будет проверять пользовательский ввод во внешнем интерфейсе.

Создание формы с использованием WTForms

Чтобы создать форму с использованием библиотеки WTForms в Flask, мы сначала должны установить библиотеку, поскольку она не является частью стандартной библиотеки Flask.

Установите его, используя следующую команду:

pip install WTForms

Как только библиотека завершит установку, она будет

доступен для использования. Как правило, использовать его в нашем приложении несложно. Ниже приведены общие шаги по его использованию:

создайте класс form
создайте экземпляр класса form
отрисуйте поля формы в шаблонах
обработайте отправку формы

Давайте посмотрим на пример, демонстрирующий использование:

from flask import Flask, render_template, request
from wtforms import Form, StringField, PasswordField, SubmitField, validators

app = Flask(__name__)

class MyForm(Form):
  username = StringField('Username', validators=[validators.DataRequired()])
  password = PasswordField('Password', validators=[validators.DataRequired()])
  submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
  form = MyForm(request.form)

  if request.method == 'POST' and form.validate():
      username = form.username.data
      password = form.password.data
      # Process the form data
      # Redirect or perform other actions

  return render_template('index.html', form=form)

if __name__ == '__main__':
  app.run()

В этом примере мы импортируем необходимые классы из flask: класс Flask, который создает экземпляр приложения Flask; render_template(), который будет отображать наш шаблон; и request, через который мы будем иметь доступ к объекту request и извлекать данные формы. Мы также импортируем Form, StringField, PasswordField и SubmitField из wtforms, которые мы будем использовать для определения структуры формы. валидаторы обеспечат проверку полей формы.

После импорта мы создаем приложение Flask, используя Flask(__name__) и сохраняем его в переменной app. Затем мы определяем класс MyForm, расширяя класс Form из wtforms. Этот класс будет представлять форму и содержать такие поля, как имя пользователя, пароль и отправить. Каждое из полей связано с соответствующим типом ввода (StringField, PasswordField, SubmitField).

Функция index() определена как обработчик маршрута для корневого URL-адреса. Он обрабатывает как запросы GET, так и POST. Внутри функции, w

e создайте экземпляр MyForm. Это принимает аргумент request. form, который привязывает данные формы к объекту form. Если методом запроса является POST и форма проходит проверку в form. validate(), данные обрабатываются и могут быть предприняты соответствующие действия. Если методом запроса является GET, то index. html шаблон возвращается с объектом формы, переданным в качестве параметра. Это очень важно, так как мы будем использовать объект form для создания формы в шаблоне.

Вот пример того, как поля формы будут отображаться с помощью объекта form:

<form method="POST" action="">
  {{ form.csrf_token }}
  {{ form.username.label }} {{ form.username }}
  {{ form.password.label }} {{ form.password }}
  {{ form.submit }}
</form>

Приведенный выше код показывает, как форма будет отображаться из объекта form, который был передан функции render_template(). Давайте рассмотрим, что делает этот код.

Объект form не создает открывающий и закрывающий теги <form>; мы должны предоставить их сами. Открывающая форма ta

g показывает, что форма будет использовать метод POST при отправке формы, а атрибут action="" показывает, что эта форма будет отправлена по тому же URL—адресу, по которому она была отправлена, - вот почему атрибут action имеет пустую строку.

{{ form. csrrf_token }} - это специальное поле, предоставляемое WTForms для предотвращения атак с подделкой межсайтовых запросов (CSRF). Он генерирует скрытое поле ввода, содержащее токен CSRF, который необходим для отправки формы.

{{ form. username. label }} отобразит метку, связанную с полем username формы.

{{ form. username }} отобразит само поле username, которое будет текстовым полем.

Аналогично приведенной выше строке, {{ форма. пароль. метка }} переменная шаблона отображает метку, связанную с полем пароля формы.

Переменная шаблона {{ form. password }} отображает само поле пароля.

Переменная шаблона {{ form. submit }} отображает кнопку отправки, связанную с формой.

Путем рендеринга полей формы и меток с использованием {{ }} sy

ntax, мы можем динамически генерировать HTML-форму на основе объекта form, переданного из маршрута Flask. Таким образом, поля формы и метки будут соответствовать полям, определенным в классе MyForm.

Использование WTForms упрощает работу с формами, предоставляя удобный способ определения полей формы, применения правил проверки и обработки данных формы. Он абстрагируется от сложностей обработки форм и обеспечивает чистый и модульный подход к созданию форм в приложениях Flask. В библиотеке гораздо больше классов, валидаторов и методов для использования. Чтобы получить представление о том, что он может предложить, ознакомьтесь с документацией WTForms.

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

Встроенные фильтры и пользовательские фильтры

Фильтры - это функции, которые позволяют нам изменять

уточняйте или преобразуйте данные перед отображением их в шаблоне. Использование фильтров позволяет нам выполнять обычные манипуляции с данными и форматирование без написания кода на Python в шаблонах. Jinja2 предоставляет набор встроенных фильтров, таких как capitalize, lower, upper. Фильтры могут быть применены к переменным или выражениям в шаблонах. Чтобы применить фильтр к переменной или выражению, мы используем символ канала (|) после переменной или выражения, за которым следует имя фильтра, который мы хотим применить.

Вот пример использования верхнего фильтра для переменной name:

<p>{{ name | upper  }}</p>

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

Создание пользовательских фильтров

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

Чтобы создать пользовательский фильтр, нажмите определите функцию Python и зарегистрируйте ее в качестве фильтра в нашем приложении Flask.

Вот пример того, как мы можем создать пользовательский фильтр:

from flask import Flask, render_template
from jinja2 import Markup

app = Flask(__name__)

@app.template_filter('add_commas')
def add_commas_filter(value):
  # Check if value is numeric
  if not isinstance(value, (int, float)):
        return value

  # Convert the value to string and add commas
  value_str = str(value)
  parts = []

  while value_str:
        parts.append(value_str[-3:])
        value_str = value_str[:-3]
  return Markup(','.join(reversed(parts)))

@app.route('/')
def index():
  number = 1000000
  return render_template('index.html', number=number)

if __name__ == '__main__':
  app.run()

В этом примере мы определяем пользовательскую функцию фильтра add_commas_filter, которая принимает значение в качестве входных данных и добавляет к нему запятые, если это числовое значение. Мы используем класс Markup, чтобы пометить результирующую строку как безопасную для рендеринга в шаблоне.

Приложение. затем декоратор template_filter() используется для регистрации пользовательского фильтра. Декоратор принимает имя фильтра в качестве аргумента, которым в данном случае является add_commas.

В функции index() route мы передаем в шаблон числовую переменную, которая будет обработана фильтром add_commas.

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

<p>Number with commas: {{ number|add_commas }}</p>

Это выведет числовую переменную с добавлением запятых, если это числовое значение. Используя фильтры, мы можем изменять переменные, которые выводятся в шаблонах, без необходимости писать весь код Python в шаблонах.

Работа со статическими файлами и носителями информации

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

Используя HTML-шаблоны, таблицы стилей CSS, статические файлы, средства обработки мультимедиа и функциональность JavaScript, мы можем создать полноценное веб-приложение, которое предоставляет динамический контент и обеспечивает привлекательный пользовательский интерфейс. Особенности и гибкость Flask позволяют нам органично сочетать эти элементы, помогая создавать безупречный и функциональный конечный продукт.

Далее мы рассмотрим, как мы можем работать со статическими файлами и мультимедиа в Flask.

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

Flask позволяет нам обслуживать статические файлы, такие как CSS, JavaScript, изображения и другие медиафайлы непосредственно из нашего приложения. По умолчанию Flask ищет статические файлы в статическом каталоге, расположенном в том же каталоге, что и файл нашего приложения Flask.

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

Вот пример:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

В этом примере у нас есть файл с именем style. css, который находится в подкаталоге css статического каталога. Чтобы файл был передан, функция url_for() сгенерирует URL-адрес для файла. Особенно полезно использовать функцию url_for() для генерации URL-адресов ресурсов, а не использовать статические маршруты.

Следовательно, чтобы Flask мог обслуживать статические файлы, мы должны поместить их в статический каталог. Мы могли бы дополнительно разместить их в определенных подкаталогах, чтобы указать их тип. Например, у нас мог бы быть подкаталог для css, js и изображений, указывающий тип ресурсов, которые будут храниться в каждом из них.

Связывание файлов CSS и JavaScript в шаблонах

Чтобы связать файлы CSS и JavaScript в наших шаблонах, мы можем использовать соответствующие HTML—теги, такие как <link> для файлов CSS и <script> для файлов JavaScript. Мы можем указать путь к файлу или использовать функцию url_for() для генерации URL-адреса, но соглашение заключается в использовании функции url_for().

Вот пример пример, показывающий, как связать CSS и JavaScript в наших шаблонах:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

<script src="{{ url_for('static', filename='js/script.js') }}"></script>

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

Используя функцию url_for() со "статической" конечной точкой, Flask автоматически обрабатывает генерацию URL-адреса, принимая во внимание любые конфигурации схемы или приложения. Это гарантирует, что будет сгенерирован правильный URL-адрес независимо от структуры приложения или среды развертывания.

Продвинутые методы создания шаблонов

В этом разделе мы рассмотрим некоторые продвинутые методы работы с шаблонами в Flask. Эти методы помогут нам создавать более модульный и повторно используемый код, эффективно тестировать и отлаживать наши шаблоны и сделают наш процесс разработки более эффективным.

Включая шаблоны

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

Чтобы повторно использовать компоненты шаблона, Jinja2 позволяет нам включать другие шаблоны в один шаблон, используя тег {% include %}. Это полезно для повторного использования общих компонентов или разделов в нескольких шаблонах.

Вот пример того, как мы включаем компоненты в другие шаблоны и создаем header. html компонент, который может быть включен в main. html шаблон, использующий включение шаблона в Flask:

<!--header.html-->
<header>
  <h1>Welcome to My Website</h1>
  <nav>
      <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
      </ul>
  </nav>
</header>

<!--main.html-->
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <!-- CSS and other head elements -->
</head>
<body>
  {% include 'header.html' %}

  <div class="content">
      <!-- Main content of the page -->
  </div>

  <!-- Other footer or scripts -->
</body>
</html>

В main. html шаблон, мы используем {% include ‘header. html ’ %} заявление, включающее в себя header. html компонент. Построение компонентов таким образом позволяет нам повторно использовать компоненты на нескольких страницах без дублирования кода. Это способствует повторному использованию кода и упрощает управление общими компонентами пользовательского интерфейса нашего веб-сайта и их обновление.

Шаблонные макросы и повторно используемый код

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

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

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

<!--card_macro.html-->
{% macro render_card(title, content) %}
    <div class="card">
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
    </div>
{% endmacro %}

В этом примере у нас есть макрос с именем render_card в card_macro. html для этого требуются два параметра: заголовок и содержимое. Внутри макроса находится структура элемента карточки с заполнителями для заголовка и содержимого. Обратите внимание, что для определения макроса мы используем тег {% macro %}, и мы используем {% endmacro %}, чтобы закрыть определение макроса.

Давайте теперь посмотрим, как мы могли бы использовать макрос в нашем шаблоне, создав main. html шаблон, который будет использовать card_macro. html:

<!-- main.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <!-- CSS and other head elements -->
</head>
<body>
    {% import  'card_macro.html'  as card %}

    <h1>Welcome to My Website</h1>

    {% card.render_card("Card 1", "This is the content of Card 1.") %}
    {% card.render_card("Card 2", "This is the content of Card 2.") %}

    <!-- Other content of the page -->

</body>
</html>

В main. html , мы импортируем card_macro. html шаблон в качестве переменной карточки, чтобы сделать доступным макрос render_card. Затем мы дважды используем атрибут card. render_card с разными значениями для заголовка и содержимого, что позволяет нам повторно использовать один и тот же блок кода для создания нескольких карточек с разным содержимым.

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

Тестирование и отладка шаблонов

При работе с шаблонами в Flask мы можем столкнуться с проблемами или захотеть протестировать определенные части наших шаблонов. Flask предоставляет несколько полезных методов отладки, например, тег {% debug %}, который отображает подробную информацию о контексте шаблона.

В дополнение к тегу {% debug %} Flask предлагает другие методы отладки, которые могут помочь нам эффективно выявлять и устранять проблемы. Ниже перечислены некоторые методы, которые мы можем использовать.

Синтаксические ошибки шаблона. Flask предоставляет подробные сообщения об ошибках, которые указывают нам на конкретную строку и столбец, в которых произошла ошибка. Это позволяет нам быстро исправлять синтаксические ошибки в наших шаблонах.
Интерактивный отладчик. Flask поставляется с интерактивным отладчиком под названием Werkzeug. Если при отображении шаблона возникает необработанное исключение, отладчик автоматически активируется в браузере и выводит трассировку стека, точно определяющую причину проблемы.
Модульное тестирование. Написание модульных тестов для наших шаблонов - эффективный способ убедиться в их корректности и выявить проблемы на ранней стадии. Мы можем использовать тестовые фреймворки, такие как unittest или pytest, для автоматизации процесса тестирования.

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

Вывод

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

На протяжении всей этой статьи мы исследовали различные аспекты шаблонов Flask. Мы обсудили важность шаблонов во Flask и преимущества, которые они предлагают, такие как организация кода, возможность повторного использования и упрощение обслуживания. Мы узнали, как создавать и визуализировать шаблоны с помощью функции render_template(), а также как передавать данные в шаблоны с помощью контекстных словарей.

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

Кроме того, мы обсудили контекст шаблона и глобальные переменные, разобравшись, как передавать переменные в шаблоны и сделать глобальные переменные доступными в контексте шаблона. Мы рассмотрели функцию url_for(), которая помогает генерировать динамические URL-адреса для маршрутов, повышая гибкость и удобство обслуживания нашего приложения.

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

Используя возможности шаблонов Flask, мы можем создавать визуально привлекательные и интерактивные веб-приложения, которые являются гибкими, модульными и простыми в обслуживании. Шаблоны позволяют нам разделить задачи нашего приложения, способствуют повторному использованию кода и обеспечивают четкое разделение между интерфейсом

nd и ba компоненты ckend.

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

#Python #Flask