Django之模板語言

時間 2019-11-10

標籤 django 模板語言欄目 Python 简体版

原文原文鏈接

1、模板語言介紹

模板語言渲染的整個過程其實就是將html轉換成函數，併爲該函數提供全局變量，而後執行該函數

2、模板語言的語法

模板中也有本身的語言，該語言能夠實現數據展現

# 業務請求處理作的頁面渲染
return render("request", "template.html", {"k1": "v1", "k2": [11, 22, 33], "k3": {"nid": 12, "name": "aaa"})

# html頁面模板語法
{{ k1 }}
{{ k2.0 }}  #  取列表中的第一個值，經過.獲取
{{ k3.name }}  # 取字典中對應key的值

# for循環
{% for item in k2 %}
    <p>
        {{ item }},
        {{ forloop.counter }},   # 索引,從1開始,相似於python中的enumerate，
        {{ forloop.counter0 }},   # 索引,從0開始,相似於python中的enumerate，
        {{ forloop.first }},        # 判斷當前item是不是第一個元素,成立爲True,不成立爲False
        {{ forloop.last }},         # 判斷當前item是不是最後一個元素,成立爲True,不成立爲False
        {{ forloop.revcounter }}    # 倒序索引,與forloop.counter 相反
    </p>
{% endfor %}

# if條件判斷
{% if k1 == "v1" %}
    <h1>V1</h1>
{% elif k2 == "v2" %}
    <h1>V2</h1>
{% else %}
    <h1>666</h1>
{% endif %}

3、內置方法，相似於python的內置函數

{{ k1|lower }}  # 將全部字母都變爲小寫
{{ k1|first|upper }}  # 將首字母變爲大寫
{{ k1|truncatewords:"30" }}  # 取變量k1的前30個字符
{{ item.createTime|date:"Y-m-d H:i:s" }}    # 將時間轉爲對應格式顯示

4、自定義方法

在內置的方法知足不了咱們的需求的時候，就須要本身定義屬於本身的方法了，自定義方法分別分爲filter和simple_tag

一、區別：

```
① 傳參：
    filter默認最多隻支持2個參數：能夠用{{ k1|f1:"s1, s2, s3" }}這種形式將參數傳遞個函數，由函數去split拆分
    simple_tag支持多個參數：{% f1 s1 s2 s3 s4 %}  有多少就寫多少

② 模板語言if條件：
    filter：
        {% if k1|f1 %}   # 函數的結果做爲if語句的條件
            <h1>True</h1>
        {% else %}
            <h1>False</h1>
    simple_tag:  不支持模板語言if條件
```

二、自定義方法使用流程：

a、在app中建立templatetags目錄,目錄名必須爲templatetags
b、在目錄templatetags中建立一個.py文件，例如 s1.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# Author:zhangcong
# Email:zc_92@sina.com

from django import template

register = template.Library()   # 這一句必須這樣寫


@register.filter
def f1(value):
    return value + "666"


@register.filter
def f2(value, arg):
    return value + "666" + arg


@register.simple_tag
def f3(value, s1, s2, s3, s4):
    return value + "666" + s1 + s2 + s3 + s4

c、html模板頂部經過{% load s1 %}導入py文件

{% load s1 %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>{{ title }}</h1>

    {#  使用filter方式調用自定義方法  #}
    <!-- 將k1當作參數傳遞給f1函數進行處理    處理方式 f1(k1) -->
    <p>{{ k1|f1 }}</p>
    <!-- 將k1當作參數傳遞給f2函數進行處理,接受2個參數  處理方式 f2(k1, "xxx") -->
    <p>{{ k1|f2:"xxx" }}</p>

    {#  使用simple_tag方式調用自定義方法  #}
    <!-- 將k1當作參數傳遞給f3函數進行處理,接收多個參數  處理方式 f3(k1, "s1", "s2", "s3", "s4") -->
    <p>{% f3 k1 "s1" "s2" "s3" "s4" %}</p>
</body>
</html>

d、settings.py中註冊app

5、母版

在一個網站中，一些頁面中的頂部，左側，底部都是同樣的，這個時候就出現了代碼的冗餘，這個時候就能夠將這些重複使用的代碼作成母版，方便在子頁面中進行調用，下面是使用母版的一個例子中用到的一些文件，以及使用母版的效果圖

一、路由文件 urls.py

from django.conf.urls import url, include
from cmdb import views

urlpatterns = [

    url(r'^userinfo/', views.userinfo),     # 用戶管理
    url(r'^assets/', views.assets),         # 資產管理
]

二、業務請求處理文件 views.py

from django.shortcuts import render
from django.shortcuts import HttpResponse


def userinfo(request):
    # 用戶信息
    userinfo_list = []
    for i in range(10):
        userinfo_list.append({"name": "name%s" % i, "email": "email%s@xxx.com"})

    return render(request, "userinfo.html", {"userinfo_list": userinfo_list})


def assets(request):
    # 資產信息
    assets_list = []
    for i in range(10):
        assets_list.append({"hostname": "host%s" % i, "port": 80})

    return render(request, "assets.html", {"assets_list": assets_list})

三、母版html文件 extend.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{

            height: 48px;
            background-color: cadetblue;
        }

        .pg-body{
            min-height: 500px;
        }
        .pg-body .body-menu{
            width: 20%;
            float: left;
        }
        .pg-body .body-content{
            width: 80%;
            float: left;
        }

        .pg-footer{
            height: 100px;
            background-color: brown;

        }
    </style>
    {% block css %}{% endblock %}      <!-- 使用blok來空出子頁面須要填充的css樣式內容 -->
</head>
<body>

    <div class="pg-header"></div>
    <div class="pg-body">

        <div class="body-menu">
            <ul>
                <li><a href="/userinfo/">用戶管理</a></li>
                <li><a href="/assets/">資產管理</a></li>
            </ul>


        </div>
        <div class="body-content">
            {% block body-content %}{% endblock %}     <!-- 使用blok來空出子頁面須要填充的內容 -->
        </div>

    </div>
    <div class="pg-footer"></div>

    {% block js %}{% endblock %}        <!-- 使用blok來空出子頁面須要填充的js內容 -->
</body>
</html>

四、用戶管理html文件 userinfo.html

{% extends 'extend.html' %}    # 繼承母版內容

<!-- 填充頁面css樣式內容 -->
{% block css %}
    <!-- css樣式 -->
{% endblock %}

<!-- 填充頁面內容 -->
{% block body-content %}

    <table>

        <thead>
            <tr>
                <td>用戶名</td>
                <td>郵箱</td>
            </tr>
        </thead>
        <tbody>
            {% for item in userinfo_list %}
                <tr>
                    <td>{{ item.name }}</td>
                    <td>{{ item.email }}</td>
                </tr>
            {% endfor %}

        </tbody>
    </table>

{% endblock %}

<!-- 填充頁面js代碼內容 -->
{% block js %}
    <!-- js代碼 -->
{% endblock %}

五、資產管理html文件 assets.html

{% extends 'extend.html' %}     # 繼承母版內容

<!-- 填充頁面css樣式內容 -->
{% block css %}
    <!-- css樣式 -->
{% endblock %}

<!-- 填充頁面內容 -->
{% block body-content %}

    <table>

        <thead>
            <tr>
                <td>主機名</td>
                <td>端口</td>
            </tr>
        </thead>
        <tbody>
            {% for item in assets_list %}
                <tr>
                    <td>{{ item.hostname }}</td>
                    <td>{{ item.port }}</td>
                </tr>
            {% endfor %}

        </tbody>
    </table>

{% endblock %}

<!-- 填充頁面js代碼內容 -->
{% block js %}
    <!-- js代碼 -->
{% endblock %}