Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Шаблонизатор Python: Веб-разработка (Flask)

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

HTML в виде строки — плохой подход

Представим, что мы создаем HTML-страницу в виде строки:

@app.route('/courses/<name>/')
def courses(name):
    courses = get_courses(name)

    return '''
            <html>
              <head>
                <title>''' + courses.name + '''</title>
              </head>
              <body>
                <h1>''' + courses.name + '''</h1>
                <div>''' + courses.body + '''</div>
              </body>
            </html>
           '''

У такого подхода много недостатков:

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

Чтобы решать подобные проблемы, придумали шаблонизаторы.

Шаблонизаторы

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

Чтобы использовать шаблонизатор Jinja2, его нужно подключить:

from flask import render_template

@app.route('/users/<id>')
def users(id):

    return render_template(
        'index.html',
        name=id,
    )

Функция render_template() выполняет рендеринг указанного шаблона и добавляет результат в ответ. Сама функция принимает на вход два параметра:

  1. Путь до нужного шаблона
  2. Контекст — набор именованных аргументов, который будет доступен внутри шаблона. Сюда можно передавать все что угодно

Далее добавляем файл templates/index.html со следующим содержимым:

<h1>Hello, {{ name }}</h1>

Теперь откройте браузер и попробуйте загрузить страницу http://localhost:5000/users/nick.

curl localhost:5000/users/nick

<h1>Hello, nick</h1>

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

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

Шаблонизатор Jinja2 отличается от обычного HTML тем, что содержит в себе дополнительные конструкции:

  • {{ ... }} — для вывода переменных
  • {% ... %} — для управления логикой шаблона
  • {# ... #} — для комментариев

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

Обработчик:

@app.route('/courses/')
def courses():
    courses = get_courses()

    return render_template(
        'courses/index.html',
        courses=courses
    )

Шаблон:

<table>
     {% for course in courses %}
     <tr>
       <td>
           {{ course.id }}
       </td>
       <td>
           {{ course.name }}
       </td>
     </tr>
     {% endfor %}
 </table>

При открытии страницы /courses/ у нас будет отображаться следующий список:

Image result

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


Самостоятельная работа

  1. Добавьте обработчик для просмотра страницы пользователя (следующий после настройки пример)
  2. Создайте для него шаблон templates/users/show.html. Выведите в нем идентификатор пользователя и никнейм пользователя
  3. Выполните запрос к странице /users/5
  4. Попробуйте поменять число

Image processing


Дополнительные материалы

  1. Шаблонизатор Jinja2

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Python-разработчик
Профессия
с нуля
Разработка веб-приложений на Django
1 декабря 10 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»