天天看點

模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案

文章目錄

  • 模闆路徑總結
    • 模闆路徑設定
    • 模闆路徑的查找
  • 模闆變量
    • 調用渲染
    • 案例
      • 注意
  • 模闆過濾器
    • 案例
    • xss(跨站腳本攻擊)
  • 靜态檔案
    • 案例

模闆路徑總結

  • django架構查找模闆有順序
  • 在配置檔案settings.py中找到TEMPLATES設定來配置

模闆路徑設定

  • 模闆路徑設定的兩種方案
    • DIRS定義一個目錄清單,模闆引擎按清單順序搜尋這些目錄以查找模闆源檔案,将templates放在主項目目錄下,在templates中再建每個app名的檔案夾,所有app的模闆放在對應的app檔案夾中,一般用這種
    • 在每個app檔案夾裡有自己的模闆,APP_DIRS告訴模闆引擎是否應該進入每個已安裝的應用中查找模闆,值為TRUE則模闆會去安裝了的app下面的templates檔案夾查找模闆,這種方式需要将app添加到settings.py檔案的INSTALLED_APPS清單中,當app可以複用,用這種方式

      隻要找到一個符合的模闆就傳回

模闆路徑的查找

  • 查找順序
    • DIRS中可以設定模闆路徑,可以定義一個或者多個路徑,優先查找DIRS,優先級高于APP_DIRS
      模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案
    • APP_DIRS=True(用到APP_DIRS作為模闆路徑)時,會到INSTALLED_APPS裡依次查找(students為app名)
      模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案

模闆變量

  • 靜态頁面:内容是絕對的,不随着時間,用戶端改變而改變
  • 動态頁面:内容會随着時間,用戶端而改變,有互動效果

調用渲染

  • 在index.html檔案中
    • {{變量名}}
  • 在viwes.py檔案中:
    • return HttpResponse(request, ‘students/index.html’, context{‘變量名’: 變量})
  • 文法:命名由字母和數字以及下劃線組成,不能有空格和标點符号,不能以下劃線,數字開頭,不能以Python,django關鍵字命名
  • 變量的值可以是任何資料類型(字典,模型,方法,函數,清單…)
  • 變量的解析規則
    • 當模闆引擎遇到模闆變量,會計算變量,将其替換為結果
    • 解析結果相當于print的值
    • 模闆變量中有點(.)的時候,按以下順序查找
      • 字典鍵值查找
      • 屬性或方法查找
      • 數字索引查找
    • 如果結果是可調用的,則調用它時不帶參數,調用的結果成為模闆的值(解析結果)

      如果渲染失敗,傳回空

案例

  • views.py檔案
    from django.shortcuts import render, redirect, reverse
      from django.http import HttpResponse
      from django.template.loader import get_template
      from datetime import datetime
      class Test:
          def __init__(self, name, age):
              self.name = name
              self.age = age
          def student(self):
              return 'my girl'
      s = Test('xiaoge', 18)
      def index(request):
          lt = [1, 2, 3]
          now = datetime.now()
          dt = {'name': 'xiaoge', 'age': 19, 'items':'abc'}
          tp = (1, 2, 3)
          str = 'hi girl'
          return render(request, 'students/index.html',
                        context={
                            'now': now,
                            'lt': lt,
                            'cs': s,
                            'name': s.name,
                            'fc': s.student,
                            'dt': dt,
                            'tp': tp,
                            'str':str,
                                 })
               
  • index.html檔案:
    <!DOCTYPE html>
      <html >
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <p>清單{{ lt }}</p>   #大括号裡面的lt對應的是complex的鍵'lt'
          <p>清單第一個值{{ lt.0 }}</p>
          <p>現在時間{{ now }}</p>
          <p>字典{{ dt }}</p>
          <p>字典的值age{{ dt.age }}</p>
          <p>字典的鍵'items'{{ dt.items }}</p>
          <p>元組{{ tp }}</p>
          <p>元組的第二個值{{ tp.1 }}</p>
          <p>Test的方法{{ name }}</p>
          <p>函數{{ fc }}</p>
          <p>字元串{{ str }}</p>
          <p>字元串第一個字/字母{{ str.0 }}</p>
      </body>
      </html>
               
