Django-03.靜態文件與模板詳解

時間 2019-12-08

原文原文鏈接

一、原始渲染

在django_lesson文件夾下新建一個django工程lesson2
（新建工程的詳情請見Django-0一、初識Django和搭建Django helloworld）
views.pyhtml

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from django.views import View
from django.http import HttpResponse
# Create your views here.

class CommonRenderHtml(View):
    def get(self, request):
        meg = "<B> 這是一個原始的模版渲染方式 </B>"
        return HttpResponse(meg)

urls.pypython

from django.conf.urls import url
from django.contrib import admin
from hello import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^common/$', views.CommonRenderHtml.as_view()),
]

效果如圖所示django

二、render渲染

咱們還能夠直接將html文件輸出到瀏覽器
在template下新建html文件segmentfault

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    <span style="color:red"><b>hello</b></span>
    <span style="color:blue"><b>world</b></span>
</body>
</html>

在urls.py中加入如下路由瀏覽器

url(r'^hellopage/$', views.HelloPageHtml.as_view()),

在views.py中加入如下視圖類app

class HelloPageHtml(View):
    def get(self, request):
        return render(request, 'hello_page.html')  # 從template文件夾開始

效果以下less

3.get_template渲染

views.pyoop

#導入模塊
from django.template.loader import get_template
#添加視圖
class LoginHtml(View):
    def get(self, request):
        t = get_template("login.html")
        return HttpResponse(t.render())  # 其中t.render()返回的是字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸</title>
</head>
<body>
    <form action="">
        賬號：<input type="text" name="user" value="hujing"><br/>
        密碼：<input type="password" name="psd" placeholder="請輸入你的密碼" required><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

urls.pyui

# 添加路由
url(r'^login/$', views.LoginHtml.as_view())

瀏覽器地址欄輸入http://ip:8000/login/
ip表示ip地址

4.動態渲染參數

views.py

class RenderParam(View):
    def get(self, request):
        message = '尊敬的用戶您好！'
        return render(request, 'hello.html', context={"msg": message})    # 這裏若是字典內容太多 咱們能夠用 context=locals()將當前能訪問的全部局部變量轉換成字典並賦給context context也能夠不寫

urls.py

url(r'^renderparam/$', views.RenderParam.as_view())

hello.html

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

5.模板標籤

標籤語法：{% 標籤名稱 %}{% 結束標籤名稱 %}例： {%tag%}{%endtag%}
if/elif/else：可使用and/or/in/not/==/!=/<=/>=，來進行判斷。

{% if message %}
    {{ message }}
{% endif %}

{% if now %}
當前時間： {{ now|date:"Y-m-d H:i:s" }}
{% endif %}

for…in…：跟python中的for…in…是同樣的用法

{% for m in modules %}
{{ m }}
{% end %}

{% for day in days %}
    今天是{{ day }}<br/>
{% endfor %}

------for 循環 字典 帶items-------
{% for day, thing in days_thing.items %}
    今天是{{ day }}, 咱們{{ thing }}<br/>
{% endfor %}

forloop.counter：當前迭代的次數，下標從1開始。
forloop.counter0：當前迭代的次數，下標從0開始。
forloop.first：返回bool類型，若是是第一次迭代，返回true,不然返回false。
forloop.last：返回bool類型，若是是最後一次迭代，返回True，不然返回False。

{% for day in days %}
    {% if forloop.first %}
        這是這一個循環的第一個<br/>
    {% endif %}
    {{ forloop.counter }}今天是{{ day }}<br/>
    {% if forloop.last %}
        這是一個循環的最後一個<br/>
    {% endif %}
{% endfor %}

6.過濾器

做用：對變量進行過濾。在真正渲染出來以前，過濾器會根據功能處理好變量，而後得出結果後再替換掉原來的變量展現出來。
語法：{{greeting|lower}}
變量和過濾器中間使用管道符號」|」進行使用。
能夠經過管道符號進行鏈式調用，好比實現一個功能，先把全部字符變成小寫，把第一個字符轉換成大寫，代碼以下：
{{message|lower|capfirst}}
過濾器可使用參數，在過濾器名稱後面使用冒號」:」再加上參數，好比要把一個字符串中全部的空格去掉，則可使用cut過濾器，代碼以下

