### 使用Flask与Bootstrap构建登录和注册页面 #### 创建项目结构 为了使用 Flask 和 Bootstrap 来创建登录和注册页面，首先需要设置好项目的文件夹结构： ``` /flask_app /static /css style.css /js /templates base.html login.html register.html app.py ``` #### 安装依赖库 安装必要的 Python 库来支持 Flask 及其扩展模块。 ```bash pip install flask flask-bootstrap flask-wtf ``` #### 初始化应用程序 编写 `app.py` 文件初始化 Flask 应用程序并配置蓝图和其他组件。 ```python from flask import Flask, render_template, redirect, url_for from flask_bootstrap import Bootstrap from flask_wtf import FlaskForm from wtforms import StringField, PasswordField, SubmitField from wtforms.validators import DataRequired, Length, Email class LoginForm(FlaskForm): email = StringField('Email', validators=[DataRequired(), Email()]) password = PasswordField('Password', validators=[DataRequired(), Length(min=8)]) submit = SubmitField('Login') class RegisterForm(FlaskForm): username = StringField('Username', validators=[DataRequired()]) email = StringField('Email', validators=[DataRequired(), Email()]) password = PasswordField('Password', validators=[DataRequired(), Length(min=8)]) confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), Length(min=8)]) submit = SubmitField('Register') app = Flask(__name__) app.config['SECRET_KEY'] = 'your_secret_key' bootstrap = Bootstrap(app) @app.route('/login', methods=['GET', 'POST']) def login(): form = LoginForm() if form.validate_on_submit(): return "Logged In" return render_template('login.html', title='Sign In', form=form) @app.route('/register', methods=['GET', 'POST']) def register(): form = RegisterForm() if form.validate_on_submit(): return "Registered Successfully!" return render_template('register.html', title='Register', form=form) if __name__ == '__main__': app.run(debug=True) ``` 此部分展示了如何定义表单类，并将其集成到视图函数中处理用户提交的数据[^2]。 #### 设计HTML模板 接下来，在 `/templates/` 下面分别设计 `base.html`, `login.html` 以及 `register.html`. ##### Base Template (`base.html`) 这是所有 HTML 页面的基础布局，包含了对 Bootstrap CSS 的引用以及其他公共元素。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}Welcome{% endblock %}</title> <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}"> <!-- 引入Bootstrap --> {{ bootstrap.load_css() }} </head> <body> <div class="container"> {% block content %} <!-- Page Content Here --> {% endblock %} </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </body> </html> ``` ##### Login Form (`login.html`) 继承自基础模板，用于显示登录界面。 ```html {% extends "base.html" %} {% block title %}Log In{% endblock %} {% block content %} <h2>Login</h2> <form method="post"> {{ form.hidden_tag() }} <p>{{ form.email.label }}<br> {{ form.email(size=32) }}</p> <p>{{ form.password.label }}<br> {{ form.password(size=32) }}</p> <p>{{ form.submit() }}</p> </form> <a href="{{ url_for('register') }}">Don't have an account? Sign up here!</a> {% endblock %} ``` ##### Registration Form (`register.html`) 同样也继承自基础模板，负责展示注册表格。 ```html {% extends "base.html" %} {% block title %}Register{% endblock %} {% block content %} <h2>Register</h2> <form method="post"> {{ form.hidden_tag() }} <p>{{ form.username.label }}<br> {{ form.username(size=32) }}</p> <p>{{ form.email.label }}<br> {{ form.email(size=32) }}</p> <p>{{ form.password.label }}<br> {{ form.password(size=32) }}</p> <p>{{ form.confirm_password.label }}<br> {{ form.confirm_password(size=32) }}</p> <p>{{ form.submit() }}</p> </form> <p>Already registered? Click <a href="{{ url_for('login') }}">here</a> to log in.</p> {% endblock %} ``` 上述代码片段说明了如何利用 Jinja2 模板引擎渲染带有验证逻辑的表单字段，并且提供了链接让用户可以在登录页和注册页之间切换[^3].