Python全栈之模板渲染详解 Python全栈之模板渲染详解

1.标签

1.1for循环标签
1.2if标签
1.3with标签
1.4csrftoken标签

2.模板继承

3.组件

4.自定义过滤器

5.自定义标签

6.inclusion_tag自定义标签

7.小提示与小练习

总结

1. 标签 {% 标签 %}

1.1 for循环标签

{% for foo in hobby %}
{{ foo }}
{% empty %}啥也没有{% endfor %}
{% for foo in d1 %}
{{ foo }}
{% endfor %}{% for key,value in d1.items %}
{{ key }} -- {{ value }}
{% endfor %}

forloop对象

{% for foo in hobby %}forloop循环标签对象,通过counter属性可以来记录循环次数
{{ forloop.counter }}---{{ foo }}
从1开始计数
{{ forloop.counter0 }}---{{ foo }}
从0开始计数
{{ forloop.revcounter }}---{{ foo }}
倒序,从1开始计数
{{ forloop.revcounter0 }}---{{ foo }}
倒序,从0开始计数
{{ forloop.first }}---{{ foo }}
如果是第一次循环,就得到True
{{ forloop.last }}---{{ foo }}
如果是最后一次循环,就得到True,其他为False {% endfor %}
{% for key,value in hobby2.items %}forloop.parentloop 统计外层循环对象的循环次数{% for v in value %}
{{ forloop.parentloop.counter }} -- {{ forloop.counter }} -- {{ v }}
{% endfor %}{% endfor %}reversed 倒序循环
{% for foo in hobby reversed %}
{{ foo }}
{% endfor %}

1.2 if标签

{% if age > 18 %}太老了{% elif age == 18 %}还行{% else %}挺嫩{% endif %}{% if age > 18 or number > 100 %} 太老了{% elif age == 18 %}还行{% else %}挺嫩{% endif %}{% if hobby|length > 3 %} 爱好还挺多{% else %}爱好不够多{% endif %}

【Python全栈之模板渲染详解】f语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断，注意条件两边都有空格。
注意:不能像下面这样写

{% if a > b > c %}...{% endif %}

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

d2 = {'items': [11,22,33]}优先使用items属性,不使用items方法,容易导致错误
{% for key,v in d2.items %}
{{ key }} -- {{ v }}
{% endfor %}

1.3 with标签
给调用过程比较长的数据起别名的.

写法1.{% with hobby2.xx.0 as kk %}{{ kk }}{{ kk }}{% endwith %}{% with kk=hobby2.xx.0 %}{{ kk }}{{ kk }}{% endwith %}

1.4 csrf token标签

{% csrf_token %}

2. 模板继承先创建一个母版(模板)
比如base.html

Title - 锐客网.c1{background-color: pink; height: 40px; }.left-menu{background-color: tan; width: 200px; min-height: 600px; }.item{background-color: yellow; height: 40px; border-bottom: 1px solid red; }.left{float: left; }.right{float: left; }{% block css %}{% endblock %}32官网性感荷官, 在线发牌菜单1菜单2菜单3{% block content %}基础模板{% endblock %}{% block js %}{% endblock %}

在模板中预留block块(叫做钩子)

{% block content %} 基础模板{% endblock %}

子页面中继承模板extends
并重写模板中预留的block块中的内容
{{ block.super }}显示模板的内容

{% extends 'base.html' %}{% block css %}.c1{background-color: green; height: 40px; }{% endblock %}{% block content %}性感美女,在线指导{{ block.super }} {% endblock %}

block块的写法

{% block content %}...{% endblock %}{% block content %}...{% endblock content %}可以指定endblock的名称,起到一个提示作用

3. 组件一个完整功能的模块,其他页面如果想使用,就直接以组件的形式引入
比如创建一个zujian.htmlm,内容如下

Title - 锐客网.c1{background-color: pink; height: 40px; }32官网性感荷官, 在线发牌

在home.html中引入一下include
在页面什么位置引入,组件效果就生成到什么位置

Title - 锐客网这是home页面{% include 'zujian.html' %}

静态文件的配置流程
1 在settings.py文件中加上如下配置

