如何使用flash()在烧瓶中显示消息
#编程 #教程 #python #flask

介绍

Blask flash()功能是向用户显示临时消息的有效方法。这可用于显示各种消息,包括错误,通知,警告和状态消息。

在本文结束时,您将能够学习:

  • 如何使用flash()函数

  • 前端闪烁消息

  • 与类别闪烁消息

  • 根据类别过滤闪存消息

  • 有效使用闪烁消息的最佳实践

先决条件

在您深入研究有关用烧瓶闪烁消息的教程之前,请确保您对以下概念有基本的了解:

  • 熟悉烧瓶,包括路线处理,模板和基本的应用结构。

  • 对HTML标记的基本理解是必要的,因为您将使用HTML模板来呈现前端闪烁的消息。

  • 理解Jinja2模板引擎,该引擎与烧瓶集成在一起,用于在HTML模板中渲染动态内容。

如何使用 flash()方法

如前所述,在提出特定请求后,使用flash()函数向用户显示消息。它的主要目标是提供相关的反馈,从而增强用户体验。

flash()函数接受两个参数:

  • message:向用户显示的消息。

  • category:指定消息类别。这是一个可选参数。

在烧瓶应用程序中使用flash()

本节描述了如何将消息闪烁功能集成到烧瓶应用程序中并在前端显示。

从烧瓶和其他必需的模块导入闪光灯

创建一个app.py文件,并从flask以及其他必要的模块导入flash

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

您也可以在一行中导入这些模块。

烧瓶应用程序设置

app = Flask(__name__)
app.secret_key = "Sachin"

创建并存储了Flask的实例,并存储在app变量中,以初始化烧瓶应用程序。

使用app对象的secret_key属性将烧瓶应用程序的秘密密钥分配为"Sachin"。此键将用于会话管理。

注意:将秘密键存储在安全环境中至关重要,而不是将其直接在应用程序中进行硬编码。

在视图函数中实现flash()函数

@app.route("/info", methods=["GET", "POST"])
def add_info():
    if request.method == "POST":
        name = request.form['name']
        profession = request.form['profession']

        if name == "" or profession == "":
            flash("Invalid: Every field is required.")
            return redirect(url_for("add_info"))
        else:
            flash("Success: Info added successfully.")
            return redirect(url_for("add_info"))
    return render_template("info.html")

创建了路由"/info"来管理GETPOST请求,并将其链接到add_info()视图函数。

add_info()视图函数中,它检查请求是否为POST请求,然后从"Name""Profession"表单字段中检索值。

之后,它检查了任何字段是否为空。如果是,则使用flash()函数显示一条消息"Invalid: Every field is required.",并且该路由保持不变。相反,如果没有一个字段为空,则使用flash()函数闪烁消息"Success: Info added successfully.",并且该路线继续以获取更多信息输入。

但是,这不会立即在前端显示该消息。为了实现这一目标,您必须在模板中使用get_flashed_messages()功能。

在消息模板中实现get_flashed_messages()函数

在项目中的模板中创建一个名为message.html的文件。

{% with msg = get_flashed_messages() %}
{% if msg %}
{% for message in msg %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>{{ message }}</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}

get_flashed_messages()功能检索闪烁的消息并将其保存在会话中。使用with语句调用该函数,其输出存储在msg变量中。

{% if msg %}语句评估是否存储在msg变量中。如果存在此类消息,则{% for message in msg %}将通过每条消息迭代迭代,并在Bootstrap Alert组件中使用{{ message }}渲染它们。

最终,使用{% endfor %}终止的循环,使用{% endif %}终止条件块,而with语句块用{% endwith %}终止。

现在,您可以将消息模板包括在任何模板中以显示消息。

准备前端

templates文件夹中创建两个HTML文件,其中名称为base.htmlinfo.html

base.html

此文件将包含带有Bootstrap CSS和JavaScript的基本HTML布局。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet">

    <title>Flash Message Using Flask</title>
</head>
<body>

{% block content %} {% endblock %}

<script crossorigin="anonymous"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

info.html

此文件将保留用于输入信息的表单,并包含以显示闪烁消息的message.html模板。

{% extends 'base.html' %}

{% block content %}
{% include 'message.html' %}
<div class="container my-5">
    <form action="/info" method="post">
        <div class="mb-3">
            <label class="form-label" for="name">Name</label>
            <input class="form-control" id="name" name="name" type="text">
        </div>
        <div class="mb-3">
            <label class="form-label" for="profession">Profession</label>
            <input class="form-control" id="profession" name="profession" type="text">
        </div>
        <button class="btn btn-dark" type="submit">Submit</button>
    </form>
</div>
{% endblock %}

运行烧瓶应用程序