模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案

注意

  • 如果data是一個字典,那麼通路data.items将會通路data這個字典的key名為items的值,而不會通路字典的items方法
  • 字典裡沒有items這個鍵
    dt = {'name': 'xiaoge', 'age': 19}
      <p>字典的方法items{{ dt.items }}</p>
      #字典的方法itemsdict_items([('name', 'xiaoge'), ('age', 19)])
               
  • 字典裡有items這個鍵
    dt = {'name': 'xiaoge', 'age': 19, 'items':‘abc’}
      <p>字典的鍵'items'{{ dt.items }}</p>
      #字典的鍵'items'abc
               

模闆過濾器

  • 對變量進行過濾,在真正渲染出來之前,過濾器會根據功能處理好變量,然後得出結果後再替換掉原來的變量展示出來
  • 文法:{{value|方法}}
  • 使用參數:過濾器可以使用參數,在過濾器名稱後面使用‘:’,再在引号中加上參數
    • {{value|方法:‘參數’}}
  • 常用模闆過濾器

    - add 将參數與值相加 首先嘗試轉換成整數相加,失敗,則嘗試所有可能,字元串,清單等。{{ value|add:“2” }}

    - capfirst 首字母大寫,如果第一個字母不是字母則不起作用。{{ value|capfirst }}

    - date 日期格式化 {{ value|date:“D d M Y” }}

    - time 時間格式化 {{ value|time:“H:i:s” }} 格式化格式見官方文檔:https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#date

    - default 如果變量解析失敗,使用給定的預設值。{{ value|default:“nothing” }}(注意如果value是空字元串或者None,輸出将會是’nothing’)

    - first 傳回清單的第一個元素 {{ value|first }}

    - last 傳回清單的最有一個元素 {{ value|last }}

    - slice 傳回一個清單的切片 {{ some_list|slice:“2” }}

    - join 連接配接字元串清單 與str.join(list)一樣 {{ value|join:" // " }}

    - length 傳回字元串或清單的長度

    - length_is 判斷字元串或清單長度是否指定的值,相等傳回True {{ value|length_is:“4” }}

    - lower 字元串中的字母都變小寫{{ value|lower }}

    - upper 字元串中的字母都變大寫{{ value|upper }}

    - safe 關閉變量的自動轉義,使html标簽生效{{ value|safe }}

    - title 标題化,首字母大寫 {{ value|title }}

    - floatformat 浮點數格式化 不指定小數位參數,預設保留一個為小數

    value	           Template	                  Output
      			34.23234  	{{ value|floatformat }}            34.2
      			34.23234 	{{ value|floatformat:3 }}         34.232
               

案例

  • index.html檔案:
    <p>現在時間{{ now|date:'Y-m-d H:i:s' }}</p> #模闆過濾器
      <p>清單第一個值+3:{{ lt.0|add:3 }}</p>
      <p>清單第一個值+3.5:{{ lt.0|add:3.5 }}</p>
      <p>清單第一個值+'3':{{ lt.0|add:'3' }}</p>
      <p>首字母大寫:{{ fc|capfirst}}</p>
      <p>字母都大寫:{{ fc|upper}}</p>
      <p>字母标題化:{{ fc|title}}</p>
      <p>浮點數:{{ 3.1413223|floatformat}}</p>
      <p>浮點數:{{ 3.1413223|floatformat:'3'}}</p>
      <p>插入/:{{ fc|join:'/'}}</p>
      <p>字元串長度:{{ fc|length}}</p>
      <p>字元串長度:{{ fc|length_is:'7'}}</p>
      <p>清單第一個值+'3.5':{{ lt.0|add:'3.5' }}</p>
      <p>函數加字元串{{ fc|add:'haha' }}</p>
      <p>字典的值gender是否存在{{ dt.gender|default:'nothing' }}
      <p>清單第一個值:{{ lt|first }}</p>
      <p>清單最後一個值:{{ lt|last }}</p>
      <p>清單切片:{{ lt|slice:'2' }}</p> #取前兩個
      <p>清單倒序:{{ lt|slice:'::-1' }}</p>		
               
