零基礎(chǔ)入手Django(三)：模板變量
今天，小叮當(dāng)繼續(xù)為大家分享Django的干貨。主要內(nèi)容有：模板路徑配置和變量、常用過濾器以及靜態(tài)文件的引用。
?一、模板路徑配置
1.redirect重定向傳參
我們?nèi)砸浴癶ello_django"項目為例，上次我們配置的”article2"即為redirect重定向。
?我們到urls.py中配置相應(yīng)的路徑，傳入相應(yīng)的參數(shù)"num"
如下
我們在views.py中相應(yīng)部分接受參數(shù)即可。
如下
在瀏覽器中測試
值得注意的是，當(dāng)視圖函數(shù)重定向，有reverse函數(shù)時，我們可通過“args"進行傳參，但傳參的對象是元組。
2.模版路徑配置的兩種方法
（1）templates放在主目錄下
這種模版的創(chuàng)建方法就是，在項目主目錄下創(chuàng)建“templates"文件夾，在“templates"文件夾下創(chuàng)建對應(yīng)app的文件夾，將對應(yīng)的html文件放到其中。通過設(shè)置“settings.py"中的“DIRS"來尋找模板文件。
（2）templates放在app目錄下
首先值得注意的是，templates放在app目錄下時，文件夾的名稱必須為“templates” ,之后在主目錄中的“settings.py”中找到“INSTALLED_APPS"在其中注冊app
例如，在book目錄下新建“templates”文件夾
新建book_index.html，返回“我是在名字為book的app下新建的模板”
在”INSTALLED_APPS“中，注冊app，填寫對應(yīng)的app名稱即可。
檢查“settings.py"中的”TEMPLATES"中“APP_DIRS"是否為"True"(默認情況下為True)，若不為True，app將不會注冊成功。
在app的views.py中編寫視圖函數(shù)渲染模板。
在urls.py中配置相應(yīng)的訪問url
具體代碼如下：
在瀏覽器中測試：
輸入網(wǎng)址：“http://192.168.255.130:8000/book/test/”
二、模板變量
當(dāng)我們登錄qq郵箱后，qq郵箱頁面便會顯示我們的昵稱，不同的用戶登錄，在qq郵箱頁面相應(yīng)的位置便會顯示不同的昵稱。
這是怎么做到的呢？其實，這就是一個模板變量，根據(jù)不同的后臺數(shù)據(jù)，模板響應(yīng)不同的數(shù)據(jù)。
1.以上幾次創(chuàng)建好的“movie” app為例說明
（1）在movie文件夾下新建urls.py
代碼如下：
（2）使用include在主目錄的urls.py中
給“movie”的urls.py分配路由:
在templates文件夾建好的“movie”文件夾中新建movie的主頁模板“index”
代碼如下
其中{{name}}即為模版變量，用來接受視圖函數(shù)返回的名為“name"的變量。
（3)在movie下的views.py中定義視圖函數(shù)，用來渲染movie主頁模版
視圖函數(shù)代碼為：
（4）在創(chuàng)建好的movie下的urls.py中導(dǎo)入views.py,并為movie主頁添加路由
代碼如下
（5）啟動服務(wù)后，在瀏覽器中查看
輸入網(wǎng)址”?http://192.168.255.130:8000/movie/index/ “
可以看到模版變量已經(jīng)渲染成功。
2.模版變量可以是多種類型
（1）重新定義movie下views.py
(2)重新定義”templates"下movie中的index.html模版文件
（3）在瀏覽器中測試
輸入“http://192.168.255.130:8000/movie/index/”
3.小結(jié)
模版變量使用規(guī)則：
（1）語法:??{{ 變量名}}
（2）命名由字母和數(shù)字以及下劃線組成，不能有空格和標(biāo)點符號
（3）可以使用字典、模型、方法、函數(shù)、列表
（4）不要和python或django關(guān)鍵字重名
（5）如果data是一個字典，那么訪問data.items將會訪問data這個字典的key名為items的值，而不會訪問字典的items方法。
（6）點在模板渲染時有特殊的含義。 變量名中點表示查找。?
三、常用過濾器
所謂過濾器，就是可以將模版?zhèn)鬟^來的變量進行過濾，使之符合我們想要的結(jié)果。
準(zhǔn)備工作
（1）重新定義movie下的views.py文件
（2）重新定義“templates"文件下movie中的index.html文件
（3）?瀏覽器中訪問：
輸入” http://192.168.255.130:8000/movie/index/“
小結(jié)：可見過濾器就是在模版變量后加上豎杠”｜“之后寫上相應(yīng)的過濾器名稱，即可實現(xiàn)對模版變量的過濾功能。
2.空值過濾器
（1）default
當(dāng)模版變量不存在（沒有在視圖函數(shù)中定義而在模版中直接使用）時，系統(tǒng)會默認其值為空。
例如，我們在模版中直接使用xdd666變量，而沒有在views.py中定義時
在瀏覽器中訪問
我們發(fā)現(xiàn)頁面沒有報錯，xxxxx與yyyy直接拼接在了一起。這說明當(dāng)模版變量不存在時，系統(tǒng)會默認其為空值。
我們?yōu)檫@個不存在的模版變量加上default過濾器，并設(shè)值為”我不在“
再次在瀏覽器中訪問
這說明，default過濾器的作用是，為”沒有在視圖函數(shù)中定義而直接在模版中使用的變量”設(shè)置默認值，而對于定義過的變量，則會使用定義過的值。
(2)default_if_none
對在模版中出現(xiàn)的未知定義使用default_if_none過濾器
在瀏覽器中發(fā)現(xiàn)其沒有效果?。?！
這是因為“deault_if_none"過濾器針對的是，定義了的變量，只不過變量的值為none而已。這種情況，在數(shù)據(jù)庫查找時，可能用的到。
在views.py中，傳入xdd666這個變量，并設(shè)置為None
重新在瀏覽器中訪問
3.capfirst
值得注意的是，過濾器可接連使用。如下面的例子，將變量先全部變小寫后，再將首字母變大寫。
在模版中引入：
在瀏覽器中查看
可見，capfirst的作用就是將變量的首字母變?yōu)榇髮憽?/strong>
4.cut
cut過濾器后需跟參數(shù)，表示刪除、切掉指定的參數(shù)。
過濾器的傳參格式為{{變量|過濾器：‘?參數(shù)’}}
模版中
瀏覽器中查看
5.常用過濾器小結(jié)
常用的過濾器總結(jié)如下
（1）add舉例
視圖函數(shù)中定義num1值為18和num2值為2
模板中引用add
瀏覽器中查看
（2）first?和last舉例
視圖函數(shù)
模版定義
瀏覽器查看
（3）join舉例
模板定義
瀏覽器查看
（4）truncatechars和truncatewords舉例
當(dāng)我們訪問網(wǎng)頁時，經(jīng)常遇到這種情況，訪問的網(wǎng)址下面，沒有顯示全，會有”...“的出現(xiàn)。這種效果，就是通過truncatechars或是truncatewords來實現(xiàn)的。
模版定義
截斷字符：{{?test|truncatechars:7?}}<br>
截斷單詞：{{?test|truncatewords:2?}}<br>
瀏覽器查看
可以看到truncatechars過濾器，截斷以字符為單位，包括了3個點。如上，當(dāng)截斷7個字符時，顯示的結(jié)果為THIS...共7個字。
truncatewords過濾器，截斷以單詞為單位，如上，設(shè)置截斷為2時，得到了兩個單詞”THIS IS"還有3個點.
（4）truncatechars_html和truncatewords_html舉例
當(dāng)truncatechars_html或truncatewords_html截斷的對象為html標(biāo)簽內(nèi)容時，標(biāo)簽不會被截斷。而truncatechars和truncatewords在截斷時，則會將標(biāo)簽計算在內(nèi)。
視圖函數(shù)中定義html變量
? ?return?render(request,'movie/index.html',
? ? ? ? ? ? ? ? ?context={
? ? ? ? ? ? ? ? ? ? ? ? ??'html':'<h1>THIS IS IN HTML!</h1>'
? ? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ? ?)
模版中使用過濾器
截斷7字符：{{?html|truncatechars:7?}}<br>
截斷2單詞：{{?html|truncatewords:2?}}<br>
截斷7字符_html：{{?html|truncatechars_html:7?}}<br>
截斷2單詞_html:{{?html|truncatewords_html:2?}}<br>
瀏覽器中顯示
（5）slice舉例
需要注意的是slice切片的區(qū)間，寫在過濾器后的字符串中，以冒號隔開，區(qū)間是左閉右開。
模版定義
切片[1:2]的結(jié)果 ：{{?list|slice:'1:2'?}}
瀏覽器中顯示
（6）striptags和safe舉例
striptags對帶有html標(biāo)簽的變量，能夠?qū)⑵錁?biāo)簽去掉。而safe對帶有html標(biāo)簽的變量，能夠?qū)⑵湫Ч@示出來。
模版中定義
去掉標(biāo)簽：{{?html|striptags?}}<br>
顯示標(biāo)簽效果：{{?html|safe?}}<br>
瀏覽器中查看
（7）floatformat舉例
在視圖函數(shù)中定義float浮點變量
? ?return?render(request,'movie/index.html',
? ? ? ? ? ? ? ? ?context={
? ? ? ? ? ? ? ? ? ? ? ? ??'float':3.1415
? ? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ? ?)
模版中使用過濾器，保留3位小數(shù)（默認是保留1位小數(shù)）
瀏覽器中顯示
（8）length和length_is舉例
length過濾器用來返回變量的長度，length_is過濾器用來返回“True"或"False"用來判斷變量長度是否為某個值。
模板定義
列表長度為：{{?list|length?}}<br>
列表長度是否為4：{{?list|length_is:4?}}<br>
列表長度是否為3：{{?list|length_is:3?}}
瀏覽器中查看
6.date和time過濾器
date和time過濾器的格式如下
1Y:??四位數(shù)的年。如2019 2y:??兩位數(shù)的年。如19 3m:??兩位數(shù)的月。如01，06 4n:??一位數(shù)的月。如1，2，12 5d:??兩位數(shù)的日。如01，02，31 6j:??一位數(shù)的日。如1，3，31 7g:??12小時制的一位數(shù)的小時。如1，2，12 8G：??24小時制的一位數(shù)的小時。如0，8，23 9h:???12小時制的兩位數(shù)的小時。如01，08，12 10H:???24小時制的兩位數(shù)的小時。如01，13，24 11i:???分鐘。從00-59 12s:???秒。?從00-59（1）時間獲取與時差更正
在views.py中導(dǎo)入datetime模塊，定義”now"變量表示當(dāng)前時間
import?datetime
def?index(request):
? ?return?render(request,'movie/index.html',
? ? ? ? ? ? ? ? ?context={
? ? ? ? ? ? ? ? ? ? ? ? ??'now':datetime.datetime.now
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?)
在模版中定義
在瀏覽器中查看
此時，我們發(fā)現(xiàn)，系統(tǒng)輸出的時間和我們的本地時間，相差了8個小時，也就是說有8個小時的時差?。?！
下面我們來進行時差的更正：
我們找到主目錄下的settings.py文件中的“TIME_ZONE"其默認值為'UTC'
我們將其改為“Asia/Shanghai”(亞洲/上海)時區(qū)
之后，在瀏覽器中重新查看，發(fā)現(xiàn)時間已和我們的本地時間一致。
（2）date和time過濾器的使用
從上可以看到，系統(tǒng)默認的時間輸出格式是，“月-日-年-時間（a.m.(上午)或p.m.(下午)）這符合英美的習(xí)慣卻不符合我們的”年-月-日“時間習(xí)慣。這時，我們便可以使用過濾器來控制時間的格式輸出。
模版定義
自定義輸出當(dāng)前時間:{{?now|date:'Y-n-d-H:i:s'?}}<br>
默認time輸出：{{?now|time?}}<br>
自定義time輸出：{{?now|time:'H:i:s'?}}
在瀏覽器中查看
四、靜態(tài)文件的引用
例如css、js、圖片都屬于靜態(tài)文件，在Django項目中，我們?nèi)绾我媚兀?/p>
1.環(huán)境配置
（1）在項目目錄中創(chuàng)建”static"文件夾，在其文件夾下創(chuàng)建“css”、“js”、“images”子文件夾。
(2)在主目錄中的settings.py?的最后配置“static"的路徑（類似于templates的配置）
系統(tǒng)默認為我們建好了”static"的路由
如果沒有，我們可以自己創(chuàng)建
另外，我們需要再建立一個變量“STATICFILES_DIRS”,類似于templates的“DIR",也是一個列表。
? ?
]
我們在其中寫入”static"的文件路徑
os.path.join(BASE_DIR,'static')
]
2.新建css、js文件，導(dǎo)入本地圖片
（1）在css文件夾下新建css文件 ，控制背景顏色為天藍色（用來測試）
起名為“mystyle"
控制背景顏色為天藍
輸入代碼如下
? ?background:skyblue;
}
（2）在js文件夾下新建js文件 ，進行彈窗（用來測試）
起名為”myjs"
彈窗輸出“大家好！我是IT小叮當(dāng)！”
輸入代碼如下：
（3）在images文件夾下隨意導(dǎo)入一張本地圖片 （用來測試）
直接選中本地圖片，將其拖到“images"文件夾中，pycharm將會自動彈出"move"界面，選擇”ok"即可。
3.創(chuàng)建模版、視圖函數(shù)、配置路由
（1）在templates下movie中新建“static_test.html"（用來測試）
代碼如下：
<html?lang="en">
<head>
? ?<meta?charset="UTF-8">
? ?<title>靜態(tài)文件引用</title>
</head>
<body>
</body>
</html>
（2）在movie下的views.py中新建視圖函數(shù)
? ?return?render(request,'movie/static_test.html')
（3）在movie下的urls.py中配置路由
代碼如下
（4）每次新建文件后都要確保文件上傳到虛擬機中的服務(wù)器上
可以在”file transer"中查看
也可以自己手動上傳，在項目文件夾處，右鍵找到“Deployment”--"upload to xxx"(xxx為你建立的遠程會話連接)
3.靜態(tài)文件引用方式一：絕對路徑引用
（1）使用link中的href加絕對路徑引用css
(2)使用script中的src加絕對路徑引用js
(3)使用img中的src加絕對路徑引用圖片
整體的代碼如下：
<html?lang="en">
<head>
? ?<meta?charset="UTF-8">
? ?<title>靜態(tài)文件引用</title>
? ?<link?rel="stylesheet"?href="/static/css/mystyle.css">
</head>
<body>
<script?src="/static/js/myjs.js"></script>
<img?src="/static/images/二維碼.jpg">
</body>
</html>
在瀏覽器中查看，首先彈出彈窗，這說明js引用成功。
點擊確定后，出現(xiàn)藍色背景，說明css引用成功；出現(xiàn)圖片，說明圖片引用成功。
4.靜態(tài)文件引用方式二：模版標(biāo)簽引用
對于靜態(tài)文件，我們也可以通過load加載的方式引用
（1）load加載static
(2)使用link中的href用模版標(biāo)簽的方法引用css
(3)使用script中的src用模版標(biāo)簽的方法引用引用js
(4)使用img中的src和模版標(biāo)簽的方法引用圖片
整體的代碼如下：
<!DOCTYPE?html>
<html?lang="en">
<head>
? ?<meta?charset="UTF-8">
? ?<title>靜態(tài)文件引用</title>
? ?<link?rel="stylesheet"?href="{%?static?'css/mystyle.css'?%}">
</head>
<body>
<script?src="{%?static?'js/myjs.js'?%}"></script>
<img?src="{%?static?'images/二維碼.jpg'?%}">
</body>
</html>
在瀏覽器中查看，首先彈出彈窗，這說明使用模版標(biāo)簽的方法js引用成功。
點擊確定后，出現(xiàn)藍色背景，說明通過模版標(biāo)簽的方法css引用成功；出現(xiàn)圖片，說明通過模版標(biāo)簽的方法圖片引用成功。
小結(jié)：
（1）模版標(biāo)簽的引用靜態(tài)文件的方法，是把“static"文件夾引用進來了，只要在”static"文件夾下的文件都能找到。
（2）絕對路徑引用靜態(tài)文件的方法，是明確的定位到某個文件，獨一無二。
（3）模版標(biāo)簽更像是引用到了一個房間，再從房間內(nèi)找到個人，在房間內(nèi)的文件都可引用，；絕對路徑引用就像是定位到了房間內(nèi)的個人具體位置。
