Python全棧之模板渲染詳解

2022-02-15 10:02:26

1. 標籤

{% 標籤 %}

1.1 for迴圈標籤

<ul>
<!-- 可迭代物件都可以用迴圈 -->
<!-- 迴圈列表 -->
    {% for foo in hobby %}
        <li>{{ foo }}</li>
        {% empty %}  <!-- 當迴圈的資料為空或者沒有這個變數時顯示empty下面的內容 -->
        <h1>啥也沒有</h1>
    {% endfor %}
</ul>

<ul>
    <!-- 迴圈字典 -->
    {% for foo in d1 %}  <!-- 只能獲取鍵 -->
        <li>{{ foo }}</li>
    {% endfor %}
    {% for key,value in d1.items %}  <!-- 獲取鍵值對,items.keys,values都能用 -->
        <li>{{ key }} -- {{ value }}</li>
    {% endfor %}

</ul>

forloop物件

<ul>
    {% for foo in hobby %}
		forloop  迴圈標籤物件,通過counter屬性可以來記錄迴圈次數 
        <li>{{ forloop.counter }}---{{ foo }}</li> 從1開始計數
        <li>{{ forloop.counter0 }}---{{ foo }}</li> 從0開始計數
        <li>{{ forloop.revcounter }}---{{ foo }}</li> 倒序,從1開始計數
        <li>{{ forloop.revcounter0 }}---{{ foo }}</li> 倒序,從0開始計數
        <li>{{ forloop.first }}---{{ foo }}</li> 如果是第一次迴圈,就得到True 
        <li>{{ forloop.last }}---{{ foo }} </li>  如果是最後一次迴圈,就得到True,其他為False 

    {% endfor %}
</ul>
   
    {% for key,value in hobby2.items %}
        forloop.parentloop 統計外層迴圈物件的迴圈次數
        {% for v in value %}
            <li>{{ forloop.parentloop.counter }} -- {{ forloop.counter }} -- {{ v }}</li>
        {% endfor %}

    {% endfor %}
    
reversed 倒序迴圈
 <ul>
    {% for foo in hobby reversed %}
        <li>{{ foo }} </li>

    {% endfor %}
</ul>

1.2 if標籤

{% if age > 18 %}
    <h1>太老了</h1>
{% elif age == 18 %}
    <h1>還行</h1>
{% else %}
    <h1>挺嫩</h1>
{% endif %}
{% if age > 18 or number > 100 %} <!-- 符號兩邊必須有空格 -->
    <h1>太老了</h1>
{% elif age == 18 %}
    <h1>還行</h1>
{% else %}
    <h1>挺嫩</h1>
{% endif %}
{% if hobby|length > 3 %} <!-- 可以配合過濾器來使用 -->
    <h1>愛好還挺多</h1>
{% else %}
    <h1>愛好不夠多</h1>
{% endif %}

f語句支援 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判斷，注意條件兩邊都有空格。

注意:不能像下面這樣寫

{% if a > b > c %}
...
{% endif %}

Django的模板語言中屬性的優先順序大於方法

d2 = {'items': [11,22,33]}
優先使用items屬性,不使用items方法,容易導致錯誤
<ul>
    {% for key,v in d2.items %}
        <li>{{ key }} -- {{ v }}</li>
    {% endfor %}
</ul>

1.3 with標籤

給呼叫過程比較長的資料起別名的.

寫法1.
{% with hobby2.xx.0 as kk %}
    <h1>{{ kk }}</h1>
    <h2>{{ kk }}</h2>
{% endwith %}
{% with kk=hobby2.xx.0 %}
    <h1>{{ kk }}</h1>
    <h2>{{ kk }}</h2>
{% endwith %}

1.4 csrf token標籤

<form action="" method="post">
    {% csrf_token %}  <!-- 加上這個標籤之後,post請求就能通過django的csrf認證機制,就不需要註釋settings的設定了 -->
    <input type="text" name="uname">
    <input type="submit">
</form>

2. 模板繼承

先建立一個母版(模板)

