10、 Django-模板-templates
模板语法
#模板中的变量
语法:{{ var }}
如果变量不存在、则插入空字符串
#方法不能有参数
{{ int }}
{{ str }}
{{ list }}
{{ list.0 }}
{{ dict }}
{{ dict.a }} #dict['a']
{{ func }} #传递函数
{{ class_obj.func }} #传递类.方法
#列表、使用索引、不允许负索引
items= ['apples', 'banans', 'carrots']
{{ items.2 }}
#模板中的标签:
if、for、while.......
语法:{% tag %}
作用:
1、加载外部传入的变量
2、在输出中创建问基本
3、控制循环或逻辑
#if语句
#if单分支:
{% if 表达式 %}
语句
{% endif %}
#if双分支
{% if 表达式 %}
语句
{% else %}
语句
{% endif %}
#if多分枝
{% if 表达式 %}
语句
{% elif 表达式 %}
语句
{% else %}
语句
{% endif %}
#判断语句:true false
{% if today_is_weekend %}
<p>为true输出的内容</p>
{% endif %}
#使用and or not
{% if a and b %}
{% if a or b %}
{% if not list %}
#使用in 和 not in
{% if "bc" in "abcdef" %}
<p>输出bc在abcdef中</p>
{% endif %}
{% if "gh" not in "abcdef" %}
<p>输出gh不在abcdef中</p>
{% endif %}
for循环
for语句:
{% for 变量 in 列表 %}
语句
{% empty %} #当列表为空时执行empty后面的语句
语句
{% endfor %}
#表示当前时第几次循环 :{{ forloop.counter }}
{% for item in todo_list %}
<p>{{ forloop.counter }}:{{ item }}</p>
{% endfor %}
注意:
{{ forloop.counter0 }} #表示当前时第几次循环,从0开始数
{{ forloop.revcounter }} #表示当前时第几次循环,倒着数数、到1停
{{ forloop.revcounter0 }} #表示当前时第几次循环,倒着数数、到0停
{{ forloop.first }} #是否是第一次循环 返回布尔值
{{ forloop.last }} #是否最后一次循环 返回布尔值
如:
{% for link in links %}
{{ link }}{{ %if not in forloop.last %}} | {% endif %}
{% endfor %}
注释
#单行注释
{# 注释的内容 #}
#多行注释
{% comment %}
注释的内容
{% endcomment %}
过滤器
#语法
{{ var|过滤器 }} #作用:在变量显示前修改
add{{ value|add:2 }} #变量+2
add{{ value|add:-2 }} #没有减法的过滤去、但可以加负数
{{ name|lower }} #将字符串换成小写
{{ my_list|first|upper }} #将列表中的第一个值标为大写
{{ bio|truncatechars:30}} #截断、将字符串截断30个字符
#过滤器可以传递参数、参数需要使用引号括起来
如:{{ students|join:'=' }}
#默认值default
{{ var|default:value }} #如果变量没有被提供或者为false、空、会默认使用默认值
#根据指定格式转换日期为字符串、处理时间的就是针对date进行的转换
{{ dateVal|date:'y-m-d' }} #将日期对象dateVal转换为指定的日期格式
html的转义
#将接收到的数据当成普通字符串处理还是当成HTML代码来渲染的问题
#如渲染成html
{{ code|safe }}
#关闭自动转义
{% autoescape off%}
code
{% endautoescape %}
#打开自动转义
{% autoescape no%}
code
{% endautoescape %}
模板的继承
block:
{% block XXX%}
code
{% endblock %}
extends继承、写在开头位置
{% extends '父模板路径' %}
include:加载模板进行渲染
{% include '模板文件' %}
{{ block.super }} #获取父模板中block中的内容
案例:
views.py
from django.shortcuts import render
def index(request):
data = {
'name': 'xiaoxin',
'age': 25,
'likes': ['movie', 'game', 'code'],
'address': {'city': '深圳', 'province': '广东'},
'stars': [
['黄师傅', '啊尧','温工'],
['番薯', '柱子', '小赵'],
['捷顺', '速通4', '道闸'],
]
}
return render(request, 'index.html', data) #使用render(request, html文件名, 传递的数据) 将数据传递给html模板
根路由:urls.py
from django.contrib import admin
from django.urls import path
from App_templates.views import *
urlpatterns = [
path('index/', index),
path('admin/', admin.site.urls),
]
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h2>首页</h2>
<hr>
{# 单行注释 #}
{% comment %}
多行注释
{% endcomment %}
{# 打印变量 #}
<p>name: {{ name }}</p>
<p>age: {{ age }}</p>
{# 取列表的值 需要 列表.下标 #}
<p>likes: {{ likes }}</p>
<p>likes.2: {{ likes.2 }}</p>
{# 取字典的value需要 字典.key #}
<p>address: {{ address }}</p>
<p>address: {{ address.city }}</p>
<hr>
{# 标签的使用 #}
<h3>if语句</h3>
<h4>单分支</h4>
{# 这里的 >= 符号两边需要有空格不然语法会报错 #}
{% if age >= 18 %}
<p>{{ name }} 已成年</p>
{% endif %}
<h4>双分支</h4>
{% if age >= 18 %}
<p>{{ name }} 已成年</p>
{% else %}
<p>{{ name }} 未成年</p>
{% endif %}
<h4>多分支</h4>
{% if age < 18 %}
<p>{{ name }} 未成年</p>
{% elif age < 60 %}
<p>{{ name }} 是猛男</p>
{% else %}
<p>{{ name }} 是老年人</p>
{% endif %}
<h4>结合运算符 and、or、in、not in、not等等</h4>
{% if age > 18 and age < 60 %}
<p>{{ name }} 是成年</p>
{% endif %}
<hr>
<h3>for循环</h3>
{% for like in likes %}
<p>{{ like }}</p>
{% endfor %}
<h4>empty</h4>
{% for like in likes2 %}
<p>{{ like }}</p>
{% empty %}
<p>likes2 为空或者不存在</p>
{% endfor %}
<h4>下标</h4>
{% for like in likes %}
<p>
counter0:{{ forloop.counter0 }},
counter:{{ forloop.counter }},
revconuter0:{{ forloop.revcounter0 }},
revcounter:{{ forloop.revcounter }},
{# 在第一次循环的后面 加上 -first #}
{% if forloop.first %}
<b>- first</b>
{% endif %}
{# 在最后一次循环的后面 加上 -last #}
{% if forloop.last %}
<b>- last</b>
{% endif %}
</p>
{% endfor %}
<h4>循环嵌套</h4>
{# 表格标签 border="1":表格线宽、 width:表格宽度#}
<table border="1" width="300">
{% for star in stars %}
<tr>
{% for s in star %}
<td>
{{ s }}-
{{ forloop.parentloop.counter }}- {# 拿到当前循环的上一个循环体的值 #}
{{ forloop.counter }} {# 拿到当前循环体的值 #}
</td>
{% endfor %}
</tr>
{% endfor %}
</table>
<h3>过滤器</h3>
<h4>数字加减</h4>
<p>age = {{ age }}</p>
<p>age | add:2= {{ age|add:2 }}</p>
<p>age | add:-2 = {{ age|add:-2 }}</p>
<h4>字符大小写转换</h4>
<p>name = {{ name }}</p>
<p>name|first|upper = {{ name|first|upper }}</p>
<p>name|last|upper = {{ name|last|upper }}</p>
<p>name|title = {{ name|title }}</p> {# 标题:将第一个字符换成大写 #}
<h4>截断</h4>
<p>name|truncatechars:4 = {{ name|truncatechars:4 }}</p> {# 截取字符串前4-1个字符 #}
<h4>拼接 join</h4>
<p>likes = {{ likes }}</p>
<p>likes|join:'+' = {{ likes|join:'+' }}</p> {# 将列表中的元素使用 + 号拼接起来 #}
<h4>default:默认值 前提是变量为空没有值</h4>
<p>likes2 = {{ likes2 }}</p> {# 这里的likes2 是空值没有定义 #}
<p>linkes2|default:'xjxj' = {{ likes2|default:'xjj' }}</p>
<h4>指定日期格式</h4>
<p>dt = {{ dt }}</p>
<p>dt = {{ dt|date:'Y-m-d' }}</p>
<hr>
<h4>html转义</h4>
<p>code = {{ code }}</p> {# 输出没有转义前的 #}
<p>code = {{ code|safe }}</p> {# 输出转义后的html格式 、就是去掉html的标签、只输出字符串 #}
<hr>
<h4>自动转义</h4>
<p>{# 打开自动转义 #}</p>
{% autoescape off%} {# 打开自动转义 #}
{{ code }}
{% endautoescape %}
<p>{# 关闭自动转义 #}</p>
{% autoescape on%} {# 关闭自动转义 #}
{{ code }}
{% endautoescape %}
</body>
</html>
模板的继承
views.py
#模板继承、子模板继承父模板
#父模板
def base(request):
return render(request, 'base.html')
#字模板
def music(request):
return render(request, 'music.html')
#子模板
def sport(request):
return render(request, 'sport.html')
urls.py
from django.contrib import admin
from django.urls import path
from App_templates.views import *
urlpatterns = [
path('base_index/', base),
path('music_index/', music),
path('sport_index/', sport),
]
base.html --父模板
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta:设置编码 -->
<meta charset="UTF-8">
<!-- title:标题 block:块 endblock:结束块-->
{% block mytitle %}
<title>主页</title>
{% endblock %}
</head>
<body>
<!-- a:链接 href=urls中的路由-->
<a href="/music_index">音乐频道</a>
<a href="/sport_index">体育频道</a>
<br>
<!-- block:块 endblock:结束块 这个是被子模板继承后可以修改的地方-->
{% block info %}
这是主页
{% endblock %}
<br>
<h3>有任何问题联系xxxxx</h3>
</body>
</html>
字模板-music.html
<!-- 直接继承父模板 base.html -->
{% extends 'base.html' %}
<!-- block:块 修改父模板中block块中的内容 重写-->
{% block mytitle %}
<title>音乐频道</title>
{% endblock %}
{% block info %}
欢迎来到音乐频道
{% endblock %}
子模板- sport.html
<!-- 直接继承父模板 base.html -->
{% extends 'base.html' %}
<!-- block:块 修改父模板中block块中的内容 重写-->
{% block mytitle %}
<title>体育频道</title>
{% endblock %}
{% block info %}
欢迎来到体育频道
{% endblock %}