LabEx
ВойтиПрисоединиться бесплатно

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

FlaskFlaskBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

Примечание: вам нужно создать файл кода самостоятельно и запустить его в среде. Вы можете просмотреть статус сервиса Flask на Web 5000.

Создание базового макета

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

<!-- flaskr/templates/base.html -->
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<nav>
  <h1>Flaskr</h1>
  <ul>
    {% if g.user %}
    <li><span>{{ g.user['username'] }}</span></li>
    <li><a href="{{ url_for('auth.logout') }}">Выйти</a> {% else %}</li>

    <li><a href="{{ url_for('auth.register') }}">Зарегистрироваться</a></li>
    <li>
      <a href="{{ url_for('auth.login') }}">Войти</a>
      {% endif %}
    </li>
  </ul>
</nav>
<section class="content">
  <header>{% block header %}{% endblock %}</header>
  {% for message in get_flashed_messages() %}
  <div class="flash">{{ message }}</div>
  {% endfor %} {% block content %}{% endblock %}
</section>

Шаблон регистрации

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

<!-- flaskr/templates/auth/register.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Регистрация{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Имя пользователя</label>
  <input name="username" id="username" required />
  <label for="password">Пароль</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Зарегистрироваться" />
</form>
{% endblock %}

Шаблон входа

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

<!-- flaskr/templates/auth/login.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Войти{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Имя пользователя</label>
  <input name="username" id="username" required />
  <label for="password">Пароль</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Войти" />
</form>
{% endblock %}

Резюме

В этом практическом занятии мы узнали, как создавать и использовать шаблоны в Flask. Мы создали базовый макет, который включает общие элементы нашего приложения, а затем создали специфические шаблоны для страниц регистрации и входа, которые расширяют этот базовый макет и заполняют его специфическим контентом. Это позволяет нам избегать повторений кода (DRY - Don't Repeat Yourself), делая его более поддерживаемым и менее подверженным ошибкам.