比如base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            background-color: pink;
            height: 40px;
        }
        .left-menu{
            background-color: tan;
            width: 200px;
            min-height: 600px;
        }
        .item{
            background-color: yellow;
            height: 40px;
            border-bottom: 1px solid red;
        }
        .left{
            float: left;
        }
        .right{
            float: left;
        }
    </style>
    {% block css %}
    {% endblock %}
</head>
<body>
<div class="nav">
    <div class="c1">
        <a href="">32官網</a>
        <span>性感荷官, 線上發牌</span>
    </div>
</div>
<div class="main">
    <div class="left">
    <div class="left-menu">
        <div class="menu1 item">
            <a href="/t1/">選單1</a>  <!-- 寫相對路徑時,前面的斜槓必須寫 -->
        </div>
        <div class="menu2 item">
            <a href="/t2/">選單2</a>
        </div>
        <div class="menu3 item">
            <a href="/t3/">選單3</a>
        </div>
    </div>
</div>
<div class="right">
    <div class="content">
        {% block content %}
            <h1>基礎模板</h1>
        {% endblock %}
    </div>
</div>
</div>
</body>
{% block js %}
{% endblock %}
</html>

在模板中預留block塊(叫做勾點)

{% block content %}
	<h1>基礎模板</h1>
{% endblock %}

子頁面中繼承模板extends

並重寫模板中預留的block塊中的內容

{{ block.super }}顯示模板的內容

{% extends 'base.html' %}
{% block css %}
    <style>
        .c1{
            background-color: green;
            height: 40px;
        }
    </style>
{% endblock %}
{% block content %}
    <h1>性感美女,線上指導</h1>
    {{ block.super }} <!-- 顯示模板的內容 -->
{% endblock %}

block塊的寫法

{% block content %}
...
{% endblock %}
{% block content %}
...
{% endblock content %}　　  可以指定endblock的名稱,起到一個提示作用

3. 元件

一個完整功能的模組,其他頁面如果想使用,就直接以元件的形式引入

比如建立一個zujian.htmlm,內容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            background-color: pink;
            height: 40px;
        }
    </style>
</head>
<body>

<div class="nav">
    <div class="c1">
        <a href="">32官網</a>
        <span>性感荷官, 線上發牌</span>
    </div>
</div>
</body>
</html>

在home.html中引入一下include

在頁面什麼位置引入,元件效果就生成到什麼位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>這是home頁面</h1>
{% include 'zujian.html' %}

</body>
</html>

靜態檔案的設定流程

1 在settings.py檔案中加上如下設定

STATIC_URL = '/static/'  #別名,對映到STATICFILES_DIRS設定的靜態檔案存放路徑,#那麼引入靜態檔案時,我們使用別名路徑來寫,如果使用別名路徑, 那麼修改靜態資料夾名稱之後,也不會影響靜態檔案的返回# STATIC_URL = '/abc/'  別名可以修改的STATICFILES_DIRS = [    os.path.join(BASE_DIR, 'statics'),]STATIC_URL = '/static/'  #別名,對映到STATICFILES_DIRS設定的靜態檔案存放路徑,
#那麼引入靜態檔案時,我們使用別名路徑來寫,如果使用別名路徑, 那麼修改靜態資料夾名稱之後,也不會影響靜態檔案的返回
# STATIC_URL = '/abc/'  別名可以修改的
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'statics'),
]

2 在專案根目錄下建立一個資料夾,名稱隨意,比如叫做statics

3 在html檔案中引入（兩種方式）

方式1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/xx.css"> 方式1   直接寫別名路徑開頭
</head>
<body>
<div class="c1">xxx</div>

</body>
</html>

方式2：

{% load static %}   先load一下static
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'css/xx.css' %}" > 方式2

</head>
<body>
<div class="c1">xxx</div>

</body>
</html>

4. 自定義過濾器

1 在應用資料夾中建立一個叫做templatetags的資料夾(注意,名稱必須是它)

2 在templatetags資料夾中建立一個py檔案,名稱隨意,比如叫做mytag.py

3 在mytag.py檔案中寫如下內容

