Django之模板层

Django之模板层

一、概述

Django提供模板就是实现前端页面和Python的代码分离的一种开发模式。

即模板的组成=HTML代码+逻辑控制代码。

存放于templates目录下的htmI文件称之为模板文件,如果我们想要返回的html页面中的数据是动态的,那么必须在html页面中嵌入变量,这便用到了django的逻辑控制代码。逻辑控制代码的组成有:

1.变量(使用双大括号来引用变量)
    格式:    {{ 变量名 }}
2.标签(tag)的使用(使用大括号和百分比的组合来表示使用tag)
    格式:    {% 标签名 %}
3.自定义过滤器(filter)和自定义标签(simple_tag)
4.模块的导入(include)和继承(extends)

二、变量

1.Template和Context对象

Django模板解析非常便捷。大部分的解析工作都是在后台通过对简短正则表达式一次性调用来完成。相比于XML的模板引擎形成鲜明对比,那些引擎承担了XML解析器的开销,且往往比Django模板渲染引擎要慢的多。

from django.shortcuts import render,HttpResponse
from django.template.loader import get_template #记得导入
# Create your views here.


import datetime
from django.template import Template,Context

# def current_time(req):
    #原始的视图函数
    # now=datetime.datetime.now()
    # html="<html><body>现在时刻:<h1>%s.</h1></body></html>" %now
    # return HttpResponse(html)



# def current_time(req):

      #django模板修改的视图函数
#     now=datetime.datetime.now()
#     t=Template('<html><body>现在时刻是:<h1 style="color:red">{{current_date}}</h1></body></html>')
      #t=get_template('current_datetime.html')
#     c=Context({'current_date':now})
#     html=t.render(c)
#     return HttpResponse(html)

#另一种写法(推荐)

def current_time(req):

    now=datetime.datetime.now()

    return render(req, 'current_datetime.html', {'current_date':now})

推荐方式
View Code

2.深度变量的查找(万能的句点号)

以上的例子中,通过context传递的简单参数值主要是字符串,然而,模板系统能够非常简洁地处理更加复杂的数据结构,如:list、dictionary和自定义的对象。

Django模板中遍历复杂数据结构的关键是句点字符(.)。

#最好是用几个例子来说明一下。
# 首先,句点可用于访问列表索引,例如:

>>> from django.template import Template, Context
>>> t = Template('Item 2 is {{ items.2 }}.')
>>> c = Context({'items': ['apples', 'bananas', 'carrots']})
>>> t.render(c)
'Item 2 is carrots.'

#假设你要向模板传递一个 Python 字典。 要通过字典键访问该字典的值,可使用一个句点:
>>> from django.template import Template, Context
>>> person = {'name': 'Sally', 'age': '43'}
>>> t = Template('{{ person.name }} is {{ person.age }} years old.')
>>> c = Context({'person': person})
>>> t.render(c)
'Sally is 43 years old.'

#同样,也可以通过句点来访问对象的属性。 比方说, Python 的 datetime.date 对象有
#year 、 month 和 day 几个属性,你同样可以在模板中使用句点来访问这些属性:

>>> from django.template import Template, Context
>>> import datetime
>>> d = datetime.date(1993, 5, 2)
>>> d.year
>>> d.month
>>> d.day
>>> t = Template('The month is {{ date.month }} and the year is {{ date.year }}.')
>>> c = Context({'date': d})
>>> t.render(c)
'The month is 5 and the year is 1993.'

# 这个例子使用了一个自定义的类,演示了通过实例变量加一点(dots)来访问它的属性,这个方法适
# 用于任意的对象。
>>> from django.template import Template, Context
>>> class Person(object):
...     def __init__(self, first_name, last_name):
...         self.first_name, self.last_name = first_name, last_name
>>> t = Template('Hello, {{ person.first_name }} {{ person.last_name }}.')
>>> c = Context({'person': Person('John', 'Smith')})
>>> t.render(c)
'Hello, John Smith.'

# 点语法也可以用来引用对象的方法。 例如,每个 Python 字符串都有 upper() 和 isdigit()
# 方法,你在模板中可以使用同样的句点语法来调用它们:
>>> from django.template import Template, Context
>>> t = Template('{{ var }} -- {{ var.upper }} -- {{ var.isdigit }}')
>>> t.render(Context({'var': 'hello'}))
'hello -- HELLO -- False'
>>> t.render(Context({'var': '123'}))
'123 -- 123 -- True'

# 注意这里调用方法时并* 没有* 使用圆括号 而且也无法给该方法传递参数;你只能调用不需参数的
# 方法。
View Code

3.变量的过滤器(filter)的使用

过滤器类似于python的内置函数,用来把视图传入的变量值加以修饰后再显示,具体语法如下:

{{ 变量名|过滤器名:传给过滤器的参数 }}

常用的内置过滤器如下:

# 1  add          :   给变量加上相应的值
   #
   # 2  addslashes   :    给变量中的引号前加上斜线
   #
   # 3  capfirst     :    首字母大写
   #
   # 4  cut          :   从字符串中移除指定的字符
   #
   # 5  date         :   格式化日期字符串
   #
   # 6  default      :   如果值是False,就替换成设置的默认值,否则就是用本来的值
   #
   # 7  default_if_none:  如果值是None,就替换成设置的默认值,否则就使用本来的值


