前言

在Django框架中，模板是可以幫助開發(fā)者快速生成呈現(xiàn)給用戶頁面的工具 　　模板的設(shè)計(jì)方式實(shí)現(xiàn)了我們ＭＶＴ重ＶＴ的解耦，ＶＴ有著Ｎ：Ｍ的關(guān)系，一個(gè)Ｖ可以調(diào)用任意Ｔ，一個(gè)Ｔ可以供任意Ｖ使用 模板處理分為兩個(gè)過程 加載 渲染

1. 加載靜態(tài)配置文件

在settings.py中最底下有一個(gè)叫做static的文件夾，主要用來加載一些模板中用到的資源，提供給全局使用
這個(gè)靜態(tài)文件主要用來配置css，html，圖片，文字文件等

STATIC_URL = ‘/static/’
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, ‘static’)
]

只后在模板中，首先加載靜態(tài)文件，之后調(diào)用靜態(tài)，就不用寫絕對全路徑了

2. 使用靜態(tài)配置文件

a) 加載渲染靜態(tài)配置文件 模板中聲明

{% load static %} 或者 {% load staticfiles %}

在引用資源的時(shí)候使用

{% static ‘xxx’ %} xxx就是相當(dāng)于staticfiles_dirs的一個(gè)位置

b) 直接定義靜態(tài)配置

<img src="/static/images/mvc.png">

其中: 展示static文件夾下有一個(gè)images文件夾，下面有一個(gè)mvc.png的圖片

3. 模板摘要

3.1 模板主要有兩個(gè)部分

HTML靜態(tài)代碼
動態(tài)插入的代碼段（挖坑，填坑）也就是block

3.2 動態(tài)填充

模板中的動態(tài)代碼斷除了做基本的靜態(tài)填充，還可以實(shí)現(xiàn)一些基本的運(yùn)算，轉(zhuǎn)換和邏輯 如下:

image.png

模板中的變量： 視圖傳遞給模板的數(shù)據(jù) 標(biāo)準(zhǔn)標(biāo)識符規(guī)則 語法 {{ var }} 如果變量不存在，則插入空字符串

3.3 模板重的點(diǎn)語法

對象.屬性或者方法
索引  （student.0.name）

image.png

3.4模板中的小弊端

調(diào)用對象的方法，不能傳遞參數(shù)

3.5 模板的標(biāo)簽

語法 {% tag %}
作用 a）加載外部傳入的變量
     b）在輸出中創(chuàng)建文本
     c）控制循環(huán)或邏輯

4. if表達(dá)式

格式1：

    {% if 表達(dá)式 %}

    {%  endif %}

格式2：

    {% if表達(dá)式 %}

    {% else %}

    {%  endif %}

格式3：

    {% if表達(dá)式 %}

    {% elif 表達(dá)式 %}

    {%  endif %}

image.png

5. for表達(dá)式

格式1：

 {% for 變量 in 列表 %}

    {% empty %}

    {% endfor %}

image.png

注意：當(dāng)列表為空或者不存在時(shí)，執(zhí)行empty之后的語句

注意一下用法:

{{ forloop.counter }} 表示當(dāng)前是第幾次循環(huán)，從1開始
{{ forloop.counter0 }} 表示當(dāng)前從第幾次循環(huán)，從0開始
{{forloop.revcounter}}表示當(dāng)前是第幾次循環(huán)，倒著數(shù)數(shù)，到1停
{{forloop.revcounter0}}表示當(dāng)前是第幾次循環(huán)，倒著數(shù)數(shù)，到0停
{{forloop.first}}是否是第一個(gè)      布爾值
{{forloop.last}}是否是最后一個(gè)      布爾值

6. 注釋

6.1 注釋可見，可運(yùn)行

<!-- 注釋內(nèi)容 -->

6.1 單行注釋注釋不可見，不可運(yùn)行

單行注釋(頁面源碼中不會顯示注釋內(nèi)容)

{# 被注釋掉的內(nèi)容 #}

6.2 多行注釋注釋不可見，不可運(yùn)行

{% comment %}

{% endcomment %}

image.png

7. 過濾器

引入過濾器定義：{{var|過濾器}}， 作用：在變量顯示前修改 過濾器有很多，比如add / lower / upper

7.1 加法

    {{ p.page | add:5 }}
    沒有減法的過濾器，但是加法里面可以加負(fù)數(shù)
    {{ p.page | add: -5 }}

7.2 修改大小寫

    lower / upper : {{ p.pname | lower }} 變?yōu)樾懟蛘叽髮?

7.3 傳參數(shù)

