Python全棧之模板渲染詳解
更新時(shí)間：2022年02月15日 09:16:48 作者：熬夜泡枸杞
這篇文章主要為大家詳細(xì)介紹了Python全棧之模板渲染，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1. 標(biāo)簽
{% 標(biāo)簽 %}
1.1 for循環(huán)標(biāo)簽
<ul>
<!-- 可迭代對(duì)象都可以用循環(huán) -->
<!-- 循環(huán)列表 -->
{% for foo in hobby %}
<li>{{ foo }}</li>
{% empty %} <!-- 當(dāng)循環(huán)的數(shù)據(jù)為空或者沒(méi)有這個(gè)變量時(shí)顯示empty下面的內(nèi)容 -->
<h1>啥也沒(méi)有</h1>
{% endfor %}
</ul>
<ul>
<!-- 循環(huán)字典 -->
{% for foo in d1 %} <!-- 只能獲取鍵 -->
<li>{{ foo }}</li>
{% endfor %}
{% for key,value in d1.items %} <!-- 獲取鍵值對(duì),items.keys,values都能用 -->
<li>{{ key }} -- {{ value }}</li>
{% endfor %}
</ul>
forloop對(duì)象
<ul>
{% for foo in hobby %}
forloop 循環(huán)標(biāo)簽對(duì)象,通過(guò)counter屬性可以來(lái)記錄循環(huán)次數(shù)
<li>{{ forloop.counter }}---{{ foo }}</li> 從1開(kāi)始計(jì)數(shù)
<li>{{ forloop.counter0 }}---{{ foo }}</li> 從0開(kāi)始計(jì)數(shù)
<li>{{ forloop.revcounter }}---{{ foo }}</li> 倒序,從1開(kāi)始計(jì)數(shù)
<li>{{ forloop.revcounter0 }}---{{ foo }}</li> 倒序,從0開(kāi)始計(jì)數(shù)
<li>{{ forloop.first }}---{{ foo }}</li> 如果是第一次循環(huán),就得到True
<li>{{ forloop.last }}---{{ foo }} </li> 如果是最后一次循環(huán),就得到True,其他為False
{% endfor %}
</ul>
{% for key,value in hobby2.items %}
forloop.parentloop 統(tǒng)計(jì)外層循環(huán)對(duì)象的循環(huán)次數(shù)
{% for v in value %}
<li>{{ forloop.parentloop.counter }} -- {{ forloop.counter }} -- {{ v }}</li>
{% endfor %}
{% endfor %}
reversed 倒序循環(huán)
<ul>
{% for foo in hobby reversed %}
<li>{{ foo }} </li>
{% endfor %}
</ul>
1.2 if標(biāo)簽
{% if age > 18 %}
<h1>太老了</h1>
{% elif age == 18 %}
<h1>還行</h1>
{% else %}
<h1>挺嫩</h1>
{% endif %}
{% if age > 18 or number > 100 %} <!-- 符號(hào)兩邊必須有空格 -->
<h1>太老了</h1>
{% elif age == 18 %}
<h1>還行</h1>
{% else %}
<h1>挺嫩</h1>
{% endif %}
{% if hobby|length > 3 %} <!-- 可以配合過(guò)濾器來(lái)使用 -->
<h1>愛(ài)好還挺多</h1>
{% else %}
<h1>愛(ài)好不夠多</h1>
{% endif %}
f語(yǔ)句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判斷，注意條件兩邊都有空格。
注意:不能像下面這樣寫
{% if a > b > c %}
...
{% endif %}
Django的模板語(yǔ)言中屬性的優(yōu)先級(jí)大于方法
d2 = {'items': [11,22,33]}
優(yōu)先使用items屬性,不使用items方法,容易導(dǎo)致錯(cuò)誤
<ul>
{% for key,v in d2.items %}
<li>{{ key }} -- {{ v }}</li>
{% endfor %}
</ul>
1.3 with標(biāo)簽
給調(diào)用過(guò)程比較長(zhǎng)的數(shù)據(jù)起別名的.
寫法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標(biāo)簽
<form action="" method="post">
{% csrf_token %} <!-- 加上這個(gè)標(biāo)簽之后,post請(qǐng)求就能通過(guò)django的csrf認(rèn)證機(jī)制,就不需要注釋settings的配置了 -->
<input type="text" name="uname">
<input type="submit">
</form>
2. 模板繼承
先創(chuàng)建一個(gè)母版(模板)
比如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官網(wǎng)</a>
<span>性感荷官, 在線發(fā)牌</span>
</div>
</div>
<div class="main">
<div class="left">
<div class="left-menu">
<div class="menu1 item">
<a href="/t1/">菜單1</a> <!-- 寫相對(duì)路徑時(shí),前面的斜杠必須寫 -->
</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>基礎(chǔ)模板</h1>
{% endblock %}
</div>
</div>
</div>
</body>
{% block js %}
{% endblock %}
</html>
在模板中預(yù)留block塊(叫做 鉤子)
{% block content %}
<h1>基礎(chǔ)模板</h1>
{% endblock %}
子頁(yè)面中繼承模板e(cuò)xtends
并重寫模板中預(yù)留的block塊中的內(nèi)容
{{ block.super }}顯示模板的內(nèi)容
{% extends 'base.html' %}
{% block css %}
<style>
.c1{
background-color: green;
height: 40px;
}
</style>
{% endblock %}
{% block content %}
<h1>性感美女,在線指導(dǎo)</h1>
{{ block.super }} <!-- 顯示模板的內(nèi)容 -->
{% endblock %}
block塊的寫法
{% block content %}
...
{% endblock %}
{% block content %}
...
{% endblock content %} 可以指定endblock的名稱,起到一個(gè)提示作用
3. 組件
一個(gè)完整功能的模塊,其他頁(yè)面如果想使用,就直接以組件的形式引入
比如創(chuàng)建一個(gè)zujian.htmlm,內(nèi)容如下
<!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官網(wǎng)</a>
<span>性感荷官, 在線發(fā)牌</span>
</div>
</div>
</body>
</html>
在home.html中引入一下include
在頁(yè)面什么位置引入,組件效果就生成到什么位置
<!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頁(yè)面</h1>
{% include 'zujian.html' %}
</body>
</html>
靜態(tài)文件的配置流程
1 在settings.py文件中加上如下配置
STATIC_URL = '/static/' #別名,映射到STATICFILES_DIRS配置的靜態(tài)文件存放路徑,#那么引入靜態(tài)文件時(shí),我們使用別名路徑來(lái)寫,如果使用別名路徑, 那么修改靜態(tài)文件夾名稱之后,也不會(huì)影響靜態(tài)文件的返回# STATIC_URL = '/abc/' 別名可以修改的STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'statics'),]STATIC_URL = '/static/' #別名,映射到STATICFILES_DIRS配置的靜態(tài)文件存放路徑,
#那么引入靜態(tài)文件時(shí),我們使用別名路徑來(lái)寫,如果使用別名路徑, 那么修改靜態(tài)文件夾名稱之后,也不會(huì)影響靜態(tài)文件的返回
# STATIC_URL = '/abc/' 別名可以修改的
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'statics'),
]
2 在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件夾,名稱隨意,比如叫做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 直接寫別名路徑開(kāi)頭
</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. 自定義過(guò)濾器
1 在應(yīng)用文件夾中創(chuàng)建一個(gè)叫做templatetags的文件夾(注意,名稱必須是它)
2 在templatetags文件夾中創(chuàng)建一個(gè)py文件,名稱隨意,比如叫做mytag.py
3 在mytag.py文件中寫如下內(nèi)容
from django import template
register = template.Library() #注冊(cè)器,變量名稱必須叫register
@register.filter #過(guò)濾器
def xx(v1): #第一參數(shù)是使用過(guò)濾器時(shí),管道符前面的數(shù)據(jù) <h1>{{ name|xx }}</h1>
return v1 + 'xx'
@register.filter #過(guò)濾器,至多有兩個(gè)參數(shù)
def xx2(v1, v2): #第一參數(shù)是使用過(guò)濾器時(shí),管道符前面的數(shù)據(jù) ,第二個(gè)參數(shù)是冒號(hào)后面的值,<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頁(yè)面</h1>
{#{% include 'zujian.html' %}#}
<h1>{{ name|xx }}</h1> #以過(guò)濾器的形式使用,這個(gè)是一個(gè)參數(shù)的
<h1>{{ name|xx2:'oo' }}</h1> # 以過(guò)濾器的形式使用,這個(gè)是兩個(gè)參數(shù)的
</body>
</html>
5. 自定義標(biāo)簽
1 在應(yīng)用文件夾中創(chuàng)建一個(gè)叫做templatetags的文件夾(注意,名稱必須是它)
2 在templatetags文件夾中創(chuàng)建一個(gè)py文件,名稱隨意,比如叫做mytag.py
3 在mytag.py文件中寫如下內(nèi)容
from django import template register = template.Library() #注冊(cè)器,變量名稱必須叫register @register.simple_tag def tag1(v1, v2 ,v3): #參數(shù)個(gè)數(shù)沒(méi)有限制 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> <!-- 先寫標(biāo)簽名稱,然后寫參數(shù),參數(shù)以空格分隔 ,最終得到的tag1的return值 -->
</body>
</html>
6. inclusion_tag 自定義標(biāo)簽
這個(gè)可以模擬不同用戶，所看到的功能模塊不一樣，就是用這個(gè)實(shí)現(xiàn)的
1 在應(yīng)用文件夾中創(chuàng)建一個(gè)叫做templatetags的文件夾(注意,名稱必須是它)
2 在templatetags文件夾中創(chuàng)建一個(gè)py文件,名稱隨意,比如叫做mytag.py
3 在mytag.py文件中寫如下內(nèi)容
from django import template
register = template.Library() #注冊(cè)器,變量名稱必須叫register
# 通過(guò)inclusion_tag來(lái)做為裝飾器,并且需要傳入一個(gè)參數(shù),這個(gè)參數(shù)就是一個(gè)html文件(你想做成動(dòng)態(tài)組件的html文件)
@register.inclusion_tag('zujian2.html')
def dongtai(v1): #參數(shù)沒(méi)有個(gè)數(shù)限制
data = v1 #[11,22,33,44,55,66]
return {'xx': data }
# zujian2.html會(huì)收到定義的inclusion_tag函數(shù)的返回值,然后進(jìn)行zujian2.html這個(gè)動(dòng)態(tài)組件的模板渲染
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函數(shù)的返回值那個(gè)字典中的鍵 -->
<div class="menu1 item">
<a href="/t1/">{{ item }}</a> <!-- 寫相對(duì)路徑時(shí),前面的斜杠必須寫 -->
</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 %} #最終將渲染好的動(dòng)態(tài)組件(zujian2.html),通過(guò)include引入組件的方式,加載到這里
</body>
</html>
5 在后臺(tái)視圖中渲染basic.html頁(yè)面是可以傳入動(dòng)態(tài)數(shù)據(jù)
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. 小提示與小練習(xí)
小提示
自定義標(biāo)簽和過(guò)濾器在前后端未分離的項(xiàng)目用的比較多一些
前后端分離的項(xiàng)目用的比較少
@register.inclusion_tag('zujian2.html')
def dongtai(v1):
data = v1
return {'xx':data} # 這個(gè)return 相當(dāng)于render(zujian2.html,{'xx':data})
小練習(xí)
頁(yè)面效果
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了python簡(jiǎn)易遠(yuǎn)程控制單線程版，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
把Anaconda中的環(huán)境導(dǎo)入到Pycharm里面的方法步驟
這篇文章主要介紹了把Anaconda中的環(huán)境導(dǎo)入到Pycharm里面的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了python實(shí)現(xiàn)文法左遞歸的消除的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
教你使用Python?的?Template?類生成文件報(bào)告
這篇文章主要介紹了用?Python?的?Template?類生成文件報(bào)告,在閱讀本文時(shí)，您不僅學(xué)習(xí)了Python字符串的基本知識(shí)，Template類以及使用它的原因，而且還實(shí)現(xiàn)了第一個(gè)文件報(bào)告腳本，需要的朋友可以參考下2022-08-08
Python實(shí)現(xiàn)對(duì)比兩個(gè)Excel數(shù)據(jù)內(nèi)容并標(biāo)記出不同
日常工作中需要對(duì)比兩個(gè)Excel工作表中的數(shù)據(jù)差異是很不方便的，使用python來(lái)做就比較簡(jiǎn)單了！本文為大家介紹了python實(shí)現(xiàn)對(duì)比兩個(gè)Excel的數(shù)據(jù)內(nèi)容并標(biāo)記出不同數(shù)據(jù)的示例代碼，需要的可以參考一下2022-12-12
python操作docx寫入內(nèi)容,并控制文本的字體顏色
今天小編就為大家分享一篇python操作docx寫入內(nèi)容,并控制文本的字體顏色，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-02-02
這篇文章主要為大家分享了如何利用Python獲取趕集網(wǎng)招聘信息的前一篇內(nèi)容，感興趣的小伙伴們可以參考一下2016-04-04
Python 如何手動(dòng)編寫一個(gè)自己的LRU緩存裝飾器的方法實(shí)現(xiàn)
本文主要介紹了Python如何手動(dòng)編寫一個(gè)自己的LRU緩存裝飾器，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
python使用ctypes調(diào)用擴(kuò)展模塊的實(shí)例方法
在本篇文章里小編給大家整理的是一篇關(guān)于python使用ctypes調(diào)用擴(kuò)展模塊的實(shí)例方法內(nèi)容，需要的朋友們可以學(xué)習(xí)參考下。2020-01-01
這篇文章主要介紹了Keras中Conv1D的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12