2. 程式人生 > >Django框架之——模板

Django框架之——模板

阿新 • • 發佈：2018-11-18

模板

作為Web框架，Django提供了模板，用於編寫html程式碼，還可以嵌入模板程式碼更快更方便的完成頁面開發，再通過在檢視中渲染模板，將生成最終的html字串返回給客戶端瀏覽器。模版致力於表達外觀，而不是程式邏輯。模板的設計實現了業務邏輯view與顯示內容template的分離，一個檢視可以使用任意一個模板，一個模板可以供多個檢視使用。

模板包含兩部分：

  • 靜態部分，包含html、css、js。
  • 動態部分，就是模板語言。

Django模板語言，簡寫DTL，定義在django.template包中。 建立專案後，在"專案名稱/settings.py"檔案中定義了關於模板的配置。

DIRS定義一個目錄列表，模板引擎按列表順序搜尋這些目錄以查詢模板檔案，通常是在專案的根目錄下建立templates目錄。

Django處理模板分為兩個階段：

  • 1.載入：根據給定的路徑找到模板檔案，編譯後放在記憶體中。
  • 2.渲染：使用上下文資料對模板插值並返回生成的字串。

為了減少開發人員重複編寫載入、渲染的程式碼，Django提供了簡寫函式render，用於呼叫模板。

 

模板語言

模板語言包括4種類型，分別是：

  • 變數
  • 標籤
  • 過濾器
  • 註釋

接下來逐個介紹4種類型。

 

模板變數

模板變數的作用是計算並輸出，變數名必須由字母、數字、下劃線（不能以下劃線開頭）和點組成。

語法如下：

{{變數}}

當模版引擎遇到點如book.title，會按照下列順序解析：

  • 1.字典book['title']
  • 2.先屬性後方法，將book當作物件，查詢屬性title，如果沒有再查詢方法title()
  • 3.如果是格式為book.0則解析為列表book[0]

    如果變數不存在則插入空字串''。

在模板中呼叫方法時不能傳遞引數。

 

 

標籤

語法如下：

{%程式碼段%}

for標籤語法如下：

{%for item in 列表%}
迴圈邏輯
{{forloop.counter}}表示當前是第幾次迴圈，從1開始
{
 
%empty%}
列表為空或不存在時執行此邏輯
{%endfor%}

if標籤語法如下：

{%if ...%}
邏輯1
{%elif ...%}
邏輯2
{%else%}
邏輯3
{%endif%}

 

 

過濾器

語法如下:

  • 使用管道符號|來應用過濾器，用於進行計算、轉換操作，可以使用在變數、標籤中。
  • 如果過濾器需要引數，則使用冒號:傳遞引數。
變數|過濾器:引數

長度length，返回字串包含字元的個數，或列表、元組、字典的元素個數。

預設值default，如果變數不存在時則返回預設值。

data|default:'預設值'

日期date，用於對日期型別的值進行字串格式化，常用的格式化字元如下：

  • Y表示年，格式為4位，y表示兩位的年。
  • m表示月，格式為01,02,12等。
  • d表示日, 格式為01,02等。
  • j表示日，格式為1,2等。
  • H表示時，24進位制，h表示12進位制的時。
  • i表示分，為0-59。
  • s表示秒，為0-59。

 

 

模板繼承

模板繼承和類的繼承含義是一樣的，主要是為了提高程式碼重用，減輕開發人員的工作量。

典型應用：網站的頭部、尾部資訊。

父模板

如果發現在多個模板中某些內容相同，那就應該把這段內容定義到父模板中。

標籤block：用於在父模板中預留區域，留給子模板填充差異性的內容，名字不能相同。 為了更好的可讀性，建議給endblock標籤寫上名字，這個名字與對應的block名字相同。父模板中也可以使用上下文中傳遞過來的資料。

{%block 名稱%}
預留區域，可以編寫預設內容，也可以沒有預設內容
{%endblock  名稱%}

子模板

標籤extends：繼承，寫在子模板檔案的第一行。

