Django 之模版层

一、模板简介

将前端页面和Python 的代码分离是一种的开发模式。为此 Django专门提供了模板系统 (Template System，即模板层)来实现这种模式。

Django 的模板 = HTML代码 + 模板语法

存放于 templates 目录下的 html文件称之为模板文件，要返回的 html页面中的数据是动态的，那么必须在 html页面中嵌入变量，这便用到了Django 的模板语法。

语法传值

变量相关：{{ }}
逻辑相关：{% %}

1 变量的基本使用

html代码中的数据不是固定死的，而是动态变化的，则必须在 html中嵌入变量，为此，模板语法提供了变量的概念，允许在html代码中嵌入变量，在视图函数中用 render 方法为 html文件中指定的变量赋值即可。

views.py

from django.shortcuts import render

def index(request):

    # 传给模板的变量值可以是任意python类型，如下

    msg = 'hello world'

    dic = {'k1':1, 'k2':2}

    tu = (1, 2, 3, 4)

    xiao = {'小酒','小米','小红'}

    d = {'nickname':'iyuyixyz', 'age': 20, 'hobby':[1, 2, {'info':'xyz'}]}

    def func():

        print('func...')

        return 'result func'

    class Person(object):

        def __init__(self, name, age):

            self.name = name

            self.age = age

        @staticmethod

        def get_func():

            return 'person'

        @classmethod

        def get_class(cls):

            return 'cls'

        # 对象被展示到html页面上 就类似于执行了打印操作也会触发__str__方法

        def __str__(self):

            return 'person __str__'

    obj = Person('iyuyixyz', 18)

    li = [123, 'xyz', obj]

    scr = '<script>alert(110)</script>'

    from django.utils.safestring import mark_safe

    res = mark_safe('<h3>小酒</h3>')

    # return render(request, 'index.html', {'msg':msg, 'dic':dic, 'obj':obj, 'list':list......})

    # 注意：

    # 1 render函数的第三个参数包含了要传给模板的变量值，

    #   是一个字典类型，该字典中的key必须与模板文件中的变量名相对应，

    #   render函数会去templates目录下找到模板文件，

    #   然后根据字典中的key对应到模板文件中的变量名进行赋值操作，最后将赋值后的模板文件内容返回给浏览器。

    # 2 可以将render 函数的第三个参数简写为locals()，

    #   locals()会将函数index 内定义的名字与值转换为字典中的k与v。

    return render(request,'index.html',locals())

视图函数中为模板 templates\base.html 的变量名 msg、dic、obj、list 赋值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>{{ msg }}</p>

    <p>{{ dic }}</p>

    <p>{{ tu }}</p>

    <p>{{ xiao }}</p>

    <p>{{ li }}</p>

    <!-- 传递函数名会自动加括号调用 但是模版语法不支持给函数传额外的参数 -->

    <p>{{ func }}</p>

    <!-- 传类名的时候也会自动加括号调用(实例化) -->

    <p>{{ MyClass }}</p>

    <!-- 内部能够自动判断出当前的变量名是否可以加括号调用 如果可以就会自动执行  针对的是函数名和类名 -->

    <p>{{ obj }}</p>

    <p>{{ obj.get_self }}</p>

    <p>{{ obj.get_func }}</p>

    <p>{{ obj.get_class }}</p>

</body>

</html>

2 深度查询之句点符的使用

当视图函数传给模板的值中包含多个元素时，若想取出其中的单个元素，就必须使用句点符了。

句点符既可以引用容器类型的元素，也可以引用对象的方法。

templates\period.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- 调用字符串对象的upper方法，注意不要加括号 -->

    <p>{{ msg.upper }}</p>

    <!-- 取字典中k1对应的值 -->

    <p>{{ dic.k1 }}</p>

    <!-- 取对象的name属性 -->

    <p>{{ obj.name }}</p>

    <!-- 取列表的第2个元素,然后变成大写 -->

    <p>{{ li.1.upper }}</p>

    <!-- 取列表... -->

    <p>{{ d.hobby.2.info }}</p>

    <!-- 转义 -->

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

    <!-- 直接转义 -->

    <p>{{ res }}</p>

</body>

</html>

二、过滤器

过滤器类似于python 的内置函数，用来把视图传入的变量值加以修饰后再显示

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

