前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >flask第30篇——宏macro和import标签

flask第30篇——宏macro和import标签

作者头像
孟船长
发布2018-11-08 17:37:51
8580
发布2018-11-08 17:37:51
举报
文章被收录于专栏:自动化测试实战

继续回到flask


Jinja2特有的,像Django则没有这个。

先新建一个项目macroDemo

然后在templates文件夹中新建index.html文件,并在代码中返回渲染后的文件:

然后回到index.html,现在假设我们要写一个登录的表单:

代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>账号</td>
                <td><input type="text" placeholder="请输入账号"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="提交"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

执行app.py文件,看到:

看一下刚才写的index.html文件,每个标签都传了如typeplaceholder等属性,那么我们可不可以把相同的内容提取出来呢?答案当然是可以,这时候就要用到宏的概念。

  • 定义宏
代码语言:javascript
复制
{% macro 名称() %}
    代码块
{% endmacro %}
  • 调用
代码语言:javascript
复制
{{ 宏名称() }}
  • 代码
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
    {% macro input() %}
        <input type="text">
    {% endmacro %}
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>账号</td>
                <td>{{ input() }}</td>
            </tr>
            <tr>
                <td>密码</td>
                <td>{{ input() }}</td>
            </tr>
            <tr>
                <td></td>
                <td>{{ input() }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

保存一下,刷新页面看到:

也就是说代码已经生效了。其实可以把宏的名称()看成一个函数。 但是现在input标签中还有typeplaceholder等属性,这个时候就需要给input()传参数了:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
    {% macro input(type, name, placeholder, value) %}
        <input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}">
    {% endmacro %}
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>账号</td>
                <td>{{ input("text", "", "请输入账号", "") }}</td>
            </tr>
            <tr>
                <td>密码</td>
                <td>{{ input("text", "", "请输入密码", "") }}</td>
            </tr>
            <tr>
                <td></td>
                <td>{{ input("submit", "", "", "提交") }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

保存,然后看到页面:

当然,下面在传值的时候也可以用关键字参数进行传递,比如

{{ input(type="submit", name="", placeholder="", value="提交") }}

效果是一样的。

如果属性有默认值,那么也可以添加默认值:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
    {% macro input(type='text', name='', placeholder='', value='') %}
        <input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}">
    {% endmacro %}
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>账号</td>
                <td>{{ input(placeholder="请输入账号") }}</td>
            </tr>
            <tr>
                <td>密码</td>
                <td>{{ input(placeholder="请输入密码") }}</td>
            </tr>
            <tr>
                <td></td>
                <td>{{ input(type="submit", value="提交") }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

需要注意的是如果给了默认值,那么传参的时候就必须用关键字参数进行传值了。

也可以将宏封装成一个包的形式,在需要使用的时候通过导入进行调用:

我们在template文件夹下新建文件夹macros专门存放宏文件,并在该文件夹中新建forms.html文件。将宏的定义从index.html文件中剪切出来,放到forms.html文件中:

代码语言:javascript
复制
{% macro input(type='text', name='', placeholder='', value='') %}
    <input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}">
{% endmacro %}

然后在index.html中只需要导入宏文件即可。导入方法:{% import 'macros/forms.html' as forms %} 注意,这里后面必须要as,也就是必须给导入的文件起个名字。

代码:

代码语言:javascript
复制
{% import 'macros/forms.html' as forms %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>账号</td>
                <td>{{ forms.input(placeholder="请输入账号") }}</td>
            </tr>
            <tr>
                <td>密码</td>
                <td>{{ forms.input(placeholder="请输入密码") }}</td>
            </tr>
            <tr>
                <td></td>
                <td>{{ forms.input(type="submit", value="提交") }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

保存以后回到页面,可以看到效果不变。

现在forms.html文件中只有一个宏定义,如果是多个的时候,比如把froms.html改为:

代码语言:javascript
复制
{% macro input(type='text', name='', placeholder='', value='') %}
    <input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}">
{% endmacro %}

{% macro textarea(name="", cols="", rows="") %}
        <textarea name="{{ name }}", cols="{{ cols }}", rows="{{ rows }}"></textarea>
{% endmacro %}

这时候在index.html导入就要用: {% from 'macros/forms.html' import input %} 或者 {% from 'macros/forms.html' import input as input_field%}

代码:

代码语言:javascript
复制
{% from 'macros/forms.html' import input %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>账号</td>
                <td>{{ input(placeholder="请输入账号") }}</td>
            </tr>
            <tr>
                <td>密码</td>
                <td>{{ input(placeholder="请输入密码") }}</td>
            </tr>
            <tr>
                <td></td>
                <td>{{ input(type="submit", value="提交") }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

执行以后页面显示效果不变。如果现在要把两个宏都导入,那就只需要:

{% from 'macros/forms.html' import input, textarea %} 或者 {% from 'macros/forms.html' import input as input_field, textarea%}

如果用下面这种方式,就要把input as input_field看做一个整体。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-10-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 自动化测试实战 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档