### 使用Flask
框架创建
登录和
注册页面
为了实现基于Flask的应用程序中的用户认证功能，可以利用`Flask-Login`库来简化这一过程。下面是一个完整的指南，涵盖了从设置到构建HTML模板的具体步骤。
#### 1. 安装必要的依赖项
确保已经安装了所需的Python包：
```bash
pip install flask flask-login flask-wtf mysqlclient
```
这些工具可以帮助处理表单验证(`flask-wtf`)以及数据库交互(`mysqlclient`)等问题[^2]。
#### 2. 初始化项目结构
建立
合理的文件夹布局有助于
更好地管理代码。推荐的目录结构如下所示：
```
/flask_
app/
/blog/
__init__.py
models.py
views.py
templates/
base.html
login.html
register.html
run.py
config.py
```
此结构使得各个组件之间的关系
更加清晰明了[^3]。
#### 3. 设置应用配置
编辑`config.py`以定义应用程序所需的各种参数，比如密钥、数据库连接字符串等：
```python
imp
ort os
class Config(object)
:
SECRET_KEY = os.environ.get('SECRET_KEY')
or 'you-will-never-guess'
SQLALCHEMY_DATABASE_URI = 'mysql
://username
:passw
ord@localhost/db_name'
SQLALCHEMY_TRACK_MODIFICATIONS = False
```
这里设置了用于保护会话数据的秘密键以及其他重要的全局变量[^5]。
#### 4. 构建基础路由与视图逻辑
打开`run.py`并编写启动脚本：
```python
from blog imp
ort
app
if __name__ == "__main__"
:
app.run(debug=True)
```
接着，在`blog/__init__.py`中初始化核心对象，并导入其他模块：
```python
from flask imp
ort Flask
from flask_sqlalchemy imp
ort SQLAlchemy
from flask_login imp
ort LoginManager
from config imp
ort Config
app = Flask(__name__)
db = SQLAlchemy(
app)
lm = LoginManager()
lm.init_
app(
app)
lm.login_view = "login"
def create_
app()
:
app.config.from_object(Config())
with
app.
app_context()
:
db.create_all()
return
app
```
最后一步是在`views.py`里添加具体的业务逻辑，包括渲染网页和服务端校验等功能：
```python
from flask imp
ort render_template, flash, redirect, url_f
or
from .f
orms imp
ort LoginF
orm, RegistrationF
orm
from ..models imp
ort User
from werkzeug.urls imp
ort url_parse
from flask_login imp
ort current_user, login_user, logout_user, login_required
@
app.route('/register', methods=['GET', 'POST'])
def register()
:
if current_user.is_authenticated
:
return redirect(url_f
or('index'))
f
orm = RegistrationF
orm()
if f
orm.validate_on_submit()
:
user = User(username=f
orm.username.data, email=f
orm.email.data)
user.set_passw
ord(f
orm.passw
ord.data)
db.session.add(user)
db.session.commit()
flash('Congratulations, you are now a registered user!')
return redirect(url_f
or('login'))
return render_template('register.html', title='Register', f
orm=f
orm)
@
app.route('/login', methods=['GET', 'POST'])
def login()
:
if current_user.is_authenticated
:
return redirect(url_f
or('index'))
f
orm = LoginF
orm()
if f
orm.validate_on_submit()
:
user = User.query.filter_by(email=f
orm.email.data).first()
if user is None
or not user.check_passw
ord(f
orm.passw
ord.data)
:
flash('Invalid username
or passw
ord')
return redirect(url_f
or('login'))
login_user(user, remember=f
orm.remember_me.data)
next_page = request.args.get('next')
if not next_page
or url_parse(next_page).netloc != ''
:
next_page = url_f
or('index')
return redirect(next_page)
return render_template('login.html', title='Sign In', f
orm=f
orm)
```
上述代码片段展示了如何通过WTF
orms库创建表单类，并将其集成至相应的视图函数之中[^4]。
#### 5.
设计前端界面
现在转向客户端部分——即HTML模板的
设计工作。对于
登录页而言，可以在`templates/login.html`内写下这样的内容：
```html+jinja
{% extends "base.html" %}
{% block content %}
<h1>Sign In</h1>
<f
orm action="" method="post">
{{ f
orm.hidden_tag() }}
<p>
Please enter your credentials below to sign into the system.
</p>
<div class="f
orm-group">
{{ f
orm.email.label }}<br>
{{ f
orm.email(size=32) }}<br>
{% f
or err
or in f
orm.email.err
ors %}
<span style="col
or:red;">{{ err
or }}</span><br>
{% endf
or %}
</div>
<div class="f
orm-group">
{{ f
orm.passw
ord.label }}<br>
{{ f
orm.passw
ord(size=32) }}<br>
{% f
or err
or in f
orm.passw
ord.err
ors %}
<span style="col
or:red;">{{ err
or }}</span><br>
{% endf
or %}
</div>
<div class="f
orm-check">
{{ f
orm.remember_me(class_="f
orm-check-input") }}
{{ f
orm.remember_me.label(class_="f
orm-check-label") }}
</div>
<button type="submit">Log In</button>
</f
orm>
<p>New User
? <a href="{{ url_f
or('register') }}">Click here to Register!</a></p>
{% endblock %}
```
同样地，针对新用户的
注册流程，则需准备另一份名为`register.html`的文档：
```html+jinja
{% extends "base.html" %}
{% block content %}
<h1>Register</h1>
<f
orm action="" method="post">
{{ f
orm.hidden_tag() }}
<p>
Fill out this f
orm to become our member today!
</p>
<div class="f
orm-group">
{{ f
orm.username.label }}<br>
{{ f
orm.username(size=32) }}<br>
{% f
or err
or in f
orm.username.err
ors %}
<span style="col
or:red;">{{ err
or }}</span><br>
{% endf
or %}
</div>
<div class="f
orm-group">
{{ f
orm.email.label }}<br>
{{ f
orm.email(size=64) }}<br>
{% f
or err
or in f
orm.email.err
ors %}
<span style="col
or:red;">{{ err
or }}</span><br>
{% endf
or %}
</div>
<div class="f
orm-group">
{{ f
orm.passw
ord.label }}<br>
{{ f
orm.passw
ord(size=32) }}<br>
{% f
or err
or in f
orm.passw
ord.err
ors %}
<span style="col
or:red;">{{ err
or }}</span><br>
{% endf
or %}
</div>
<div class="f
orm-group">
{{ f
orm.passw
ord2.label }}<br>
{{ f
orm.passw
ord2(size=32) }}<br>
{% f
or err
or in f
orm.passw
ord2.err
ors %}
<span style="col
or:red;">{{ err
or }}</span><br>
{% endf
or %}
</div>
<button type="submit">Register</button>
</f
orm>
<p>Already have an account
? <a href="{{ url_f
or('login') }}">Log In Here.</a></p>
{% endblock %}
```
以上两段Jinja2语法编写的HTML
本文探讨了登录和注册界面的设计策略，指出在产品不同阶段应突出注册或登录。以喜马拉雅APP为例，说明了用户登录即注册的设计方式，简化用户操作。第三方登录被广泛采用以降低注册门槛，但可能引发一人多号问题。产品需遵守个人信息保护规范，确保合法合规。此外，通过数据埋点分析用户行为，优化登录注册流程。
扫一扫
4855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