常用内置过滤器

# 1 default

#   作用：变量值是False或者为空，使用default后指定的默认值

#   例如: 使用变量本身的值，如果value='' 则输出“nothing”

{{ value|default:"nothing" }}

# 2 length

#   作用：返回值的长度。它对字符串、列表、字典等容器类型都起作用

#   例如: value是 ['x', 'y', 'z']，那么输出是3

{{ value|length }}

# 3 filesizeformat

#   作用: 将值的格式化为一个"人类可读的"文件尺寸(如13KB、4.1 MB、102bytes等等）

#   例如: value 是 12312312321，输出将会是 11.5 GB

{{ value|filesizeformat }}

# 4 date

#   作用: 将日期按照指定的格式输出，

#   例如: value = datetime.datetime.now()，按照格式 Y-m-d 则输出 2019-02-02

{{ value|date:"Y-m-d" }}　　

# 5 slice

#   作用: 对输出的字符串进行切片操作，顾头不顾尾,如果value=“xyz“，则输出"xy"

{{ value|slice:"0:2" }}

# 6 truncatechars

#   作用: 如果字符串字符多于指定的字符数量，那么会被截断。

#   截断的字符串将以可翻译的省略号序列（“...”）结尾，

#   例如: value="hello world 你在哪"，则输出 "hello..."，注意8个字符也包含末尾的3个点

{{ value|truncatechars:8 }}

# 7 truncatewords

#   作用: 同truncatechars，但truncatewords是按照单词截断，注意末尾的3个点不算作单词，

#   例如: value="hello world 我在这呢!"，则输出 "hello world ..."

{{ value|truncatewords:2 }}

# 8 safe

#   作用: 出于安全考虑，Django的模板会对HTML标签、JS等语法标签进行自动转义,

#   例如: value="<script>alert(123)</script>"，模板变量{{ value }}会被渲染成&lt;script&gt，

#   alert(123)&lt/script&gt，交给浏览器后会被解析成普通字符"<script>alert(123)</script>"，

#   失去了js代码的语法意义，但就想让模板变量{{ value }}被渲染的结果又语法意义，

#   那么就用到了过滤器 safe，例如:

#   value='<a href="https://www.baidu.com">点我啊</a>'，在被safe过滤器处理后就成为了真正的超链接，

#   不加safe过滤器则会当做普通字符显示"<a href="https://www.baidu.com">点我啊</a>"

{{ value|safe }}

其他过滤器（了解）

