• Django templates(模板)


     为什么用templates?

    views.py视图函数是用来写Python代码的,HTML可以被直接硬编码在views.py之中。如下:

    import datetime
    def current_time(request):
        now = datetime.datetime.now()
        html = "<html><body>It is now %s.</body></html>" % now
        return HttpResponse(html)
    • 对页面设计进行的任何改变都必须对 Python views.py中的代码进行相应的修改。 站点设计的修改往往比底层 Python 代码的修改要频繁得多,因此如果可以在不进行 Python 代码修改的情况下变更设计,那将会方便得多。

    • Python 代码编写和 HTML 设计是两项不同的工作,大多数专业的网站开发环境都将他们分配给不同的人员(甚至不同部门)来完成。 设计者和HTML/CSS的编码人员不应该被要求去编辑Python的代码来完成他们的工作。

    • 程序员编写 Python代码和设计人员制作模板两项工作同时进行的效率是最高的,远胜于让一个人等待另一个人完成对某个既包含 Python又包含 HTML 的文件的编辑工作。

    基于这些原因,将页面的设计和Python的代码分离开会更干净简洁更容易维护。 我们可以使用 Django的 模板系统 (Template System)来实现这种模式。

    1.配置settings.py

    复制代码
    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(BASE_DIR, 'templates')]
            ,
            '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',
                ],
            },
        },
    ]
    复制代码

    2.templates模板组成

    HTML代码+逻辑控制代码

    你使用过一些在HTML中直接混入程序代码的语言,现在,Django的模版系统并不是简单的将Python嵌入到HTML中。

    设计决定了:模版系统致力于表达外观,而不是程序逻辑。

    Django的模版系统提供了和某些程序架构类似的标签——用于布尔判断的 if 标签, 用于循环的 for 标签等等。

    ——但是这些都不是简单的作为Python代码那样来执行的,并且,模版系统也不会随意执行Python表达式。

    只有下面列表中的标签、过滤器和语法才是默认就被支持的。(但是您也可以根据需要添加您自己的扩展到模版语言中)。

    2.1 变量

    变量: {{ variable }}

    点号(.)用来访问变量的属性。

    当模版系统遇到点("."),它将以这样的顺序查询:

    • 字典查询(Dictionary lookup)
    • 属性或方法查询(Attribute or method lookup)
    • 数字索引查询(Numeric index lookup)
    复制代码
    >>> python manange.py shell  (进入该django项目的环境)
    >>> from django.template import Context, Template
    >>> t = Template('My name is {{ name }}.')
    >>> c = Context({'name': 'Gregory'})
    >>> t.render(c)
    'My name is Gregory.'
    复制代码
     同一模板,多个上下文,一旦有了模板对象,你就可以通过它渲染多个context,无论何时我们都可以,像这样使用同一模板源渲染多个context,只进行 一次模板创建然后多次调用render()方法渲染会
    更为高效:
    t = Template('Hello, {{ name }}')
    for name in ('John', 'Julie', 'Pat'):
        print(t.render(Context({'name': name})))

    在 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
    1993
    >>> d.month
    5
    >>> d.day
    2
    >>> 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'

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

    2.2 过滤器

    您可以通过使用 过滤器来改变变量的显示。

    {{ name|lower }}。这将在变量 {{ name }} 被过滤器 lower 过滤后再显示它的值,该过滤器将文本转换成小写。使用管道符号 (|)来应用过滤器。

    过滤管道可以被* 套接* ,既是说,一个过滤器管道的输出又可以作为下一个管道的输入:

    1
    {{ my_list|first|upper }} 将第一个元素并将其转化为大写。

    内置过滤器:

    add——把add后的参数加给value

    {{ value|add:"2" }}
    如果 value 为 4,则会输出 6.
    过滤器首先会强制把两个值转换成Int类型。如果强制转换失败, 它会试图使用各种方式吧两个值相加。它会使用一些数据类型 (字符串, 列表, 等等.) 

    last 返回列表中的最后一个项目。

    {{ value|last }} If value is the list ['a', 'b', 'c', 'd'], the output will be the string "d".

    length 返回值的长度。

    {{ value|length }}如果value是['a''b''c''d']或"abcd",输出将为4。
    复制代码
    1  add          :   给变量加上相应的值
    2  addslashes   :    给变量中的引号前加上斜线
    3  capfirst     :    首字母大写
    4  cut          :   从字符串中移除指定的字符
    5  date         :   格式化日期字符串
    6  default      :   如果值是False,就替换成设置的默认值,否则就是用本来的值
    7  default_if_none:  如果值是None,就替换成设置的默认值,否则就使用本来的值

    复制代码

    2.3 标签 {% tag %}

    {% for %} 允许我们在一个序列上迭代。

    {% for a in a_list %}
        <li>{{ a.name }}</li>
    {% endfor %}

    根据条件判断是否输出。if/else 支持嵌套。{% if %} 标签接受 and , or 或者 not 关键字来对多个变量做判断 ,或者对变量取反( not ),例如:

    1
    2
    3
    {% if a_list and c_list %}
         a 和 c变量都是可用的。
    {% endif %}

     注释标签——要注释模版中一行的部分内容,使用注释语法 {# #}.

    {%csrf_token%}:csrf_token标签

         用于生成csrf_token的标签,用于防治跨站攻击验证。注意如果你在view的index里用的是render_to_response方法,不会生效

         其实,这里是会生成一个input标签,和其他表单标签一起提交给后台的。

    <form action="{% url "bieming"%}" >
              <input type="text">
              <input type="submit"value="提交">
              {%csrf_token%}
    </form>

    {% url %}:  引用路由配置的地址

    {% with %}:用更简单的变量名替代复杂的变量名

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

    {% verbatim %}: 禁止render

    {% verbatim %}
             {{ hello }}
    {% endverbatim %}

    {% load %}: 加载标签库 

    {% include %} 标签允许在模板中包含其它的模板的内容。

    2.4 自定义模板标签和过滤器

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

    复制代码
    app/
        __init__.py
        models.py
        templatetags/
            __init__.py
            mytag.py
        views.py
    复制代码
    使用{% load mytag %}

    b、创建任意 .py 文件,如:mytag.py

    为了成为一个可用的标签库,这个模块必须包含一个名为 register的变量,它是template.Library 的一个实例,所有的标签和过滤器都是在其中注册的。所以把如下的内容放在你的模块的顶部:

    复制代码
    from django import template
    from django.utils.safestring import mark_safe
    register = template.Library()
    @register.filter
    def filter_multi(v1,v2):
        return  v1 * v2
    
    @register.simple_tag
    def simple_tag_multi(v1,v2):
        return  v1 * v2
    
    @register.simple_tag
    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 mytag %}

    d、使用simple_tag和filter(如何调用)

    复制代码
    {% 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 %}
    复制代码

    2.5模版继承

    模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks 。

    base.html

    复制代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         body{
     8             margin: 0;
     9         }
    10         .hide{
    11             display: none;
    12         }
    13         .menu .item{
    14             display: block;
    15             padding: 5px 10px;
    16             border-bottom: 1px solid #dddddd;
    17         }
    18         .menu .item:hover{
    19             background-color: black;
    20             color: white;
    21         }
    22         .menu .item.active{
    23             background-color: black;
    24             color: white;
    25         }
    26 
    27         .modal{
    28             position: fixed;
    29             top: 50%;
    30             left: 50%;
    31              500px;
    32             height: 400px;
    33             margin-top: -250px;
    34             margin-left: -250px;
    35             z-index: 100;
    36             background-color: white;
    37         }
    38         .remove{
    39             position: fixed;
    40             top: 50%;
    41             left: 50%;
    42              400px;
    43             height: 200px;
    44             margin-top: -100px;
    45             margin-left: -200px;
    46             z-index: 100;
    47             background-color: #c00;
    48         }
    49         .shade{
    50             position: fixed;
    51             top: 0;
    52             left: 0;
    53             right: 0;
    54             bottom: 0;
    55             background-color: black;
    56             opacity: 0.5;
    57             z-index: 99;
    58         }
    59         .pagination a{
    60             display: inline-block;
    61             padding: 5px;
    62         }
    63         .pagination a.active{
    64             background-color: black;
    65             color: white;
    66         }
    67     </style>
    68     {% block css %} {% endblock %}
    69 </head>
    70 <body>
    71     <div style="height: 48px;background-color: black;color: white">
    72         <div style="float: right">用户名:{{ username }}  | <a href="/logout.html">注销</a></div>
    73     </div>
    74 
    75     <div>
    76         <div class="menu" style="position: absolute;top: 48px;left: 0;bottom:0; 200px;background-color: #eeeeee">
    77             <a id="menu_class" class="item" href="/classes.html">班级管理</a>
    78             <a id="menu_student" class="item" href="/student.html">学生管理</a>
    79             <a id="menu_teacher" class="item" href="/teacher.html">老师管理</a>
    80         </div>
    81         <div style="position: absolute;top: 48px;left: 200px;bottom:0;right: 0;overflow: auto">
    82 
    83             {% block content %} {% endblock %}
    84 
    85         </div>
    86     </div>
    87     <script src="/static/jquery-2.1.4.min.js"></script>
    88      {% block js %} {% endblock %}
    89 </body>
    90 </html>
    复制代码
    block 标签定义了三个可以被子模版内容填充的block。 block 告诉模版引擎: 子模版可能会覆盖掉模版中的这些位置。
    {% block css %} {% endblock %}
    {% block content %} {% endblock %}
    {% block js %} {% endblock %}
    复制代码
    {% extends "base.html" %}
    
    {% block css %}
    {% endblock %}
    
    
    {% block content %}
        <h1>添加班级</h1>
        <form action="/add_classes.html" method="POST">
            <input type="text" name="caption" />
            <input type="submit" value="提交"/>{{ msg }}
        </form>
    {% endblock %}
    
    
    {% block js %}
        <script>
            $(function () {
                $('#menu_class').addClass('active');
            });
        </script>
    {% endblock %}
    复制代码
    extends 标签是这里的关键。它告诉模版引擎,这个模版“继承”了另一个模版。

     

     
     
  • 相关阅读:
    Markdown 列表、区块、代码(三)
    Markdown 标题、段落、文本(二)
    Markdown 简介(一)
    禅道学习笔记
    地图源改变之后mxd文件打开很慢的问题
    关于iReport报表的分页
    在VC项目中附加包含目录
    类静态成员变量的使用
    UI基础--UISlider&UIProgress
    UI基础--UISwitch
  • 原文地址:https://www.cnblogs.com/ellisonzhang/p/10643148.html
Copyright © 2020-2023  润新知