模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案

xss(跨站腳本攻擊)

  • XSS是一種經常出現在web應用中的計算機安全漏洞,也是web中最主流的攻擊方式
  • XSS是指惡意攻擊者利用網站沒有對使用者送出資料進行轉義處理或者過濾不足的缺點,進而添加一些代碼,嵌入到web頁面中去。使别的使用者通路都會執行相應的嵌入代碼,進而盜取使用者資料、利用使用者身份進行某種動作或者對通路者進行病毒侵害的一種攻擊方式
  • 什麼是自動轉義
    • 自動轉義是将變量的一些特殊字元,比如左箭頭(<)、右箭頭(>)轉義成html代碼,這樣做的目的是為了處理一些不安全的變量。
      < 轉義成&lt;
        > 轉義成&gt;
        ‘ 轉義成&#39;
        “ 轉義成&quot;
        & 轉義成&amp;
                 
  • 反射型XSS:非持久化,需要欺騙使用者自己去點選連結才能觸發XSS代碼(伺服器中沒有這樣的頁面和内容),一般容易出現在搜尋頁面,一個典型的非持久性XSS包含一個帶XSS攻擊向量的連結(即每次攻擊需要使用者的點選)。
  • 存儲型,又稱為持久型跨站點腳本,它一般發生在XSS攻擊向量(一般指XSS攻擊代碼)存儲在網站資料庫,當一個頁面被使用者打開的時候執行,每當使用者打開浏覽器,腳本執行(雖然還有種DOM型XSS,但是也還是包括在存儲型XSS内)
  • 持久的XSS相比非持久性XSS攻擊危害性更大,因為每當使用者打開頁面,檢視内容時腳本将自動執行,谷歌的orkut曾經就遭受到XSS

靜态檔案

  • 路徑設定
    • 在settings.py檔案中添加STATICFILES_DIRs = [os.path.join(BASE_DIR, ‘static’)]
  • 建立檔案
    • 在項目根目錄下建立static檔案夾,在static下建立app名的檔案夾,在app檔案夾下建立css等需要的檔案夾,在css檔案夾下建立cover.css檔案(名自己起)
      模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案
  • 靜态檔案的引入
    • 寫死 通過STATIC_URL,測試時可用,開發不推薦
    • 在head标簽中加入
      <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <link rel="stylesheet" href="/static/students/css/index.css" target="_blank" rel="external nofollow" >
        </head>
                 
    在settings.py中有STATIC_URL = ‘/static/’ #這裡的static對應link中href的static,不建議改
    • 模闆标簽
    • 在開頭加載static,在head标簽中加入link
      {% load static %}   #加載static
        <!DOCTYPE html>
        <html >
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            #在link的href中加載路徑,格式為{% static 'app名/css路徑' %}
            <link rel="stylesheet" href="{% static 'students/css/index.css' %}" target="_blank" rel="external nofollow" >
        </head>
                 
  • F12檢視網頁,會發現選中的部分和寫死一樣
    模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案

案例

  • 在templates中建立一個HTML檔案,/templates/students/cover.html,在static中建立一個css檔案,/static/students/css/cover.css
  • 在http://www.bootcss.com/上找個模闆,檢視源代碼,複制,粘貼cover.html
  • F12檢視,複制cover.css中的代碼,粘貼到static/students/css/cover.css中
    模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案
    效果圖:
    模闆變量及模闆過濾器模闆路徑總結模闆變量模闆過濾器靜态檔案