2016-12-03 5 views
3

Я работаю над веб-приложением, используя Flask в Python.Как отображать мигающее сообщение без перезагрузки страницы в Flask?

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

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

Я хочу отображать сообщения без перегрузки страницы.

Я слышал, что могу сделать это с помощью js, но я не знаком с js.

Если у вас есть идеи или предложения, я был бы признателен.

Есть мой код, который мог бы улучшить картину того, что я делаю.

Это визуализатор между моим приложением и основной файл HTML

{% macro render_field(field) %} 
 
<dt> {{ field.label }} 
 
<dd> {{ field(**kwargs)|safe }} 
 
{% if field.errors %} 
 
     <ul class=errors> 
 
     {% for error in field.errors %} 
 
       <li>{{ error }}</li> 
 
     {% endfor %} 
 
     </ul> 
 
{% endif %} 
 
</dd> 
 
{% endmacro %}

Это HTML-файл был я хочу, чтобы отобразить мигающие сообщения:

<div class="container-fluid" style="min-height:100%"> 
 
    {% with messages = get_flashed_messages() %} 
 
    {% if messages %} 
 
     {% for message in messages %} 
 
     <div class="alert alert-warning alert-dismissible" role="alert"> 
 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     {{message}} 
 
     </div> 
 
     {% endfor %} 
 
    {% endif %} 
 
    {% endwith %} 
 
</div>

ответ

0

Это невозможно с помощью Python без reloa на странице. Вы должны сделать это в javascript. Я предлагаю стилизацию CSS с display: none и display: block. Вот пример.

1) Код Python, это должно быть в вашем файле app.py или flask.py.

app.route('/flash/<message>') 
def flash(message): 
    return render_template('flash.html', msg=message) 

Это сделает страницу HTML с именем flash.html. Прошедший URL будет также содержать другой аргумент: <message> - это сообщение, которое будет мигать. URL-адрес, подобный этому, localhost:80/flash/Hello%20World! будет мигать над сообщением «Hello World!». на вашем экране.

Существует также другой способ передать сообщение, это аргументы. Код для этого так.

app.route('/flash') 
def flash(): 
    message = request.args.get("msg") 
    return render_template("flash.html", ,msg=message) 

Это использует аргументы запроса колбы. Таким образом, URL-адрес, подобный этому, localhost:80/flash?msg=Hello%20World! даст мигающее сообщение «Hello World!». Если вы хотите использовать этот метод, обязательно укажите оператор импорта from flask import request в своих операциях импорта.

2) Html Code, это отдельный файл с именем, flash.html в вашей папке шаблонов.

<body> 
    <h1 id="header">{{ message }}</h1> 
    <script> 
    var heading = $("#header"); 
    setInterval(function() { 
     if (heading.style.display == "block") { heading.style.display = "none"; } 
     else if (heading.style.display == "none") { heading.style.display = "block"; } 
    }, 1000); 
    </script> 
</body> 

1000 в setInterval составляет миллисекунды. Таким образом, заголовок будет blink каждые 2 секунды.

+0

Как я понял, в вашем примере он должен вернуть значение функции, но что я могу сделать, если в моем приложении я должен отобразить сообщение и продолжить чтение скрипта? Я не могу просто отправить переменную в функцию, потому что она выполнит функцию с начала – trm0808

+0

. Это продолжит чтение скрипта. 'setInterval' - это поток. Я не уверен, насколько я прав, но я знаю, что он продолжит чтение скрипта после того, как произойдет 'setInterval'. –

+0

Прошу прощения, но как вам передать flash («текст») в шаблон html? вы передаете его переменной? – trm0808

1

Вот что Flask Web Development: Developing Web Applications with Python (pp. 46-48) должно сказать о мигающем сообщении:

Иногда полезно дать пользователю обновление статуса после того, как запрос будет завершен. Это может быть сообщение с подтверждением или предупреждение. Типичным примером является то, когда вы отправьте форму для входа на веб-сайт с ошибкой, и сервер отвечает путем рендеринга формы входа в систему с сообщением над ним, в котором сообщается, что ваш логин или пароль недействителен. Flask включает эту функциональность в качестве основной функции. В примере 4-6 показано, как функция flash() может использоваться для этой цели.

Пример 4-6. hello.py: Мелькают сообщения

Example 4-6. hello.py: Flashed messages

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

Вызов flash() недостаточен для отображения сообщений; шаблоны, используемые приложением , должны отображать эти сообщения. Лучшим местом для отображения отмеченных сообщений является базовый шаблон, потому что это позволит включить эти сообщения на всех страницах. Flask создает функцию get_flashed_messages(), доступную шаблонам для извлечения сообщений, и визуализируйте их, как показано в примере 4-7.

Пример 4-7. шаблоны/base.html: Флэш сообщение рендеринга

Example 4-7. templates/base.html: Flash message rendering

В этом примере сообщения отображаются с использованием стилей CSS оповещения Bootstrap для предупреждения сообщений (один показан на рисунке 4-4).

Figure 4-4. Flashed message

Рисунок 4-4. Мелькнула сообщение

петля используется, потому что может быть несколько сообщений в очереди на дисплее, один для каждый раз, когда flash() был назван в предыдущем цикле запроса. Сообщения, которые извлекаются из get_flashed_messages(), не будут возвращены при следующей вызове этой функции, , так что отмеченные сообщения появляются только один раз и затем отбрасываются.

+0

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

+1

@boardrider, пожалуйста, не используйте фотографии в своем сообщении. Вместо этого используйте функцию кода при переполнении стека. Это отличный пример выполнения сообщений. Я уже создал что-то подобное для своих приложений. Мой пост предназначен для * мигания * сообщений. –

0

Вместо этого вы можете использовать Toastr. Я столкнулся с тем же самым препятствием, что и Flask's Flash, и Toastr - чистый JS.Вы можете использовать его так же, как строки лога консоли в коде

toastr.info("Here's a message to briefly show to your user");

Смежные вопросы