Сообщения всплывающего окна

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

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

Вот полный пример:

from flask import Flask, flash, redirect, render_template, \
     request, url_for

app = Flask(__name__)
app.secret_key = 'some_secret'

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

@app.route('/login', methods=['GET', 'POST'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != 'admin' or \
                request.form['password'] != 'secret':
            error = 'Invalid credentials'
        else:
            flash('You were successfully logged in')
            return redirect(url_for('index'))
    return render_template('login.html', error=error)

И вот шаблон layout.html, который творит чудеса:

<!doctype html>
<title>My Application</title>
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <li>{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}
{% block body %}{% endblock %}

Вот шаблон index.html, который наследуется от layout.html:

{% extends "layout.html" %}
{% block body %}
  <h1>Overview</h1>
  <p>Do you want to <a href="{{ url_for('login') }}">log in?</a>
{% endblock %}

И вот шаблон login.html, который также наследуется от layout.html:

{% extends "layout.html" %}
{% block body %}
  <h1>Login</h1>
  {% if error %}
    <p class=error><strong>Error:</strong> {{ error }}
  {% endif %}
  <form method=post>
    <dl>
      <dt>Username:
      <dd><input type=text name=username value="{{
          request.form.username }}">
      <dt>Password:
      <dd><input type=password name=password>
    </dl>
    <p><input type=submit value=Login>
  </form>
{% endblock %}

Всплывающие сообщения с категориями

Журнал изменений

Новое в версии 0.3.

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

Чтобы отобразить сообщение с другой категорией, просто используйте второй аргумент функции flash():

flash(u'Invalid password provided', 'error')

В шаблоне необходимо указать функции get_flashed_messages(), чтобы она также возвращала категории. Цикл в этом случае будет выглядеть немного иначе:

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <ul class=flashes>
    {% for category, message in messages %}
      <li class="{{ category }}">{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}

Это всего лишь один пример того, как отображать эти всплывающие сообщения. Можно также использовать категорию, чтобы добавить префикс, например, <strong>Error:</strong> к сообщению.

Фильтрация сообщений всплывающих окон

Журнал изменений

Новое в версии 0.9.

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

{% with errors = get_flashed_messages(category_filter=["error"]) %}
{% if errors %}
<div class="alert-message block-message error">
  <a class="close" href="#">×</a>
  <ul>
    {%- for msg in errors %}
    <li>{{ msg }}</li>
    {% endfor -%}
  </ul>
</div>
{% endif %}
{% endwith %}

© 2007–2020 Pallets
Licensed under the BSD 3-clause License.
https://flask.palletsprojects.com/en/0.12.x/patterns/flashing/