执行app.py文件并评估前端时,您会在提出请求时观察闪烁的消息。

这是使用"/info"路线在127.0.0.1:5000服务器上托管的应用程序的预览。

Webpage preview

在不完成“职业” 字段的情况下提交表单时,应用程序显示相关的闪烁消息。

Invalid message displayed

在完成所有字段的表格时,将显示相关消息。

Success message displayed

类别闪烁消息

每个消息都有一个独特的目的。有些人旨在警告用户,而另一些则表示成功完成任务。将类别分配给消息使它们彼此不同,并提供了更好的用户体验。

get_flashed_messages()函数提供了可以将with_categories参数设置为True。这样做使您可以利用分配给flash()函数的消息的类别。

将类别分配给消息

要分配类别,请使用flash()函数。按照以下代码中所示,在app.py文件中调整您的add_info()视图函数:

@app.route("/info", methods=["GET", "POST"])
def add_info():
    if request.method == "POST":
        name = request.form['name']
        profession = request.form['profession']

        if name == "" or profession == "":
            flash("Invalid: Every field is required.", "danger")
            return redirect(url_for("add_info"))
        else:
            flash("Success: Info added successfully.", "success")
            return redirect(url_for("add_info"))
    return render_template("info.html")

类别dangersuccess分配给两个消息。这些类别对应于Bootstrap CSS类。具体来说,“危险” 表示错误,而“成功” 表示成功完成。

检索类别和应用样式

要在模板中利用闪烁的消息中的类别,请使用模板中的get_flashed_messages(with_category=True)检索它们。然后,以与常规消息相似的方式遍历它们。

通过实现提供的代码来调整message.html模板:

{% with msg = get_flashed_messages(with_categories=True) %}
{% if msg %}
{% for category, message in msg %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
  <strong>{{ message }}</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}

该类别被检索并用于将特定的CSS属性应用于Bootstrap Alert组件,该组件是针对相应请求量身定制的。

有了这些更改,请再次运行应用程序。您会观察到与特定请求相对应的不同颜色突出显示的消息。

下面的插图描述了消息的外观分别在无效和成功的表单提交之间的不同。

Invalid message highlighted with red

Success message highlighted with green

类别的另一个用例

类别还可以用作消息的前缀,提供另一种实际应用。在Bootstrap警报组件的<div>块中插入提供的属性。

<strong>{{ category }} - {{ message }}</strong>

提供的代码将添加相应的类别作为实际消息的前缀。这将导致与下图中显示的外观类似。

Used category as a prefix

根据类别过滤闪存消息

要根据类别过滤消息,您可以在模板中的get_flashed_messages()函数中使用category_filter参数。此参数接受消息类别列表。

在模板文件夹中创建一个名为filtered_message.html的新文件。然后,将提供的代码段插入此文件。

{% with error_msg = get_flashed_messages(category_filter=["danger"]) %}
{% if error_msg %}
{% for message in error_msg %}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>{{ message }}</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}

上面提到的代码段检索并根据“ danger” 类别使用get_flashed_messages(category_filter=["danger"])进行过滤消息。如果有与此类别相匹配的闪烁的消息,则代码通过它们迭代并在提出相关请求时显示它们。

仅在前端显示“ danger” 类别的消息,请在info.html中包含filtered_message.html模板。

在烧瓶中使用闪烁消息的最佳实践

闪烁的消息对于通过及时反馈增强用户体验非常有价值。为了最大化其影响,重要的是要实施以下实践。

  • 提供清晰简洁的消息,并避免在每个请求中显示消息,以防止压倒性用户。

  • 出现错误消息时,包括有关用户如何解决问题的说明。

  • 将合适的类别分配给准确反映其内容和目的的消息。

  • 由于闪烁的消息是暂时的,请考虑添加一个解散按钮,以允许用户一旦不再需要它们就可以将其删除。

  • 不要在消息中揭示任何敏感细节,因为这可能会损害您的应用程序的安全性。

结论

在应用程序上闪烁消息有助于将执行的某些操作通知用户,无论是任务完成,错误还是警告。它可以增强用户体验,但前提是要牢记最佳实践。

在本文中,秘密密钥是在应用程序中进行了硬编码的,这不是一个好的做法。存储敏感细节,例如受保护环境中的秘密密钥,并不要在消息中透露它们。


如果您喜欢这个

,您可能会感兴趣的其他文章

How to structure Flask app using Blueprint

Upload and display images on the frontend using Flask in Python

Building a Flask image recognition webapp using a deep learning model

How to connect the SQLite database with Flask app using Python

How to create a database in Appwrite using Python

How to Integrate TailwindCSS with Flask


这就是目前的全部

保持编码