过滤器	描述	示例
upper	以大写方式输出	{{ user.name \| upper }}
add	给value加上一个数值	{{ user.age \| add: 5 }}
addslashes	单引号加上转义号
capfirst	第一个字母大写	{{ "good" \| capfirst }} 返回 "Good"
center	输出指定长度的字符串，把变量居中	{{ "abcd"\| center: 50 }}
cut	删除指定字符串	{{ "You are not a Englishman" \| cut: "not" }}
date	格式化日期
default	如果值不存在，则使用默认值代替	{{ value \| default: "(N/A)" }}
default_if_none	如果值为None, 则使用默认值代替
dictsort	按某字段排序，变量必须是一个dictionary	{% for moment in moments \| dictsort: "id" %}
dictsortreversed	按某字段倒序排序，变量必须是dictionary
divisibleby	判断是否可以被数字整除	{{ 224 \| divisibleby:2 }} 返回 True
escape	按HTML转义，比如将”<”转换为”&lt”
filesizeformat	增加数字的可读性，转换结果为13KB,89MB,3Bytes等	{{ 1024 \| filesizeformat }} 返回 1.0KB
first	返回列表的第1个元素，变量必须是一个列表
floatformat	转换为指定精度的小数，默认保留1位小数	{{ 3.1415926 \| floatformat: 3 }} 返回 3.142 四舍五入
get_digit	从个位数开始截取指定位置的数字	{{ 123456 \| get_digit: 1 }}
join	用指定分隔符连接列表	{{ ['abc', '45'] \| join : '' }} 返回 abc45
length	返回列表中元素的个数或字符串长度
length_is	检查列表，字符串长度是否符合指定的值	{{ 'hello' \| length_is: 3 }}
linebreaks	用或标签包裹变量	{{ "Hi\n\nDavid" \| linebreaks }} 返回HiDavid
linebreaksbr	用标签代替换行符
linenumbers	为变量中的每一行加上行号
ljust	输出指定长度的字符串，变量左对齐	{{ 'ab' \| ljust: 5 }}返回 'ab'
lower	字符串变小写
make_list	将字符串转换为列表
pluralize	根据数字确定是否输出英文复数符号
random	返回列表的随机一项
removetags	删除字符串中指定的HTML标记	{{value \| removetags: 'h1 h2'}}
rjust	输出指定长度的字符串，变量右对齐
slice	切片操作，返回列表	{{[3,9,1] \| slice: 2 }} 返回 [3,9] {{ 'asdikfjhihgie' \| slice: 5 }} 返回 ‘asdik’
slugify	在字符串中留下减号和下划线，其它符号删除，空格用减号替换	{{ '5-2=3and5 2=3' \| slugify }} 返回 5-23and5-23
stringformat	字符串格式化，语法同python
time	返回日期的时间部分
timesince	以“到现在为止过了多长时间”显示时间变量	结果可能为 45days, 3 hours
timeuntil	以“从现在开始到时间变量”还有多长时间显示时间变量
title	每个单词首字母大写
truncatewords	将字符串转换为省略表达方式	{{ 'This is a pen' \| truncatewords: 2 }} 返回``This is ...
truncatewords_html	同上，但保留其中的HTML标签	{{ '<p>This is a pen</p>' \| truncatewords: 2 }} 返回``<p>This is ...</p>
urlencode	将字符串中的特殊字符转换为url兼容表达方式	{{ 'http://www.aaa.com/foo?a=b&b=c' \| urlencode}}
urlize	将变量字符串中的url由纯文本变为链接
wordcount	返回变量字符串中的单词数
yesno	将布尔变量转换为字符串yes, no 或maybe	{{ True \| yesno }} {{ False \| yesno }} {{ None \| yesno }} 返回 yes no maybe

三、标签

标签是为了在模板中完成一些特殊功能,语法为 {% 标签名 %}，一些标签还需要搭配结束标签 {% endtag %}

1 常用标签之 for 标签

# 1 遍历每一个元素

{% for person in obj %}

    <p>{{ person.name }}</p>

{% endfor %}

# 2 可以利用{% for obj in list reversed %} 反向循环

# 3 遍历一个字典

{% for key, val in dic.items %}

    <p>{{ key }}:{{ val }}</p>

{% endfor %}

# 4 循环序号可以通过{{ forloop }}显示　

forloop.counter            当前循环的索引值（从1开始）

forloop.counter0           当前循环的索引值（从0开始）

forloop.revcounter         当前循环的倒序索引值（从1开始）

forloop.revcounter0        当前循环的倒序索引值（从0开始）

forloop.first              当前循环是第一次循环则返回True，否则返回False

forloop.last               当前循环是最后一次循环则返回True，否则返回False

forloop.parentloop         本层循环的外层循环

# 5 for标签可以带有一个可选的{% empty %} 从句，在变量 obj 为空或者没有被找到时，则执行empty子句

{% for person in obj %}

    <p>{{ person.name }}</p>

{% empty %}

    <p>sorry, no person here</p>

{% endfor %}

url.py

from django.urls import re_path

from django.shortcuts import render

def index(request):

    names = ['xyz', 'tom']

    dic = {'nickname':'iyuyixyz', 'email':'iyuyi.xyz@gmail.com'}

    li = []

    return render(request, 'index.html', locals())

urlpatterns = [

    re_path(r'^index/', index)

]

templates\for.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Index</title>

</head>

<body>

<hr>

    {% for name in names %}

        <p>{{ forloop.counter0 }} {{ name }}</p>

    {% endfor %}

<!--

输出结果为：

0 xyz

1 tom

-->

<hr>

    {% for name in names reversed %}

        <p>{{ forloop.revcounter0 }} {{ name }}</p>

    {% endfor %}

<!--

输出结果为：

1 tom

0 xyz

-->

<hr>

    {% for k,v in dic.items %}

        <p>{{ forloop.counter }} {{ k }} {{ v }}</p>

    {% endfor %}

<!--

输出结果为：

1 nickname iyuyixyz

2 email iyuyi.xyz@gmail.com