from django import template
register = template.Library()  #註冊器,變數名稱必須叫register
@register.filter   #過濾器
def xx(v1):  #第一引數是使用過濾器時,管道符前面的資料 <h1>{{ name|xx }}</h1>
	return v1 + 'xx'
@register.filter   #過濾器,至多有兩個引數
def xx2(v1, v2):  #第一引數是使用過濾器時,管道符前面的資料 ,第二個引數是冒號後面的值,<h1>{{ name|xx:'oo' }}</h1>
	return v1 + 'xx2' + v2

4 在html檔案中使用

{% load mytag %}   先load一下我們的mytagpy檔案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>這是home頁面</h1>
{#{% include 'zujian.html' %}#}
<h1>{{ name|xx }}</h1>   #以過濾器的形式使用,這個是一個引數的
<h1>{{ name|xx2:'oo' }}</h1> # 以過濾器的形式使用,這個是兩個引數的
</body>
</html>

5. 自定義標籤

1 在應用資料夾中建立一個叫做templatetags的資料夾(注意,名稱必須是它)

2 在templatetags資料夾中建立一個py檔案,名稱隨意,比如叫做mytag.py

3 在mytag.py檔案中寫如下內容

from django import template
register = template.Library()  #註冊器,變數名稱必須叫register

@register.simple_tag
def tag1(v1, v2 ,v3):  #引數個數沒有限制
	return v1 + v2 + v3

4 在html檔案中使用

{% load mytag %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1>{% tag1 11 22 number %}</h1>  <!-- 先寫標籤名稱,然後寫引數,引數以空格分隔 ,最終得到的tag1的return值 -->
</body>
</html>

6. inclusion_tag 自定義標籤

這個可以模擬不同使用者，所看到的功能模組不一樣，就是用這個實現的

1 在應用資料夾中建立一個叫做templatetags的資料夾(注意,名稱必須是它)

2 在templatetags資料夾中建立一個py檔案,名稱隨意,比如叫做mytag.py

3 在mytag.py檔案中寫如下內容

from django import template
register = template.Library()  #註冊器,變數名稱必須叫register
# 通過inclusion_tag來做為裝飾器,並且需要傳入一個引數,這個引數就是一個html檔案(你想做成動態元件的html檔案)
@register.inclusion_tag('zujian2.html')
def dongtai(v1):  #引數沒有個數限制
	data = v1  #[11,22,33,44,55,66]
	return {'xx': data }
# zujian2.html會收到定義的inclusion_tag函數的返回值,然後進行zujian2.html這個動態元件的模板渲染

zujian2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .left-menu {
            background-color: tan;
            width: 200px;
            min-height: 600px;
        }
        .item {
            background-color: yellow;
            height: 40px;
            border-bottom: 1px solid red;
        }
        .left {
            float: left;
        }
    </style>
</head>
<body>
<div class="left">
        <div class="left-menu">
            {% for item in xx %}  <!-- [11,22,33] ,注意 data這是inclusion_tag函數的返回值那個字典中的鍵 -->
                <div class="menu1 item">
                    <a href="/t1/">{{ item }}</a>  <!-- 寫相對路徑時,前面的斜槓必須寫 -->
                </div>
            {% endfor %}
        </div>
    </div>

</body>
</html>

4 使用inclusion_tag

basic.html

{% load mytag %}   先load
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{% dongtai menu_list %}  #最終將渲染好的動態元件(zujian2.html),通過include引入元件的方式,載入到這裡
</body>
</html>

5 在後臺檢視中渲染basic.html頁面是可以傳入動態資料

def basic(request):
	# if user.type == 'admin':
	# menu_list = [11,22,33,44,55,66]
	# else:
	menu_list = [22,33]
	return render(request, 'basic.html',{'menu_list': menu_list})

7. 小提示與小練習

小提示

自定義標籤和過濾器在前後端未分離的專案用的比較多一些
前後端分離的專案用的比較少
@register.inclusion_tag('zujian2.html')
def dongtai(v1):
      data = v1
      return {'xx':data}  # 這個return 相當於render(zujian2.html,{'xx':data})

小練習

頁面效果