五、Django的模板渲染和继承

Django的模板渲染，继承

一、语法

两种特殊符号：

{{ }} 和 {% %}

变量相关的用{{ 变量 }}，逻辑相关的用{% 逻辑 %}。

二、变量

在Django的模板语言中按此语法使用：{{ 变量名 }}

当模版引擎遇到一个变量，它将计算这个变量，然后用结果替换掉它本身。 变量的命名包括任何字母数字以及下划线 ("_")的组合。 变量名称中不能有空格或标点符号

urls.py 先配置路径：
url(r'^index/', views.index),

views.py
from django.shortcuts import render,HttpResponse,redirect

def index(request):
num = 100
name = 'alex'
food_list = ['蒸熊掌','烧花鸭','烧子鹅']
dic = {'year':2019,'month':7,'day':17}

class Animal:
def init(self):
self.kind = 'dog'
def color(self):
return 'black'
a = Animal()

return render(request,'index.html',{'num':num,'name':name,'food_list':food_list,'dic':dic,'a':a})
# 通过字典的形式传把值给html文件
return render(request,'index.html',locals())
# locals() 获取函数内部所有变量的值,并加工成{'变量名':'变量值'....}这样一个字典

index.html

{{ num }}

{{ name }}

{{ food_list }}

{{ dic }}

{{ a }}

{{ a.kind }}

{{ a.color }}

注意：

• views中：对于locals()这种方法，可以获取函数内部所有变量的值，图省事，可以用它，但是很多多余的变量也被传进去了，效率低
• html中：调用对象里面的方法的时候，不需要写括号来执行；并且只能执行不需要传参数的方法，如果这个方法需要传参数，那么模板语言不支持，不能帮你渲染

三、过滤器

在Django的模板语言中，通过使用 过滤器 来改变变量的显示。

过滤器的语法： {{ value|方法名:参数 }} 使用管道符"|"来应用过滤器 ，冒号":"来连接参数

Django的模板语言中提供了大约六十个内置过滤器

length

获取数据长度,没参数，作用于字符串和列表 {{ value|length }}

{{ food_list|length }}

default

默认值,有参数,如果一个变量是false或者为空，使用给定的默认值。 否则，使用变量的值

{{ xx|default:'啥也没有' }}

# views若没有传过来xx的值，所以就会显示设置的默认值

filesizeformat

将值格式化为一个 “人类可读的” 文件尺寸 （例如 '13 KB', '4.1 MB', '102 bytes', 等等）

比如在views中 size = 123456

{{ size|filesizeformat }}

# 此时格式转换成 120.6 KB

slice

切片 ，跟字符串、列表的切片方法一样 {{value|slice:"2:-1"}}

{{ name|slice:':3' }}

# 0可省略

date

时间格式化显示

比如在views中 ntime = datetime.datetime.now()

{{ ntime|date }}

# July 17, 2019

{{ ntime|date:"Y-m-d H:i:s"}}

# 2019-07-17 16:27:55

truncatechars

字符截断 如果字符串字符多于指定的字符数量，那么会被截断。截断的字符串将以可翻译的省略号序列（“...”）结尾。 参数：截断的字符数

比如在views中 name = 'alexdsb'

{{ name|truncatechars:7 }}

# alex...
#注意：最后那三个省略号也是7个字符里面的，也就是这个7截断出来的是4个字符+3个省略号

truncatewords

单词截断 在一定数量的字后截断字符串，是截多少个单词

比如在views中 word = 'hello girl hi baby yue ma'

{{ word|truncatewords:4 }}

# hello girl hi baby ...
# 单词截断，截的是多少个单词，省略号不算

cut

移除value中所有的与给出的变量相同的字符串

比如在views中 word = 'hello girl hi baby yue ma'

{{ words|cut:'i' }}

# hello grl h baby yue ma

join

使用字符串连接列表，{{ list|join:', ' }}，就像Python的str.join(list)

比如在views中 food_list = ['蒸熊掌','烧花鸭','烧子鹅']