{{message|cut:" "}}
ps: 使用參數的時候，冒號和參數之間不能有任何空格，必定要緊挨着。

<br/>
{{ hello|upper }}
{{ hello|lower }}
{{ hello|capfirst }}
------ 使用過濾器的參數時，你不能有空格 -------
{{ hello|cut:" " }}

R和time過濾器格式
獲取當前時間
import datetime
time_now = datetime.datetime.now()

<br/>
------- date過濾器--------
<br/>
{{ time_now|date:"Y-m-d H:i:s" }}

示例：
template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Template</title>
</head>
<body>
    {% if day1 == 'saturday' %}
        <b>今天星期六 出去浪</b>
    {% endif %}

    <br>
    {% if day2 == 'saturday' %}
        <b>今天星期六 出去浪哦</b>
    {% elif day2 == 'sunday' %}
        <b>今天星期天 繼續出去浪</b>
    {% else %}
        <b>工做日 努力工做 一切爲了週末浪</b>
    {% endif %}

    <br>
    {% for i, j in week.items %}
        {% if forloop.first %}
            <br><b>僞裝我是每週的第一天</b>
        {% endif %}
        <br><b>{{ forloop.counter }}.今天是{{ j }}({{ i }})</b>
        {% if forloop.last %}
            <br><b>僞裝我是每週的最後一天</b>
        {% endif %}
    {% endfor %}
    <br><br>
    <b>{{ greet|upper }}</b><br>
    <b>{{ greet|lower }}</b><br>
    <b>{{ greet|capfirst }}</b><br>
    <b>{{ greet|cut:" "}}</b><br>

    <br>
    <b>{{ time_now }}</b><br>
    <b>{{ time_now|date:"Y-m-d H:i:s" }}</b><br>
</body>
</html>

views.py添加如下視圖類

class TemplateTag(View):
    def get(self, request):
        day1 = 'saturday'
        day2 = 'monday'
        week = {
            'monday': '星期一',
            'tuesday': '星期二',
            'wednesday': '星期三',
            'thursday': '星期四',
            'friday': '星期五',
            'saturday': '星期六',
            'sunday': '星期天'
        }
        greet = 'good morning everybody, today is a nice day!'
        import datetime
        time_now = datetime.datetime.now()
        return render(request, 'template.html', locals())

urls.py添加路由

url(r'^template/$', views.TemplateTag.as_view())

7.模板繼承

模板繼承使用extends標籤實現。經過使用block來給子模板開放接口。
extends必須是模板中的第一個出現的標籤。
子模板中的全部內容，必須出如今父模板定義好的block中，不然django將不會渲染。
若是出現重複代碼，就應該考慮使用模板。儘量多的定義block，方便子模板實現更細的需求。

include另外一個模板
{% include "menu.html" %}

修改hello_page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>

<body>
    <span style="color:red"><b>hello</b></span>
    <span style="color:blue"><b>world</b></span>
    {% block content %}
    {% endblock content %}

    {% block text %}
    {% endblock text %}
    {% include 'login.html' %}

</body>
<script>
        {% block js %}
        {% endblock js %}
</script>
</html>

在template文件夾下添加一個extends.html文件

{% extends "hello_page.html" %}
{% block js %}
    document.write('<br>hello')
{% endblock js %}


{% block content %}
    <br>這是個繼承了hello_page.html的頁面 <br>
{% endblock %}

8.模版include

在hello_page.html的body末尾加上如下代碼

{% include 'login.html' %}

在瀏覽器輸入路由 /hellopage

