表单的渲染

代码命令：

视图函数：

@app.route('/login', methods=['GET', 'POST'])
@app.route('/login/<int:mode>', methods=['GET', 'POST'])
def login(mode=1):
    form = LoginForm()
    if request.method == 'POST' and form.validate_on_submit():
        return 'Hello %s!<br>你所输人的密码为：%s' % (form.username.data, form.password.data)
    else:
        return render_template('login.html', form=form, mode=mode)

模板文件（login.html）：

{% extends 'bootstrap/base.html' %}

{# 引入flask_bootstrap提供的wtf表单宏指令 #}

{% import 'bootstrap/wtf.html' as wtf %}

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

{% block content %}

<div class="container">

{% if mode == 1 %}

<form role="form" method="post">

{{ form.username }}

{{ form.password }}

{# csrf_token用于保证用户提交表单的安全性 #}

{{ form.csrf_token }}

{{form.submit }}

</form>

{% elif mode == 2 %}

<form role="form" method="post">

{# 使用flask_ bootstrap提供的宏指令逐个字段生成表单#}

{{ wtf.form_field(form.username) }}

{{ wtf.form_field(form.password)}}

{# csrf_token是隐藏字段， 使用默认方法生成即可#}

{{ form.csrf_token }}

{{ wtf.form_field(form.submit) }}

</form>

{% elif mode == 3 %}

{# 使用flask_bootstrap 提供的宏指令快速生成表单 #}

{{ wtf.quick_form (form) }}

{% endif %}

</div>

{% endblock %}

效果图：

原始样式渲染表单

Bootstrap样式渲染表单

Bootstrap样式渲染表单（快速）

代码详释：

视图函数的解释：

1. 路由定义：

@app.route('/login', methods=['GET', 'POST'])

@app.route('/login/<int:mode>', methods=['GET', 'POST'])

def login(mode=1):

这定义了两个路由，/login和/login/<int:mode>。当访问这些路由时，会调用login函数。

2. 登录函数：

form = LoginForm()

if request.method == 'POST' and form.validate_on_submit():

    return 'Hello %s!<br>你所输人的密码为：%s' % (form.username.data, form.password.data)

else:

    return render_template('login.html', form=form, mode=mode)

这是一个登录函数，在这个登录函数中，首先创建了一个LoginForm表单对象。如果请求方法是POST并且表单验证通过，它将返回一个包含用户名和密码的消息。否则，它会渲染login.html模板，并将表单和模式传递给模板。

模板文件代码详释：

1. {% extends 'bootstrap/base.html' %}：

表示继承bootstrap/base.html模板。这意味着当前模板将继承该模板的基本结构和样式。

2. {% import 'bootstrap/wtf.html' as wtf %}：

表示通过{% import %}语句，导入了bootstrap/wtf.html中的宏指令，并将其命名为wtf。这使得在模板中可以使用wtf来调用其中的宏指令。

3. {% block title %}登录表单{% endblock %}：

表示一个块标签，用于定义页面的标题。在这里，标题被设置为"登录表单"。

4. {% block content %}... {% endblock %}：

 {% block content %}和{% endblock %}之间的内容是页面的主要内容部分。

5. {% if mode == 1 %}... {% elif mode == 2 %}... {% elif mode == 3 %}... {% endif %}：

表示一个条件判断结构，根据mode的值来显示不同的表单样式。如果mode等于1，将显示第一个表单；如果mode等于2，将显示第二个表单；如果mode等于 3，将显示第三个表单。

6. {{ form.username }}和{{ form.password }}：

表示表单字段的显示。{{ form.username }} 和{{ form.password }}会将表单中的用户名和密码字段显示在页面上。

7. {{ form.csrf_token }}：

表示显示CSRF（跨站请求伪造）令牌。这是一种安全措施，用于防止恶意的跨站请求。

8. {{form.submit }}：

表示显示提交按钮。

9. {{ wtf.form_field(form.username) }} 和类似的语句：

表示使用wtf宏指令来生成表单字段。wtf.form_field会根据表单对象form中的字段信息，生成相应的表单字段。

10. 文件上传表单：

下面的部分是一个文件上传表单，包括一个文件选择输入框和一个提交按钮。

11. {% for file in files %}... {% endfor %}：

表示一个循环结构，用于遍历files列表，并显示已上传的文件链接。

常见问题：

ImportError: cannot import name 'safe_str_cmp' from 'werkzeug.security' (C:\Users\86131\PycharmProjects\flaskProject\.venv\Lib\site-packages\werkzeug\security.py)

错误原因：

这个错误是因为在新版本的Werkzeug库中，safe_str_cmp函数已经被移除。

解决方法：

更新flask_login和flask_wtf方法：

代码命令：

pip install flask_login --upgrade

pip install flask_wtf --upgrade