zoukankan      html  css  js  c++  java
  • 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 标签是这里的关键。它告诉模版引擎,这个模版“继承”了另一个模版。

     

     
     
  • 相关阅读:
    Android开发总结
    LeakCanary原理分析
    机器学习
    Kivy 中文教程 实例入门 简易画板 (Simple Paint App):2. 实现绘图功能
    Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 3. 循环
    Kivy 中文教程 实例入门 简易画板 (Simple Paint App):1. 自定义窗口部件 (widget)
    Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 2. 变量
    Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 1. 神秘朋友
    Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 0. 准备工作
    远程显示(操作) 服务器 GUI 程序(图形化界面) (基于 X11 Forwarding + Centos + MobaXterm)
  • 原文地址:https://www.cnblogs.com/ellisonzhang/p/10643148.html
Copyright © 2011-2022 走看看