{{ food_list|join:'+' }}

# 蒸熊掌+烧花鸭+烧子鹅

safe

将 字符串识别成标签

假如在用户评论的时候写了一段js代码，如果不转义，js代码就会执行了，浏览器会一直弹窗等等，这叫做xss攻击。Django的模板中在进行模板渲染的时候，为了安全，会对HTML标签和JS等语法标签进行自动转义 。在Django中关闭HTML的自动转义有两种方式，如果是一个单独的变量我们可以通过过滤器“|safe”的方式告诉Django这段代码是安全的不必转义。

比如在views中 tag = '百度'

{{ tag }}

# 百度 只会当成字符串

{{ tag|safe }}

# 显示了一个百度的a标签

四、标签Tags

标签看起来像是这样的： {% tag %}

通过循环或逻辑来控制流程，一些加载其后的变量将使用到的额外信息到模版中。

一些标签需要开始和结束标签 （例如{% tag %} ...标签 内容 ... {% endtag %}）。

for循环标签

for循环普通的方法

循环一个字典：

views
dic = {'year':2019,'month':7,'day':17}
html
{% for key,value in dic.items %}

{{ key }} -- {{ value }}

循环一个列表：
views
food_list = ['蒸熊掌','烧花鸭','烧子鹅']
html

{% for food in food_list %}

• {{ food }}

{% endfor %}

利用 reversed 反向完成循环

{% for food in food_list reversed %}

• {{ food }}

{% endfor %}

for循环其他方法

forloop.counter 当前循环的索引值(从1开始)，forloop是循环器，通过点来使用功能
forloop.counter0 当前循环的索引值（从0开始）
forloop.revcounter 当前循环的倒序索引值（从1开始）
forloop.revcounter0 当前循环的倒序索引值（从0开始）
forloop.first 当前循环是不是第一次循环（布尔值）
forloop.last 当前循环是不是最后一次循环（布尔值）
forloop.parentloop 本层循环的外层循环的对象，再通过上面的几个属性来显示外层循环的计数等,比如：forloop.parentloop.counter

注意：循环序号可以通过｛｛forloop｝｝显示，必须在循环内部用　

{% for key,value in dic.items %}
{{ forloop.counter }} # 从1开始计数，比如dic有3个键值对，就1,2,3

{{ key }} -- {{ value }}

{% for key,value in dic.items %}
{{ forloop.counter0 }} # 从0开始计数，比如dic有3个键值对，就0,1,2

{{ key }} -- {{ value }}

{% for key,value in dic.items %}
{{ forloop.revcounter }} # 倒序直到1计数，比如dic有3个键值对，就3,2,1

{{ key }} -- {{ value }}

{% for key,value in dic.items %}
{{ forloop.revcounter0 }} # 倒序直到0计数，比如dic有3个键值对，就2,1,0

{{ key }} -- {{ value }}

{% for key,value in dic.items %}
{{ forloop.first }} # 判断是不是第一次循环，显示bool值

{{ key }} -- {{ value }}

{% for key,value in dic.items %}
{{ forloop.last }} # 判断是不是第一次循环，显示bool值

{{ key }} -- {{ value }}

forloop.parentloop示例：
循环views中的列表 d1 = [['春天','夏天','秋天','冬天'],['雨水','清明']]

{% for dd1 in d1 %}
{% for ddd1 in dd1 %}
{{ forloop.parentloop.counter }}
{{ forloop.counter }}

{{ ddd1 }}

{% endfor %}

1 1 父辈的循环计数是1，自己的循环计数是1
春天
1 2 父辈的循环计数是1，自己的循环计数是2
夏天
1 3 父辈的循环计数是1，自己的循环计数是3
秋天
1 4 父辈的循环计数是1，自己的循环计数是4
冬天
2 1 父辈的循环计数是2，自己的循环计数是1
雨水
2 2 父辈的循环计数是2，自己的循环计数是2
清明

for .... empty

