Django模板层(前端渲染、过滤器、标签控制、模板继承)
目录
- Django模板层(前端渲染、过滤器、标签控制、模板继承)
- 模板渲染
- 八大基础数据类型渲染
- 渲染函数与类
- 函数
- 类
- 过滤器
- 常用过滤器
- 标签
- for循环语句
- forloop
- forloop其他参数
- **for ... empty**
- if语句
- with语句
- 注意事项
- 模板继承
- 关键语句
- 母版内容
- 子版内容
- 总结:
模板渲染
后端:
在render解析时加入方法locals,可以将函数中的参数传递给前端
def test(request): name = '张三' age = 18 return render(request,'app01/test.html',locals())
前端:
用{{ }}接受参数,并渲染在前端页面上
{{ name }}
{{ age }}
八大基础数据类型渲染
def test(request): # 【一】字符串类型的数据 name = "张三" # 【二】数字类型的数据 # (1)整数 age = 18 # (2)浮点数 : 如果是0精确度只能到小数点后一位 salary = 100.6666666 # 【三】列表类型 num_list = [1, 2, 3, 4, 5, 6, 7] # 【四】字典类型的数据 user_data = {"username": "dream", "password": "521521", "age": 1888, "hobby": ["music", "sport", "walk"], "addr": {"country": "China", "location": "Shanghai"}} # 【五】布尔类型 is_right = True # 【六】元组类型 num_tuple = (1, 2, 3, 4, 5) # 【七】集合类型 num_set = {1, 2, 3, 4, 5, 5, 5} return render(request,'app01/test.html',locals())
字符串:{{ name }}
整数:{{ age }}
浮点:{{ salary }}
列表:{{ num_list }}
字典:{{ user_data }}
布尔:{{ is_right }}
元组:{{ num_tuple }}
集合:{{ num_set }}
渲染结果:
渲染函数与类
函数
def test(request): def one(): content = 10 def two(): return 2+2 return render(request,'app01/test.html',locals())
无返回值函数:{{ one }}
有返回值函数:{{ two }}
渲染结果:
类
def index(request): class index(object): def __init__(self,name,age): self.name = name self.age = age def fun1(self): return '绑定对象方法' @classmethod def fun2(cls): return '绑定类方法' @staticmethod def fun3(): return '非绑定方法' def __str__(self): return '这是index类' my_index = index(name="张三",age=18) return render(request,'app01/test.html',locals())
绑定对象方法:{{ my_index.fun1 }}
绑定类方法:{{ my_index.fun2 }}
非绑定方法:{{ my_index.fun3 }}
类:{{ my_index }}
过滤器
在Django中过滤器可以改变前端页面显示的变量,由符号|表示
如:{{index|lower}},该操作会将index函数转换为小写,相当于引用了lower()方法
常用过滤器
渲染 name 变量
{{ name }}【1】计算当前变量值的长度
{{ name|length }}【2】字母大小写转换
{{ name|lower }}
{{ name|upper }}【3】指定默认值
{{ age|default:18 }}【4】渲染文件大小
{{ img_data|filesizeformat }}【5】格式化日期对象
{{ current_time }}{{ current_time|date:"Y-m-d H:i:s" }}【6】切片(顾头不顾尾)
{{ name }}{{ name|slice:"0:4:2" }}【7】切取摘要
{{ content }}{{ content|truncatechars:9 }}【8】移除指定字符
{{ name }}{{ name|cut:"r" }}【9】拼接
可以拼接的前提是后端的数据可以迭代{{ num_list }}{{ num_list|join:"|" }}【10】取消转义
{{ html_content }}第二种方案:不在后端用 make_safe 包一下{{ html_content|safe }}标签
for循环语句
def index(request): class index(object): def fun1(self): name = ['a','b','c','d'] return name my_index = index() return render(request,'app01/test.html',locals())
{#输入for可以快速生成for循环语句#}
- {% for i in my_index.fun1 %}
- {{ i }} {% endfor %}
forloop
a = [1, 2, 3] {% for re in a %}
{{ forloop }}
{% endfor %}{'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 3, 'revcounter0': 2, 'first': True, 'last': False} {'parentloop': {}, 'counter0': 1, 'counter': 2, 'revcounter': 2, 'revcounter0': 1, 'first': False, 'last': False} {'parentloop': {}, 'counter0': 2, 'counter': 3, 'revcounter': 1, 'revcounter0': 0, 'first': False, 'last': True}
- first
- 标识 for 循环是否是第一次
- last
- 标识 for 循环是否是以后一次
- counter0
- 类似索引
- counter
- 计数
- 取值
forloop其他参数
Variable Description forloop.counter 当前循环的索引值(从1开始) forloop.counter0 当前循环的索引值(从0开始) forloop.revcounter 当前循环的倒序索引值(从1开始) forloop.revcounter0 当前循环的倒序索引值(从0开始) forloop.first 当前循环是不是第一次循环(布尔值) forloop.last 当前循环是不是最后一次循环(布尔值) forloop.parentloop 本层循环的外层循环 用法:
- {% for i in my_index.fun1 %}
- {{ forloop.counter }}:{{ i }} {% endfor %}
for … empty
def fun1(self): return None
- {% for i in my_index.fun1 %}
- {{ forloop.counter }}:{{ i }} {% empty %}
- 无数据 {% endfor %}
当数据为空时执行empty下的代码
if语句
if\elif\else
if\else {% if a > 1 %} 正确 {% else %} 错误 {% endif %} if\elif\else {% if a|length >1 %} 大于1 {% elif a|length>5 %} 大于5 {% else %} 小于等于1 {% endif %}
def test(request): a = 10 return render(request,'app01/test.html',locals())
with语句
将变量改名,一般用于将复杂且长的参数改简短
# 传递数值a def test(request): a = 10 return render(request,'app01/test.html',locals()) ################################################## # a改名为b {% with a=b%} 或 {% with a as b %} {{ a }} {{ b }} {% endwith %}
注意事项
- Django的模板语言不支持连续判断,即不支持以下写法:
{% if a > b > c %} ... {% endif %}
- 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的值
模板继承
关键语句
继承css
{% block page-css %} {% endblock %}
继承主内容:
{% block page-main %} {% endblock %}
继承语句:(写在子版html的第一行)
{% extends 'home.html' %}
母版内容
{% load static %}
Title {% block page-css %} {% endblock %} {# #}这是母版
{% block page-main %}这是母版的内容
{% endblock %}渲染效果:
子版内容
{% extends 'home.html' %} {% load static %}
Title {% block page-css %} {% endblock %} {% block page-main %}我是被替换掉的母版内容
{% endblock %}渲染效果:
总结:
子版会继承母版的所有内容
仅有被
{% block page-main %} {% endblock %}
或
{% block page-css %} {% endblock %}
包裹的内容是可以被子版替换的
- 默认会取d的items key的值
- 如上,我们在使用render方法渲染一个页面的时候
- Django的模板语言中属性的优先级大于方法