如何基于现有Flask代码实现带验证反馈的登录跳转功能

步骤1：修改Flask后端代码 #

添加表单处理路由，引入必要模块处理请求与重定向：

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

app = Flask(__name__)

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

@app.route('/login/')
def login():
    # 获取后端传递的错误提示，无则为空
    error = request.args.get('error')
    return render_template('login.html', error=error)

# 模拟用户数据库
database={'admin':'admin'}

@app.route('/form_login', methods=['POST'])
def form_login():
    # 获取表单提交的账号密码
    username = request.form.get('user')
    password = request.form.get('pass')
    
    # 验证账号密码有效性
    if username in database and database[username] == password:
        # 验证成功，跳转至首页
        return redirect(url_for('home'))
    else:
        # 验证失败，携带错误信息返回登录页
        return redirect(url_for('login', error='用户名或密码错误，请重新输入'))

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

步骤2：修改登录页面HTML代码 #

在表单中添加错误提示区域，通过Jinja2模板渲染后端传递的错误信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/login.css">
    <title>Login</title>
    <style>
        /* 可选：给错误提示添加样式，提升辨识度 */
        .error-message {
            color: red;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <div class="row">
            <form action="/form_login" method="post">
                <div class="colm-form">
                    <div class="form-container">
                        <!-- 错误提示渲染区域 -->
                        {% if error %}
                            <div class="error-message">{{ error }}</div>
                        {% endif %}
                        <input type="text" placeholder="Email" name="user" id="user">
                        <input type="password" placeholder="Password" name="pass" id="pass">
                        <button class="btn-login" type="submit">Login</button>
                    </div>
                </div>
            </form>
        </div>
    </main>
</body>
</html>

功能说明 #

• 输入正确账号（admin）和密码（admin）时，点击登录将直接跳转至首页index.html。
• 账号不存在或密码不匹配时，页面将重新加载登录页，并在表单上方显示红色错误提示。
• 开启debug=True便于开发调试，上线部署时建议关闭该选项。

内容的提问来源于stack exchange，提问作者muil