Django之模版层

文章目录

  • 模版语法传值
  • 模版语法传值特性
  • 模版语法标签
    • 语法格式
    • if模板标签
    • for模板标签
    • with起别名
  • 模版语法过滤器
    • 常用过滤器
  • 自定义过滤器、标签、inclusion_tag
    • 自定义过滤器
    • 自定义标签
    • 自定义inclusion_tag
  • 模版导入
  • 模版继承

模版语法传值

	模板层三种语法{{}}:主要与数据值相关{%%}:主要与逻辑相关{##}：模板注释django的模板语法是自己写的 跟jinja2不一样
'''
1.针对需要加括号调用的名字 django模板语法会自动加括号调用你只需要写名字就行
2.模板语法的注释前端浏览器是无法查看的 {##}，
模板语法{##}是由后端处理的，当识别为模板注释时就会从html文件中移除了，不会返回给用户；
而html注释<!---->是由前端浏览器对html处理时渲染时不做处理，但检查网页源码时还是能看见这些注释的。
'''

通过之前的Django知识的了解，如果我们需要向页面传递参数，可以通过render函数帮助我们实现：

第一种方式：手动将所有内容放入字典内进行传递

	def index(request):name = 'jack'dic = {'hobby':['jump','music','rap']}return render(request,'index.html', {'name': name, 'dic': dic})

第一种方式传值：精准传值 不浪费资源 针对多资源的传递书写麻烦

第二种方式：将当前名称空间中所有的变量名与值全部传递

	def index(request):name = 'jack'dic = {'hobby': ['jump', 'music', 'rap']}return render(request,'index.html',locals())

第二种方式传值：将函数名称空间中所有的名字全部传递 名字过多并且不使用的情况下比较浪费资源

模版语法传值特性

在这里插入图片描述

		1.关于模版语法传值的范围是很大的 我们的八大数据类型都可以传值还有函数以及类2.文件对象也可以展示并调用方法3.函数名的传递会自动加括号执行并将返回值展示到页面上 需要写上return返回值才可以返回到页面注意函数如果有参数则不会执行也不会展示 模板语法不支持有参函数4.类名的传递也会自动加括号产生对象内存地址并展示到页面上如果想使用的话可以通过对象句点符的方式点出来5.对象不会加括号，但可以获取对象的一些数据属性6.索引、键、属性只能通过句点的方式取ps:总结针对可以加括号调用的名字模板语法都会自动加括号调用ps:模板语法会判断每一个名字是否可调用 如果可以则调用!!!

模版语法标签

在模板内通过：{% %} 来定义；例如：{%for %} {% endfor %}。在前面Django学习的章节内我们就使用了:

	{% load static %} # 加载静态接口{% static '静态文件路径' % # 使用静态接口作为前缀寻找静态文件{% url '路由别名' %} # 根据路由别名执行该路由规则{% for obj in data %} # 给定一个迭代器，根据其内容决定遍历次数代码块{% endfor %}

语法格式

	if elif else{% if 条件 %}  条件一般是模板语法传过来的数据  直接写名字使用即可条件成立执行的代码{% elif 条件1 %}条件1成立执行的代码	{% else %}条件都不成立执行的代码{% endif %}for循环（html页面输入for Tab后面会自动补全）需要用到一个关键字 forloop 用来记录循环第几次的{% for i in str %}{% if forloop.first %}<p>这是我循环第一次！！</p>{% elif forloop.last %}<p>这是我最后一次循环！！</p>{% else %}<p>{{ i }}</p>{% endif %}{% empty %}<p>我是判断当前标签是否有值的哦！ 如果是空我就运行啦！！</p>{% endfor %}

if模板标签

if这种模板标签非常类似于Python内的if，只不过部分模板标签都会有一个end标签名为作用域的结束，而Python则是以缩进为作用域。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body><url>{% if 1 > 2 %}条件1>2判断成功执行{% elif 3 > 1 %}条件3>1判断成功执行{% elif 5 > 2 %}条件5>2判断成功执行{% else %}以上条件都没有触发{% endif %}</url></body>
</html>

一个作用域内只有一个条件能执行成功，浏览器打开效果：
在这里插入图片描述

for模板标签

for标签的几个常用属性

for内可用描述
forloop.counter当前循环的索引值（从1开始）
forloop.counter0当前循环的索引值（从0开始）
forloop.revcounter当前循环的倒序索引值（从1开始）
forloop.revcounter0当前循环的倒序索引值（从0开始）
forloop.first当前循环是不是第一次循环（布尔值）
forloop.last当前循环是不是最后一次循环（布尔值）
forloop.parentloop本层循环的外层循环

视图传递一个列表，index.html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body><url>{% for li in lis %}{% if forloop.first %}<li>我是第一个列表{{ li }}</li>{% elif forloop.last %}<li>我是最后一个列表{{ li }}</li>{% else %}<li>{{ li }}</li>{% endif %}{% endfor %}</url></body>
</html>

在这里插入图片描述

直接遍历forloop也是可以的，而它显示的则是上面提到的所有属性内容：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body><url>{% for foo in lis %}{{ forloop }}<br/>{% endfor %}</url></body>
</html>

在这里插入图片描述

补充：当for接收的值不存在，如何处理
如果给定迭代器为空或找不到，则for标记可以带有一个可选子句，其文本将显示：{% empty %}内

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body><url>{% for foo in llllll %}{{ foo }}{% empty %}该循环找不到遍历内容{% endfor %}</url></body>
</html>

在这里插入图片描述

遍历一个字典：

	{% for key,val in dic.items %}<p>{{ key }}:{{ val }}</p>{% endfor %}{% for foo in d.keys %}<p>{{ foo }}</p>{% endfor %}{% for foo in d.values %}<p>{{ foo }}</p>{% endfor %}{% for foo in d.items %}<p>{{ foo }}</p>{% endfor %}

with起别名

使用一个简单地名字缓存一个复杂的变量，当你需要使用一个“昂贵的”方法（比如访问数据库）很多次的时候是非常有用的

	d = {'username':'kevin','age':18,'info':'这个人有点意思','hobby':[111,222,333,{'info':'NB'}]}# with起别名{% with d.hobby.3.info as nb  %}<p>{{ nb }}</p>在with语法内就可以通过as后面的别名快速的使用到前面非常复杂获取数据的方式<p>{{ d.hobby.3.info }}</p>{% endwith %}{% with total=business.employees.count %}{{ total }} employee{{ total|pluralize }}{% endwith %}不要写成as

模版语法过滤器

该模板语法类似与Python的内置方法，通过|符号对值进行操作。

常用过滤器

语法：{{ value|过滤器名:参数 }}
过滤器用管道符隔开（无空格），最多支持多传入一个参数。
过滤器是支持链式的，可以将多个过滤器串起来，上一个过滤器的输出作为下一个的输入

过滤器功能示例
default如果一个变量是false或者为空，使用给定的默认值。 否则，使用变量的值。{{ value|default:“nothing”}}
length对于字符串列表这类有length属性的，得到其值{{ value|length}}
filesizeformat将传入的数字当做文件的字节数，将其处理成合适展示的文件大小，如2048就会展示为2 KB{{ value|filesizeformat }}
slice对字符串进行切片{{value|slice:“2:-1”}}
add将传入的数字或字符串做相加或拼接处理{{value|add:1}}
safe模板语法默认转义带html语法的文本，safe取消标签文本转义，让其可以被html渲染{{ value|safe}}
truncatechars如果字符串字符多于指定的字符数量，那么会被截断。截断的字符串将以可翻译的省略号序列（“…”）结尾。{{ value|truncatechars:9}}
truncatewords在一定数量的字后截断字符串，处理同上…。{{ value|truncatewords:9}}
cut移除value中所有的与给出的变量相同的字符串如果value为’i love you’，那么将输出’iloveyou’.{{ value|cut:’ ’ }}
timesincedatetime数据距离现在的时间（从现在起）{{ blog_date|timesince }}
timeuntildatetime数据距离现在的时间（到现在止）{{ blog_date|timesince }}
datedatetime数据字符化输出{{ value|date:“Y-m-d H:i:s”}}

views.py

	from django.shortcuts import renderfrom datetime import datetimedef index(request):lis = [1,2,3,4,5]num = 10strs = 'Hello'ctime = datetime.now()b1 = Trueb2 = Falsefile_size = 10502030texts = '这是一段很长且内容丰富的文本'return render(request, 'index.html', locals())

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body><p>获取值的长度：{{ lis|length }}</p><p>加法运算：{{ num|add:20 }}</p><p>字符串拼接：{{ strs|add:' World' }}</p><p>日期格式：{{ ctime|date:'Y年-m月-d日 H时:i分:s秒' }}</p><p>当结果为True：{{ b1|default:'我触发了' }}</p><p>当结果不为True：{{ b2|default:'我触发了' }}</p><p>通过数值计算文件大小：{{ file_size|filesizeformat }}</p><p>截取文本（7位数，包含点）：{{ texts|truncatechars:7 }}</p><p>截取文本（3位数，包含点）：{{ texts|truncatechars:3 }}</p></body>
</html>

打开浏览器效果：
在这里插入图片描述

如果传入这种内容到前端会是什么样子呢；

	h = "<h1>我是标题</h1>"

在这里插入图片描述
如果需要在后端就写好标签，传入到前端直接显示的话，存在两种方式：

方式一：导入一个新的方法来完成需求

	from django.shortcuts import renderfrom django.utils.safestring import mark_safedef index(request):h = mark_safe("<h1>我是标题</h1>")return render(request, 'index.html', locals())

方式二：后端正常传参，前端过滤解析

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body>{{ h|safe }}</body></html>

在这里插入图片描述

自定义过滤器、标签、inclusion_tag

简介、环境准备

这类似于在Python内自定义函数，在开始前要做3个步骤：

  1. 在应用下创建一个名字必须叫"templatetags"文件夹
  2. 在上序文件夹内创建一个任意名称的py文件
  3. 在该py文件内固定先书写以下两条代码
	from django import templateregister = template.Library()

完成上面步骤之后，记得重启Django项目啊！正式开始我们的实例

自定义过滤器

在定义的py文件内，开始创建我们的过滤器

	@register.filter(name='myfileter') # 自定义过滤器def index(x,y): # 接受两个值return x * y # 只做简单的运算

html文件首先要加载我们定义的过滤器，通过存放过滤器的那个py文件名

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>add</title></head><body>{% load mytag %} <!-- 加载自定义的过滤器 -->{{ 10|myfileter:2 }} <!-- 将10与2传进去了，进行10*2，得到20 --></body>
</html>

页面打开效果
在这里插入图片描述

自定义标签

定义方式几乎与过滤器一致，我们这里定义的是简单版的标签

mytag.py

	from django import templateregister = template.Library()# 自定义简单版标签（for那些标签都是通过register.tag定义出来的）@register.simple_tag(name='mysimple')def func1(a,b,c,d):return '%s-%s %s:%s'%(a,b,c,d)

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body>{% load mytag %}{% mysimple 1 'Hello' 2 'World' %}</body>
</html>

浏览器打开效果
在这里插入图片描述

自定义inclusion_tag

定义inclusion_tag是为了避免模块会重复代码
mytag.py

	from django import templateregister = template.Library()# 自定义inclusion_tag@register.inclusion_tag('test.html', name='my_inclusion_tag')def func(n):l = []for i in range(1, n + 1):l.append(f'第{i}页')return {'lis':l} # 表示将列表传入到test.html页面内

test.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>test</title></head><body>{% for foo in lis %}<li>{{ foo }}</li>{% endfor %}</body>
</html>

别急，还没完呢，这不是我们主页面，我们的目的为了重复使用上面页面的代码(但必须上面界面是经过inclusion_tag传入的)。

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title></head><body>{% load mytag %}<b>第一次使用</b>{% my_inclusion_tag 2 %} <!-- 向那个页面传入值2，然后拿到它的页面 --><b>第二次使用</b>{% my_inclusion_tag 5 %} <!-- 向那个页面传入值2，然后拿到它的页面 --></body>
</html>

打开浏览器效果：
在这里插入图片描述
每次都可以传值给inclusion_tag，然后由inclusion_tag将值传递给某个页面，再然后那个页面产生的结果会返回到我们调用inclusion_tag的页面

总结：当某个区域需要反复使用inclusion_tag，那么得到数据不是固定的

模版导入

将写好的一个模板导入到另一个模板里面，类似于模块。

如：我们写的一个导航栏模板，写好之后其它任意模板都可以导入使用：

语法：{% include '模板文件' %}

headers.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav></body>
</html>

yel.html 主页

{% include 'headers.html' %} <!-- 放在任意位置都可以，笔者习惯性放在这里，更明确一些。 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>index</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"></head><body>Hello World！</body>
</html>

打开浏览器看看效果
在这里插入图片描述

模版继承

模板继承类似于模板导入，但不同的是继承分为：母版、子版。

  • 母版：正常页面布局，可以留出某块区域给子版进行使用
  • 子版：可以完全继承与模板，但是这就与导入无异了，所以子版可以在母版预留出来的区域继续编辑自己的内容
		{% extends 'html文件名' %}			# 新建一个页面 第一行写入继承代码{% block 区域名称 %}					# 可以通过这个方式定位到页面的位置母版内容							# 这个地方填写新的代码{% endblock %}{% block 区域名称 %}			# 在模板划分的区域内编写内容子板内容{% endblock %}母版在划定区域的时候一般都有三个区域：CSS区域、HTML文档区域、JS区域。目的就是为了让子版具有独立的CSS、JS以便于增加拓展性。在模板的head标签内：{% block css %}{% endblock %}在模板的body标签结尾：{% block javascript %}{% endblock %}{% block css %}{% endblock %}{% block content %}{% endblock %}{% block js %}{% endblock %}'''子板中还可以使用母板的内容  {{ block.super }} 	让他使用之前原主页的内容'''

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/179425.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言不可不敲系列：跳水比赛排名问题

C语言不可不敲系列：跳水比赛排名问题

目录 1题干&#xff1a; 2解题思路&#xff1a; 3代码: 4运行结果: 5总结: 1题干&#xff1a; 5位运动员参加了10米台跳水比赛&#xff0c;有人让他们预测比赛结果 A选手说&#xff1a;B第二&#xff0c;我第三&#xff1b; B选手说&#xff1a;我第二&#xff0c;E第四&am…
阅读更多...
Redhat Linux v8.2 实时内核环境配置及参数调优

Redhat Linux v8.2 实时内核环境配置及参数调优

Redhat-Linux V8.2 实时内核环境配置及参数调优 -------物理机 & 虚拟机 一、前言 本文档包含有关Redhat Linux for Real Time的基本安装和调试信息。许多行业和组织需要极高性能的计算&#xff0c;并且可能需要低且可预测的延迟&#xff0c;尤其是在金融和电信行业中。延…
阅读更多...
docker安装MongoDB数据库，并且进行密码配置

docker安装MongoDB数据库，并且进行密码配置

很美的一首小诗> 我在外面流浪&#xff0c;回来时 故乡瘦了一圈—— 墩子叔走了&#xff0c;门前的池水 干了一半。 屋后驼背的柳树 头发散落了一地&#xff0c; 老房子蹲在坟边&#xff0c;屋顶的白云 仍在风中奔跑。 安装配置 要在Docker中安装MongoDB并启用远程连接&…
阅读更多...
微信小程序相机相册授权后，需要重启客户端才能正常调用相机，无法调起窗口选择图片，无反应解决方案

微信小程序相机相册授权后，需要重启客户端才能正常调用相机，无法调起窗口选择图片，无反应解决方案

最近微信小程序很多功能突然不能使用&#xff0c;本篇针对无法调起相册进行说明 解决方案 检查小程序隐私协议是否配置&#xff0c;操作步骤这里不在详细说明&#xff0c;点击教程按照上面的教程&#xff0c;找到入口后点击完善或者更新 选择选中的照片或视频这个权限要申请 之…
阅读更多...
Behave介绍和快速示例

Behave介绍和快速示例

Behave是一个用于行为驱动开发 (Behavior-Driven Development, BDD) 的 Python 库。使用 Behave&#xff0c;可以编写自然语言格式的使用场景来描述软件的行为&#xff0c;然后用 Python 实现这些场景下的步骤&#xff0c;形成可直接运行的测试。 Behave的目标是帮助用户、开发…
阅读更多...
LeetCode【41】缺失的第一个正数

LeetCode【41】缺失的第一个正数

题目&#xff1a; 分析&#xff1a; 第i个位置的数&#xff0c;如果再数组 0到length-1范围内&#xff0c;则将其放到对应的位置&#xff1b; 再遍历一遍数组&#xff0c;找到第一个不在位置i的正数数字&#xff0c;即为所求 思路&#xff1a;https://blog.csdn.net/weixin_45…
阅读更多...
打开GeoTIFF文件失败：Unknown field with tag

打开GeoTIFF文件失败：Unknown field with tag

用QGIS输出的数据类型为UInt16的TIFF文件&#xff0c;无法在GIMP中打开。 GIMP消息提示&#xff1a; 调查 用ImageMagick打开TIFF文件&#xff0c;虽然会出现警告&#xff0c;但是最终还是打开了&#xff1a; 在ImageMagick中重新保存后&#xff0c;就可以用GIMP打开了。使用…
阅读更多...
vue-router配置

vue-router配置

1、路由安装 npm install vue-router4 2、创建router目录 3、编辑文件且引入router包 4、main.js引入
阅读更多...
qtcreator中其他控件的使用

qtcreator中其他控件的使用

scroll area 是 Tool Box是 tabwidget是网页 这三个可以用进行连接 用按钮实现切换 combo box的使用 使用label添加图片动图
阅读更多...
SOLIDWORKS Flow Simulation阀门内流体仿真

SOLIDWORKS Flow Simulation阀门内流体仿真

Flow Simulation 导读 阀门作为输送系统中的控制设备其主要功能是接通管路中的流体介质,又或是调节流体的流量、压力等&#xff0c;在阀门的设计中&#xff0c;流量系数Cv,Kv&#xff0c;以及流阻系数都是基本参数&#xff0c;本节将讲解通过SOLIDWORKS Flow Simulation在三维…
阅读更多...
SDL2 播放音频数据(PCM)

SDL2 播放音频数据(PCM)

1.简介 这里以常用的视频原始数据PCM数据为例&#xff0c;展示音频的播放。 SDL播放音频的流程如下&#xff1a; 初始化音频子系统&#xff1a;SDL_Init()。设置音频参数&#xff1a;SDL_AudioSpec。设置回调函数&#xff1a;SDL_AudioCallback。打开音频设备&#xff1a;SD…
阅读更多...
黑马程序员微服务 分布式搜索引擎3

黑马程序员微服务 分布式搜索引擎3

分布式搜索引擎03 0.学习目标 1.数据聚合 **聚合&#xff08;aggregations&#xff09;**可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f;这些手机的平均价格、最高价格、最低价格&#xff1f;这些手机每月的销售…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023