bootstrap flask登录页面编写实例

下面将为您详细讲解“Bootstrap Flask登录页面编写实例”的完整攻略。

1. 示例一：使用Flask-Login插件实现登录功能
   首先，我们需要在Flask应用程序中安装Flask-Login插件，可以在终端中使用以下命令进行安装：

pip install flask-login

接着，在Flask应用程序的文件中导入Flask-Login插件，并使用它来创建一个login_manager实例：

from flask_login import LoginManager, UserMixin

app = Flask(__name__)

login_manager = LoginManager()
login_manager.init_app(app)

下一步，我们需要创建一个User类，该类继承自UserMixin。在该类中存储用户的id和密码：

class User(UserMixin):
    def __init__(self, id):
        self.id = id
        self.password = "password"

    def __repr__(self):
        return f"<User {self.id}>"

现在我们可以定义一个用于渲染登录页面的路由：

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

        user = User(username)
        if password == user.password:
            login_user(user)
            return redirect(url_for('home'))

        flash('Invalid username/password combination')
        return redirect(url_for('login'))

    return render_template('login.html')

在上面的脚本中，我们首先检查请求的方法是否为POST，如果是，我们检查提交的用户名和密码是否正确。如果用户名和密码正确，我们使用login_user()方法登录用户并将其重定向到主页。否则，我们使用flash()方法在页面中显示错误消息，并将用户重定向到登录页面。

最后，在主页视图函数中，我们可以使用current_user属性来检查当前是否已经登录了用户：

@app.route('/')
@login_required
def home():
    return f'Hello, {current_user.id}!'

1. 示例二：使用Bootstrap实现带有表单验证和CSRF保护的登录页面
   我们可以使用Flask-WTF插件实现表单验证和CSRF保护。首先，我们需要安装Flask-WTF插件：

pip install flask-wtf

然后，我们在Flask应用程序中导入Flask-WTF插件，并创建一个名为form的WTF表单类：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Submit')

我们在这里定义了一个名为LoginForm的表单类。使用DataRequired验证器，要求填写用户名和密码。

接下来，我们可以设置一个路由来渲染login.html页面，并使用Bootstrap样式定义一个登录表单。在表单类中定义的字段在模板中以{{ form.fieldname }}的形式使用:

@app.route('/login')
def login():
    form = LoginForm()
    return render_template('login.html', form=form)

在login.html页面中，我们可以使用Bootstrap样式定义一个登录表单。同时，我们还需要在表单中添加CSRF保护：

<form method="POST" action="">
    {{ form.csrf_token }}
    <div class="form-group">
        {{ form.username.label }} {{ form.username(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.password.label }} {{ form.password(class="form-control") }}
    </div>
    {{ form.submit(class="btn btn-primary") }}
</form>

现在我们已经完成了页面的设计，还需要在后台实现表单的提交和验证。我们可以定义以下路由来处理此问题：

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = User(form.username.data)
        if form.password.data == user.password:
            login_user(user)
            flash('You have been logged in!', 'success')
            return redirect(url_for('home'))
        else:
            flash('Login unsuccessful. Please check your username and password', 'danger')
    return render_template('login.html', form=form)

@app.route('/home', methods=['GET', 'POST'])
@login_required
def home():
    return f'Hello, {current_user.username}!'

在这里，我们在验证表单时使用了validate_on_submit()方法。如果表单验证成功，我们进行登录并重定向到主页。否则，我们将在页面中显示错误消息。

以上就是“Bootstrap Flask登录页面编写实例”的完整攻略，包含了两个示例，每个示例都详细介绍了实现过程和必要的代码。