tempalte模板

tempalte模板层：

功能：为了更有逻辑的将数据库中的数据渲染到模板中；

模拟数据源：

DB = [
{"hostname":"c1.com","port":80},
{"hostname":"c2.com","port":81},
{"hostname":"c3.com","port":82},
{"hostname":"c4.com","port":83},
{"hostname":"c5.com","port":84},
]

userinfo = {"name":"zhangsan","age":22}

age=18

hobby = ["nv","qian","che","fang",]

date = datetime.datetime.now()

ele_f = '<a href="http://www.baidu.com">点击</a>'

# 字节大小 1kb
size = 1024

strt = "zhe shi yi duan zifu chuan"

han = "话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉 分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分 为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即 位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不 密，反为所害，中涓自此愈横。"


# 将所有数据返回到 index.html 模板中
return render(request,"index.html",locals()}

模板格式：

1.渲染变量：

{{ data }}
        使用句点符“.” 即可获得深度查询值
        {{ userinfo.name }}     即可取出其的名字信息 "zhangsan"
        {{ hobby.0 }}           即可取出其的爱好第一个信息 "nv"

2.渲染标签：

渲染标签：{% url  %}

常用的 渲染标签 { % % }

1.通过render渲染时 将urls.py定义的别名 name="LOGIN" 转换为实际的 请求路径地址,解决硬编码问题；url为关键字

{% url 'LOGIN' %}

带命名空间的URL名字，需要传第三个值：

{% url 'EDIT' Book_obj.id %}

详解：http://python.usyiyi.cn/documents/django_182/intro/tutorial03.html#namespacing-url-names

2. 在form表单提交时，csrf安全机制的设置,用于跨站请求伪造保护,会生成一组键值对--csrf_token

{% csrf_token %}

3.for 循环标签,有结束标记

{% for i in obj %}
    <p>循环体内容</p>
{% endfor %}