{% extends "父模板路徑"%}

子模版不用填充父模版中的所有預留區域，如果子模版沒有填充，則使用父模版定義的預設值。

填充父模板中指定名稱的預留區域。

{%block 名稱%}
實際填充內容
{{block.super}}用於獲取父模板中block的內容
{%endblock 名稱%}

 

 

 

CSRF

CSRF全拼為Cross Site Request Forgery，譯為跨站請求偽造。CSRF指攻擊者盜用了你的身份，以你的名義傳送惡意請求。CSRF能夠做的事情包括：以你名義傳送郵件，發訊息，盜取你的賬號，甚至於購買商品，虛擬貨幣轉賬......造成的問題包括：個人隱私洩露以及財產安全。

CSRF示意圖如下：

如果想防止CSRF，首先是重要的資訊傳遞都採用POST方式而不是GET方式，接下來就說POST請求的攻擊方式以及在Django中的避免。

總結

  • 重要資訊如金額、積分等，採用POST方式傳遞
  • 啟用CSRF中介軟體，預設啟用
  • 在form表單中post提交時加入標籤csrf_token

保護原理

加入標籤後，可以檢視post.html的原始碼，發現多了一個隱藏域。

在瀏覽器的“開發者工具”中檢視cookie資訊。

說明：當啟用中介軟體並加入標籤csrf_token後，會向客戶端瀏覽器中寫入一條Cookie資訊，這條資訊的值與隱藏域input元素的value屬性是一致的，提交到伺服器後會先由csrf中介軟體進行驗證，如果對比失敗則返回403頁面，而不會進行後續的處理。

 

 

驗證碼

在使用者註冊、登入頁面，為了防止暴力請求，可以加入驗證碼功能，如果驗證碼錯誤，則不需要繼續處理，可以減輕業務伺服器、資料庫伺服器的壓力。

手動實現驗證碼

接下來的程式碼不要求手動寫出來，因為這種程式碼在網上可以搜到很多。

1）安裝包Pillow3.4.1。

pip install Pillow==3.4.1

點選檢視PIL模組API，以下程式碼中用到了Image、ImageDraw、ImageFont物件及方法。

2）在booktest/views.py檔案中，建立檢視verify_code。

  • 提示1：隨機生成字串後存入session中，用於後續判斷。
  • 提示2：檢視返回mime-type為image/png。
from PIL import Image, ImageDraw, ImageFont
from django.utils.six import BytesIO
...
def verify_code(request):
    #引入隨機函式模組
    import random
    #定義變數，用於畫面的背景色、寬、高
    bgcolor = (random.randrange(20, 100), random.randrange(
        20, 100), 255)
    width = 100
    height = 25
    #建立畫面物件
    im = Image.new('RGB', (width, height), bgcolor)
    #建立畫筆物件
    draw = ImageDraw.Draw(im)
    #呼叫畫筆的point()函式繪製噪點
    for i in range(0, 100):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
        draw.point(xy, fill=fill)
    #定義驗證碼的備選值
    str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
    #隨機選取4個值作為驗證碼
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]
    #構造字型物件，ubuntu的字型路徑為“/usr/share/fonts/truetype/freefont”
    font = ImageFont.truetype('FreeMono.ttf', 23)
    #構造字型顏色
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    #繪製4個字
    draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
    draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
    draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
    draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
    #釋放畫筆
    del draw
    #存入session，用於做進一步驗證
    request.session['verifycode'] = rand_str
    #記憶體檔案操作
    buf = BytesIO()
    #將圖片儲存在記憶體中，檔案型別為png
    im.save(buf, 'png')
    #將記憶體中的圖片資料返回給客戶端，MIME型別為圖片png
    return HttpResponse(buf.getvalue(), 'image/png')

3）開啟booktest/urls.py檔案，配置url。

url(r'^verify_code/$', views.verify_code),

4）執行伺服器，在瀏覽器中輸入如下網址。

http://127.0.0.1:8000/verify_code/

5）瀏覽效果如下圖：

