Django:母版、继承、组件、自定义标签

1.for循环应用

1.1for

Variable	Description
`forloop.counter`	当前循环的索引值（从1开始）
`forloop.counter0`	当前循环的索引值（从0开始）
`forloop.revcounter`	当前循环的倒序索引值（到1结束）
`forloop.revcounter0`	当前循环的倒序索引值（到0结束）
`forloop.first`	当前循环是不是第一次循环（布尔值）
`forloop.last`	当前循环是不是最后一次循环（布尔值）
`forloop.parentloop`	本层循环的外层循环

示例：

#views.py
def temp(request):
    lst1 = ["swiming",'dumpwater',"go boating"]
    lst2 = ["basketball","football","pingpang"]
    lst3 = ["run100","run1500","run400"]
    lst_all = [lst1,lst2,lst3]
    return render(request,"temp.html",{"lst1":lst1,"lst_all":lst_all})

temp.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% for water in lst1 %}
        <p>{{ forloop.counter }}-{{ water }}</p>
    {% endfor %}

</body>
</html>

显示效果

当{{forloop.counter}} 换成{{forloop}}结果就是如下：

例题：把lst_all所有信息打印

<body>
<table border="1">
    <thead>
        <tr>
            <th>项目1</th>
            <th>项目2</th>
            <th>项目3</th>
        </tr>
    </thead>
    {% for temp in lst_all %}
        <tr>
        {% for i in temp %}
             <td>{{ i }}</td>
        {% endfor %}
        </tr>
    {% endfor %}

</table>
</body>

显示效果

1.2for...empty

若项目所有项目为空，图下显示效果，让用户感觉好像没有加载完毕

用for...empty优化

