python flask 登录成功后js jq弹窗教程(如何在Flask中实现登录失败后js消息弹窗)

python flask 登录成功后js jq弹窗教程(如何在Flask中实现登录失败后js消息弹窗)

项目教程qingyu2023-06-15 19:25:49977A+A-

  思路分析:

  1. 在Flask应用程序中创建一个登录页面,该页面包含一个表单,用户可以输入用户名和密码。

  2. 当用户提交表单时,Flask应用程序将检查用户的登录凭据,并根据结果显示一个成功或失败的消息。

  3. 如果登录成功,Flask应用程序将显示一个消息框,告诉用户登录成功。

  4. 如果登录失败,Flask应用程序将显示一个错误消息,告诉用户用户名或密码无效。

  5. 在消息框中,我们可以使用JavaScript或jQuery来实现弹出消息框的效果,并使用CSS来美化消息框的外观。

  具体代码::

  login.html

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .message {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            color: white;
            font-size: 24px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }
        .success {
            background-color: #4CAF50;
        }
        .error {
            background-color: #f44336;
        }
    </style>
</head>
<body>
    <h1>Login</h1>
    <form method="post" action="/login">
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
    <div id="success-message" class="message success" style="display: none;">Login successful!</div>
    <div id="error-message" class="message error" style="display: none;">Invalid username or password.</div>
    <script>
        {% if login_success == True %}
            $(document).ready(function() {
                $('#success-message').fadeIn().delay(2000).fadeOut();
            });
        {% elif login_success == False %}
            $(document).ready(function() {
                $('#error-message').fadeIn().delay(2000).fadeOut();
            });
        {% endif %}
    </script>
</body>
</html>

  app.py

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        # 处理登录逻辑
        if username == 'admin' and password == 'password':
            login_success = True
        else:
            login_success = False
        return render_template('login.html', login_success=login_success)
    else:
        return render_template('login.html')

if __name__ == '__main__':
    app.run()
点击这里复制本文地址 欢迎来到大黄鸡源码分享网
qrcode

大黄鸡源码编程网 © All Rights Reserved.  
网站备案号:闽ICP备18012015号-4
Powered by Z-BlogPHP
联系我们| 关于我们| 广告联系| 网站管理