-->

<hr>

    {% for item in li %}

        <p>{{ item }}</p>

        {% empty %}

            <p>sorry, no value here</p>

    {% endfor %}

<!--

输出结果为：

sorry, no value here

-->

</body>

</html>

2 常用标签之 if 标签

{% if 条件 %} 条件为真时 if 的子句才会生效，条件也可以是一个变量。
if 会对变量进行求值，在变量值为空、或者视图没有为其传值的情况下均为 False。
if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not 判断。

{% if num > 100 or num < 0 %}

    <p>无效</p>

{% elif num > 80 and num < 100 %}

    <p>优秀</p>

{% else %}

    <p>凑活吧</p>

{% endif %}

urls.py

from django.urls import register_converter, re_path

from django.shortcuts import render

def index(request):

    return render(request, 'index.html')

def login(request):

    if request.method == 'GET':

        return render(request, 'login.html')

    name = request.POST.get('name')

    pwd = request.POST.get('pwd')

    if name == 'xyz' and pwd == '123':

        current_user = name

        return render(request, 'index.html', locals())

    else:

        msg = '账号或密码错误'

        return render(request, 'login.html', locals())

urlpatterns = [

    re_path(r'^$', views.index),

    re_path(r'^index/$', views.index),

    re_path(r'^login/', views.login),

]

templates\if.html 文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>首页</title>

</head>

<body>

    <h3>首页</h3>

<!--

如果用户已经登录，则current_user变量有值，if判断结果为真，会打印变量current_user的值，为当前登录的用户名

如果用户没有登录，则current_user变量无值，if判断结果为假，会打印a标签要求用户先登录

-->

    {% if current_user %}

        <p>当前登录用户为: {{ current_user }}</p>

    {% else %}

        <p><a href="/login/">请先登录</a></p>

    {% endif %}

</body>

</html>

templates\login.html 文件

Copy<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录页面</title>

</head>

<body>

    <form action="" method="POST">

        <p>用户名: <input type="text"     name="name"></p>

        <p>密  码: <input type="password" name="pwd"></p>

        <p><input type="submit" value="提交"></p>

    </form>

    <!-- 输错账号密码时的提示信息 -->

    <p style="color: red">{{ msg }}</p>

</body>

</html>

3 常用标签之 with 标签

with标签用来为一个复杂的变量名起别名，如果变量的值来自于数据库
在起别名后只需要使用别名即可，无需每次都向数据库发送请求来重新获取变量的值

{% with li.1.upper as v %}

    {{ v }}

{% endwith %}

4 常用标签之 csrf_token 标签

当用form表单提交 POST 请求时必须加上标签{% csrf_token %}，该标签用于防止跨站伪造请求

<form action="" method="POST">

    {% csrf_token %}

    <p>用户名：<input type="text" name="name"></p>

    <p>密码：<input type="password" name="pwd"></p>

    <p><input type="submit" value="提交"></p>

</form>

# 具体工作原理为：

# 1 在GET请求到form表单时，标签{% csrf_token%}会被渲染成一个隐藏的input标签

#   该标签包含了由服务端生成的一串随机字符串,例如: <input type="hidden" name="csrfmiddlewaretoken" value="dmje28mFo...OvnZ5">

# 2 在使用form表单提交POST请求时，会提交上述随机字符串，服务端在接收到该POST请求时会对比该随机字符串

#   对比成功则处理该POST请求，否则拒绝，以此来确定客户端的身份

四、自定义过滤器

当内置的过滤器或标签无法满足我们需求时，可以自定义。

在文件夹app中创建子文件夹templatetags（文件夹名只能是templatetags）。
在templatetags新建任意.py文件，如 my_tags.py，在该文件中自定义过滤器或标签。

from django import template

register = template.Library() # 注意变量名必须为register，不可改变

# 自定义的过滤器只能定义最多两个参数，针对{{ value1 | filter_multi:value2 }}，参数传递为v1=value1,v2=value2

@register.filter

def my_multi_filter(v1 ,v2):

    return  v1 * v2

# 自定义的标签可以定义多个参数

@register.simple_tag

def my_multi_tag(v1, v2):

    return v1 * v2

# 自定义 inclusion_tag

@register.inclusion_tag('left_menu.html')