過濾器可以傳遞參數(shù)，參數(shù)需要使用引號引起來。比如join： {{ student | join ‘=’ }} 如果值為空則設(shè)置默認(rèn)值：

    默認(rèn)值：default，格式{{ var | default value }}
    如果變量沒有被提供或者為False，空，會使用默認(rèn)值

7.4 定制日期格式

根據(jù)制定格式轉(zhuǎn)換日期為字符串，處理時(shí)間的就是針對date進(jìn)行的轉(zhuǎn)換
{{ date:'Y年m月d日 H:i:s' }}
如果過濾器，定義為小寫的y，則返回的數(shù)據(jù)為兩位的年。如果寫的是大寫的Y，則返回的是四位的年
定義小寫的m，則返回?cái)?shù)字的月份，如果定義大寫的M，則返回英文
定義小寫的h，則返回12小時(shí)制度的時(shí)，如果定義的是大寫的H，則返回24小時(shí)制度的時(shí)

7.5 是否轉(zhuǎn)義

HTML轉(zhuǎn)義: 將接收到的數(shù)據(jù)當(dāng)成普通字符串處理還是當(dāng)成HTML代碼來渲染的一個(gè)問題 渲染成html： {{ code | safe }} 還可以使用autoscape渲染: {{ autoscape off }} {{ endautoscape }} 不渲染的話: {{ autoscape on }} {{ endautoscape }}

7.6 案例

<!--1\. 字符串‘Python’轉(zhuǎn)化為大寫,輸出結(jié)果為：PYTHON-->
{{ 'Python'|upper }}
<!--2\. 字符串‘PYTHON’轉(zhuǎn)化為小寫,輸出結(jié)果為：python-->
{{ 'PYTHON'|lower }}
<!--3\. 變量3增加4,輸出結(jié)果為：7-->
{{ 3|add:'4' }}
<!--4\. 第一個(gè)字符轉(zhuǎn)化成大寫形式,輸出結(jié)果為：Python-->
{{ 'python'|capfirst }}
<!--5\. 刪除指定符號的值,輸出結(jié)果為：studypythonisveryhappy -->
{{ 'study python is very happy'|cut:' ' }}
<!--6\. 輸出缺省值,輸出結(jié)果為：nothing-->
{{ ''|default:'nothing' }}
<!--7\. 返回第一個(gè)元素,輸出結(jié)果為：p-->
{{ 'python'|first }}
<!--8\. 返回最后一個(gè)元素,輸出結(jié)果為：n-->
{{ 'python'|last }}
<!--9\. 計(jì)算長度,輸出結(jié)果為：6-->
{{ 'python'|length }}
<!--10\. 隨機(jī)一個(gè)元素,輸出隨機(jī)結(jié)果為：y-->
{{ 'python'|random }}

7.7 django內(nèi)建過濾器大全

