Flask表单提交后同页面显示消息的实现教程-html教程-PHP中文网

Flask表单提交后同页面显示消息的实现教程

本教程详细阐述了如何在Flask应用中，通过利用flash消息机制，实现表单提交成功后在同一页面内显示确认信息，而非跳转到新页面。文章涵盖了后端Flask代码的修改、前端HTML模板的渲染逻辑，并强调了POST-Redirect-GET模式和消息分类等最佳实践，旨在提供一个结构清晰、用户体验友好的表单处理方案。

在web开发中，用户提交表单后，通常需要向用户反馈操作结果，例如“注册成功”或“数据保存失败”。常见的做法是将用户重定向到另一个页面显示结果，或者直接在当前页面刷新并显示消息。对于需要在同一页面内（例如表单旁边）显示确认信息的需求，直接返回html字符串会导致浏览器渲染一个全新的页面，而不是在原页面上更新内容。flask提供了一个优雅的解决方案——flash消息系统，它允许我们在一个请求中存储消息，并在后续的请求中（通常是重定向后的页面）获取并显示这些消息。

问题背景与传统方法局限

原始的Flask应用代码在表单提交成功后，直接返回了一个包含HTML字符串的响应：

# ... (部分Flask应用代码) ...
@app.route('/', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        # ... (数据库操作) ...
        return '<h1> Dados cadastrados com sucesso </h1>' # 问题所在：返回新页面
    return render_template('index.html')

登录后复制

这种return '<h1>...</h1>'的方式，会导致浏览器接收到一个全新的HTML文档，并将其替换当前页面，从而无法实现“在同一页面，表单旁边”显示消息的需求。为了解决这个问题，我们需要使用Flask的flash消息机制结合重定向。

Flask flash消息机制

flash是Flask内置的一个功能，用于在用户会话中存储一次性消息。这些消息通常在下一个请求中被检索并显示，然后自动从会话中清除。这非常适合在表单提交后重定向到同一页面或另一个页面时显示确认或错误信息。

后端实现：Flask应用修改

首先，我们需要从flask模块中导入flash、redirect和url_for。flash用于存储消息，redirect用于重定向用户，url_for用于动态生成URL。

修改后的form视图函数应遵循POST-Redirect-GET (PRG)模式。PRG模式是一种Web开发最佳实践，它通过在POST请求后立即进行GET请求重定向来防止表单重复提交，并允许用户刷新页面而不会再次提交数据。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

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

app = Flask(__name__)
app.config['DEBUG'] = True
app.config['SECRET_KEY'] = 'your_secret_key_here' # 必须设置一个SECRET_KEY来使用session和flash

app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = '104041122'
app.config['MYSQL_DB'] = 'PAGINA10'

mysql = MySQL(app)

@app.route('/', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        digitado = request.form

        nome = digitado['nome']
        cpf = digitado['cpf']
        email = digitado['email']
        birth = digitado['birth']

        try:
            cursor = mysql.connection.cursor()
            # 确保表存在，如果不存在则创建
            cursor.execute("CREATE TABLE IF NOT EXISTS pagina10 (nome VARCHAR(50) NOT NULL, cpf VARCHAR(11) NOT NULL, email VARCHAR(20) NOT NULL, birth DATE NOT NULL)")
            cursor.execute("INSERT INTO pagina10 (nome, cpf, email, birth) VALUES (%s, %s, %s, %s)", (nome, cpf, email, birth))
            mysql.connection.commit()
            cursor.close()
            # 存储成功消息，并指定类别为 'success'
            flash('Dados cadastrados com sucesso!', 'success')
        except Exception as e:
            # 发生错误时回滚事务并存储错误消息
            mysql.connection.rollback()
            flash(f'Erro ao cadastrar dados: {e}', 'error')
        finally:
            # 无论成功或失败，都重定向回表单页面
            return redirect(url_for('form'))

    # GET请求或POST请求重定向后渲染表单页面
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

登录后复制

代码解释：

app.config['SECRET_KEY']: flash消息依赖于Flask的会话（session），而会话需要一个SECRET_KEY来加密。请务必设置一个强随机字符串作为生产环境的密钥。
flash('消息内容', '类别'): flash函数接收两个参数：消息内容和可选的类别。类别（如'success'、'error'、'info'）可以用于前端CSS样式，以便为不同类型的消息显示不同的视觉效果。
try...except...finally: 这是一个良好的实践，用于处理数据库操作可能出现的错误。在try块中执行正常操作，except块捕获异常并回滚事务，finally块确保在任何情况下都会执行重定向。
return redirect(url_for('form')): 这是PRG模式的关键。在POST请求处理完成后，不是直接渲染模板，而是重定向到同一个视图函数（通过url_for('form')生成/的URL）。当浏览器收到重定向响应后，会发起一个新的GET请求到/，此时flash存储的消息就可以在index.html中被检索到。

前端展示：HTML模板修改

在HTML模板中，我们需要使用Jinja2模板引擎提供的get_flashed_messages()函数来获取并显示这些消息。通常，我们会遍历所有闪现消息，并根据其类别应用不同的样式。为了满足“在表单旁边”显示的要求，可以将这段代码放置在<form>标签内部，例如在所有输入字段之前或提交按钮附近。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册表单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 简单的消息样式 */
        .flash-messages {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 4px;
            font-size: 0.9em;
        }
        .alert {
            padding: 8px 15px;
            margin-bottom: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }
        .alert-error { /* 使用error或danger都可以 */
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
        /* 其他表单样式 */
        form {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        form div {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        form input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-left: 10px;
        }
        form button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
        }
        form button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form method="POST" action="">
        <!-- 闪现消息显示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="flash-messages">
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">
                        {{ message }}
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        {% endwith %}

        <div>
            <i class="fa-solid fa-pen"></i>
            <input type="text" required name="nome" autofocus placeholder="Nome" data-ls-module="charCounter" maxlength="50" minlength="3"/>
        </div>
        <div>
            <i class="fa-solid fa-id-card"></i>                    
            <input type="text" required name="cpf" autofocus placeholder="CPF" minlength="11" maxlength="11"/>               
        </div>
        <div>
            <i class="fa-solid fa-at"></i>                    
            <input type="email" required name="email" autofocus placeholder="E-mail" data-ls-module="charCounter" minlength="5"  pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">                
        </div>
        <div>
            <i class="fa-solid fa-cake-candles"></i> 
            <input type="date" required name="birth" autofocus placeholder="Nascimento">                
        </div>
        <button type="submit">Cadastrar</button>
    </form>
</body>
</html>

登录后复制

HTML代码解释：

{% with messages = get_flashed_messages(with_categories=true) %}: 这个Jinja2块用于获取所有闪现消息。with_categories=true参数会使get_flashed_messages()返回一个包含消息内容和其类别的元组列表（例如 [('success', '消息内容'), ('error', '错误信息')]）。
{% if messages %}: 检查是否存在任何闪现消息。
{% for category, message in messages %}: 遍历每条消息，并分别获取其类别和内容。
<div class="alert alert-{{ category }}">: 这里利用消息类别动态生成CSS类（如alert-success或alert-error），以便通过CSS对不同类型的消息进行样式化。
放置位置: 将整个{% with ... %}块放置在表单内部的合适位置，例如在所有输入字段之前，或紧邻提交按钮，以确保消息在表单的上下文中显示。

关键概念与最佳实践

POST-Redirect-GET (PRG)模式: 这是一个重要的Web开发模式。在处理POST请求后，总是重定向到一个GET请求。这可以防止用户在刷新页面时重复提交表单数据，并允许用户收藏或分享页面而不会意外触发POST请求。
消息分类: 为flash消息指定类别（如success, error, warning, info）是最佳实践。这使得前端可以根据消息类型应用不同的CSS样式，从而提供更清晰的用户反馈。
会话管理: flash消息存储在用户会话中。这意味着它们是用户特定的，并且在被检索后会自动清除。为了使会话正常工作，必须在Flask应用中设置app.config['SECRET_KEY']。
前端样式: 提供的HTML代码中包含了基本的CSS样式示例，用于alert、alert-success和alert-error类。在实际项目中，应根据设计需求使用更完善的CSS框架（如Bootstrap）或自定义样式来美化这些消息。
错误处理: 在数据库操作等可能失败的场景中，使用try...except...finally块来捕获异常并flash错误消息，同时确保事务回滚，是健壮应用的关键。

总结

通过采用Flask的flash消息机制并结合POST-Redirect-GET模式，我们能够优雅地实现在表单提交后，于同一页面内显示动态反馈消息的需求。这种方法不仅提升了用户体验，避免了不必要的页面跳转，还遵循了Web开发的最佳实践，使得应用更加健壮和易于维护。正确地配置SECRET_KEY，合理地使用消息类别进行样式化，并结合适当的错误处理，将使您的Flask应用在用户交互方面更加专业和友好。

以上就是Flask表单提交后同页面显示消息的实现教程的详细内容，更多请关注php中文网其它相关文章！