flask登录注册页面

可以使用 Flask-WTF 和 Flask-Login 扩展来实现登录注册页面。

首先安装扩展：

pip install Flask-WTF Flask-Login

接下来，创建一个名为 `forms.py` 的文件来定义表单，例如：

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


class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Sign Up')


class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    remember = BooleanField('Remember Me')
    submit = SubmitField('Login')

接下来，在 `app.py` 文件中导入扩展和表单：

from flask import Flask, render_template, redirect, url_for, flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, BooleanField
from wtforms.validators import DataRequired, Length, Email, EqualTo, ValidationError
from flask_sqlalchemy import SQLAlchemy
from flask_bcrypt import Bcrypt
from flask_login import LoginManager, UserMixin, login_user, current_user, logout_user, login_required
from forms import RegistrationForm, LoginForm

然后，创建 Flask 应用并配置扩展：

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
db = SQLAlchemy(app)
bcrypt = Bcrypt(app)
login_manager = LoginManager(app)
login_manager.login_view = 'login'
login_manager.login_message_category = 'info'

接着，定义用户模型：

class User(db.Model, UserMixin):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    password = db.Column(db.String(60), nullable=False)

    def __repr__(self):
        return f"User('{self.username}', '{self.email}')"

然后，定义登录和注册路由：

@app.route("/register", methods=['GET', 'POST'])
def register():
    if current_user.is_authenticated:
        return redirect(url_for('home'))
    form = RegistrationForm()
    if form.validate_on_submit():
        hashed_password = bcrypt.generate_password_hash(form.password.data).decode('utf-8')
        user = User(username=form.username.data, email=form.email.data, password=hashed_password)
        db.session.add(user)
        db.session.commit()
        flash('Your account has been created! You are now able to log in', 'success')
        return redirect(url_for('login'))
    return render_template('register.html', title='Register', form=form)


@app.route("/login", methods=['GET', 'POST'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('home'))
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user and bcrypt.check_password_hash(user.password, form.password.data):
            login_user(user, remember=form.remember.data)
            next_page = request.args.get('next')
            return redirect(next_page) if next_page else redirect(url_for('home'))
        else:
            flash('Login Unsuccessful. Please check email and password', 'danger')
    return render_template('login.html', title='Login', form=form)

最后，创建模板文件 `register.html` 和 `login.html` 来渲染表单。

`register.html`：

{% extends "layout.html" %}

{% block content %}
  <div class="content-section">
      <form method="POST" action="">
          {{ form.hidden_tag() }}
          <fieldset class="form-group">
              <legend class="border-bottom mb-4">Join Today</legend>
              <div class="form-group">
                  {{ form.username.label(class="form-control-label") }}
                  {{ form.username(class="form-control form-control-lg") }}
              </div>
              <div class="form-group">
                  {{ form.email.label(class="form-control-label") }}
                  {{ form.email(class="form-control form-control-lg") }}
              </div>
              <div class="form-group">
                  {{ form.password.label(class="form-control-label") }}
                  {{ form.password(class="form-control form-control-lg") }}
              </div>
              <div class="form-group">
                  {{ form.confirm_password.label(class="form-control-label") }}
                  {{ form.confirm_password(class="form-control form-control-lg") }}
              </div>
          </fieldset>
          <div class="form-group">
              {{ form.submit(class="btn btn-outline-info") }}
          </div>
      </form>
      <div class="border-top pt-3">
          <small class="text-muted">
              Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Sign In</a>
          </small>
      </div>
  </div>
{% endblock content %}

`login.html`：

{% extends "layout.html" %}

{% block content %}
  <div class="content-section">
      <form method="POST" action="">
          {{ form.hidden_tag() }}
          <fieldset class="form-group">
              <legend class="border-bottom mb-4">Log In</legend>
              <div class="form-group">
                  {{ form.email.label(class="form-control-label") }}
                  {{ form.email(class="form-control form-control-lg") }}
              </div>
              <div class="form-group">
                  {{ form.password.label(class="form-control-label") }}
                  {{ form.password(class="form-control form-control-lg") }}
              </div>
              <div class="form-group">
                  {{ form.remember(class="form-check-input") }}
                  {{ form.remember.label(class="form-check-label") }}
              </div>
          </fieldset>
          <div class="form-group">
              {{ form.submit(class="btn btn-outline-info") }}
          </div>
          <div class="border-top pt-3">
            <small class="text-muted">
              Don't Have An Account? <a class="ml-2" href="{{ url_for('register') }}">Sign Up</a>
            </small>
          </div>
      </form>
  </div>
{% endblock content %}

其中，`layout.html` 是一个基本布局文件，可以自行定义。