精通Django模板(模板语法、继承、融合与Jinja2语法的应用指南)

模板:

基础知识:

​ 在Django框架中,模板是可以帮助开发者快速⽣成呈现给⽤户⻚⾯的⼯具模板的设计⽅式实现了我们MVT中VT的解耦(M: Model, V:View, T:Template),VT有着N:M的关系,⼀个V可以调⽤任意T,⼀个T可以供任意V使⽤ (MVC: Model,View界⾯,Controller控制器)。

模板处理分为两个过程

  • 加载HTML

  • 渲染数据 render()

模板主要有两个部分

  • HTML静态代码

  • 模板语⾔,动态插⼊的代码段(挖坑,填坑)

模板中的动态代码段除了做基本的静态填充,还可以实现⼀些基本的运算,转换和逻辑

页面分类:

  • 静态⻚⾯:⻚⾯数据是本地固定的

  • 动态⻚⾯:⻚⾯数据来源于后台服务器


模板中的变量: 视图传递给模板的数据,遵守标识符规则语法: {{ var }}
如果变量不存在,则插⼊空字符串。

在这里插入图片描述

⽅法不能有参数。
{{ str }}
{{ str.upper }}
{{ str.isdigit }}
{{ dict.key }}
列表,使⽤索引,不允许负索引
items= ['apples', 'bananas', 'carrots']
{{ items.2 }}

标签语句:

模板中的标签语法 {% tag %}作⽤1.加载外部传⼊的变量2.在输出中创建⽂本3.控制循环或逻辑

条件语句:

 if 语句: 格式:if单分⽀{% if 表达式 %}语句{% endif %} if双分⽀{% if 表达式 %}语句{% else %}语句{% endif %}if多分⽀{% if 表达式 %}语句{% elif 表达式 %}语句{% else %}语句{% endif %}判断true或false{% if today_is_weekend %}<p>Welcome to the weekend!</p>{% endif %}

与或运算:

    使⽤ and or not{% if athlete_list and coach_list %}<p>Both athletes and coaches are available.</p>{% endif %}{% if not athlete_list %}<p>There are no athletes.</p>{% endif %}{% if athlete_list or coach_list %}<p>There are some athletes or some coaches.</p>{% endif %}使⽤ in和not in,{% if "bc" in "abcdef" %}This appears since "bc" is a substring of "abcdef"{% endif %}{% if user not in users %}If users is a list, this will appear if user isn't an element of the list.{% endif %}

for循环:

for 语句:{% for 变量 in 列表 %}语句1{% empty %}语句2{% endfor %}当列表为空或不存在时,执⾏empty之后的语句
{{ forloop.counter }} 表示当前是第⼏次循环,从1数数{% for item in todo_list %}
<p>{{ forloop.counter }}: {{ item }}</p>
{%endfor %}{{ forloop.counter0}}表示当前是第⼏次循环,从0数数
{{ forloop.revcounter}}表示当前是第⼏次循环,倒着数数,到1停
{{ forloop.revcounter0}}表示当前第⼏次循环,倒着数,到0停
{{ forloop.first }} 是否是第⼀个	布尔值{% for object in objects %}{% if forloop.first %}<li class="first">{% else %}<li>{% endif %}{{ object }}</li>
{% endfor %}{{ forloop.last }} 是否是最后⼀个 布尔值
{% for link in links %}
{{ link }}{% if not forloop.last %} | {% endif %}
{% endfor %}forloop.parentloop
{% for country in countries %}
<table>
{% for city in country.city_list %}
<tr>
<td>Country #{{ forloop.parentloop.counter }}</td>
<td>City #{{ forloop.counter }}</td>
<td>{{ city }}</td>
</tr>
{% endfor %}
</table>
{% endfor %}

注释:

