Flask框架從入門到精通之模板宏(十九)

知識點: 一、宏的基本使用html

1、概況

在Flask的模板中有一個特性和Django內不一樣,這個特性就是宏。宏的功能和python中的函數相似。python

聲明宏

{% macro 宏的名字(參數) %}

​ 內容

{% endmacro %}
複製代碼

調用宏

{{  宏的名字(參數)   }}
複製代碼

在python函數能夠實現代碼複用的做用,在模板中宏也有相似的做用。瀏覽器

2、使用

建立一個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>
複製代碼

咱們在瀏覽器調試一下: ui

在這裏插入圖片描述

  • 有參宏
<!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>
複製代碼

在這裏插入圖片描述

  • 缺省宏
<!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>
複製代碼

在這裏插入圖片描述

3、導入宏

宏的定義能夠聲明在另外一個html中,而後經過import這種方式導入進來使用。新建一個html文件,聲明以下代碼:spa

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

    {{ tip }}<input type="{{ type }}" name="{{ name }}" value="{{ value }}"> <br>
{% endmacro %}
複製代碼

注意雖然是html文件,可是沒有html文件的結構。scala

<!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>
複製代碼

4、宏的內部變量

  • varargs : 這是一個列表。若是調用宏時傳入的參數多於宏聲明時的參數,多出來的沒指定參數名的參數就會保存在這個列表中。3d

  • 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>
複製代碼

咱們在瀏覽器調試一下: code

在這裏插入圖片描述

歡迎關注個人公衆號:

image
相關文章
相關標籤/搜索