Django快速入門筆記（5）——模板（html）二三事

02-09

寫在前面：滿打滿算，使用Django兩個月了。為了趕項目，更多的功能沒有時間研究，多少有點小沮喪。編程2年，前端基礎0，最近在寫一大堆html，一些入門級的小技巧還是可以和大家一起學習和分享的。

我盡量用最簡單的示例，把功能展現出來。示例里出現的Python語句，僅僅是可以實現其功能，如有更簡潔的代碼，跪求指出！！

在學習本章之前，默認大家對 html 文件有了一些最基本的認識。（什麼！！你還不知道？手動滑鼠右鍵單擊，查看網頁源代碼）

上圖簡單展示了Django 模板獲取數據的信息流程。

在最初設置的時候，我們已經將所有的模板文件（html）保存在了templates文件夾里，並按照不同的app下設了單獨的文件夾。

（如果你的文件結構還不是這樣的，可以參考 Django 快速入門筆記（1））

本篇文章主要對Django自帶的 templates 模板語言做一些簡單的介紹。正式內容之前，給大家的建議是，能在後端解決的數據處理，盡量不要放在前端！！有些內容在前面的文章中可能已經提及，這裡將它們匯總在一起，方便大家學習和交流。

參考資料：The Django template language（官網）

一、變數

1. 變數傳遞

{{ various }} //變數

Django模板中約定用 {{ }} 來傳遞一個變數。

例如，在views.py中，

def index1(request): ans={} # 創建字典 ans[jian]=hello world return render(request,app001/firstpage.html,ans)

我們定義了一個字典 ans，創建了一個鍵 jian，對應值 hello world。並用 render 方法，將整個字典 ans 輸出給 firstpage.html

當我們想在firstpage.html中顯示 hello world 時，只需要使用 {{ 鍵 }}，就可以了

{{ jian }}

2.變數賦值

可以結合 javascript 重新定義變數。

<script> var data={{ various }} ……</script>

這樣簡單的賦值，可以將 various 的值傳遞給新定義的變數 data

3.變數過濾器 filters

我們可以利用過濾器，對獲取到的數據進行二次加工。

{{ various|length }}

例如，我們利用Django自帶的 "length" 過濾器計算變數的長度。如果 various 為列表 [0,1,2]，則返回列表長度3

除此之外，Django自帶的過濾器還包括，

{{ various|default:"1234" }} // 變數錯誤或為空時，返回規定的值"1234"

{{ various|add:"2" }} // 如果變數值為4，返回6

更多的自帶過濾器可以查詢 templates-builtins-filters （官網）

你也可以自定義過濾器（相當於寫一個函數）來滿足特定的需求，這裡就不展開。

建議，能在後端完成的處理過程，盡量放在後端。如，同樣是計算變數長度，可以直接利用查詢集QuerySet的 len() 方法來完成。

更多對查詢集方法的介紹 querysets（官網）

二、邏輯

Django自帶的Tags已經為我們提供了基本的邏輯語言，if，for 等等，用 {% %} 表示調用。

基本的格式是 {% tag %} ... contents ... {% endtag %}

1. if……else if ……else 條件判斷

{% if condition1 %} expression1{% elif condition2 %} expression2{% else %} expression3{% endif %}

2. for 循環

{% for items in list1 %} expression{% endfor %}

三、雜七雜八的tags

1、動態url

格式形如 {% url url_name %}

舉例，

<a href="{% url welcome %}">首頁</a>

這裡，我們將超鏈接地址指定到 name 為 welcome 的 url 上。

在url.py文件中

urlpatterns =[ url(r^$,views.test1,name=welcome)] # name定義為welcome

這樣寫的好處是，html 和 url_name 綁定，url的地址以及對應的 views 可以任意修改。

2、引入頭文件 static

js，css類的文件，我們統一保存在了static文件夾中，如果想要在頭文件中引入。

首先應該 {% load static %}

<head> {% load static %}  <link rel="stylesheet" href="{% static bootstrap.min.css %}">  <script src="{% static bootstrap.min.js %}"></script></head>

上面例子以bootstrap為例，首先引入css類文件，再引入js文件。

引入格式，{% static bootstrap.min.css %}，引號中為引入文件在static文件夾中路徑。

如果，bootstrap.min.css 文件保存在了「static/app001/bootstrap.min.css」位置，則引入格式為{% static app001ootstrap.min.css %}

3、跨站點保護請求

使用格式，{% csrf_token %}，配合 post 使用

<form action="/app001" method="post"> {% csrf_token %} <p>姓名：<input type="text" name="name1"></p> <input type="submit" value="確定"></form>

四、模板繼承

1、block

一個多功能網站一般會有統一的風格，例如統一的導航欄，相似的頁面布局等等，這些在html文件中都是重複的代碼，會造成代碼冗長。我們無須在每一個html中重複編寫這些代碼，只需將統一的部分提出來，單獨遍寫出一個base模板，在需要套用模板的html中調用這個base就可以了。

首先在base.html中編寫固定不變的部分，將變動的部分用以下代碼代替，

{% block XX %}{% endblock %}

或者

{% block XX %}中間的部分是可以替換的，也可以設定默認值{% endblock %}

例如，每個頁面的 title 是變動的，在編寫模板base.html的時候，

<title>{% block title %}默認{% endblock %}</title>

這段代碼表示，ttitle是可以變化的，在沒有指定的情況下，title為默認。

接下來，我們在app001.html中調用這個base.html

{% extends "base.html" %} {% block title %}首頁{% endblock %}

首先用extends引入我們需要用到的模板，引號「」中為模板在templates文件夾下的地址，如果我們將base.html保存在了「templates/app001/base.html」中時，{% extends "app001/base.html" %}

接下來，替換模板中的block title，這裡是將「默認」，替換成了「首頁」。

通過模板的這種繼承方式，我們可以省去許多冗長重複的代碼部分，特別是需要統一修改網站的風格布局，或者導航欄的時候，只需要修改base文件，那麼引入了base模板的所有網頁都修改完成了，無須一個一個更改。

2、include

另外，我們可以使用include, 將每一個網頁的小功能打包成html，然後include該html

{% include "app001/tets1.html" %}

這裡表示，將test1.html 文件包含進來。

使用include的好處是，可以方便得更改網站布局。由於每個小功能的代碼都被分開打包了，我們在重新排版的時候，只需要在適當的地方include每個功能就好，而不需要將大段大段的代碼剪切下來再粘貼到新的地方。

這裡，貼一個示例，給大家感受一下，block 和 include 結合使用後，html 的整潔程度

{% extends "firstpage/base.html" %} {% block title %}示例{% endblock %} {% block content %} {% include "app001/test1.html" %} {% endblock %}

這是一個完整頁面的代碼。

是不是完全清爽呢！！！

除了以上介紹的這些，Django還支持自定義tags，進階部分的內容這裡就不再展開。

總結一下，Django自帶的模板語言主要有兩種，一個是{{變數}}，一個是{% %}，官方自帶的內容就有很多，同時支持自定義，感興趣的同學可以深入研究。再說一遍，建議能在後端完成的計算，特別是涉及資料庫的，盡量在後端完成。

好了，今天的筆記就到這裡，希望對你有用：）

聽說這篇題圖沒有喵喵？？怎麼可能~~

想到什麼再做更新，睡不醒的周一大家要打起精神來哦ㄟ(⊙ω⊙ㄟ)哈