Django--模板系統(一)

前言

來看一段代碼

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

直接把HTML頁面嵌套在視圖函數裏返回給瀏覽器並不是一個好主意;

原因:

1、對頁面設計進行的任何改變都必須對 Python 代碼進行相應的修改,牽一髮而動全身;

2、Python 代碼編寫和 HTML 設計是兩項不同的工作,前端開發和後端開發無非 並行;

基於這些原因,將HTML頁面的設計和後端邏輯設計分離,會更簡潔、容易維護開發我們的WEB應用。 我們可以使用 Django的 模板系統 (Template System)來實現這種模式,這就是本章要具體討論的問題。   

 

模板是什麼?                                

Django自帶的模板語言=  HTML代碼+邏輯控制代碼,注意 模板 != HTML,模塊 =HTML代碼+邏輯控制代碼(特殊標記);

 

模板作用?

在server端 把後端的變量 嵌入到HTML中渲染後,返回給瀏覽器來達到前後端代碼分離,頁面動態顯示的目的;

一、Django模板語言應用:

Django模板語言的語法主要分爲2種: {{變量}}    和   {%  Tag %} ,{{變量 }}主要用於和視圖變量做替換,{% tag %}主要用於做邏輯判斷和實現某些功能,正因有了數據+邏輯才構成了模板語言;

 

1.1、使用雙大括號引用視圖中的變量

語法:{{ 變量}} ,列表取值:{{列表}}. 索引, 字典取值:{{字典}}.鍵

<td>{{ forloop.counter }}</td>
<td>{{ book.title }}</td>
<td>{{ book.price }}</td>
<td>{{ book.date}}</td>
<td>{{ book.publish}}</td>
<td>{{ book.author }}</td>

** {{ forloop.counter }} 渲染循環的次數

1.2:內置變量過濾器的使用

如果引用得視圖變量,不能直接渲染使用,可以藉助fifter進行數據的二次處理,就像Python中的內置函數;

語法:{{ 變量|fifter:參數 }}

過濾器列表:

  1. add:給變量加上相應的值、
  2. addslashes :單引號加上轉義號,一般用於輸出到javascript中
  3. capfirst :第一個字母大寫
  4. {{ "123spam456spam789"|cut:"spam" }}查找刪除指定的字符串
  5. {{ l1|slice:":2" }} 列表切邊
  6. {{ t|date:'Y-m-d' }} 轉換特定時間格式
  7. {{ s|default:'空空如也' }} 值不存在,使用指定值
  8. {{ info|truncatechars:18 }} 渲染指定長度的字符
  9. {{ info1|truncatewords:9 }}渲染指定長度的單詞
  10. {{ a|safe }} 聲明安全可以渲染
  11. {% if forloop.counter|divisibleby:2 %} 整除

實例

視圖

from django.shortcuts import render
import datetime
def fifters(request):
    i=10
    w="A'B'C'D'E"
    f='china'
    t=datetime.datetime.now()
    s=''
    l1=[98890,765,9870,7654]
    info='嘲笑我吧你們這些毫無眼光的人,我必將引來雷霆萬鈞的力量,摧古拉朽得戰勝一切敵人!'
    info1='You laugh at me without the vision of people, and I will lead to an irresistible force power, corruption must defeat all enemies destroy gura!'
    li=['a','b','c','d','e','f','g']
    str1='{{hello world}}'
    a='<a href="黃色網址">點擊我</a>'
    fhjsaldfhjsdfhlasdfhljsdal='hellow  world'
    return render(request,'modals.html',locals())

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板渲染</title>
</head>
<body>

 <p>{{ i|add:200 }}</p>
 <p>{{ w|addslashes}}</p>
 <p>{{ f|capfirst }}</p>