註釋標籤
{#被註釋的內容#}：將中間的內容註釋掉。只能單行註釋。
{% comment %}被註釋的內容{% endcomment %}：能夠多行註釋。

9.附錄：

html連接的相對路徑與絕對路徑
絕對路徑
完整的一個路徑就是絕對路徑，即包含schema://host[:port#]/path/.../?query-string
例：http://news.sina.com.cn/world/
相對路徑
第一個字符爲斜槓/,
例：「/hello」, 這種會自動幫你添加你的協議名+域名+端口，假設你的前一節爲http://www.baidu.com:8000，系統會自動匹配爲"http://www.baidu.com:8000/hello"
咱們實際狀況中通常使用這種

第一個字符不帶斜槓
例：「hello」, 這種會在當前url中path段日後添加，假設你當前路徑http://www.baidu.com:8000/hello, 系統會自動匹配爲「http://www.baidu.com:8000/hello/hello, 」

關於settings.py 文件中template的解釋

TEMPLATES = [
    {
        # 引擎，就是django自帶的模版渲染模版
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 這個配置就是表明html文件存在目錄
        # 該路徑是一個絕對路徑
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        # app內部的template是否啓用
        # 這個是爲了兼容老版本所用，咱們默認爲True就能夠了。
        'APP_DIRS': True,
        'OPTIONS': {
            # 模版中間件，後面會詳細學習
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

本文章代碼
urls.py

from django.conf.urls import url
from django.contrib import admin
from hello import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^common/$', views.CommonRenderHtml.as_view()),
    url(r'^hellopage/$', views.HelloPageHtml.as_view()),
    url(r'^login/$', views.LoginHtml.as_view()),
    url(r'^renderparam/$', views.RenderParam.as_view()),
    url(r'^template/$', views.TemplateTag.as_view()),
    url(r'^extends/$', views.ExtendHtml.as_view())
]

views.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from django.views import View
from django.http import HttpResponse
from django.template.loader import get_template
# Create your views here.


class CommonRenderHtml(View):
    def get(self, request):
        meg = "<B> 這是一個原始的模版渲染方式 </B>"
        return HttpResponse(meg)


class HelloPageHtml(View):
    def get(self, request):
        return render(request, 'hello_page.html')


class LoginHtml(View):
    def get(self, request):
        t = get_template("login.html")
        return HttpResponse(t.render())


class RenderParam(View):
    def get(self, request):
        message = '尊敬的用戶您好！'
        return render(request, 'hello.html', context={"msg": message})


class TemplateTag(View):
    def get(self, request):
        day1 = 'saturday'
        day2 = 'monday'
        week = {
            'monday': '星期一',
            'tuesday': '星期二',
            'wednesday': '星期三',
            'thursday': '星期四',
            'friday': '星期五',
            'saturday': '星期六',
            'sunday': '星期天'
        }
        greet = 'good morning everybody, today is a nice day!'
        import datetime
        time_now = datetime.datetime.now()
        return render(request, 'template.html', locals())


class ExtendHtml(View):
    def get(self, request):
        return render(request, 'extends.html')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸</title>
</head>
<body>
    <form action="">
        賬號：<input type="text" name="user" value="hujing"><br/>
        密碼：<input type="password" name="psd" placeholder="請輸入你的密碼" required><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Template</title>
</head>
<body>
    {% if day1 == 'saturday' %}
        <b>今天星期六 出去浪</b>
    {% endif %}

    <br>
    {% if day2 == 'saturday' %}
        <b>今天星期六 出去浪哦</b>
    {% elif day2 == 'sunday' %}
        <b>今天星期天 繼續出去浪</b>
    {% else %}
        <b>工做日 努力工做 一切爲了週末浪</b>
    {% endif %}

    <br>
    {% for i, j in week.items %}
        {% if forloop.first %}
            <br><b>僞裝我是每週的第一天</b>
        {% endif %}
        <br><b>{{ forloop.counter }}.今天是{{ j }}({{ i }})</b>
        {% if forloop.last %}
            <br><b>僞裝我是每週的最後一天</b>
        {% endif %}
    {% endfor %}
    <br><br>
    <b>{{ greet|upper }}</b><br>
    <b>{{ greet|lower }}</b><br>
    <b>{{ greet|capfirst }}</b><br>
    <b>{{ greet|cut:" "}}</b><br>

    <br>
    <b>{{ time_now }}</b><br>
    <b>{{ time_now|date:"Y-m-d H:i:s" }}</b><br>
</body>
</html>

extend.html

{% extends "hello_page.html" %}
{% block js %}
    document.write('<br>hello')
{% endblock js %}


{% block content %}
    <br>這是個繼承了hello_page.html的頁面 <br>
{% endblock %}

hello.html

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

hello_page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>

<body>
    <span style="color:red"><b>hello</b></span>
    <span style="color:blue"><b>world</b></span>
    {% block content %}
    {% endblock content %}

    {% block text %}
    {% endblock text %}
    {% include 'login.html' %}

</body>
<script>
        {% block js %}
        {% endblock js %}
</script>
</html>