1、add ：將value的值增加2。使用形式為：{{ value | add: "2"}}。
2、addslashes：在value中的引號前增加反斜線。使用形式為：{{ value | addslashes }}。
3、capfirst：value的第一個(gè)字符轉(zhuǎn)化成大寫形式。使用形式為：{{ value | capfirst }}。
4、cut：從給定value中刪除所有arg的值。使用形式為：{{ value | cut:arg}}。
5、date: 格式化時(shí)間格式。使用形式為：{{ value | date:"Y-m-d H:M:S" }}
6、default：如果value是False，那么輸出使用缺省值。使用形式：{{ value | default: "nothing" }}。例如，如果value是“”，那么輸出將是nothing
7、default_if_none：如果value是None，那么輸出將使用缺省值。使用形式：{{ value | default_if_none:"nothing" }}，例如，如果value是None，那么輸出將是nothing
8、dictsort：如果value的值是一個(gè)字典，那么返回值是按照關(guān)鍵字排序的結(jié)果
使用形式：{{ value | dictsort:"name"}}，例如，
如果value是：
[{'name': 'python'},{'name': 'java'},{'name': 'c++'},]
那么，輸出是：
[{'name': 'c++'},{'name': 'java'},{'name': 'python'}, ]
9、dictsortreversed：如果value的值是一個(gè)字典，那么返回值是按照關(guān)鍵字排序的結(jié)果的反序。使用形式：與dictsort過濾器相同。
10、divisibleby：如果value能夠被arg整除，那么返回值將是True。使用形式：{{ value | divisibleby:arg}}，如果value是9，arg是3，那么輸出將是True
11、escape：替換value中的某些字符，以適應(yīng)HTML格式。使用形式：{{ value | escape}}。例如，< 轉(zhuǎn)化為 &lt;> 轉(zhuǎn)化為 &gt;' 轉(zhuǎn)化為  &#39;" 轉(zhuǎn)化為  &quot;
13、filesizeformat：格式化value，使其成為易讀的文件大小。使用形式：{{ value | filesizeformat }}。例如：13KB，4.1MB等。
14、first：返回列表/字符串中的第一個(gè)元素。使用形式：{{ value | first }}
16、iriencode：如果value中有非ASCII字符，那么將其進(jìn)行轉(zhuǎn)化成URL中適合的編碼，如果value已經(jīng)進(jìn)行過URLENCODE，改操作就不會再起作用。使用形式：{{value | iriencode}}
17、join：使用指定的字符串連接一個(gè)list，作用如同python的str.join(list)。使用形式：{{ value | join:"arg"}}，如果value是['a','b','c']，arg是'//'那么輸出是a//b//c
18、last：返回列表/字符串中的最后一個(gè)元素。使用形式：{{ value | last }}
19、length：返回value的長度。使用形式：{{ value | length }}
20、length_is：如果value的長度等于arg的時(shí)候返回True。使用形式：{{ value | length_is:"arg"}}。例如：如果value是['a','b','c']，arg是3，那么返回True
21、linebreaks：value中的"\n"將被<br/>替代，并且整個(gè)value使用</p>包圍起來。使用形式：{{value|linebreaks}}
22、linebreaksbr：value中的"\n"將被<br/>替代。使用形式：{{value |linebreaksbr}}
23、linenumbers：顯示的文本，帶有行數(shù)。使用形式：{{value | linenumbers}}
24、ljust：在一個(gè)給定寬度的字段中，左對齊顯示value。使用形式：{{value | ljust}}
25、center：在一個(gè)給定寬度的字段中，中心對齊顯示value。使用形式：{{value | center}}
26、rjust：：在一個(gè)給定寬度的字段中，右對齊顯示value。使用形式：{{value | rjust}}
27、lower：將一個(gè)字符串轉(zhuǎn)換成小寫形式。使用形式：{{value | lower}}
30、random：從給定的list中返回一個(gè)任意的Item。使用形式：{{value | random}}
31、removetags：刪除value中tag1,tag2....的標(biāo)簽。使用形式：{{value | removetags:"tag1 tag2 tag3..."}}
32、safe：當(dāng)系統(tǒng)設(shè)置autoescaping打開的時(shí)候，該過濾器使得輸出不進(jìn)行escape轉(zhuǎn)換。使用形式：{{value | safe}}
33、safeseq：與safe基本相同，但有一點(diǎn)不同的就是：safe是針對字符串，而safeseq是針對多個(gè)字符串組成的sequence
34、slice：與python語法中的slice相同。使用形式：{{some_list | slice:"2"}}
37、striptags：刪除value中的所有HTML標(biāo)簽.使用形式：{{value | striptags}}
38、time：格式化時(shí)間輸出。使用形式：{{value | time:"H:i"}}或者{{value | time}}
39、title：轉(zhuǎn)換一個(gè)字符串成為title格式。
40、truncatewords：將value切成truncatewords指定的單詞數(shù)目。使用形式：{{value | truncatewords:2}}。例如，如果value是Joel is a slug 那么輸出將是：Joel is ...
42、upper：轉(zhuǎn)換一個(gè)字符串為大寫形式
43、urlencode：將一個(gè)字符串進(jìn)行URLEncode
46、wordcount：返回字符串中單詞的數(shù)目

8. 運(yùn)算

8.1 乘

    {% widthratio 數(shù) 分母 分子 %}

如下例子： 求數(shù)學(xué)成績的10倍的結(jié)果 {% widthratio 10 1 stu.stu_shuxue %}

8.2 整除

{{ num|divisibleby:2 }} 注意：該語句的意思是，判斷num值是否能被2整除，如果能的話返回True，不能的話返回False

8.3 ifeuqal判斷相等

{% ifequal value1 value2 %}

{% endifqueal %}

image.png

我的index頁面中

{% extends 'base_main.html' %}

 {% block title %}
    index
{% endblock %}