可以多重新整理幾次看值會不會變。

呼叫驗證碼

1）在booktest/views.py檔案中，建立檢視verify_show。

def verify_show(request):
    return render(request,'booktest/verify_show.html')

2）開啟booktest/urls.py檔案，配置url。

    url(r'^verify_show/$', views.verify_show),

3）在templates/booktest/目錄下建立verify_show.html。

<html>
<head>
    <title>驗證碼</title>
</head>
<body>
<form method="post" action="/verify_yz/">
    {%csrf_token%}
    <input type="text" name="yzm">
    <img id="yzm" src="/verify_code/"/>
    <span id="change">看不清，換一個</span>
    <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

4）執行伺服器，在瀏覽器中輸入如下網址。

http://127.0.0.1:8000/verify_show/

5）瀏覽效果如下圖：

 

 

驗證

1）在booktest/views.py檔案中，建立檢視verify_yz。

def verify_yz(request):
    yzm=request.POST.get('yzm')
    verifycode=request.session['verifycode']
    response=HttpResponse('no')
    if yzm==verifycode:
        response=HttpResponse('ok')
    return response

2）開啟booktest/urls.py檔案，配置url。

    url(r'^verify_yz/$', views.verify_yz),

3）回到瀏覽器後重新整理，在文字框中填寫驗證碼，點選提交按鈕。

4）瀏覽效果如下圖：

 

 

 

反向解析

先看看原來怎麼做

1) 開啟booktest/views.py檔案，建立檢視fan1、fan2。

def fan1(request):
    return render(request,'booktest/fan1.html')
def fan2(request):
    return HttpResponse('fan2')

2）開啟booktest/urls.py檔案，配置url。

 url(r'^fan1/$', views.fan1),
    url(r'^fan2/$', views.fan2),

3）在templates/booktest/目錄下建立fan1.html。

<html>
<head>
    <title>反向解析</title>
</head>
<body>
普通連結：<a href="/fan2/">fan2</a>
</body>
</html>

4）執行伺服器，在瀏覽器中輸入如下網址：

http://127.0.0.1:8000/fan1/

瀏覽效果如下圖：

5）點選連結後轉向fan2，效果如下圖：

6）開啟booktest/urls.py檔案，修改"fan2"的正則表示式為"fan_show"。

  url(r'^fan_show/$', views.fan2),

7）開啟瀏覽器，後退一下，重新整理後再次點選連結，瀏覽如下圖：

問題就來了：隨著功能的增加會出現更多的檢視，可能之前配置的正則表示式不夠準確，於是就要修改正則表示式，但是正則表示式一旦修改了，之前所有對應的超連結都要修改，真是一件麻煩的事情，而且可能還會漏掉一些超連結忘記修改，有辦法讓連結根據正則表示式動態生成嗎？ 答：反向解析。

反向解析應用在兩個地方：模板中的超連結，檢視中的重定向。

反向解析

要實現反向解析功能，需要如下步驟：

1）在test4/urls.py中為include定義namespace屬性。

   url(r'^',include('booktest.urls',namespace='booktest')),

2）在booktest/urls.py中為url定義name屬性，並修改為fan2。

    url(r'^fan2/$', views.fan2,name='fan2'),

3）在模板中使用url標籤做超連結，此處為templates/booktest/fan1.html檔案。

<html>
<head>
    <title>反向解析</title>
</head>
<body>
普通連結：<a href="/fan2/">fan2</a>
<hr>
反向解析：<a href="{%url 'booktest:fan2'%}">fan2</a>
</body>
</html>

4）回到瀏覽器中，後退，重新整理，檢視原始檔如下圖，兩個連結地址一樣。

5）在booktest/urls.py中，將fan2修改為fan_show。

 url(r'^fan_show/$', views.fan2,name='fan2'),

6）回到瀏覽器中，重新整理，檢視原始檔如下圖，兩個連結地址不一樣。

7）反向解析也可以應用在檢視的重定向中。

from django.shortcuts import redirect
from django.core.urlresolvers import reverse