#实例:

#value1="aBcDe"
{{ value1|upper }}<br>

#value2=5
{{ value2|add:3 }}<br>

#value3='he  llo wo r ld'
{{ value3|cut:' ' }}<br>

#import datetime
#value4=datetime.datetime.now()
{{ value4|date:'Y-m-d' }}<br>

#value5=[]
{{ value5|default:'空的' }}<br>

#value6='<a href="#">跳转</a>'

{{ value6 }}

{% autoescape off %}
  {{ value6 }}
{% endautoescape %}

{{ value6|safe }}<br>

{{ value6|striptags }}

#value7='1234'
{{ value7|filesizeformat }}<br>
{{ value7|first }}<br>
{{ value7|length }}<br>
{{ value7|slice:":-1" }}<br>

#value8='http://www.baidu.com/?a=1&b=3'
{{ value8|urlencode }}<br>
    value9='hello I am yuan'
View Code

三、标签

1.{% if %} 的使用

{% if %}标签计算一个变量值,如果是"true",即它不存在、不为空并且不是false的boolean值,系统则会显示{% if %}和{% endif %}间的所有内容。

{% if num >= 100 and 8 %}

    {% if num > 200 %}
        <p>num大于200</p>
    {% else %}
        <p>num大于100小于200</p>
    {% endif %}

{% elif num < 100%}
    <p>num小于100</p>

{% else %}
    <p>num等于100</p>

{% endif %}



{% if %} 标签接受and,or或者not来测试多个变量值或者否定一个给定的变量
{% if %} 标签不允许同一标签里同时出现and和or,否则逻辑容易产生歧义,例如下面的标签是不合法的:

{% if obj1 and obj2 or obj3 %}
View Code

2.{% for %} 的使用

{% for %}标签允许你按顺序遍历一个序列中的各个元素,每次循环模板系统都会渲染{% for %}和{% endfor %}之间的所有哦内容。

<ul>
{% for obj in list %}
    <li>{{ obj.name }}</li>
{% endfor %}
</ul>


#在标签里添加reversed来反序循环列表:

    {% for obj in list reversed %}
    ...
    {% endfor %}

#{% for %}标签可以嵌套:

    {% for country in countries %}
        <h1>{{ country.name }}</h1>
        <ul>
         {% for city in country.city_list %}
            <li>{{ city }}</li>
         {% endfor %}
        </ul>
    {% endfor %}


#系统不支持中断循环,系统也不支持continue语句,{% for %}标签内置了一个forloop模板变量,
#这个变量含有一些属性可以提供给你一些关于循环的信息

1,forloop.counter表示循环的次数,它从1开始计数,第一次循环设为1:

    {% for item in todo_list %}
        <p>{{ forloop.counter }}: {{ item }}</p>
    {% endfor %}
2,forloop.counter0 类似于forloop.counter,但它是从0开始计数,第一次循环设为0
3,forloop.revcounter
4,forloop.revcounter0
5,forloop.first当第一次循环时值为True,在特别情况下很有用:

    
    {% for object in objects %}   
         {% if forloop.first %}<li class="first">{% else %}<li>{% endif %}   
         {{ object }}   
        </li>  
    {% endfor %}  
    
# 富有魔力的forloop变量只能在循环中得到,当模板解析器到达{% endfor %}时forloop就消失了
# 如果你的模板context已经包含一个叫forloop的变量,Django会用{% for %}标签替代它
# Django会在for标签的块中覆盖你定义的forloop变量的值
# 在其他非循环的地方,你的forloop变量仍然可用


#{% empty %}

{{li }}
      {%  for i in li %}
          <li>{{ forloop.counter0 }}----{{ i }}</li>
      {% empty %}
          <li>this is empty!</li>
      {% endfor %}

#         [11, 22, 33, 44, 55]
#            0----11
#            1----22
#            2----33
#            3----44
#            4----55
View Code

3.{% csrf_token%}的使用

当用form表单提交POST请求时必须加上标签{各c3rf_ token+} ,该标签用于防止跨站伪造请求

<form action="" method="post">
    <p>用户名<input type="text" name="user"></p>
    <p>密码<input type="text" name="pwd"></p>
    <p><input type="submit">提交</p>
    {% csrf_token %}
</form>
#具体工作原理为:
# 1、在GET请求到form表单时标签{% carf_ token %} 会被渲染成一个隐藏的input标签 ,该标签包含了由服务端生成的一串随机字符串,如<input type="hidden" name=" carfmiddlewaretoken"
value="dmje28mFo.. .0vnZ5">
# 2、在使用form表单提交POST请求时, 会提交上述随机字符串,服务端在接收到该POST请求时会对比该随机字符串,对比成功则处理该POST请求,否则拒绝,以此来确定客户端的身份
View Code

4.{% with %}的使用

with标签用更简单的变量名替代复杂的变量名

{% with total=fhjsaldfhjsdfhlasdfhljsdal %} 
    {{ total }} 
{% endwith %}