for 标签带有一个可选的{% empty %} 从句，以便在给出的组是空的或者没有被找到时，可以有所操作。

比如在views中并没有给出 person_list，此时html中

{% for person in person_list %}

{{ person.name }}

{% empty %}

sorry,no person here

因为没有找到这个列表，页面就会显示empty中的内容 sorry,no person here

如果有 person_list = [{'name':'dazhuang'},{'name':'taibai'},{'name':'alex'}]
此时页面就会显示：dazhuang、taibai、alex

if标签

if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断，注意条件两边都有空格

注意：

• Django的模板语言不支持连续判断，即不支持以下写法：
  {% if a > b > c %}
  ...

• Django的模板语言中属性的优先级大于方法（了解）
  def xx(request):
  d = {"a": 1, "b": 2, "c": 3, "items": "100"}
  return render(request, "xx.html", {"data": d})
  如上，我们在使用render方法渲染一个页面的时候，传的字典d有一个key是items并且还有默认的 d.items() 方法，此时在模板语言中: {{ data.items }}，默认会取d的items key的值，即取d的items键对应的值100，而不是执行items方法

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

  什么鬼

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

  大佬真猛

  
  {% else %}
  

  凑活吧

  假如views中传过来 num = 100，则页面显示 大佬真猛

with标签

使用一个简单地名字缓存一个复杂的变量，多用于给一个复杂的变量起别名，注意等号左右不要加空格

假如views中有这样一个列表 person_list = [{'name':'dazhuang'},{'name':'taibai'},{'name':'alex'}]，我想把 alex 取出来

两种方式：
方式一：
{% with name=person_list.2.name %} # 注意等号两边没有空格
{{ name }} # 只能在with语句体内用，外边就不好使了
{% endwith %}
方式二：
{% with person_list.2.name as name %}
{{ name }}

csrf_token标签

当以post提交表单的时候，会报错，我们之前的解决办法是在settings里面的中间件配置里面把一个csrf的防御机制给注销了 ，而本身是不应该注销的，不让自己的操作被forbiden，通过csrf_token标签就能搞定。

这个标签用于跨站请求伪造保护

在页面的form表单里面（注意是在form表单里面）任何位置写上{% csrf_token %}，这个东西模板渲染的时候替换成了，隐藏的，这个标签的值是个随机字符串，提交的时候，这个东西也被提交了，首先这个东西是我们后端渲染的时候给页面加上的，那么当你通过我给你的form表单提交数据的时候，你带着这个内容我就认识你，不带着，我就禁止你，因为后台我们django也存着这个东西，和你这个值相同的一个值，可以做对应验证是不是我给你的token，就像一个我们后台给这个用户的一个通行证，如果你用户没有按照我给你的这个正常的页面来post提交表单数据，或者说你没有先去请求我这个登陆页面，而是直接模拟请求来提交数据，那么我就能知道，你这个请求是非法的。

比如：

views：
def index(request):
if request.method == 'GET':
return render(request,'index.html')
else:
return HttpResponse('成功了呢！！！')

index.html：

内容：
提交

此时，我们没有加{% csrf_token %}，也没注销settings里的防御机制，则网页会报错操作被forbiden

加上 {% csrf_token %} 试一试：

views：
def index(request):
if request.method == 'GET':
return render(request,'index.html')
else:
return HttpResponse('成功了呢！！！')

index.html：

{% csrf_token %}
内容：
提交

此时，我们就可以正常的拿到post请求后执行的页面了

五、模板继承

语法： {% extends 'base.html' %} ，可预留钩子block

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

当我们写许多网页的时候，发现部分网页里面的许多内容都很类似，这样我们就把相似的内容都拿出来，制作成一个母版，需要的页面来继承，这样就会节省许多的重复代码。

制作这样一个界面，输入127.0.0.1:8000/home/，访问首页，显示右边内容是home页面；点击菜单1时，跳转到menu1界面，右边显示menu1；菜单2和3同理；

