Django 模板層

Django 模板層

先後端數據傳遞

(1) 後端朝前端頁面傳遞數據的方式:
    # 將當前所在的名稱空間中的名字所有傳遞給前端頁面
    # 第一種
        return render(request,'index.html',{'n':n})
    # 第二種
        return render(request,'index.html',locals())  
    
(2) 後端傳函數名到前端，會自動加括號調用，可是不支持傳參

(3) 後端傳對象到前端，就至關於打印了這個對象

(4) 前端獲取後端傳過來的容器類型的內部元素 統一採用句點符(.)
('關某某','謝某某','陳某某','容嬤嬤')>>>:{{ t }},{{ t.1 }}  數字對應的就是數據的索引
    
(5) 前端可以調用python後端數據類型的一些不須要傳參的內置方法

(6) 註釋：
    模板語法的註釋，不會展現到前端頁面：
        {#調用python自帶的內置方法,能夠調用不須要傳參的一些內置方法#}
    原生html的註釋，會展現到前端:
        <!--我是原生的html註釋-->

過濾器

# 下面的內容，第一行是在前端的代碼，第二行是運行的結果

(1) <p>前端統計字符串的長度:{{ s|length }}</p>
# 結果：前端統計字符串的長度:16

(2) <p>前端獲取數據若是是空就返回default後面默認的參數值:{{ flag|default:'你這個東西是個空'}}</p>
# 結果：前端獲取數據若是是空就返回default後面默認的參數值:123

(3) <p>將數字格式化成表示文件大小的單位:{{ file_size|filesizeformat }}</p>
# 結果：將數字格式化成表示文件大小的單位:20.3 MB

(4) <p>{{ ctime }}</p>
# 結果：June 11, 2019, 7:30 p.m.

(5) <p>格式化時間(不要加百分號):{{ ctime|date:'Y-m-d' }}</p>
# 結果：格式化時間(不要加百分號):2019-06-11

(6) <p>字符串的切片操做:{{ res|slice:'0:8' }}</p>
# 結果：字符串的切片操做:hello bi

(7) <p>{{ res|slice:'0:8:2' }}</p>
# 結果：hlob         起始位置：結束位置：步長

(8) <p>截取固定的長度的字符串 三個點也算:{{ s|truncatechars:10 }}</p>
# 結果：截取固定的長度的字符串 三個點也算:這是 一段 字...

(9) <p>按照空格截取文本內容:{{ res|truncatewords:4 }}</p>
# 結果：按照空格截取文本內容:hello big ba by~ ...

(10) <p>{{ s|truncatewords:4 }}</p>
# 結果：這是 一段 字符串 沒有別的東西

(11) <p>{{ 'hahah'|add:'heheheh' }}</p>
# 結果：

後端代碼：
    ht = '<h1>我是h1標籤</h1>'
    sr = '<script>alert(123)</script>'
    
前端：
    <p>{{ ht }}</p> 
    <p>{{ sr }}</p>
    # 上面兩個在前端顯示的是純字符串，不會將其轉義成代碼執行
    
    <p>{{ ht|safe }}</p>
    <p>{{ sr|safe }}</p>
    # 下面的兩句，經過|safe過空濾器將其轉義代碼執行
    
先後端取消轉義(*****)
    前端:
        |safe
    後端:
        from django.utils.safestring import mark_safe
        xxx = mark_safe('<h1>我是h1標籤</h1>')

標籤

(1) for循環：
    {% for foo in l %}
        <p>{{ foo }}</p>
        <p>{{ forloop }}</p>
    {% endfor %}

解釋一波：從容器l中一個個的讀取數據，而後將其塞入前端的標籤裏面
    {{ foo }}：取l裏面的一個個的值
    {{ forloop }}：下面是一條記錄
    {'revcounter': 7, 'counter0': 0, 'last': False, 'parentloop': {}, 'counter': 1, 'first': True, 'revcounter0': 6}
    
  {{ forloop.counter0 }}  從0開始計數
  {{ forloop.counter1 }}  從1開始計數

(2) if判斷
    {% if flag %}
        <p>flag不爲空</p>
        {% else %}
        <p>flag是空</p>
    {% endif %}

(3) 嵌套使用
{% for foo in l %}
    {% if forloop.first %}
        <p>這是個人第一次</p>
    {% elif forloop.last %}
        <p>這是最後一次了啊</p>
    {% else %}
        <p>嗨起來！！！</p>
    {% endif %}
    {% empty %}
        <p>你給個人容器類型是個空啊，無法for循環</p>
{% endfor %}

解釋一波：
{% if forloop.first %} 判斷這次循環是否是第一次，是，就執行下面的代碼
{% elif forloop.last %} 一樣的，判斷是否是最後一次，是，就執行下面代碼
{% empty %} 當你的for循環對象爲空的時候會自動走empty代碼塊兒的內容

(3) 嵌套使用
{% for foo in l %}
    {% if forloop.first %}
        <p>這是個人第一次</p>
    {% elif forloop.last %}
        <p>這是最後一次了啊</p>
    {% else %}
        <p>嗨起來！！！</p>
    {% endif %}
    {% empty %}
        <p>你給個人容器類型是個空啊，無法for循環</p>
{% endfor %}

解釋一波：
{% if forloop.first %} 判斷這次循環是否是第一次，是，就執行下面的代碼
{% elif forloop.last %} 一樣的，判斷是否是最後一次，是，就執行下面代碼
{% empty %} 當你的for循環對象爲空的時候會自動走empty代碼塊兒的內容

使用以前請先導入  --> 在html模板頁面中導入
    {% load my_filter %}
    這個my_filter是自定義的py文件名（上面定義的三個步驟其二）
(5) 自定義標籤
# 自定義標籤
    @register.simple_tag
    def plus(a,b,c):
        return a+b+c

(6) 自定義inclusion_tag

# 自定義inclusion_tag
    @register.inclusion_tag('login.html',name='login')
    def login(n):
        # l = []
        # for i in range(n):
        #     l.append('第%s項'%i)
        l = [ '第%s項'%i for i in range(n)]
        return {'l':l}
# login.html
    <ul>
        {% for foo in l %}
        <li>{{ foo }}</li>
        {% endfor %}
    </ul>
# 調用
{% login 5 %}

注意 :要想使用自定義的過濾器 標籤 inclusion_tag
      必須先在須要使用的html頁面加載你的py文件
        {% load my_tag %}

        {{ 666|XBB:8 }}
        {% plus 1 2 3 %}
        {% login 5 %}

模板的繼承與導入

(1) 首先須要在被繼承的模板中劃分多個區域
    {% block 給區域起的名字 %}

    {% endblock %}

(2) 一般狀況下一個模板中應該至少有三塊
    {% block css %}
        頁面css代碼塊
    {% endblock %}

    {% block js %}
        頁面js代碼塊
    {% endblock %}

    {% block content %}
        頁面主體內容
    {% endblock %}
(3) 子板繼承模板
    1> 先繼承模板全部的內容
        {% extends 'home.html' %}
    
    2> 而後根據block塊的名字修改指定區域的內容
    {% block content %}
        <h1>登陸頁面</h1>
            <form action="">
                <p>username:<input type="text" class="form-control"></p>
                <p>password:<input type="text" class="form-control"></p>
                <input type="submit" class="btn btn-success">
            </form>
    {% endblock %}

(4) 模板的導入:
將一段html當作模塊的方式導入到另外一個html展現
    {% include '想導入的html文件名' %}

靜態文件配置

{% load static %}  

<link rel='stylesheet' href="{% static 'css/mycss.css'%}">  # 第一種方式
<link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">  # 第二種方式