<p>{{ "123spam456spam789"|cut:"spam" }}</p>
  <p>{{ t|date:'Y-m-d'  }}</p>
  <p>{{ l1|slice:":2" }}</p>
 <p>{{ s|default:'空空如也' }}</p>
 <p>{{ info|truncatechars:18 }}</p>
  <p>{{ info1|truncatewords:9 }}</p>
  <p>
  {% csrf_token%}
  {% for foo in li %}
      <li>{{ forloop.counter0 }}----->{{ foo }}</li>
  {% empty  %}
      <li>沒有符合的對象</li>
  {% endfor %}

 </p>
 <p>
  {% verbatim %}
  {{ str1 }}
  {% endverbatim %}
 </p>


  <p>
      {% with total=fhjsaldfhjsdfhlasdfhljsdal %}
      {{ total }}
      {% endwith %}
  </p>

  <p>{{ a|safe }}</p>
</body>
</html>

2.1、內置標籤(tag)的使用

如果引用到了視圖中的變量,還不足以渲染出一個完美的頁面,那就要藉助tag標籤,做邏輯控制和功能完善了;

語法格式: {% tags %}

{% for %}  {% endfor %}   for循環

{% for row in list %}
       </tr>
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.title }}</td>
          <td><a href="#" onclick="show_modal(this)">添加</a></td>
          <td id="del_s"><a href="#" onclick="modal_del(this)">刪除</a> </td>
          <td><a href="#"onclick="modal_edit(this)">編輯</a></td>
         </tr>

     {% endfor %}


{% if %}{% endfor %} if判斷

<select name="class_id" id="">
         {% for row in dict %}
             {% if row.id == name1.class_id %}
                <option selected value="{{ row.id }}">{{ row.title}}</option>
             {%else%}
                 <option value="{{ row.id }}">{{ row.title}}</option>
             {%endif%}
         {% endfor %}
     </select>

{% if row.id in cids%}  in 成員關係判斷

<p>任教課程:
            <select name="class_id" multiple size="5">
                {% for row in clas %}
                    {% if row.id in cids%}
                            <option selected value={{ row.id}}>{{ row.title}}</option>
                    {%else%}
                             <option value={{ row.id}}>{{ row.title}}</option>
                    {% endif %}
                {% endfor %}
            </select>
         </p>

{% empty %}   沒有渲染到數據,提示。

{% for foo in li %}
      <li>{{ forloop.counter0 }}----->{{ foo }}</li>
  {% empty  %}
      <li>沒有符合的對象</li>
  {% endfor %}

{% verbatim %}{% endverbatim %} 禁止渲染

視圖
str1='{{hello world}}'
模板
  {% verbatim %}
  {{ str1 }}
  {% endverbatim %}

{% csrf_token %}

用於生成csrf_token的標籤,用於防治跨站攻擊驗證(csrf)。 其實,這裏是會生成一個input標籤,和其他表單標籤一起提交給後臺的。

{% url %}  引用路由分配系統配置的 path 別名

<form action="{% url "bieming"%}" >
          <input type="text">
          <input type="submit"value="提交">
          {%csrf_token%}
</form>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>{{args}}</p>
<p>{% url "zhangge" i i1%}</p>
</body>
</html>

{% with %} {% endwith %}  用更簡單的變量名 替代視圖複雜的變量名

fhjsaldfhjsdfhlasdfhljsdal='hellow  world'

把後端複雜的變量名,轉換得更加簡單;
<p>
      {% with total=fhjsaldfhjsdfhlasdfhljsdal %}
      {{ total }}
      {% endwith %}
  </p>

在標籤裏添加reversed來反序循環列表

{% for log in logs reversed %}
                        {% if forloop.counter|divisibleby:2 %}
                            <dl>
                                <dd class="pos-right clearfix">
                                    <div class="circ"></div> <!--圓圈-->
                                    <div class="time"><p>{{ log.update_time }}</p></div> <!--時間-->

                                    <div class="events">
                                        <div class="events-header">
                                            <p>{{ log.details }}</p>
                                        </div>

                                        <div class="events-footer">
                                            <span>{{ log.verbose_content }}</span>
                                        </div>
                                    </div>    <!--內容 -->

                                </dd>

                            </dl> <!--通過設置class="pos-方向clearfix" -->
                        {% else %}

 

 

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章