Django學習之靜態檔案與模板詳解

2022-02-15 13:01:55

前言

我們已經設定完Django，今天就來學學靜態檔案與模板的放置使用。

模板

在上一章節中我們的檢視函數test使用了HttpResponse返回一個字串

作為我們第一個Django程式

但只有這些是遠遠不夠的，你說要是別人看自己的網頁就幾行文字在那裡，既不美觀也無意義。

存放目錄

我們平時看到的網頁都是通過HTML向我們呈現的內容的，Django也一樣。一個完整系統必須有著大量網頁用於實現不同的功能，而那些HTML檔案也有一個專門存放的目錄叫templates模板。這個目錄一般在APP目錄下建立，每個APP均可建立一個templates用來存放HTML檔案。當我們呼叫HTML檔案的時候，系統就會根據APP的註冊順序在每個APP下的templates找所需要的HTML檔案。

模板呼叫

那麼現在我們在APP檔案下建立一個templates目錄。

並在該目錄下建立一個名為demo的HTML檔案

輸入些內容後就在能在檢視函數呼叫這個模板了。

進入view.py檔案定義一個函數以呼叫demo.html模板。

from django.shortcuts import render, HttpResponse
 
 
# Create your views here.
 
def test(request):
    return render(request, "demo.html")

注意：函數一定要加上 request引數，在參照html模板時使用的render同樣需要加上request引數。

接下來在url.py檔案中，確定好關係就OK了。(網頁路徑以hd/為例)

點選執行後，輸入網址http://127.0.0.1:8000/hd/進入。

就能看到跟上圖類似的執行結果了。

模板語法

Django不是標示語言，它能進行資料處理。渲染網頁前會先執行Django語句，然後將得出的符合邏輯的能夠呈現給使用者看的結果替換掉對應位置的Django語句。

資料傳遞

在製作網頁時，如果我們不能一下子知道元素的值，比如需要通過資料庫才能獲取資料操作等，那麼我們就要在檢視函數中將需要的資料以字典的形式進行傳遞給HTML。值得高興的是，常用的資料型別都能傳遞。

傳遞方法：將變數以字典形式通過render函數進行傳遞，在HTML參照時，通過雙花括號+鍵名參照。

現在試試吧！

在檢視函數編寫些函數，然後傳遞過去

    s = "這是一個字串"
    d = {"這是一個": "字典"}
 
    return render(request, "demo.html", {"str": s, "dict": d})

之後在對應的HTML頁面參照它

<h3> {{ str }} {{dict}}</h3>

最後點執行。

元素參照

Django同樣支援參照字典，列表，元組等資料型別裡面的值，不一樣的是Django用.取代了[]。

比如想參照字典裡面的值需要通過 {{字典名.鍵名}} 來參照值（注意，鍵名無需使用引號。），如果想參照列表則 {{列表名.索引值}} 亦或者多維列表 {{列表名.索引1.索引2...}} 來參照。

view.py

def test(request):
    d = {"這是一個": "字典"}
    l1 = [1, 2, 3]
    l2 = [[1, 2], [3, 4]]
    return render(request, "demo.html",
                  {"list1": l1, "dict": d, "list2": l2}
                  )

demo.html

<body>
<h1>快看呼叫成功了沒有？</h1>
<h3> {{list1.0}}</h3>
<h3> {{list2.0.1}}</h3>
<!--注意鍵名無需帶引號-->
<h3> {{dict.這是一個}}</h3>
</body>

結果

for語句