<body>
<table border="1">
    <thead>
        <tr>
            <th>项目1</th>
            <th>项目2</th>
            <th>项目3</th>
        </tr>
    </thead>
    {#注意此时 lst_all为空#}
    {% for temp in lst_all %}
        <tr>
        {% for i in temp %}
             <td>{{ i }}</td>

        {% endfor %}
        </tr>
     {% empty %}
            <td colspan="3" style="text-align:center;">空空如也</td>
    {% endfor %}

</table>
</body>

显示效果：

1.3 if...elif 和else

{% if 5 > 2 %}
        5大于2
    {% elif 5 == 2 %}
        5等于2
    {% else %}
        5小于2
    {% endif %}

if 语句还支持and,or,==,>,<,!=,<=,>=,in,not in,is,is not 判断

{% if 5 > 2 and 2 > 1 %}
    真
{% else %}
    假
{% endif %}
{#真#}

{% if 5 > 2 > 1 %}
    真
{% else %}
    假
{% endif %}
{#假#}

注意：模板中不支持连续判断。python中支持连续判断，但模板中不支持连续判断，JavaScript也不支持连续判断，不支持算数运算。

语言判断	解析	结果
python--->(10>5>1)	10>5 and 5>1	True
JavaScript--->(10>5>1)	10>5 -->True--> 1>1 --->False	False
模板中--->(10>5>1)	10>5-->True--> 1>1 --->False	False

1.4 with语句

定义一个中间变量

{#方法1#}
{% with youyong=lst_all.0.0  %}{#注意等号左右不能有空格#}
    {{ youyong }}
{% endwith %}

{#方法2#}
{% with lst_all.0.0 as youyong  %}
    {{ youyong }}
{% endwith %}

{#swiming#}

1.5 Django模板语言中属性的优先级大于方法

#定义一个字典d有属性items值为100，本身字典d有items方法，传入templates层。
def temp(request):
    d = {"a":1,"items":"100"}
    return render(request,"temp.html",{"data":d})

html前端：

{{ data.items }}
{#100#}

结果为100 ，可以证明模板语言中属性的优先级大于方法

2.Csrf_token

用于跨站请求伪造保护
在页面的form表单里面写上{%csrf_token%}

同时也可以把：中间件MIDDLEWARE 里面内容 django.middleware.csrf.CsrfViewMiddleware,取消掉注释了

3.母版

3.1母版

为什么用母版，母版可以把公用部分HTML提取出来放到公用base.html文件，便于维护和使用。
在base.html中，通过定义block，把每个页面不同部分区分出来。
在具体页面中先继承母版
然后block名去指定替换母版中相应位置。
母版：一个普通HTML提取多个页面的公共部分，定义block快

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  {% block page-css %}
  
  {% endblock %}
</head>
<body>

<h1>这是母板的标题</h1>

{% block page-main %}

{% endblock %}
<h1>母板底部内容</h1>
{% block 块名称 %}

{% endblock %}
</body>
</html>

3.2块

语法： {{% block xxxx %}}
通过在母板中使用{% block xxx %}来定义"块"。

在子页面中通过定义母板中的block名来对应替换母板中相应的内容。

3.3继承

语法：{% extends "base.html "%}
重写block块 ----->写子页面独特的内容
注意：

{% extends 'base.html' %} 写在第一行前面不要有内容有内容会显示
{% extends 'base.html' %} 'base.html' 加上引号不然当做变量去查找
把要显示的内容写在block块中
定义多个block块，定义 css js 块

母版内容：

继承版内容

子页面如何定义自己CSS样式（JS也一样）
- 主页面设置CSS的block快
- 子页面写入自己CSS样式

3.4组件

语法：{%include "xxxxx.html"}
将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方按如下语法导入即可。

在templates文件下新建nav.html

<!--导航条代码-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/exit/">exit</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#" style="color:red;font-size: 20px; "><strong>{{ uname }}</strong></a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

在母版语句相应位置导入导航条:

4.静态文件

settings文件内配置的STATIC_URL=“/static/”,在以后项目部署的时候有可能变更，当一旦改动STATIC_URL将会出错。
通过用静态文件方法优化，避免路径写死了。
语法：{% load static %}
在母版文件中：{% load static %}

{% load static %}
    <link rel="stylesheet" href="{% static '/plugins/bootstrap-3.3.7/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static '/css/dsb.css' %}">

{#导入static,然后放入到link的href内与css路径拼接，static从setting中找到STATIC_URL名字，然后和后面写的路径拼接。这样无论settings改变STATIC_URL为什么都不会报错#}

注意：{% load static %} 与 {% load staticfiles %} 一样，用谁都行

拓展：{%get_static_prefix%}

{#在base.html写入如下，会在html源码中显示/static/#}
<h1>{%get_static_prefix%}</h1>

由此可见，它的功能是获取settings内STATIC_URL的名字。

这样也可以用如下写法也成立：

<link rel="stylesheet" href="{%get_static_prefix%}css/dsb.css">

5.自定义标签

5.1 simpletag

filter最多传入2个参数，但simpletag可以传入任意参数，创建与自定义filter一样

在templatetags下创建my_tags.py文件,写入方法，

from django import template
register = template.Library()


@register.simple_tag
def join_str(*args,**kwargs):
    return "{} - {}".format("*".join(args),"&".join(kwargs.values()))

在temp.html导入方法使用

{% load my_tags %}
{% join_str '1' '2' k1='3' k2='4' %} {#切记等号左右不允许有空格}

注意:切记等号左右不允许有空格

显示效果：

5.2 inclusion_tag

多用于返回html代码片段。相比组件，inclusion_tag返回代码字段是灵活的，根据你提供的参数是变化的。
它与filter和simpletag不同在于它返回的是一个字典，字典作用于render一样，要把字典交给页面渲染

分页功能使用

首先设置page.html片段

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>

        {% for i in num %}
         <li><a href="#">{{ i }}</a></li>
        {% endfor %}

        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

被调用：然后在templatetags下my_tags.py写函数

@register.inclusion_tag("page.html")
def page(num):
    return {"num":range(1,num+1)}

调用部分：在主页面渲染
关系如下：

5.3 filter,simpletag,inclusion_tag区别

filter：是过滤器{{}},返回值任意指定，装饰器写法不一样
simpletag：是标签{%%}，返回值任意指定，装饰器写法不一样
inclusion_tag:是标签{%%}。返回值是一个字典，交给模版渲染，装饰器写法不一样

5.4 XSS攻击

XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

@register.filter
def foo(vaules):
    a = """
    <script>
        for (var i=0;i<10;i++) {
            alert('你中毒了')
        }
    </script>
    """
    return a