如何显示跳转后的告警提示？

Question

我有一个页面，重定向用户点击提交按钮后，成功地转到主页。

我想像这样显示一个指示器：

​

​

在从提交按钮被重定向回主页的导航栏下。

我该怎么做呢？打扰一下，我是web开发的新手。

Answer 1

Flask支持闪现消息。https://flask.palletsprojects.com/en/1.1.x/patterns/flashing/

在我看来，这比使用cookie显示临时弹出窗口要好。

因此，要设置闪烁消息，请执行以下操作：

@app.route('/sample')
def sample():
    if successCheck()
        flash('You were successfully logged in')
    return redirect("/index")

在模板中，要检索闪烁的消息，请执行以下操作：

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

您还可以使用类别：

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

# Template
{% 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 %}

或此模板选项：

# Template
{% 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 %}

Answer 2

我相信您可以在flask中创建重定向并设置cookie的响应。就像这样

from flask import make_response

response = make_response(redirect('/homepage'))
response.set_cookie('show_success_flash', 'true')

return response

然后，在您的JS端，您可以读取cookie，如果是真的，则显示消息。然后，您可以在关闭flash消息时删除cookie，也可以在setTimeout之后删除它。类似于：

// homepage.js


const cookie = import 'js-cookie'

if (cookie.get('show_success_flash') {
  const successFlash = document.getElementById('success_flash_message')

  if (successFlash.style.display === 'none') {
    successFlash.style.display = 'block'
  }
}