1. 先配置路径 urls：
   from django.conf.urls import url
   from app01 import views

   urlpatterns = [
   url(r'^home/', views.home),
   url(r'^menu1/', views.menu1),
   url(r'^menu2/', views.menu2),
   url(r'^menu3/', views.menu3),
   ]

   配置好首页路径home/，和三个菜单的路径

2. 视图函数 views：
   from django.shortcuts import render

   def home(request):
   return render(request,'home.html')

   def menu1(request):
   return render(request, 'menu1.html')

   def menu2(request):
   return render(request, 'menu2.html')

   def menu3(request):
   return render(request, 'menu3.html')
   写首页和三个菜单的视图函数

3. 我们需要建立四个html文件：一个首页的home.html，和三个菜单的html
   当我们不用模板继承的方法时，因为导航栏和菜单栏四个文件都是一样的，所以四个文件的代码大部分一样，这样的重复代码就过多了
   以首页 home为例，三个菜单的基本一样

   
   
   
   
   
   

   
   

   
   外设首页
   鼠标专卖
   键盘专卖
   耳麦专卖
   搜索
   
   
   
   
   

   
   

   
   
   • 菜单1
   
   
   • 菜单2
   
   
   • 菜单3
   
   

   
   

   
   

   
   home页面 只需要改这里，改成其他三个菜单对应的内容
   

   
   

   
   

4. 用模板继承来完成
   先建立一个母版 base.html文件，把相同的内容放进来
   
   
   
   
   
   

   
   

   
   外设首页
   鼠标专卖
   键盘专卖
   耳麦专卖
   搜索
   
   
   
   
   

   
   

   
   
   • 菜单1
   
   
   • 菜单2
   
   
   • 菜单3
   
   

   
   

   
   

   
   {% block content %} 这就是钩子
   母版页面
   {% endblock content %}
   

   
   

   
   
   首页 home.html（其他三个菜单的html文件同理）：
   {% extends 'base.html' %} 继承的语法

   {% block content %} 钩子，写自己的的内容，去替换母版钩子的内容
   首页页面
   {% endblock content %}
   这样同样能完成之前的效果，并且节省的很多的代码

注意的点：

• 在模版中使用 {% extends %} 标签，它必须是模版中的第一个标签。其他的任何情况下，模版继承都将无法工作，模板渲染的时候django都不知道你在干啥
• 在base模版中设置越多的 {% block %} 标签越好 （一般至少定义三个钩子，html页面一个，css一个，js一个），子模版不必定义全部父模版中的blocks，所以，你可以在大多数blocks中填充合理的默认内容，然后，只定义你需要的那一个
• 将子页面的内容和继承的母版中block里面的内容同时保留
  {% block title %}
  {{ block.super }} #显示母版的内容
  xxx # 显示自己的内容
• 为了更好的可读性，你也可以给你的 {% endblock %} 标签一个 名字
  {% block title %}
  xxx
• 不能在一个模版中定义多个相同名字的 block 标签。

六、组件

语法：{% include 'navbar.html' %}

可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方，文件的任意位置按如下语法导入即可。

例如：有个导航栏的 nav.html 文件

xx
dd

此时有一个 test.html文件，直接嵌入以上导航栏的页面

{% include 'nav.html' %} 组件的语法

xxxxxxxxxx

这样test.html文件没有写导航栏的代码，却依然拿到了导航栏

组件和插件的简单区别

组件是提供某一完整功能的模块，如：编辑器组件，QQ空间提供的关注组件 等。

而插件更倾向封闭某一功能方法的函数。

这两者的区别在 Javascript 里区别很小，组件这个名词用得不多，一般统称插件。

七、自定义标签和过滤器

自定义过滤器

1. 在app应用文件中创建一个templatetags文件夹，文件夹必须是这个名字

2. templatetags文件中创建一个xx.py文件，这个文件的名字可以随意起，比如叫 my_tags.py

