Django框架之模板層

Django框架之模板層

模板語法符號：

{{ }} 變量相關的

{% %} 邏輯相關的

模板語法的註釋：{# 註釋的模板語法 #}，瀏覽器是檢查看不見的

一、模板語法之模板傳值

python基本數據類型、函數、類、對象所有都支持傳遞給HTML文件

後端傳遞給HTML文件數據的兩種方式

一、指名道姓的傳

return render(request, 'index.html', {'res':dic})

二、locals() 會將當前名稱空間中的全部變量名所有傳遞給HTML頁面

return render(request, 'index.html', locals())

前端html頁面如何獲取傳遞過來的值：{{ 變量名 }}

前端html文件中經過模板語法取值，只有一種方式：句點符，不能經過.get()方式獲取

能夠經過點索引，點值，也能夠經過連用句點符

<p>{{ l.2 }}</p>
<p>{{ d.username }}</p>
<p>{{ d.password }}</p>
<p>{{ d.hobby.1.username.1 }}</p>
<p>{{ func }}</p>
<p>{{ obj.get_static }}</p>
<p>{{ MyClass.get_static }}</p>

注意：當使用模板語法時，展現的是函數的返回值，而且引用函數名會加括號自動執行，模板語法，不支持有參函數的模板語法，傳類名時也會自動加括號實例化

二、模板語法之過濾器

過濾器是用 | 表示，左邊是過濾器的第一個參數，右邊的會當作過濾器的第二個參數

一、求數據的長度 | length

<p>數據長度：{{ s|length }}</p>

二、加法運算 | add

{#只能數字之間或者字符串之間相加，不能混合使用#}
<p>加法：{{ s|add:'dsb' }}</p>

三、默認值 | default

{#默認值判斷是否爲空，不是空返回True，是空是返回冒號右邊的#}
<p>b默認值：{{ b|default:'假時返回false' }}</p>
<p>bo默認值：{{ bo|default:'假時返回False' }}</p>

四、截取字符 | truncatechar：n

{#截取5個字符還有3個是點#}
<p>截取字符：{{ s|truncatechars:8 }}</p>

五、按照空格截取單詞 | truncateword：n

{#按照空格截取截取4個單詞，後面會有三個點不算進#}
<p>截取單詞：{{ s|truncatewords:4 }}</p>

六、文件大小 | filesizeformat

<p>文件大小：{{ file_size|filesizeformat }}</p>

七、切片操做 | slice:'0:2'

{#能夠按照步長來切片#}
<p>切片操做：{{ st|slice:'0:4' }}、{{ st|slice:'0:6:2' }}</p>

八、日期格式化 | date:'Y年/m月/d日'

{#能夠支持日期格式操做#}
<p>日期格式化：{{ dd|date }}、{{ dd|date:'Y年/m月/d日' }}</p>

九、轉義 |safe

能夠後端直接標識安全，在後端中處理，因此前端的代碼能夠在後端中寫好傳遞給前端，能夠作更多的邏輯語法

# 後端中標識安全
from django.utils.safestring import mark_safe
re_safe = mark_safe('<h1>怎麼這麼好看</h1>')

<p>轉義前端標識安全：{{ re|safe }}、後端已經標識安全了：{{ re_safe }}</p>

三、模板語法之標籤（邏輯相關）

{% for foo in l %}
    {{ forloop }}
{% endfor %}

forloop拿到的是：

能夠用forloop方法中的first和last判斷是不是可迭代對象第一個和最後一個

{% for foo in l %}
    {% if forloop.first %}
        <p>第一個參數</p>
    {% elif forloop.last %}
        <p>最後一個參數</p>
    {% else %}
        <p>{{ foo }}</p>
    {% endif %}
{% endfor %}

for循環若是循環對象內部沒有值，能夠用empty來判斷

{% for foo in l %}
    {% if forloop.first %}
        <p>第一個參數</p>
    {% elif forloop.last %}
        <p>最後一個參數</p>
    {% else %}
        <p>{{ foo }}</p>
    {% endif %}
    {% empty %}
        <p>for循環的對象中沒有值</p>
{% endfor %}

for循環中也能夠循環字典的全部鍵、全部值、全部的鍵值對

{% for foo in dic.keys %}
    <p>{{ foo }}</p>
{% endfor %}
​
{% for foo in dic.values %}
    <p>{{ foo }}</p>
{% endfor %}
​
{% for foo in dic.items %}
    <p>{{ foo }}</p>
{% endfor %}

當一個值獲取的步驟很是繁瑣的時候，咱們能夠起別名的方式來簡化代碼，別名只能在with中使用

{% with dic.hobby.1.small_hobby.1 as hob %}
    <p>{{ hob }}</p>
{% endwith %}

四、自定義過濾器、標籤、inclusion_tag

前期準備工做：

一、在應用名下新建一個必須名爲 templatetags 文件夾

二、在該文件夾內新建任意一個py文件

三、在該py文件內必須寫如下兩句代碼

from django.template import Library
register = Library()

一、自定義過濾器

在templatetags文件內的py文件中自定義過濾器用 @register.filter(name='名字') 將名字傳給前端，做爲過濾器

注意：自定義過濾器中最多隻能傳兩個參數

from django.template import Library
register = Library()
# 自定義過濾器
@register.filter(name='my_sum')
def index(a,b):
    return a + b

自定義過濾器的使用，在html文件中先要調用 load py文件 ，再使用過濾器

<p>自定義過濾器的使用</p>
{% load mytag %}
<p>{{ 10|my_sum:90 }}</p>
<p>自定義的過濾器能夠在邏輯語句中而自定義的標籤不能夠</p>
{% if 10|my_sum:20 %}
    <p>條件成立</p>
{% endif %}

二、自定義標籤

在templatetags文件內的py文件中自定義過濾器用 @register.simple_tag(name='名字') 將名字傳給前端，做爲標籤，自定義標籤能夠有多個參數

# 自定義標籤
@register.simple_tag(name='my_bq')
def aaa(a, b, c, d):
    return f"{a, b, c, d}"
# 返回多個值默認存入元組返回

自定義標籤使用，須要先調用 load py文件 ，注意自定義的標籤不能進行邏輯語句

{% load my_tag %}
{% my_bq 1 2 'abc' 'hello' %}

三、自定義inclusion_tag

自定義inclusion_tag將進行邏輯判斷等一系列操做後的數據傳遞給第三方html文件渲染到頁面上

使用 @register.inclusion_tag('html文件'，name='名字')，將名字傳遞給前端進行傳參給函數後引用第三方html文件將其渲染到頁面上

# 自定義inclusion_tag
@register.inclusion_tag('login.html', name='my_in')
def xxx(n):
    l=[]
    for i in range(n):
        l.append(i)
    return locals()

<p>自定義inclusion_tag的使用</p>
{% load mytag %}
{% myin 5 %}

五、模板的繼承

某一個頁面上有不少部分是公用的，那這個頁面就能夠做爲模板頁面，別人繼承這個頁面後，能夠修改對應的區域

一、先在模板頁面上經過block劃分區域，一般在模板頁面應該劃分最少三個區域，模板的block快越多，可擴展性就越高

            {% block css %} 
                模板頁面內容CSS
            {% endblock %}
            {% block content %} 
                模板頁面內容
            {% endblock %}
            {% block js %}  
                模板頁面內容js代碼
            {% endblock %}

二、在子頁面上先清空整個HTML文件再導入整個模板，再繼承該模板進行修改特定區域

一、導入整個模板
{% extends '模板頁面.html'%}
二、修改特定的區域  經過實現劃定好的區域名稱
{% block content %}
        子頁面內容
{% endblock %}

三、子頁面還能夠支持調用父頁面對應的區域，而且無限次調用，在content中調用就引用父頁面的content中的內容，在哪一個裏面調用就會引用父頁面中的對應的內容

{{block.super}}

四、模板的導入

能夠將html頁面當作模塊使用，哪裏須要導哪裏，一般這個HTML文件中只是局部的一個樣式用

{% include '自定義的HTML文件' %}
{#    導入模板文件#}
{% extends 'mb.html' %}
{% block css %}
    <style>
    h1 {
        color: #4cae4c;
        background-color: #8a6d3b;
    }
    </style>
{% endblock %}
{% block content %}
    {#    引用本身的HTML文件#}
    {% include 'my_html.html' %}
    <h1 class="text-center">註冊</h1>
<form action="" method="post">
                <p>username: <input type="text" name="username" class="form-control"></p>
                <p>password: <input type="password" name="password" class="form-control"></p>
                <input type="submit" class="btn btn-success">
</form>
{#    繼承父頁面的區域內容#}
    {{ block.super }}
    {{ block.super }}
    {{ block.super }}
    {{ block.super }}
{% endblock %}