924

Flask–表单宏模板

宏模板简介

在flask开发网站中,对于很多可输入的表单,前端展示都大致相同,同一个样式,唯一不同的就是表单的长度不一,为了在每次前端渲染的时候不用进行多次重复书写同样的代码,就像函数一样直接传入变量即可提高代码的重用性,以下对jinja2宏模板做个间隔的总结。

宏模板用法

{% macro test(name, type, value) -%}
    < input type="{{ type }}" name="{{ name }}" value="{{
        value|safe}}" >
{%- endmacro %}

前面可以看到value后面加了|safe,这就是过滤器,常见的过滤器有以下几种:

1、Jinja2变量过滤器:
2、safe: 渲染时不转义
3、capitalize:把值的首字母转换成大写,其他字母转换成小写
4、lower: 把值转换成小写形式
5、upper: 把值转换成大写形式
6、title: 把值中每个单词的首字母都转换成大写
7、trim: 把值的首尾空格都去掉
8、striptags: 渲染之前把值中所有的HTML标签都删掉

前端渲染时,直接在模板中导入该宏模块,如下:

< form>
 < div>{{ test(name='user', type='text', value='宏模板')}}< /div>
< /form>

下面是我在实践过程中遇到要渲染很多表单,然后就写了个宏模板进行复用,表单模板如下:

{# 开始表单验证提示宏 #}
{% macro form_error(form) %}

    {% if form.errors %}
      < h6 class="text-center nonecase-font txt-grey">
          {% for field_name, field_errors in form.errors | dictsort if field_errors %}
              {% for error in field_errors %}
                  < p>{{ error }}< /p>
              {% endfor %}
          {% endfor %}
      < /h6>
    {% endif %}

{%- endmacro %}
{# 结束表单验证提示宏 #}



{# 开始flash提示消息宏 #}

{% macro flash_msg() %}
    {% for message in get_flashed_messages() %}
      < h6 class="text-center nonecase-font txt-grey">
            < p>{{ message }}< /p>
      < /h6>
    {% endfor %}
{% endmacro %}

{# 结束flash提示消息宏 #}



{# 开始表单字段 #}

{% macro form_field(field) %}
  < div class="form-group">
  {% if field.widget.input_type == 'checkbox' %}
    < div class="checkbox checkbox-primary pr-10 pull-left">
        {{ field(class="form-control", id="checkbox_2")|safe }}
        {{ field.label }}
    < /div>
    < div class="clearfix">< /div>
  {% elif field.type == 'SubmitField' %}
    < div class="form-group text-center">
        {{ field(class="btn btn-info btn-rounded", id="change_btn") }}
    < /div>
  {% else %}
      {{ field(class="form-control", placeholder=field.label.text) }}
  {% endif %}
  < /div>
{% endmacro %}

{# 结束表单字段 #}


{% macro form_quick(form,
                    action="",
                    method="post",
                    extra_classes=None,
                    role="form",
                    form_type="basic",
                    enctype=None,
                    button_map={},
                    id="",
                    novalidate=False) %}

{%- set _enctype = [] %}
{%- if enctype is none -%}
  {%- for field in form %}
    {%- if field.type == 'FileField' %}
      {%- set _ = _enctype.append('multipart/form-data') -%}
    {%- endif %}
  {%- endfor %}
{%- else %}
  {% set _ = _enctype.append(enctype) %}
{%- endif %}


< form
{%- if action != None %} action="{{action}}"{% endif -%}
{%- if id %} id="{{id}}"{% endif -%}
{%- if method %} method="{{method}}"{% endif %}
{%- if _enctype[0] %} enctype="{{_enctype[0]}}"{% endif -%}
{%- if role %} role="{{role}}"{% endif -%}
{%- if novalidate %} novalidate{% endif -%}
  >
    {% for field in form %}
      {{ form_field(field) }}
    {% endfor %}
< /form>
{% endmacro %}

在前端一样只要导入该宏模块,然后需要传入一个form实例化对象,然后也可以传入一些表单的基本属性,如id,action,post等参数,如不给则为建立宏模板时的默认值。这样就可以达到提高效率,大大减少了前端冗余代码。调用如下:

{% from "宏模板路径/form.html" import form_quick(宏模板函数) %}
在指定位置调用宏
{{ form_quick(form,id='test', action=url_for("index.index")) }}

发表评论

邮箱地址不会被公开。 必填项已用*标注