return redirect(reverse('booktest:fan2'))

總結：在定義url時，需要為include定義namespace屬性，為url定義name屬性，使用時，在模板中使用url標籤，在檢視中使用reverse函式，根據正則表示式動態生成地址，減輕後期維護成本。

URL的引數

有些url配置項正則表示式中是有引數的，接下來講解如何傳遞引數。

情況一：位置引數

1）在booktest/urls.py中，修改fan2如下：

   url(r'^fan(\d+)_(\d+)/$', views.fan3,name='fan2'),

2）在booktest/views中，定義檢視fan3如下:

def fan3(request, a, b):
    return HttpResponse(a+b)

3）修改templates/booktest/fan1.html檔案如下：

<html>
<head>
    <title>反向解析</title>
</head>
<body>
普通連結：<a href="/fan2_3/">fan2</a>
<hr>
反向解析：<a href="{%url 'booktest:fan2' 2 3%}">fan2</a>
</body>
</html>

4）回到瀏覽器中，重新整理，檢視原始檔如下圖：

使用重定向傳遞位置引數格式如下：

return redirect(reverse('booktest:fan2', args=(2,3)))

 

情況二：關鍵字引數

1）在booktest/urls.py中，修改fan2如下：

   url(r'^fan(?P<id>\d+)_(?P<age>\d+)/$', views.fan4,name='fan2'),

2）在booktest/views中，定義檢視fan4如下:

def fan4(request, id, age):
    return HttpResponse(id+age)

2）修改templates/booktest/fan1.html檔案如下：

<html>
<head>
    <title>反向解析</title>
</head>
<body>
普通連結：<a href="/fan100_18/">fan2</a>
<hr>
反向解析：<a href="{%url 'booktest:fan2' id=100 age=18%}">fan2</a>
</body>
</html>

3）回到瀏覽器中，重新整理，檢視原始檔如下圖：

使用重定向傳遞關鍵字引數格式如下：

return redirect(reverse('booktest:fan2', kwargs={'id':100,'age':18}))

 

 

 

換一個

  • 點選“看不清，換一個”，換一個新的驗證碼
<script type="text/javascript" src="/static/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#change').css('cursor','pointer').click(function() {
            $('#yzm').attr('src',$('#yzm').attr('src')+1)
        });
    });
</script>
...
<img id="yzm" src="/verify_code/?1"/>
<span id="change">看不清，換一個</span>

 

相關推薦

Django框架之模板基礎，靜態文件配置

view def 定義 join 同名 log gpo 意思 red 一、模板繼承 目的是：減少代碼的冗余 語法： {% block classinfo %} {% endblock %} 具體步驟： 1、創建一個base.html文件，2、把要顯示的頁面的內容寫在

Django框架之模板語法（重要！）

便在 light 自定義標簽 註釋 submit 調用 不為 items AI 一、什麽是模板？ 只要是在html裏面有模板語法就不是html文件了，這樣的文件就叫做模板。 二、模板語法分類 1、模板語法之變量：語法為 {{ }}： 在 Django 模板中遍歷復雜數據結

Django框架 之 模板語言

字符數 tom 存在 counter 代碼 lock view class sem 瀏覽目錄 標簽 過濾器 一、標簽 Tags 1、普通變量 普通變量用{{ }} 變量名由數字、字母、下劃線組成 點.在模板語言中用來獲取對象相應的屬性值

django框架之模板系統2

title 超過 com tab var mvc 文本 top table 昨日內容回顧： 　　1. MVC和MTV框架 MVC M: model 模型 存寫數據 V: view

Django框架之——模板

模板 作為Web框架，Django提供了模板，用於編寫html程式碼，還可以嵌入模板程式碼更快更方便的完成頁面開發，再通過在檢視中渲染模板，將生成最終的html字串返回給客戶端瀏覽器。模版致力於表達外觀，而不是程式邏輯。模板的設計實現了業務邏輯view與顯示內容template的分離，一個檢視可以使用任意一