Django也支援迴圈語句，但在使用完迴圈後需要加結束語句。這些命令都在 {% 命令 %}尖括號百分號之間。{與%之間沒有空格

迴圈使用字典時，如果你想獲取鍵（keys）,值（values），鍵值對（items）後面都不需要新增括號。

先看字典

    d = {"今天": "天氣", "真不錯": "對嗎？"}
    l1 = [1, 2, 3]
    return render(request, "demo.html",
                  {"list1": l1, "dict": d}
                  )

<h1>快看呼叫成功了沒有？</h1>
<!--無需帶括號-->
{% for k, v in dict.items %}
    <h4>{{k}} -- {{v}}</h4>
{% endfor %}

再看看列表，Django不支援range，所以只能迭代列表。

還是那串程式碼

def test(request):
    d = {"今天": "天氣", "真不錯": "對嗎？"}
    l1 = [1, 2, 3, 4]
    return render(request, "demo.html",
                  {"list1": l1, "dict": d}
                  )

只是改了HTML

&lt;h1&gt;快看呼叫成功了沒有？&lt;/h1&gt;{% for i in list1 %}    &lt;h4&gt;{{list1}}&lt;/h4&gt;    &lt;h4&gt;{{i}}&lt;/h4&gt;    &lt;!--不能這樣輸出值--&gt;    &lt;h4&gt;{{list1.i}} 前面好像沒輸出&lt;/h4&gt;{% endfor %}

迴圈最後要使用endfor結束。另外，似乎不能通過列表值來存取列表元素，導致{{list1.i}}沒有值

if語句

Django同樣支援條件語句。

<!--list = [1,2,3,4]-->
<!--list.1 = 2-->
{% if list.1 == 0 %}
    <h1>11111111111111111</h1>
{% elif list.1 == 1 %}
    <h1>2222222222222222222</h1>
{% else %}
    <h1>333333333333333333333</h1>
{% endif %}

靜態檔案

為了能夠呈現更精美的內容亦或者提高程式碼編寫效率，我們往往會使用到一些靜態檔案。

在開發過程中一般將圖片，外掛，css，js等當做靜態檔案處理。

存放目錄

靜態檔案那麼重要當然有他們各自的歸宿，它們都存放在static目錄下。同樣的static目錄也在APP下面建立，每個APP都可以有一個專門存放靜態檔案的目錄static。我們最好也能在static下對不同型別的檔案進行分類存放。如，圖片存放在img資料夾中，外掛存放在plugins資料夾中，css檔案存放在css資料夾，js存放在js資料夾。

檔案呼叫

我以一張圖片為例，講解一下是如何呼叫它的。

我們先將圖片放入static的img資料夾內，

在demo.html模板中的body使用img元素即可呼叫圖片。一般的呼叫是這樣的

<img src="/static/img/1.jpg" alt="沒圖片的話點執行重啟專案試試">

如果沒有顯示圖片的話重新執行一下應該就能載入了。

但是在Django中有專門呼叫靜態檔案的語法，我們也建議使用Django專門呼叫靜態檔案的方法。進入設定，滑到底部有這一個變數

這裡就記錄了我們靜態檔案的存放位置。使用Django語法，如果靜態檔案改名了，或者移到其他位置，直接在這裡修改一下就好了，就不用在html參照靜態檔案的時候逐個逐個修改路徑了。

現在就來看一下它的使用方法。在html頂部輸入

{% load static %}

宣告匯入靜態檔案

不知道為什麼我第二行會有紅線，可能pycharm不知道這是一個Django語句，不管它，接著輸入img圖片的匯入路徑

<img src="{% static 'img/1.jpg'%}" alt="沒圖片的話點執行重啟專案試試">

點選執行

進入網址http://127.0.0.1:8000/hd/ 即可完成圖片呼叫

css,js等檔案匯入的方法都是一樣的，只要我們知道了Django匯入靜態檔案的語法，渲染精緻的html頁面就不成問題啦！現在快去試試

總結

無論是 {{ 變數 }} 還是 {% 表示式 %} 都屬於Django語法的一部分，在render函數內部會將HTML中的DJango語句處理完並替換成相應的字串後再將標準的HTML格式內容傳送給瀏覽器。

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容!

Django學習之靜態檔案與模板詳解

目錄

前言

模板

存放目錄

模板呼叫

模板語法

資料傳遞

元素參照

for語句

if語句

靜態檔案

存放目錄

檔案呼叫

總結

熱門文章