STATIC_URL = '/static/'#别名,映射到STATICFILES_DIRS配置的静态文件存放路径,#那么引入静态文件时,我们使用别名路径来写,如果使用别名路径, 那么修改静态文件夹名称之后,也不会影响静态文件的返回# STATIC_URL = '/abc/'别名可以修改的STATICFILES_DIRS = [os.path.join(BASE_DIR, 'statics'),]STATIC_URL = '/static/'#别名,映射到STATICFILES_DIRS配置的静态文件存放路径,#那么引入静态文件时,我们使用别名路径来写,如果使用别名路径, 那么修改静态文件夹名称之后,也不会影响静态文件的返回# STATIC_URL = '/abc/'别名可以修改的STATICFILES_DIRS = [os.path.join(BASE_DIR, 'statics'),]

2 在项目根目录下创建一个文件夹,名称随意,比如叫做statics
3 在html文件中引入（两种方式）
方式1

Title - 锐客网方式1直接写别名路径开头xxx

方式2：

{% load static %}先load一下staticTitle - 锐客网方式2xxx

4. 自定义过滤器 1 在应用文件夹中创建一个叫做templatetags的文件夹(注意,名称必须是它)
2 在templatetags文件夹中创建一个py文件,名称随意,比如叫做mytag.py
3 在mytag.py文件中写如下内容

from django import templateregister = template.Library()#注册器,变量名称必须叫register@register.filter#过滤器def xx(v1):#第一参数是使用过滤器时,管道符前面的数据 {{ name|xx }} return v1 + 'xx'@register.filter#过滤器,至多有两个参数def xx2(v1, v2):#第一参数是使用过滤器时,管道符前面的数据 ,第二个参数是冒号后面的值,{{ name|xx:'oo' }} return v1 + 'xx2' + v2

4 在html文件中使用

{% load mytag %}先load一下我们的mytagpy文件Title - 锐客网这是home页面{#{% include 'zujian.html' %}#}{{ name|xx }}#以过滤器的形式使用,这个是一个参数的{{ name|xx2:'oo' }} # 以过滤器的形式使用,这个是两个参数的

5. 自定义标签 1 在应用文件夹中创建一个叫做templatetags的文件夹(注意,名称必须是它)
2 在templatetags文件夹中创建一个py文件,名称随意,比如叫做mytag.py
3 在mytag.py文件中写如下内容

from django import templateregister = template.Library()#注册器,变量名称必须叫register@register.simple_tagdef tag1(v1, v2 ,v3):#参数个数没有限制 return v1 + v2 + v3

4 在html文件中使用

{% load mytag %}Title - 锐客网{% tag1 11 22 number %}

6. inclusion_tag 自定义标签这个可以模拟不同用户，所看到的功能模块不一样，就是用这个实现的
1 在应用文件夹中创建一个叫做templatetags的文件夹(注意,名称必须是它)
2 在templatetags文件夹中创建一个py文件,名称随意,比如叫做mytag.py
3 在mytag.py文件中写如下内容

from django import templateregister = template.Library()#注册器,变量名称必须叫register# 通过inclusion_tag来做为装饰器,并且需要传入一个参数,这个参数就是一个html文件(你想做成动态组件的html文件)@register.inclusion_tag('zujian2.html')def dongtai(v1):#参数没有个数限制 data = https://www.it610.com/article/v1#[11,22,33,44,55,66] return {'xx': data }# zujian2.html会收到定义的inclusion_tag函数的返回值,然后进行zujian2.html这个动态组件的模板渲染

zujian2.html

Title - 锐客网.left-menu {background-color: tan; width: 200px; min-height: 600px; }.item {background-color: yellow; height: 40px; border-bottom: 1px solid red; }.left {float: left; }{% for item in xx %}{{ item }}{% endfor %}

4 使用inclusion_tag
basic.html

{% load mytag %}先loadTitle - 锐客网{% dongtai menu_list %}#最终将渲染好的动态组件(zujian2.html),通过include引入组件的方式,加载到这里

5 在后台视图中渲染basic.html页面是可以传入动态数据

def basic(request): # if user.type == 'admin': # menu_list = [11,22,33,44,55,66] # else: menu_list = [22,33] return render(request, 'basic.html',{'menu_list': menu_list})

7. 小提示与小练习小提示

自定义标签和过滤器在前后端未分离的项目用的比较多一些前后端分离的项目用的比较少@register.inclusion_tag('zujian2.html')def dongtai(v1):data = https://www.it610.com/article/v1return {'xx':data}# 这个return 相当于render(zujian2.html,{'xx':data})

小练习
页面效果