3. 在 my_tags.py 文件中创建自定义过滤器
   from django import template # 先导入 template

   register = template.Library() # register相当于一个注册器，名字是固定的,不可改变

   @register.filter # 这样使用注册器，注意filter后不加括号
   def my_filter(v1): # 不带参数的过滤器
   s = v1 + '你真好'
   return s

   @register.filter # 这样使用注册器，注意filter后不加括号
   def my_filter(v1,v2): # 带参数的过滤器（最多传递一个参数）
   s = v1 + '你真好' + v2
   return s

4. urls配置好路径，views写好视图函数
   urls:
   url(r'^index/', views.index),

   views:
   def index(request):
   name = 'alex'
   return render(request,'test.html',{'name':name})

5. 在模板的文件templates 中创建的 test.html 文件，就可以通过引入使用了
   {% load my_tags %}
   {{ name|my_filter }} 页面显示：alex你真好

   {% load my_tags %}
   {{ name|my_filter:'呵呵' }} 页面显示：alex你真好呵呵

6. 注意：自定义的过滤器最多只能传递一个参数，多参数可考虑自定义标签

自定义标签

1. 仍然是先在app创建templatetags文件夹，在文件中创建xx.py文件
2. 创建自定义的标签：
   @register.simple_tag
   def my_tag(v1,v2,v3): # 可以传递多个参数
   s = v1 + '喜欢' + v2 + v3
   return s
3. 在html文件中使用自定义标签：
   {% my_tag name '吃烧烤' '哈啤酒' %} 页面显示：alex喜欢吃烧烤哈啤酒

inclusion_tag

多用于返回html代码片段 ，可以将一个html文件先进行模板渲染，渲染完后，把html文件当成一个组件，放到你使用这个标签的地方

1. 依然是先在app创建templatetags文件夹，在文件中创建xx.py文件

2. 创建自定义的inclusion_tag
   @register.inclusion_tag('test02.html')
   def func(v1):

   return {'data':v1} 此时v1接收的 l1 = [11,22,33]

   func的return数据，传给了test02.html，作为模板渲染的数据，将test02.htm渲染好之后，作为一个组件，生成到调用这个func的地方

3. 建立test02.html，封装一些功能，相当于组件
   

   
   {% for d in data %}
   
   • {{ d }}
   
   {% endfor %}
   
   
   此时，再去别的html文件中就可以类似引用组件的把test02中的页面引入进来，比如在test.html中：
   {% load my_tag %}
   {% func l1 %} l1是views函数传递过来的，此时又传递给func

八、静态文件配置

js、css、img等都叫做静态文件，那么关于django中静态文件的配置，我们就需要在settings配置文件里面配置一些内容

1. 在项目的文件夹下建立一个文件夹，专门放静态文件的，比如叫 jingtaiwenjian

2. 在settings中配置：
   STATIC_URL = '/static/' # 指定路径的别名

   STATICFILES_DIRS = [
   os.path.join(BASE_DIR,'jingtaiwenjian'),
   ]

3. 调用静态文件：
   在html文件中，想加入一个css的样式，有以下方法引入静态文件：

   方式一：
   这样写是不对的，要用别名static
   

   方式二：
   {% load static %}
   

   方式三：
   
   用别名 static 的优点：

   • 别名也是一种安全机制，浏览器上通过调试台你能够看到的是别名的名字，这样别人就不能知道你静态文件夹的名字了，提高了安全性，不然别人就能通过这个文件夹路径进行攻击。
   • 假如维护更新时，改变了静态文件夹的名字，因为用了别名，所以也不会影响，提高了扩展性
   • 假如连别名也可能会修改，使用路径的时候通过load static来找到别名，通过别名映射路径的方式来获取静态文件

引入一张图片：
{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

引用JS文件时使用：
{% load static %}
<script src="{% static "mytest.js" %}">

某个文件多处被用到可以存为一个变量
{% load static %}
{% static "images/hi.jpg" as myphoto %}

{% get_static_prefix %} 获取别名前缀的

{% load static %}

或者，用别名：
{% load static %}