Flask模板和wtforms

Flask模板和wtforms

一、模板

在 Jinja2 模板引擎中，可以使用各种功能来渲染变量、进行循环和逻辑判断，这与 Django 的模板系统有很多相似之处，但也存在一些差异。

1.渲染变量

在 Jinja2 中，可以通过使用双大括号 {{ }} 来渲染变量。

<td>{{k}}</td>
<td>{{v.name}}</td>
<td>{{v['name']}}</td>
<td>{{v.get('name')}}</td>

2.循环

Jinja2 使用 {% for %} 标签来进行循环

{% for k,v in user_dict.items() %}
<tr>
 ...
</tr>
{% endfor %}

3.逻辑判断

Jinja2 使用 {% if %} 标签来进行逻辑判断

{% if name %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>Hello World!</h1>
{% endif %}

4.函数调用

在 Flask 中，可以将函数传递给模板并在模板中调用它们。

这与 Django 不同，Django 通常要求在视图函数中处理所有逻辑，然后将结果传递给模板。

@app.route('/')
def index():
 return render_template('index.html', ff=func1)

{{ ff('六五') }}
{{ ff('六五')|safe }}   //确保渲染的内容不会被自动转义

5.小结

• Jinja2 的模板语法与 Django 的模板语法非常相似，但有一些小的差异。
• 在 Flask 中，可以将函数传递给模板，并在模板中直接调用它们，这是 Flask 和 Django 模板系统的一个主要区别。
• Markup 类用于在 Flask 中标记内容为安全的，防止自动转义。
• {% for %} 和 {% if %} 标签用于循环和条件判断。
• |safe 过滤器用于防止自动转义。

二、wtforms

WTForms 是一个表单处理库，它可以帮助我们在 Flask 应用中轻松创建表单，进行数据验证，并与前端模板集成。

1. 安装模块

pip install wtforms

2.使用 WTForms 创建表单

• 登录表单示例

class LoginForm(Form):
 name = simple.StringField('用户名', [
     validators.DataRequired('用户名不能为空.'),
     validators.Length(min=6, max=18, '用户名长度必须大于6且小于18')
 ], widget=widgets.TextInput(), render_kw={'class': 'form-control'})
 pwd = simple.PasswordField('密码', [
     validators.DataRequired('密码不能为空.'),
     validators.Length(min=8, '密码长度必须大于8'),
     validators.Regexp(r'^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}',
                      '密码至少8个字符，至少1个大写字母，1个小写字母，1个数字和1个特殊字符')
 ], widget=widgets.PasswordInput(), render_kw={'class': 'form-control'})

• 注册表单示例

class RegisterForm(Form):
 # 其他字段定义...
 pwd_confirm = simple.PasswordField('重复密码', [
     validators.DataRequired('重复密码不能为空.'),
     validators.EqualTo('pwd', '两次密码输入不一致')
 ], widget=widgets.PasswordInput(), render_kw={'class': 'form-control'})
 # 自定义验证方法
 def validate_pwd_confirm(self, field):
     if field.data != self.data['pwd']:
         raise validators.StopValidation("密码不一致")

3.创建路由和视图函数

在 Flask 应用中，我们为表单创建路由，并在对应的视图函数中处理 GET 和 POST 请求。

• 登录和注册视图

• @app.route('/login', methods=['GET', 'POST'])
  def login():
      form = LoginForm()
      if request.method == 'POST' and form.validate():
          print('用户提交数据通过格式验证：', form.data)
      return render_template('login.html', form=form)
  

• @app.route('/register', methods=['GET', 'POST'])
  def register():
      form = RegisterForm()
      if request.method == 'POST' and form.validate():
          print('用户提交数据通过格式验证：', form.data)
      return render_template('register.html', form=form)
  

4.渲染表单

在 HTML 模板中，我们使用 Jinja2 模板语法来渲染表单字段和错误信息。

• 登录表单模板 login.html

  • <form method="post">
        <p>{{ form.name.label }} {{ form.name }} {{ form.name.errors[0] }}</p>
        <p>{{ form.pwd.label }} {{ form.pwd }} {{ form.pwd.errors[0] }}</p>
        <input type="submit" value="提交">
    </form>
    

• 注册表单模板 register.html

  • <form method="post" novalidate>
        {% for field in form %}
        <p>{{ field.label }}: {{ field }} {{ field.errors[0] }}</p>
        {% endfor %}
        <input type="submit" value="提交">
    </form>