四、自定义过滤器和标签

当内置的过滤器或标签无法满足我们需求时,我们可以自定义,具体操作步骤如下:

  a.在app中创建templatetags模块(必须的)

  b.创建任意.py文件,如:mytag.py,在该文件汇总自定义过滤器或标签,文件内容如下:

from django import template
from django.utils.safestring import mark_safe

register = template.Library()   #register的名字是固定的,不可改变


@register.filter  #自定义过滤器
def filter_multi(v1,v2):   #自定义的过滤器只能定义最多两个参数,针对{{ value1 | filter_multi:value2 }},参数传递v1=value1,v2=value2
    return  v1 * v2


@register.simple_tag    #自定义标签
def simple_tag_multi(v1,v2):   #自定义的标签可以定义多个参数
    return  v1 * v2


@register.simple_tag   #自定义标签扩展之mark_safe
def my_input(id,arg):
    result = "<input type='text' id='%s' class='%s' />" %(id,arg,)
    return mark_safe(result)

c.在使用自定义simple_tag和filter的html文件中导入之间创建的 my_tags.py:{% load my_tags.py %}

d.使用simple_tag和filter

-------------------------------.html
{% load xxx %}   #首行
    
    
    
    
 # num=12
{{ num|filter_multi:2 }} #24

{{ num|filter_multi:"[22,333,4444]" }}


{% simple_tag_multi 2 5 %}  参数不限,但不能放在if for语句中
{% simple_tag_multi num 5 %}
View Code

e.在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag

注意:filter可以用在if等语句后,simple_tag不可以

五、模板的导入和继承

1.include(导入)模板标签

{% include %}:该标签允许在(模块中)包含其它的模板的内容。标签的参数是所要包含的模板名称,可以是一个变量,也可以是用单/双引号硬编码的字符串。每当在多个模板中出现相同的代码时,就应该考虑是否要使用{% include %}来减少重复。

2.extends(继承)标签

在实际应用中,将用Django模板系统来创建整个HTML页面。这就带来一个常见Web开发问题:在整个网站中,如何减少共用页面区域(如站点导航)所引起的重复和冗余代码?

解决该问题的传统做法是使用 服务器端的includes,可以在HTML页面中使用该制定将一个网页嵌入到另一个中。事实上,Django通过上面的{% include %}支持这种方式。但是用Django解决此类问题的首选方法是使用更加优雅的策略----模板继承。

本质上来说,模板继承就是先构造一个基础框架模板,而后在其子模版中对它所包含站点公用部分和定义块进行重载。

第一步:定义基础模板,该框架将由子模板所继承

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <h1>My helpful timestamp site</h1>
    {% block content %}{% endblock %}
    {% block footer %}
    <hr>
    <p>Thanks for visiting my site.</p>
    {% endblock %}
</body>
</html>
View Code

以上定义了一个简单的HTML框架文档,将在本站点的所有页面中使用。子模板的作用就是重载、添加或保留那些块的内容。

所有的{% block %}标签告诉模板引擎,子模板可以重载这些部分。每个{% block %}标签所要做的是告诉模板引擎,该模板下的这一块内容将有可能被子模板覆盖。

{% extends "base.html" %}
 
{% block title %}The current time{% endblock %}
 
{% block content %}
<p>It is now {{ current_date }}.</p>
{% endblock %}
View Code
{% extends "base.html" %}
 
{% block title %}Future time{% endblock %}
 
{% block content %}
<p>In {{ hour_offset }} hour(s), it will be {{ next_time }}.</p>
{% endblock %}
View Code

这样一来,每个模板只包含对自己而言独一无二的代码。无需多余的部分。如果想进行站点级的设计修改,仅需修改基础模板即可,所有其他模板都会被修改。

总结:

#1.标签extends必须放在首行,base.html中block越多可定制性越强
#2.include仅仅只是完全引用其他模板文件,而extends却可以搭配block在引|用的基础上进行扩写
#3.变量{{ block.super }可以重用父类的内容,然后在父类基础上增加新内容,而不是完全覆盖
#4.为了提升可读性,我们可以给标签{% endblock %}起一个名字。
#5.在一个模板中不能出现重名的block标签

六、静态文件配置

我们在编写模板文件时,需要大量引用css、js、 图片等静态文件,如果我们将这些文件在服务端存放的路径都固定写死那么将非常不利于后期的扩展,我们可以这么做。

(1)settings.py

STATIC_URL = '/static/'  #虚拟别名
STATICFILES_DIRS=(
    os.path.join(BASE_DIR, "app01/static"),  #获取静态文件在服务端的绝对路径
)

(2)在app01目录下新增文件夹static,为了更便于管理,可以在static下新建子文件夹css、js、img等。

(3)新建模板文件index.html,在该文件中对静态文件的引用如下:

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

<h1>time:{{ time }}</h1>
<!--<script src="/static/jquery-3.1.1.js"></script>-->
<script src="{% static 'jquery-3.1.1.js' %}"></script>
<script>
    $("h1").css("color","red")
</script>
</body>
</html>
posted @ 2019-10-23 16:14  流浪代码  阅读(208)  评论(0编辑  收藏  举报