例：通过循环生成多级列表

        <div class="col-md-8">
            <a href="/add/"><button class="btn btn-primary">添加</button></a>
            <table class="table table-hover">
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
                {% for book_obj in bookList %}
                    <tr>
                        {# 循环次数索引 #}
                        <td>{{ forloop.counter }}</td>
                        <td>{{ book_obj.title }}</td>
                        {# 设置时间格式的样式 #}
                        <td>{{ book_obj.pubDate|date:"Y-m-d" }}</td>
                        <td>{{ book_obj.price }}</td>
                        <td>{{ book_obj.publish }}</td>
                        <td>
                            <a href="/edit/{{ book_obj.id }}"><button class="btn btn-info">编辑</button></a>
                            <a href="/del/{{ book_obj.id }}"><button class="btn btn-danger">删除</button></a>
                        </td>
                    </tr>
                 {% empty %}
                    <p>没有相应书籍</p>
                {% endfor %}
            </table>
        </div>

4.if标签判断传入的值,有结束标记

{% if age > 100 or age < 0 %}
    <p>无效年龄</p>
{% elif age > 80 and age < 100 %}
    <p>高龄人群</p>
{% else %}
    <p>奋斗吧</p>
{% endif %}

5.with标签,给复杂的变量，做个别名引用时更方便：

{% with book_obj.publish.name="name" %}
    <p>{{ name.title }}</p>
{% endwith %}

6.for ... empty标签,当获取值为空时给用户一个友好提示：

{% for book_obj in bookList %}
    <p>{{ book_obj.title }}</p>

{% empty %}
    <p>sorry,no book name!!</p>
{% endfor %}

常用的 渲染变量 {{ }}

1.渲染变量可通过.的方式进行取值

{{ data }}
        使用句点符“.” 即可获得深度查询值
        {{ userinfo.name }}     即可取出其的名字信息 "zhangsan"
        {{ hobby.0 }}           即可取出其的爱好第一个信息 "nv"

模板变量之过滤器

1.过滤器相加,在前端通过过滤器把age加10--add 过滤器

<p>{{ age|add:10 }}</p>

2.把时间按照指定格式格式化--data 过滤器

# 第一个date是调用后端的值

<p>{{ date|date:"Y-m-d" }}</p>

输出：

<p>2017-11-11</p>

3.当一个值为空时，友好提示该值，应该存放的内容类型--default

# 第一个date是调用后端的值

<p>{{ age|default:"这里应该是个年龄" }}</p>

4.求出传入的元素的个数--length

# 查看hobby列表里有几个值
<p>{{ hobby|length }}</p>

5.将字节数大小转换为易读个大小展示--filesizeformat

<p>{{ size|filesizeformat }}</p>

输出：

1.0KB

6.字符串截取--truncatechars 和 truncatewords

# 将字符串保留20个字符串显示--truncatechars
<p>{{ han |truncatechars:20 }}</p>

# 将字符串按照单词截取--truncatewords
<p>{{ strt |truncatewords:4 }}</p>

输出：

#truncatechars
话说天下大势，分久必合，合久必分。...

#truncatewords
zhe shi yi duan ...

7.将字节数大小转换为易读个大小展示--filesizeformat

<p>{{ size|filesizeformat }}</p>

输出：

1.0KB

8.Django处于安全考虑会将 模板中HTML标签和JS等语法标签进行自动转义，当不需要转义时通过safe标注--safe

<p>{{ ele_f |safe }}</p>

输出：
点击

自定义标签和过滤器

自定义标签和自定义过滤器步骤基本一样，差异在于引用的装饰器不同；

自定义过滤器，用在管道符之后 "|"(缺点只能接收两个参数)

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

2、在app中创建templatetags包(模块名只能是templatetags)

3、创建任意 .py 文件，如：my_tags.py

from django import template
from django.utils.safestring import mark_safe
 
register = template.Library()   #register的名字是固定的,不可改变

# 定义一个乘法的 过滤器

@register.filter    # 使用装饰器 register.filter  即可定义一个过滤器
def take(x,y):
    return x*y

4、在使用自定义过滤器的html文件中导入之前创建的 my_tags.py

{% load my_tags %}　

5、在引入自定义过滤器的html文件中使用方法：

<p>{{ age|take:10 }}</p>


{# 可以结合 if 语句使用 #}
{% if age|take:10 > 100 %}
   <p>大于100</p>
{% else %}
    <p>小于等于100</p>
{% endif %}

输出：

180

大于100

自定义标签{% %}　 自定义标签不能再 {% if %} 语句中使用

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

2、在app中创建templatetags包(模块名只能是templatetags)

3、创建任意 .py 文件，如：my_tags.py

from django import template
from django.utils.safestring import mark_safe
 
register = template.Library()   #register的名字是固定的,不可改变


@register.simple_tag   # 使用装饰器 register.simple_tag 即可自定义一个 标签
def take_tag(x,y,z):
    return x*y*z

4、在使用自定义标签的html文件中导入之前创建的 my_tags.py

{% load my_tags %}　

5、在引入自定义标签的html文件中使用方法：

<p>{% take_tag age 10 10 %}</p>

输出：

1800

模板语言之继承

Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的 blocks。

创建一个基模板base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/dist/css/bootstrap.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
    <script src="/static/dist/js/bootstrap.js"></script>
    <style>
        .container{
            margin-top: 100px;
        }
    </style>
</head>
<body>

{#导航栏部分=========开始#}
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
{#导航栏部分=========结束#}

{#整体内容区域#}
<div class="container">
    <div class="row">
        {# 模板leftMenu===============开始 #}
        {% block leftMenu %}
            {#左侧菜单部分=========开始#}
             <div class="col-md-2">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                              <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                  菜单1
                                </a>
                              </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                              <div class="panel-body">
                                  <p>1111</p>
                                  <p>1111</p>
                                  <p>1111</p>
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  菜单2
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                    <p>222</p>
                                    <p>222</p>
                                    <p>222</p>
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingThree">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                  菜单3
                                </a>
                              </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                              <div class="panel-body">
                                  <p>333</p>
                                  <p>333</p>
                                  <p>333</p>
                              </div>
                            </div>
                          </div>
                        </div>
             </div>
             {#左侧菜单部分=========结束#}
        {% endblock %}
        {# 模板leftMenu===============开始 #}
    
        {# 内容区域=============开始#}
        <div class="col-md-8">
            {% block content %}
                {# 当模板内部有内容时，在不覆盖时，显示模板内容，如果模板本引用时修改将覆盖模板内容 #}
                <p>hello</p>
            {% endblock %}
        </div>
        {# 内容区域=============结束#}
    </div>
</div>
</body>
</html>

子模版引用base模板，可以覆盖掉模版中的block块；不覆盖base模板就会继承该模板；

{# 引入基础模板文件 #}
{% extends "base.html" %}

{# 在需要修改的地方，覆盖基础模板的块即可 #}
{% block content %}
      <a href="/add/"><button class="btn btn-primary">添加</button></a>
      <table class="table table-hover">
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
                {% for book_obj in bookList %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ book_obj.title }}</td>
                        <td>{{ book_obj.pubDate|date:"Y-m-d" }}</td>
                        <td>{{ book_obj.price }}</td>
                        <td>{{ book_obj.publish }}</td>
                        <td>
                            <a href="/edit/{{ book_obj.id }}"><button class="btn btn-info">编辑</button></a>
                            <a href="/del/{{ book_obj.id }}"><button class="btn btn-danger">删除</button></a>
                        </td>
                    </tr>
                {% empty %}
                    <p>没有相应书籍</p>
                {% endfor %}
            </table>
{% endblock %}

子模版引用base模板，即想使用原来的模块，又想在该模块下追加内容；可以使用super

{# 引入基础模板文件 #}
{% extends "base.html" %}

{# 在需要追加模块内容的地方添加 block.super 即可不覆盖原有的内容 #}
{% block content %}
      {{ block.super }}
      <a href="/add/"><button class="btn btn-primary">添加</button></a>
      <table class="table table-hover">
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
                {% for book_obj in bookList %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ book_obj.title }}</td>
                        <td>{{ book_obj.pubDate|date:"Y-m-d" }}</td>
                        <td>{{ book_obj.price }}</td>
                        <td>{{ book_obj.publish }}</td>
                        <td>
                            <a href="/edit/{{ book_obj.id }}"><button class="btn btn-info">编辑</button></a>
                            <a href="/del/{{ book_obj.id }}"><button class="btn btn-danger">删除</button></a>
                        </td>
                    </tr>
                {% empty %}
                    <p>没有相应书籍</p>
                {% endfor %}
            </table>
{% endblock %}