Django web框架之模板

引用 自定義標簽 and lib total http brush safe bar 1 模板： 什麽是模板？ 　　html+模板語法 　　模版包括在使用時會被值替換掉的 變量，和控制模版邏輯的 標簽。 2 模板語法： 1 變量：{{}} 深度查詢： 通過句

Django框架之template(模板)中的安全機制

當專案執行過程中的Html頁面獲取來自Views中的資料時，獲取到的資料存在HTML轉義的特性： 在使用template模板語言時，需要注意的是{{ }}用於載入變數，而{% %}用於載入語句 正常：{{ str_data}}  ,   safe機制：{{ str_dat

Django框架之虛擬環境搭建

生效 targe http 服務器 安裝過程 min exp 更新 查看 創建虛擬環境篇今天小編就來講一下在Ubantu下如何搭建Django環境，希望能幫助那些不會搭建的童鞋^o^0.首先要先安裝好Python環境，至於安裝過程，小編就不講了，百度一下，你懂得。。1.初次

Django框架之模型

.com 需要 模型 bool span 我們 unique web 大文本

Django框架之正則表達式URL誤區

def mage 郵箱 tar 並且 相關 div 比較 開始 問題：我學習的視頻大概是2015年錄的，裏面用的Django版本比較老關於正則表達式URL這一塊都是用的url（“url(r‘^admin/‘, admin.site.urls),”）方法。而我自己練習的時候是

Django 框架之 URL

ren orm 映射 可選 pos localhost OS 網站 special URL配置就像Django所支撐網站的目錄。它的本質是URL模式以及要為該URL模式調用的視圖函數之間的映射表。 ＃ 示例: urlpatterns = [ path(route

Django 框架之視圖函數(Views)

初始化 post 字符串 參數 use 表示 字符 http get blog http請求中產生的兩個核心對象: http請求: HttpRequest對象 http響應: HttpResponse對象 所在位置: django.http HttpRequest 對

Django 框架之Form組件

all submit ack HA boolean use ogl forms sse 1. Django的Form主要具有以下幾大功能: 生成HTML標簽 驗證用戶數據(顯示錯誤信息) HTML Form提交保留上次提交的數據 初始化頁面顯示內容 2. 第一個案例:

Django框架 之 logging配置

分享 自動 AS eno 信息 過濾 encoding con python logging配置文件 # Django的日誌配置項 BASE_LOG_DIR = os.path.join(BASE_DIR, "log") #配置路徑 LOGGING =

Django框架 之 Form表單和Ajax上傳文件

不可 _for render ren files AS AD 什麽 OS 瀏覽目錄 Form表單上傳文件 Ajax上傳文件 偽造Ajax上傳文件 Form表單上傳文件 html <h3>form表單上傳文件&

python—day58 Django介紹 之模板補充、路由

自定義filter 函數 自定義 pan 介紹 tro Go ... 定義 Filter： 　　1.內置: filter 　　　　1.{{ value|date:‘Y-m-d H:i:s‘ }} 　　　　2. ... 　　2.自定義filter 　　　　1.在app新建一個

Django框架 之 信號

pre 配置 定義 內置 response pri top 分享圖片 oda Django中提供了“信號調度”，用於在框架執行操作時解耦。通俗來講，就是一些動作發生的時候，信號允許特定的發送者去提醒一些接受者。 Django內置信號 Mode

django框架之視圖系統和路由系統

沒有 *args mat rap 其他 自己 XML func quest 內容回顧： 　　　　1. tags 1. for循環 {% for name in name_list %} {{ name }}

django框架之auth模塊

obj 不一致 用戶登錄 回顧 title abstract null valid exce 內容回顧 1. form表單組件 1. 常用字段 1. CharField() 2. ChoiceField()

django框架之form組件

本質 dumps generic 小數 word 用戶名 請求 字段名 文本 內容回顧： 　　1. 內容回顧 1. 復習JSON 1. JSON是什麽？ 一種數據格式，和語言無關的數據格式。 2. Python裏面轉換