注释:单⾏注释{# 被注释掉的内容	#}多⾏注释{% comment %}内容{% endcomment %}

过滤器:

过滤器:{{ var|过滤器 }}作⽤:在变量显示前修改add {{ value|add:2 }}没有减法过滤器,但是加法⾥可以加负数{{ value|add:-2 }} lower{{ name|lower }} upper{{ my_list|first|upper }} my_list 第一个值变成大写 截断:{{ bio|truncatechars:30 }}过滤器可以传递参数,参数需要使⽤引号引起来⽐如join: {{ students|join:'=' }}默认值:default,格式 {{var|default:value}}如果变量没有被提供或者为False,空,会使⽤默认值根据指定格式转换⽇期为字符串,处理时间的就是针对date进⾏的转换{{ dateVal | date:'y-m-d' }}

转义:

HTML转义将接收到的数据当成普通字符串处理还是当成HTML代码来渲染的⼀个问题渲染成html:{{ code|safe }}关闭⾃动转义{% autoescape off%} code{% endautoescape %}打开⾃动转义转义{% autoescape on%} code{% endautoescape %}
案例讲解:

App.views.py

from django.shortcuts import render# Create your views here.
import datetimefrom django.shortcuts import render# 模板
def index(request):data = {'name': 'zhangsan','age': 3,'likes': ['movie', 'game', 'code'],'address': {'city': '深圳', 'province': '广东'},'stars': [['化mm', 'mm云', 'mm克'],['x军', 'mm宏', '一鸣'],['伯格', 'mm茨', 'mm非'],],'dt': datetime.datetime.now(),'code': '<b>I am a good man</b>','code2': '''<script>var n=3;while(n--) {alert('哈哈')}</script>''',}# 下面的写法都可以# return render(request, 'index.html', {**data}) return render(request, 'index.html', data)# 模板继承
# 父模板
def block(request):return render(request, 'block.html')# 子模板
def child(request):return render(request, 'child.html')# 使用模板(HTML+模板语言): 前后端不分离

项目工程下的urls.py

from django.contrib import admin
from django.urls import path
from App.views import *urlpatterns = [path('index/', index),path('block/', block),path('child/', child),path('admin/', admin.site.urls),
]

传参细节:

# 用户列表
def user_list(request):# 获取所有用户数据users = UserModel.objects.all()return render(request, 'user_list.html', {'users': users})

这个是我们之前的写法,相当于传递了一个字典,这是因为数据量比较少,如果数据量比较多,就不能这样传递了,如下:

# 模板
def index(request):data = {'name': 'zhangsan','age': 3,'likes': ['movie', 'game', 'code'],'address': {'city': '深圳', 'province': '广东'},'stars': [['化mm', 'mm云', 'mm克'],['x军', 'mm宏', '一鸣'],['伯格', 'mm茨', 'mm非'],],'dt': datetime.datetime.now(),'code': '<b>I am a good man</b>','code2': '''<script>var n=3;while(n--) {alert('哈哈')}</script>''',}return render(request, 'index.html', data) # 这个就是传递的字典

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Django模板</title>
</head>
<body><h2>Django模板</h2><hr>{#  单行注释  #}{% comment %}多行注释多行注释{% endcomment %}{#   变量     #}<p>name: {{ name }}</p><p>age: {{ age }}</p>{# 处理列表,使用 .  # }<p>likes: {{ likes }}</p><p>likes.1: {{ likes.1 }}</p>{# 字典 键值对 #}<p>address: {{ address }}</p><p>address.city: {{ address.city }}</p><hr><br><br><br><br><br><br><br><br><br><br></body>
</html>

在这里插入图片描述

{#   标签     #}<h3>if语句</h3><h4>if单分支</h4>{% if age < 18 %}<p>{{ name }} 未成年 </p>{% endif %}<h4>if双分支</h4>{% if age < 18 %}<p>{{ name }} 未成年 </p>{% else %}<p>{{ name }} 成年了! </p>{% endif %}<h4>if多分支</h4>{% if age < 18 %}<p>{{ name }} 未成年 </p>{% elif age < 60 %}<p>{{ name }} 是壮年 </p>{% else %}<p>{{ name }} 老年人 </p>{% endif %}<h4>结合运算符</h4>{% if age >= 18 and age < 60 %}<p>{{ name }} 是壮年,风华正茂,小年轻! </p>{% endif %}{% if age < 18 or age >= 60 %}<p>{{ name }} 未成年或者是老年人! </p>{% endif %}{% if 'movie' in likes %}<p> {{ name }} 喜欢movie! </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 }},revcounter0: {{ forloop.revcounter0 }},revcounter: {{ forloop.revcounter }},{% if forloop.first %}<b> - first</b>{% endif %}{% if forloop.last %}<b> - last</b>{% endif %}</p>{% endfor %}<h4>循环嵌套</h4>{#{{ forloop.parentloop 是父亲循环 # }<table border="1" width="400">{% for star in stars %}<tr>{% for s in star %}<td>{{ s }}-{{ forloop.parentloop.counter }} -{{ forloop.counter }}</td>{% endfor %}</tr>{% endfor %}</table>

在这里插入图片描述

    <h4>过滤器</h4><p>age = {{ age }}</p><p>age|add:2 = {{ age|add:2  }}</p><p>age|add:-2 = {{ age|add:-2  }}</p><p>name = {{ name }}</p><p>name|last|lower 是将第一个字符取出来 变成大小写 </p> <p>name|first|upper = {{ name|first|upper }}</p><p>name|last|lower = {{ name|last|lower }}</p><p>title 首字母大写 </p><p>name|title = {{ name|title }}</p><p>truncatechars 截断</p><p>name|truncatechars:7 = {{ name|truncatechars:7 }}</p><p>likes = {{ likes }}</p><p> likes|join:'+'  字符串拼接 </p><p>likes|join:'+' = {{ likes|join:'+' }}</p><p>likes2 = {{ likes2 }}</p><p> default 表示默认值 </p> <p>likes2|default:'swim' = {{ likes2|default:'swim' }}</p><p>日期格式化 </p><p>dt = {{ dt }}</p><p>dt = {{ dt|date:'y-m-d' }}</p><p>dt = {{ dt|date:'Y-m-d' }}</p>

在这里插入图片描述

   <h5>html解析</h5><p>code|safe  表示对其html做解析,也可以执行js</p><p>code = {{ code }}</p><p>code|safe = {{ code|safe }}</p><p>code2 = {{ code2 }}</p>
{#    <p>code2 = {{ code2|safe }}</p> #}{% autoescape on %}{{ code }}{% endautoescape %}

在这里插入图片描述

模板继承:

基础知识:

模板继承block:{% block XXX%} code{% endblock %}extends 继承,写在开头位置{% extends '⽗模板路径' %}include: 加载模板进⾏渲染{% include '模板⽂件' %}{{ block.super }} : 获取⽗模板中block中的内容

view.py

# 模板继承
# 父模板
def block(request):return render(request, 'block.html')# 子模板
def child(request):return render(request, 'child.html')

urls.py

from django.contrib import admin
from django.urls import path
from App.views import *urlpatterns = [path('index/', index),path('block/', block),path('child/', child),path('admin/', admin.site.urls),
]

父模板:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>{#  css  #}{% block extcss %}{% endblock %}</head>
<body><h2>父模板</h2><hr>{% block head %}{% endblock %}<hr>{% block content %}<button>我是Content父模板中的按钮</button>{% endblock %}<hr>{% block foot %}{% endblock %}{#  js  #}{% block extjs %}{% endblock %}</body>
</html>

在这里插入图片描述

自带只需要对父模板进行填充block即可。

{# 继承父模板 #}
{% extends 'block.html' %}{% block head %}<div><button>Head</button></div>
{% endblock %}{% block content %}{#  默认情况下,子模板会覆盖父模板的内容  #}{# 如果想将父模板中block的内容继承,则需要使用block.super #}{{ block.super }}<div><button>Content</button></div>
{% endblock %}{% block foot %}<div><button>Foot</button></div>{#  导入其他模板文件  #}{% include 'child_include.html' %}{% endblock %}

在这里插入图片描述

注意:子模版会默认覆盖父模板,如果想将内容继承过来,则需要使用 {{ block.super }}.

jinja2:

在Django项⽬中使⽤Jinja2模板引擎,Jinja2是之前我们在Flask框架讲过的⼀个模板引擎,是模仿Django默认模板引擎基础上开发的,⽐Django模板引 擎性能更好,功能更全.
jinja2宣称⽐django默认模板引擎快10-20倍。Django也⽀持jinja2

首先需要安装jinja2:

pip install jinja2 -i https://pypi.tuna.tsinghua.edu.cn/simple/

在这里插入图片描述

在这里插入图片描述

from django.templatetags.static import static
from django.urls import reverse
from jinja2 import Environmentdef environment(**options):env = Environment(**options)env.globals.update({'static': static,'url': reverse,})return env

在setting.py做修改:

TEMPLATES = [{"BACKEND": 'django.template.backends.jinja2.Jinja2',"DIRS": [BASE_DIR / 'templates'],"APP_DIRS": True,"OPTIONS": {# 这⾥要添加environment,并指定到jinja2_env⽂件中的environment'environment': 'demo2.jinja2_env.environment',"context_processors": ["django.template.context_processors.debug","django.template.context_processors.request","django.contrib.auth.context_processors.auth","django.contrib.messages.context_processors.messages",],},},# 原来自带的Django模板引擎{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [BASE_DIR / 'templates'],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]

在这里插入图片描述

修改模板语言提示配置:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>Jinja2模板语言</h2><hr><p>name: {{ name }}</p>{% for n in name %}<b>{{ n }}</b>{% endfor %}<hr>{#  不能使用Django语法了   #}{% for n in name %}<div>{{ loop.index }}:{{ n }}</div>{% endfor %}<hr>{#  Jinja2 是可以使用函数调用  #}{% for i in range(1, 4) %}<div>{{ i }}</div>{% endfor %}</body>
</html>

在这里插入图片描述

注意:

在Flask中,传递参数使用关键词传递参数,而Django使用字典传参数。

views.py

from django.shortcuts import render# Create your views here.def index(request):return render(request, 'index.html', {'name': 'zhangsan'})

总结:

通过本文的详细讲解,我们对Django模板的基础知识有了全面的了解。从如何在HTML中显示数据、使用循环和判断语句、应用过滤器等等,我们掌握了丰富的技巧和技能。同时,我们也学习了模板的继承与融合,为构建复杂而灵活的网页奠定了基础。

此外,我们还介绍了如何在Django中配置使用Jinja2语法,为开发者提供了更多的选择和灵感。通过灵活运用这些工具和技术,我们能够创建出更加强大、美观且可维护的Web应用程序。

希望本文能对读者在学习和使用Django模板时提供帮助。掌握了这些知识和技巧,相信你能够更加高效地开发出出色的Web应用。继续深入学习和实践,开拓更广阔的技术领域吧!

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【Git企业实战开发】Git常用开发流操作总结

【Git企业实战开发】Git常用开发流操作总结 大家好 我是寸铁&#x1f44a; 总结了一篇Git常用开发流操作总结的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 现在刚做项目的伙伴&#xff0c;可能你之前学过git&#xff0c;但是一实战发现不熟悉 没关系&#xff0c;看寸铁这篇…

vscode与vue环境配置

一、下载并安装VScode 安装VScode 官网下载 二、配置node.js环境 安装node.js 官网下载 会自动配置环境变量和安装npm包(npm的作用就是对Node.js依赖的包进行管理)&#xff0c;此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号&#xff1a; 配置系统变量 因为在执…

【计算机考研择校】双非跨考推荐院校名单

各个层次计算机考研院校的推荐汇总&#xff1a; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 本人双非科班出身备考408成功上岸&#xff0c;在这里也想给想考408的学弟学妹们一些很中肯的&#xff0c;学习建议。 我是科班水过408的四门课 说实话&am…

C#中的关键字params的用法

C#中有一个关键字params&#xff0c;它相对于一些主要关键字来说&#xff0c;还算是较为低频的&#xff0c;但也会用到。我们可以了解和学习下。 一、定义及约束 params关键字的作用在于可以让方法参数的数目可变。 params的参数类型必须是一维数组。 一旦在方法加入了para…

制造业客户数据安全解决方案(数据防泄密需求分析)

机械行业是历史悠久的工业形式&#xff0c;与国民经济密切相关&#xff0c;属于周期性行业&#xff0c;是我国最重要的工业制造行业之一。即使网络经济与IT信息技术在世界范围内占据主导地位&#xff0c;依然离不开一个发达的、先进的物质基础&#xff0c;而机械行业正是为生成…

Unity编辑器内工程文件重命名|Project视图文件名修改

Unity编辑器内文件重命名 前言大项内容一使用方法代码展示 总结 前言 本文代码可以一键更改Project视图的文件名字 在当前文件名的状态下增加一段字符区分文件。 大项内容一 功能是因为在给其他人导入项目资源时有重复的资源的时候&#xff0c;资源会产生覆盖的问题。所以直…

【前端素材】推荐优质后台管理系统Powerx平台模板(附源码)

一、需求分析 1、定义 后台管理系统是一种用于管理和监控网站、应用程序或系统的在线工具。它通常是通过网页界面进行访问和操作&#xff0c;用于管理网站内容、用户权限、数据分析等。后台管理系统是网站或应用程序的控制中心&#xff0c;管理员可以通过后台系统进行各种管理…

【PyTorch][chapter 16][李宏毅深度学习][Neighbor Embedding][t-SNE]

前言&#xff1a; 前面LLE 讲了两个点在高维空间距离相近&#xff0c;通过降维后也要保持这种关系 但是如果两个点在高维空间距离很远&#xff08;不属于K邻近&#xff09;,降维后有可能叠加在一起了. t-SNE(t-Distributed Stochastic Neighbor Embedding)是一种降维技术&…

ubuntu20配置protobuf 2.5.0

python安装protobuf包 sudo pip2 install protobuf2.5.0github克隆获取安装包 wget https://github.com/protocolbuffers/protobuf/releases/download/v2.5.0/protobuf-2.5.0.tar.gz解压并进入该目录 tar -zxvf Protobuf-2.5.0.tar.gz cd protobuf-2.5.0配置安装环境 sudo …

3.测试教程 - 基础篇

文章目录 软件测试的生命周期软件测试&软件开发生命周期如何描述一个bug如何定义bug的级别bug的生命周期如何开始第一次测试测试的执行和BUG管理产生争执怎么办&#xff08;处理人际关系&#xff09; 大家好&#xff0c;我是晓星航。今天为大家带来的是 测试基础 相关的讲解…

rt-thread 目录结构

移植适配可能需要修改的部分用红色标记&#xff0c;蓝色表示还需继续调查&#xff0c;绿色会在bring up后修改

【PostgreSQL】Windows安装PostgreSQL数据库图文详细教程

Windows安装PostgreSQL数据库图文详细教程 一、前言二、PostgreSQL简介三、软件下载四、安装步骤4.1 安装向导4.2 选择安装目录4.3 选择组件4.4 选择数据存放目录4.5 选择密码4.6 选择端口号4.7 等待安装完成4.8 取消勾选&#xff0c;安装完成 五、启动教程5.1 搜索pgAdmin4&am…

我们有在线社区啦!快来加入一起玩儿~

&#x1f64c;大噶好呀&#xff01;春节假期转瞬即逝&#xff0c;小陈已经正式开工啦&#xff5e;虽然不知道大家啥时候收假&#xff0c;但是 RTE 开发者社区㊗️诸位&#xff1a; &#x1f9e7;&#x1f432;&#x1f647;2024 开工大吉&#x1f647;&#x1f432;&#x1f9…

编译原理第一章概述,文法,语言学习总结

1.编译程序&#xff1a; 翻译程序&#xff0c;源语言翻译为目标语言 C语言 ——>汇编语言 2.逻辑过程 词法分析 语法分析 语义分析 中间代码生成优化 目标代码生成优化 词法分析&#xff1a; 最基本的单词分析出来 语法分析&#xff1a;看组成…

Gradle统一管理依赖

背景 随着项目越来越大&#xff0c;module 越来越多&#xff0c;依赖的库也越来越多&#xff0c;依赖管理也越来越混乱。 我们一般会有以下需求&#xff1a; 1. 项目依赖统一管理&#xff0c;在单独文件中配置 2. 不同 Module 中的依赖版本号统一 管理 Gradle 依赖 说明&a…

通过platform总线驱动框架编写LED灯的驱动,编写应用程序测试,发布到CSDN

效果图 设备树代码 myplatform{compatible "hqyj,myplatform";led1-gpio<&gpioe 10 0>;led2-gpio<&gpiof 10 0>;led3-gpio<&gpioe 8 0>; interrupt-parent <&gpiof>;interrupts<9 0>;reg<0X12345678 …

抖店商家想要抓住2024年第一波流量,你需要这样做!

大家好&#xff0c;我是电商小布。 春节假期结束了&#xff0c;我们的工作也开始走入正轨当中了。 对于停工一段时间的抖店商家来说&#xff0c;想要在年后抓住第一波流量&#xff0c;该怎么做呢&#xff1f; 简单一点说&#xff0c;还是在运营上。 一、检查店铺类目情况 …

数字电路 第一章—第三节(逻辑函数的化简方法)

一、逻辑函数的标准与或式和最简式 1、标准与或表达式 &#xff08;1&#xff09;下图给出了逻辑函数Y的标准与或表达式&#xff0c;在表达式中每一个乘积项都具有标准形式&#xff0c;这种标准形式的乘积项称为最小项。 &#xff08;2&#xff09;最小项是逻辑代数中的一个…

Windows 2008部署

创建虚拟机2008 创建之后实现远程连接 后端部署 然后解压jdk tomcat mysql jdk 配置环境变量 修改JAVA_HOME 变量名&#xff1a;JAVA_HOME 变量值&#xff1a;电脑上JDK安装的绝对路径 修改CLASSPATH 变量名&#xff1a;CLASSPATH 变量值&#xff1a;.;%JAVA…

vue2+element医院安全(不良)事件报告管理系统源代码

目录 安全不良事件类型 源码技术栈 医院安全&#xff08;不良&#xff09;事件报告管理系统采用无责的、自愿的填报不良事件方式&#xff0c;有效地减轻医护人员的思想压力&#xff0c;实现以事件为主要对象&#xff0c;可以自动、及时、实际地反应医院的安全、不良、近失事件…