def left(n):

    data = ['第{}项'.format(i) for i in range(n)]

    # 第一种

    # return {'data':data}  # 将data传递给left_menu.html

    # 第二种

    return locals()  # 将data传递给left_menu.html

# 自定义标签扩展之mark_safe

# 注释：我们可以用内置的标签 safe 来让标签内容有语法意义，自定义标签处理的结果也有语法意义

# 则不能使用内置标签safe了，需要使用 mark_safe，可以实现与内置标签 safe 同样的功能

from django.utils.safestring import mark_safe

@register.simple_tag

def my_input_tag(id, name):

    res = "<input type='text' id='%s' name='%s' />" % (id, name)

    return mark_safe(res)

自定义过滤器或标签的使用

templates\filter.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- 必须先加载存有自定义过滤器和标签的文件 -->

    {% load my_tags %}

    <!-- salary的值为10，经过滤器my_multi_filter的处理结果为120 -->

    {{ salary | my_multi_filter: 12 }}

    <!-- 标签在一个，结果为2 -->

    {% my_multi_tag 1 2 %}

    {% left 5 %}

    <!--

     结果为一个input标签，该表的属性id="inp1" name="username"

     注意：input的属性值均为字符串类型，所以my_input_tag后的两个值均为字符串类型

    -->

    {% my_input_tag "inp1" "username" %}

</body>

</html>

对比自定义标签与自定义过滤器

自定义过滤器只能传两个参数，而自定义标签却可以传多个参数。
过滤器用{{ }}，标签用{% %}
标签名字在第一个，后面跟参数
过滤器可以用于 if 判断，而标签不能。

{% if salary | my_multi_filter: 12 > 200 %}

    <p>优秀</p>

{% else %}

    <p>中等</p>

{% endif %}

inclusion_tag

当html 页面某一个地方的页面需要传参数才能够动态的渲染出来，并且在多个页面上都需要使用到该局部，那么就考虑将该局部页面做成inclusion_tag形式

五、继承和导入

开发中，模板文件彼此之间可能会有大量冗余代码，为此Django 提供了专门的语法来解决这个问题，主要围绕三种标签的使用：

include 标签
extends 标签
block 标签

1 模板的导入之 include 标签

作用: 在一个模板文件中，引入/重用另外一个模板文件的内容

{% include '模版名称' %}

templates\import.html 文件

<h3>模板导入</h3>

在 templates\include.html 文件中用 include 标签引入 import.html 文件的内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Include</title>

</head>

<body>

    {% include "import.html" %}

</body>

</html>

2 模板的继承\派生之extends标签、block标签

作用: 在一个模板文件中，引入/重用另外一个模板文件的内容
也就是说include 有的功能extends 全都有，但是extends可以搭配一个block标签，用于在继承的基础上定制新的内容
Django模版引擎中最复杂且最强大的部分就是模版继承了。
创建一个基本的“骨架”模版，它包含站点中的全部元素，并且可以定义多处blocks 。（block标签的内容替换或更新）

{% extends "模版名称" %}

{% block 名字 %}

    <!-- 用新内容完全覆盖了父模板内容 -->

    <p>新增内容</p>

{% endblock %}

{% block 名字 %}

    <!-- 该变量会将父模板中sidebar中原来的内容继承过来，然后我们可以在此基础上新增，否则就是纯粹地覆盖 -->

    {{ block.super }}

    <!-- 在继承父模板内容的基础上新增的标签 -->

    <p>新增内容</p>

{% endblock %}

总结与注意

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

六、静态文件配置

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

1 settings.py 文件

STATIC_URL = '/static/' # 找到这一行，然后新增下述代码

STATICFILES_DIRS = [

    os.path.join(BASE_DIR, 'statics'),# 获取静态文件在服务端的绝对路径

]

2 在项目根目录下新增文件夹statics，为了更便于管理，可以在statics下新建子文件夹css、js、img等

3 新建模板文件 templates\index.html，在该文件中对静态文件的引用如下

html导入静态文件（bootstrap-3.4/js/bootstrap.js为静态文件路径）

# 无动态解析的

<script src="/static/bootstrap-3.4/js/bootstrap.js"></script>

# 有动态解析的

{% load static %}

<script src="{% static 'bootstrap-3.4/js/bootstrap.js'%}"></script>