【发布时间】：2021-11-02 13:00:40
【问题描述】：
我在烧瓶 (python) 中使用引导程序为前端创建了一个 Web 应用程序。我的应用包含一个登录按钮，用于启动登录模式，供我们输入凭据。
我还编写了一个 java 脚本，用于在启动登录模式之前检查用户是否已登录。如果用户已登录，它会被路由到一个函数（routes.py 中的 check_login 函数），该函数包含一条说明“用户已登录！”的闪存消息。但是，我面临的问题是，如果在用户登录时单击登录按钮，则不会显示 flash 消息。请说明原因并提出纠正此问题的方法。
base.html（其他 html 页面扩展/继承自该页面）
<!DOCTYPE html>
<html lang="english">
<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="shortcut icon" href={{url_for("static", filename="images/logo1.png")}}>
<title>{% block title%}{% endblock %}</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Bootstrap icons css -->
<link rel="stylesheet" href={{url_for("static", filename="bootstrap-icons/bootstrap-icons.css")}}>
<!-- Font Awesome JS (icons) -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Our Custom CSS -->
<link rel="stylesheet" href={{url_for("static", filename="stylesheets/style.css")}}>
</head>
<body>
<!--............................Message flashing................................-->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == "error" %}
<div class="alert alert-danger alter-dismissable fade show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
</div>
{% else %}
<div class="alert alert-success alter-dismissable fade show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}
<!--............................Home page navbar................................-->
<div class="container-fluid">
<nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">
<a class="navbar-brand" href="/">
<!-- Add logo -->
<img src={{url_for("static", filename="images/logo1.png")}} alt="logo">
</a>
<button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="true"
aria-label="Toggle navigation"
id="togglerButton">
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Services"><i class="fas fa-cog"></i> Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Otherpage"><i class="fas fa-cog"></i> Other</a>
</li>
<!-- Credentials (Signin, logout, signup) -->
<button type="button" name="signin-btn" class="btn buttonCustom" id="signin-btn" data-bs-toggle="modal">Sign In</button>
<a class="btn buttonCustom" href="/Logout"> Logout</a>
<button type="button" name="signup-btn" class="btn buttonCustom" id="signup-btn" data-bs-toggle="modal" data-bs-target="#signupModal">Sign Up</button>
</form>
</nav>
</div>
<!--...............Tab contents (Home, services).......................-->
{% block navPages%}{% endblock%}
<!--.................................Signin modal................................-->
<div class="modal fade" id="signinModal" data-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<form method="POST">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title col-11 text-center">Login</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
<input type="email" class="form-control clearAfterClose" name="email" placeholder="Email adress">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
<input id="password" type="password" class="form-control clearAfterClose" name="password" placeholder="Password">
</div>
<div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Remember password?</label> </div>
<div class="etc-login-form" >
<p>forgot your password? <a id="ref_link" href="#">click here</a></p>
<p>new user? <a id="ref_link" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#signupModal">create new account</a></p>
</div>
<hr class="my-4">
<div class="row justify-content-center">
<div class="col-4">
<a class="btn btn-google" type="submit"><i class="bi bi-google"></i> Sign in with Google</a>
</div>
<div class="col-4">
<a class="btn btn-facebook" type="submit"><i class="bi bi-facebook" id="facebook2"></i> Sign in with Facebook</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn buttonCustom2">Sign in</button>
</div>
</div>
</div>
</form>
</div>
<!--.................................Signup modal................................-->
<form method="POST">
<div class="modal fade" id="signupModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-1"></div>
<h3 class=" col-10 modal-title text-center">Sign Up</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<br/>
<div class="row">
<div class=" col-12 etc-login-form text-center">
<p>Already a user? <a id="ref_link" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#signinModal">Login</a></p>
</div>
</div>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text" id="name"><i class="bi bi-person-fill"></i></span>
<input type="text" aria-label="signupFirstName" name="firstName" class="form-control clearAfterClose" placeholder="First name">
<input type="text" aria-label="lastName" name="lastName" class="form-control clearAfterClose" placeholder="Last name">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
<input type="email" class="form-control clearAfterClose" name="email" placeholder="Email adress">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
<input id="password" type="password" class="form-control clearAfterClose" name="password1" placeholder="Password">
<input id="confirmPassword" type="password" class="form-control clearAfterClose" name="confirmPassword" placeholder="Confirm password">
</div>
<div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Remember password?</label> </div>
<div class="form-group login-group-checkbox">
<input type="radio" class="" name="male" id="male" placeholder="username">
<label for="male">male</label>
<input type="radio" class="" name="female" id="female" placeholder="username">
<label for="female">female</label>
</div>
<hr class="my-4">
<div class="form-group login-group-checkbox">
<input type="checkbox" class="" id="reg_agree" name="reg_agree">
<label for="reg_agree">I agree with <a id="ref_link" href="#">Terms and conditions</a></label>
</div>
<hr class="my-4">
<div class="row justify-content-center">
<div class="col-4">
<button class="btn btn-google" type="submit"><i class="bi bi-google"></i> Sign up with Google</button>
</div>
<div class="col-4">
<a href="https://www.google.com/" id="fb_signup" class="btn btn-facebook" type="submit"><i class="bi bi-facebook" id="facebook2"></i> Sign up with Facebook</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn buttonCustom2">Register</button>
</div>
</div>
</div>
</div>
</form>
<!-- javascript to enable bootstrap usage -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- javascript to clear signin modal fields after close -->
<script>
$("#signinModal").on("hidden.bs.modal", function(e) {
$(".clearAfterClose").val("");
});
</script>
<!-- javascript to clear signup modal fields after close -->
<script>
$("#signupModal").on("hidden.bs.modal", function(e) {
$(".clearAfterClose").val("");
});
</script>
<!-- javascript to check if user is logged in -->
{% if current_user.is_anonymous %}
<script>
var myElement = document.querySelector('#signin-btn');
myElement.addEventListener("click", function(e){
e.preventDefault();
$("#signinModal").modal('show');
});
</script>
{% else %}
<script>
var myElement = document.querySelector('#signin-btn');
myElement.addEventListener("click", function(e){
e.preventDefault();
$.get('/check_login');
});
</script>
{% endif %}
</body>
</html>
Home.html
{% extends 'base.html'%}
{% block title %}Home{% endblock %}
{% block navPages%}
<h1> Home Page! </h1>
<p>
{{file|safe}}
</p>
{% endblock%}
Services.html
{% extends 'base.html'%}
{% block title %}Our Services{% endblock %}
{% block navPages%}
<h1> Service page! </h1>
{% endblock%}
otherpage.html
{% extends 'base.html'%}
{% block title %}Other{% endblock %}
{% block navPages%}
<h1> Other Page! </h1>
{% endblock%}
init.py（init前后的双下划线不可见）
from flask import Flask
from .routes import routes
from .extensions import db
from os import path
from flask_login import LoginManager
from .dbmodels import Subscriber_va
DB_NAME = "mysubscribers_va.db"
def create_app():
app = Flask(__name__)
#..........................Register blueprint.......................#
app.register_blueprint(routes, url_prefix='/')
#..........................Database config.......................#
app.config['SECRET_KEY'] = 'hello guys'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_NAME}'
db.init_app(app)
create_database(app)
#..........................Login manager.......................#
login_manager = LoginManager()
login_manager.login_view = 'routes.home'
login_manager.login_message = 'Please login to access this page!'
login_manager.login_message_category = 'error'
login_manager.init_app(app)
@login_manager.user_loader
def load_user(id):
return Subscriber_va.query.get(int(id))
return app
def create_database(app):
if not path.exists('Website/' + DB_NAME):
db.create_all(app=app)
print(DB_NAME+' database created Successfully!')
dbmodels.py
from .extensions import db
from datetime import datetime
from flask_login import UserMixin
class Subscriber_va(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
firstName = db.Column(db.String(50), nullable=False)
lastName = db.Column(db.String(50), nullable=False)
email = db.Column(db.String(50), nullable=False, unique=True)
password = db.Column(db.String(50), nullable=False)
date_created = db.Column(db.String(20), default=datetime.now().strftime("%d-%m-%Y %H:%M"))
extensions.py
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
routes.py
from flask import render_template, Blueprint, request, redirect, url_for, flash
from .extensions import db
from .dbmodels import Subscriber_va
from werkzeug.security import generate_password_hash, check_password_hash
from flask_login import login_required, login_user, current_user, logout_user
import pandas as pd
routes = Blueprint('routes', __name__)
btnDict = {}
f_home = open('Website/static/data/Home.txt', 'r', encoding="utf8")
file_home = f_home.read()
@routes.route('/', methods=['GET', 'POST'])
def home():
button_clicked()
return render_template('Home.html', file=file_home.replace('\n', '<br>'))
@routes.route('/Services', methods=['GET', 'POST'])
@login_required
def Services():
return render_template('Services.html')
@routes.route('/Otherpage', methods=['GET', 'POST'])
def other():
return render_template('otherpage.html')
@routes.route('/Logout', methods=['GET', 'POST'])
def logout():
if current_user.is_active:
logout_user()
flash('Logged out successfully!', category='success')
return redirect(url_for('routes.home'))
else:
flash('Please login to your account!', category='error')
return redirect(url_for('routes.home'))
@routes.route('/check_login')
def check_login():
flash('User already logged in!', category='error')
return "nothing"
#...........................Subscriber database methods...........................#
def button_clicked():
if request.method == 'POST':
btnDict = dict(request.form)
print(btnDict)
if len(btnDict) > 2:
add_subscriber()
else:
print(len(btnDict))
authorize()
def authorize():
if request.method == 'POST':
email = request.form.get('email')
password = request.form.get('password')
subscriber = Subscriber_va.query.filter_by(email=email).first()
if subscriber:
if check_password_hash(subscriber.password, password):
flash('Logged in successfully!', category='success')
login_user(subscriber, remember='True')
else:
flash('Incorrect password, try again.', category='error')
else:
flash('Email does not exist! Sign up to create an account', category='error')
def add_subscriber():
if request.method == 'POST':
firstName = request.form.get('firstName')
lastName = request.form.get('lastName')
email = request.form.get('email')
password1 = request.form.get('password1')
confirmPassword = request.form.get('confirmPassword')
subscriber = Subscriber_va.query.filter_by(email=email).first()
if subscriber:
flash('Email already exist! Please enter different mail ID ', category='error')
elif password1 != confirmPassword:
flash('Password and Confirm password donot match', category='error')
else:
new_subscriber = Subscriber_va(firstName=firstName, lastName=lastName, email=email, password=generate_password_hash(password1, 'sha256'))
db.session.add(new_subscriber)
db.session.commit()
flash('Account created successfully!', category='success')
main.py
from Website import create_app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)
【问题讨论】：
-
只有当我导航到另一个页面而不是在我单击按钮时在同一页面中时才会显示 Flash 消息。
标签： python jquery flask flask-sqlalchemy flask-login