python flask 登录成功后js jq弹窗教程(如何在Flask中实现登录失败后js消息弹窗)
思路分析：
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()