Flask框架从入门到精通之模板宏(十九)

栏目: Python · 发布时间: 6年前

内容简介:在Flask的模板中有一个特性和Django内不同,这个特性就是宏。宏的功能和python中的函数类似。在python函数可以实现代码复用的作用,在模板中宏也有类似的作用。创建一个Flask项目,并在模型声明如下代码:

在Flask的模板中有一个特性和Django内不同,这个特性就是宏。宏的功能和 python 中的函数类似。

声明宏

{% macro 宏的名字(参数) %}

​ 内容

{% endmacro %}
复制代码

调用宏

{{  宏的名字(参数)   }}
复制代码

在python函数可以实现代码复用的作用,在模板中宏也有类似的作用。

二、使用

创建一个Flask项目,并在模型声明如下代码:

  • 无参宏
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

{#声明#}
{% macro macro_input() %}

    输入框:<input type="text"> <br>
{% endmacro %}

{#调用#}

{{ macro_input() }}
{{ macro_input() }}
</body>
</html>
复制代码

我们在浏览器调试一下:

Flask框架从入门到精通之模板宏(十九)
  • 有参宏
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

{#声明#}
{% macro macro_input(tip,type,name) %}

    {{ tip }}<input type="{{ type }}" name="{{ name }}"> <br>
{% endmacro %}

{#调用#}

{{ macro_input('账号:','text','email') }}
{{ macro_input('密码:','password','pwd') }}
</body>
</html>
复制代码
Flask框架从入门到精通之模板宏(十九)
  • 缺省宏
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

{#声明#}
{% macro macro_input(tip,type,name,value='123') %}

    {{ tip }}<input type="{{ type }}" name="{{ name }}" value="{{ value }}"> <br>
{% endmacro %}

{#调用#}

{{ macro_input('账号:','text','email') }}
{{ macro_input('密码:','password','pwd','123456789') }}
</body>
</html>
复制代码
Flask框架从入门到精通之模板宏(十九)

三、导入宏

宏的定义可以声明在另一个html中,然后通过import这种方式导入进来使用。新建一个html文件,声明如下代码:

{#声明#}
{% macro macro_input(tip,type,name,value='123') %}

    {{ tip }}<input type="{{ type }}" name="{{ name }}" value="{{ value }}"> <br>
{% endmacro %}
复制代码

注意虽然是html文件,但是没有html文件的结构。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>


{% from 'common_macro.html' import macro_input %}

{#别名#}
{#{% from 'common_macro.html' import macro_input as input %}#}

{#调用#}

{{ macro_input('账号:','text','email') }}
{{ macro_input('密码:','password','pwd','123456789') }}
</body>
</html>
复制代码

四、宏的内部变量

  • varargs : 这是一个列表。如果调用宏时传入的参数多于宏声明时的参数,多出来的没指定参数名的参数就会保存在这个列表中。

  • kwargs : 这是一个字典。如果调用宏时传入的参数多于宏声明时的参数,多出来的指定了参数名的参数就会保存在这个字典中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>


{#声明#}
{% macro macro_input(tip,type,name,value='123') %}

    {{ tip }}<input type="{{ type }}" name="{{ name }}" value="{{ value }}"> <br>

    <br>{{ varargs }}
    <br> {{ kwargs }}<br>
{% endmacro %}

{{ macro_input('账号:','text','email',11,22,33,44,age=12) }}
{{ macro_input('密码:','password','pwd','123456789') }}
</body>
</html>
复制代码

我们在浏览器调试一下:

Flask框架从入门到精通之模板宏(十九)

欢迎关注我的公众号:

Flask框架从入门到精通之模板宏(十九)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Mashups Web 2.0开发技术—— 基于Amazon.com

Mashups Web 2.0开发技术—— 基于Amazon.com

萨拉汉 / 吴宏泉 / 清华大学 / 2008-1 / 48.00元

《MashupsWeb2.0开发技术(基于Amazon.Com) 》介绍了mashup的底层技术,并且第一次展示了如何创建mashup的应用程序。Amazon.com与Web服务强势结合,拓展了Internet的应用范围,使得开发人员可以把Amazon的数据和其他的可利用资源自由地结合起来创建功能丰富的全新应用程序,这种应用程序叫做mashup。 《MashupsWeb2.0开发技术(基于A......一起来看看 《Mashups Web 2.0开发技术—— 基于Amazon.com》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器