flask账户注册(5)

`Flask`账户注册

综合使用所学习过的知识,搭建登录页面

代码示例:https://github.com/ningwenyan/demo_code/tree/master/flask_demo_code/T26

总览

❯ tree
.
├── app.py
├── auth
│   ├── auth_form.py
│   ├── __init__.py
│   └── views.py
├── common
│   ├── errors.py
│   ├── exts.py
│   ├── __init__.py
│   ├── mailModel.py
│   └── sqlModel.py
├── config.py
├── manager.py
├── migrations
│   ├── alembic.ini
│   ├── env.py
│   ├── README
│   ├── script.py.mako
│   └── versions
│       ├── 44bc21866b0d_.py
│       └── __pycache__
│           └── 44bc21866b0d_.cpython-37.pyc
├── static
└── templates
    ├── 401.html
    ├── 403.html
    ├── 404.html
    ├── 500.html
    └── auth
        ├── change_email.html
        ├── change_password.html
        ├── index.html
        ├── login.html
        ├── mail
        │   ├── change_email.html
        │   ├── change_email.txt
        │   ├── confirm.html
        │   ├── confirm.txt
        │   ├── password_reset.html
        │   └── password_reset.txt
        ├── main
        │   └── reset_password.html
        ├── personal.html
        ├── register.html
        └── reset_password.html

使用`Flask Bootstrap`美化网页

载入bootstrap
# exts.py
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap()
# app.py
from common.exts import bootstrap

bootstrap.init_app(app)
这里我使用的主题是slate,你可以可以在https://bootswatch.com/上找到其他主题使用
# config.py

# 使用bootstrap 主题
BOOTSTRAP_BOOTSWATCH_THEME = 'slate'
所有的结构都在https://bootswatch.com/slate/中可以复制使用.

创建`base.html`

创建模板

{# 导入导航 #}
{% from 'bootstrap/nav.html' import render_nav_item %}
{# 导入flush 操作#}
{% from 'bootstrap/utils.html' import render_messages %}
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>
       {% block title %} {% endblock %}
   </title>
   <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
   <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
   {#  加载bootstrap css/js  #}
   {{ bootstrap.load_css() }}
   {{ bootstrap.load_js() }}
</head>

<body>
   {# 导航 #}
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
       <a class="navbar-brand" href="#">MyApp</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span></button>

       <div class="collapse navbar-collapse" id="navbarColor01">
           <ul class="navbar-nav mr-auto">
               {{ render_nav_item('index', '主页', use_li=True) }}
               {{ render_nav_item('auth.index', '工作平台', use_li=True) }}
               {{ render_nav_item('auth.personal', '个人中心', use_li=True) }}
               {{ render_nav_item('auth.login', '登录', use_li=True ) }}
               {{ render_nav_item('auth.register', '注册', use_li=True) }}
           </ul>
       </div>
   </nav>
   {#  主体部分  #}
   <main class="container">
       {{ render_messages() }}
       {% block content %}
       {% endblock %}
   </main>
   <footer class="text-center">
       {% block footer %}
           <small> &copy; 2020–<script>document.write(new Date().getFullYear())</script> <a href="https://wenyan.online" title="Written by Wen Yan">Wen Yan</a>
           </small>
       {% endblock %}
   </footer>
</body>

</html>

根据模板修改页面

这里只举一个例子,

修改auth_form.py表单验证结构

class LoginForm(FlaskForm):
    email = StringField("邮箱", validators=[Email(message="请输入正确的邮箱地址"), DataRequired(), Length(1, 64, message="请输入正确的邮箱地址")], render_kw={'placeholder':'邮箱'})
    password = PasswordField("密码",validators=[Length(1, 24, message="长度不符合要求")], render_kw={'placeholder':'密码'})
    confirmed = BooleanField("记住我", validators=[])
    submit = SubmitField("登录")

修改视图

@auth_bp.route('/login/', methods = ['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        """登录用户"""
        email = form.email.data.lower()
        password = form.password.data
        confirmed  = form.confirmed.data
        user = User.query.filter_by(email=email).first()
        # 数据库中有账户,并且能够验证密码
        if user is not None and user.check_password(password):
            # print(confirmed)
            if confirmed:
                login_user(user, remember=True, duration=timedelta(days=30))
            else:
                login_user(user)
            # 判断 next
            next = request.args.get('next')
            if next is None or not next.startswitch('/'):
                # next = redirect(url_for('auth.index'))
                next = 'auth.login'
            return redirect(url_for('auth.personal'))
        else:
            flash('无效的邮箱或密码.')
    return render_template('auth/login.html', form=form)

修改前端html

{% extends 'base.html' %}
{% from 'bootstrap/form.html' import render_form %}

{% block title %}
    登录
{% endblock %}

{% block content %}
    {{ render_form(form) }}
{% endblock %