{% block js %}
    <!-- 注解1 -->
     {# 單行注解: 注解2 {%  %}#}

      {% comment %}
        多行注解:
        122
        3232
        434
        54
      {% endcomment %}
   {{ block.super }}
    {# 在flask中同時(shí)出現(xiàn)js是{{ super() }} #}
{% endblock %}

{% block css %}
  <!--第一種引入靜態(tài)文件的方式-->
  <!--<link rel="stylesheet" href="/static/css/style.css">-->

  <!--第二種: static-->
   {% load static %}
   <link rel="stylesheet" href="{% static 'css/style.css' %}">
{% endblock %}


{% block content %}
   <p>hello django</p>

   {{ content_h2 | safe }}

   <table>
       <thead>
           <th>編號</th>
           <th>姓名</th>
           <th>手機(jī)號</th>
           <th>班級名</th>
           <th>課程名</th>
           <th>第一個(gè)課程</th>
           <th>創(chuàng)建時(shí)間</th>
       </thead>
       <tbody>
            {% for stu in students %}
           <tr>
               <td>{{ forloop.counter0 }}</td>
               <td {% ifequal forloop.counter 1 %} style="color:yellow" {% endifequal %}>
                   {{ stu.s_name }}</td>
               <td>{{ stu.stuinfo.phone }}</td>
               <td>{{ stu.grade.g_name }}</td>
               <td>
                   {% for cou in stu.course.all %}
                   {{ cou.c_name }}
                   {% endfor %}
               </td>
               <td>
                   {{ stu.course.all.0.c_name }}
               </td>
               <td>
                   {{ stu.create_time | date:'Y年m月d日 H:i:s' }}
               </td>
           </tr>
           {% endfor %}
       </tbody>
   </table>


{% endblock %}

9. 反向解析
   Url 反向解析 {% url ‘namespace:name’ p1 p2 %}

   
   
   image.png
10. 跨站請求CSRF(Cross Site Request Forgery)
    csrf攻擊說明

1.用戶C打開瀏覽器，訪問受信任網(wǎng)站A，輸入用戶名和密碼請求登錄網(wǎng)站A;

2.在用戶信息通過驗(yàn)證后，網(wǎng)站A產(chǎn)生Cookie信息并返回給瀏覽器，此時(shí)用戶登錄網(wǎng)站A成功，可以正常發(fā)送請求到網(wǎng)站A;

3.用戶未退出網(wǎng)站A之前，在同一瀏覽器中，打開一個(gè)TAB頁訪問網(wǎng)站B;

4.網(wǎng)站B接收到用戶請求后，返回一些攻擊性代碼，并發(fā)出一個(gè)請求要求訪問第三方站點(diǎn)A;

5.瀏覽器在接收到這些攻擊性代碼后，根據(jù)網(wǎng)站B的請求，在用戶不知情的情況下攜帶Cookie信息，向網(wǎng)站A發(fā)出請求。網(wǎng)站A并不知道該請求其實(shí)是由B發(fā)起的，所以會根據(jù)用戶C的Cookie信息以C的權(quán)限處理該請求，導(dǎo)致來自網(wǎng)站B的惡意代碼被執(zhí)行。
csrf的攻擊之所以會成功是因?yàn)榉?wù)器端身份驗(yàn)證機(jī)制可以通過Cookie保證一個(gè)請求是來自于某個(gè)用戶的瀏覽器，但無法保證該請求是用戶允許的。因此，預(yù)防csrf攻擊簡單可行的方法就是在客戶端網(wǎng)頁上添加隨機(jī)數(shù)，在服務(wù)器端進(jìn)行隨機(jī)數(shù)驗(yàn)證，以確保該請求是用戶允許的。Django也是通過這個(gè)方法來防御csrf攻擊的。

image.png

Django中防止跨站請求偽造使用CSRF, 即：客戶端訪問服務(wù)器端，在服務(wù)器端正常返回給客戶端數(shù)據(jù)的時(shí)候，而外返回給客戶端一段字符串，等到客戶端下次訪問服務(wù)器 端時(shí)，服務(wù)器端會到客戶端查找先前返回的字符串，如果找到則繼續(xù)，找不到就拒絕。

Django中配置：

在表單中添加 {% csrf_token %}（不添加會出現(xiàn)403錯(cuò)誤）
在settings中的中間件MIDDLEWARE中配置打開 ‘django.middleware.csrf.CsrfViewMiddleware’

在settings.py文件中

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 這東西不能關(guān),防止別人登你的網(wǎng)站,所以在form中加{% csrf_token %}，
#也可以在views中用@csrf_protect(保護(hù)), 但直接打開下面這個(gè)方便
    'django.middleware.csrf.CsrfViewMiddleware',
]

image.png

11.模板要想同時(shí)出現(xiàn)多個(gè)js文件,就用:

{% block js %}
{{ block.super }}
    {# 在flask中同時(shí)出現(xiàn)js是{{ super() }} #}

{% endblock %}