Dajngo06_Template模板

Dajngo06_Template模板


6.1 Template模板概述

模板引擎是一种可以让开发者把服务端数据填充到html网页中完成渲染效果的技术

静态网页:页面上的数据都是写死的,万年不变

动态网页:页面上的数据是从后端动态获取的(后端获取数据库数据然后传递给前端页面)

对模板引擎的一般支持和Django模板语言的实现都存在于 django.template 命名空间中

Django模板只是一个文本文档或使用Django模板语言标记的Python字符串。一些结构被模板引擎识别和解释,主要的是变量( {{ 变量 }} )和标签( {% 标签 %} )。

Django框架中内置了web开发领域非常出名的一个DjangoTemplate模板引擎(DTL)

DTL官方文档

要在django框架中使用模板引擎把视图中的数据更好的展示给客户端,需要完成3个步骤:

  1. 在项目配置文件中指定保存模板文件的模板目录。一般模板目录都是设置在项目根目录或者主应用目录下。
  2. 在视图中基于django提供的渲染函数绑定模板文件和需要展示的数据变量
  3. 在模板目录下创建对应的模板文件,并根据模板引擎内置的模板语法,填写输出视图传递过来的数据。

6.2. 配置模板

在当前项目根目录下**创建模板templates文件夹.**

image-20230730200835926

在**settings.py配置文件中配置模板,找到TEMPLATES配置项,填写DIRS设置模板目录**

'DIRS': [os.path.join(BASE_DIR, 'templates')],

image-20230730200954919

  • BACKEND:是实现Django模板后端API的模板引擎类的路径。内置是django.template.backends.django.DjangoTemplates和 django.template.backends.jinja2.Jinja2(使用这个需要额外安装jinja2库)
  • DIRS :按搜索顺序定义引擎应该查找模板源文件的目录列表
  • APP_DIRS:告诉引擎是否应该在已安装的应用程序中查找模板,每个后端为其模板应存储在的应用程序内的子目录定义一个常规名称。
  • OPTIONS:包含后端特定的设置

6.3 模板引擎语法

Django模板语言的语法主要涉及四个构造:变量、标签、过滤器、注释

6.3.1 变量

​ 一个变量从上下文中输出一个值,这是一个类似字典的对象将键映射到值。

变量需要使用 两对{{ 变量 }} 包裹

语法:{{ 变量名 }}

  1. 变量名称由:字母、数字、下划线组成
  2. 注意不能以下划线(_)开头
  3. 变量名称中不能包含空格或标点符号(特殊符号. 除外)

案例:

在试图函数中,我有以下几个变量想要渲染到页面上

    name = "张三"age = 22lists = [1, 2, 3, '法外狂徒']dicts = {'name': '迪丽热巴', 'age': 22}

现在我需要将以上几个变量渲染展示在网页中,应该怎样写?

之前我们学习到想要返回一个页面使用 render,其实 render中可以传递一个参数,供网页使用

def index_te(request):name = "张三"age = 22lists = [1, 2, 3, '法外狂徒']dicts = {'name': '迪丽热巴', 'age': 22}return render(request, 'index_te.html', {'name': name,'age': age, 'lists': lists,'dicts': dicts})

在html网页中使用如下:

渲染单个变量

<p>{{name}}</p>
<p>{{age}}</p>
<p>{{lists}}</p>
<p>{{dicts}}</p>

image-20230731023052427

遍历列表 lists

{% for i in lists %}
<p>{{ forloop.counter }} -- {{ i }}</p>
{% endfor %}

image-20230731024012378

遍历字典 dicts

{% for key,value in dicts.items %}
<p>{{key}}:{{value}}</p>
{% endfor %}

image-20230731024305524

我们在这里使用了 for 循环,其实在django的Template模板中的标签

深度查询

比如:

[1, 2, 3, 4, 5, 6, 7, ['a', 'b', 'c', [1, 'xx', 3]]]

image-20230731235943922

我需要在页面中取出 xx 这个数据,应该怎样取?

<p>深度查询:{{sd.7.3.1}}</p>

image-20230801000134321

通过句点符号 . 深度查询(执行函数也是如此)

6.3.2 标签

​ 标签在渲染过程中提供任意的逻辑。比如我们在刚才使用的 for 标签

详细的 Template 标签如下链接

Template 标签参考

  1. 基本语法:{% 代码 %}

在使用某些标签时需要同时使用开头和结尾标签,比如:if 和 for

{% for %} 代码 {% endfor %}

在使用时可以加上 无参数标签 csrf_token

这个标签是用于html进行 form 表单提交时,包含一个 随机变化的字符串

作用是用于防止跨域攻击

{% csrf_token %}
{% cycle 'odd' 'even' %}
  1. 常用标签

Django模板中比较常用的几个标签:

  • if标签:用于逻辑判断
  • for标签:用于循环遍历
  • autoescape标签:自动转义
  • url标签:定义链接
  • now标签:显示当前时间

if标签案例:

image-20230731234407761

在页面上去判断age是否大于10

<!--判断,如果age大于10,-->
{% if age > 10 %}
<!--变量与判断的内容 这里必须有空格-->
<p>age大于10</p>
{% else %}
<p>age太小了</p>
{% endif %}

如果没有空格,那么就会报错

image-20230731234706128

image-20230731234655962

6.3.3 过滤器

Django模板内置了过滤器

过滤器,就是按照某种格式或者要求进行过滤

语法:

{{ name | 过滤器名称 : 过滤器参数 }}

| 字符表示串联管道,用于将变量和过滤器串联起来

如:

{{ value | add :"2"}}

这个过滤器将首先尝试将两个值强制转为整数。如果失败了,它将尝试将两个值加在一起。这对某些数据类型(字符串、列表等)有效,而对其他类型则失败。如果失败,结果将是一个空字符串。

如果 value =4

那么将输出 6

如:

{{ first|add:second }}

first[1, 2, 3] 并且 second[4, 5, 6],则输出为 [1, 2, 3, 4, 5, 6]

一些常用的过滤器:

过滤器含义用法
date日期格式化{{ value | date:“Y-m-d H:M:S” }}
defualt当变量没有值的情况下, 系统输出默认值{{ value | default=“默认值” }}
length获取数据的长度{{ value | length}}
random随机返回列表中的数{{ list | random }}
safe让系统不要对内容中的html代码进行实体转义(将字符正常显示){{ htm l content | safe}}
striptags去除html标签{{ value|striptags }}
truncatechars如果一个字符串的长度超过指定的字符数,则截断它。截断后的字符串将以一个可翻译的省略号(“…”)结束。{{ value|truncatechars:7 }}
add两数相加{{ value|add:“2” }}

案例:

def filter_ts(request):"""过滤器 filters"""content = "<a href='https://www.cqeec.com/rjxy/'>重庆信息技术职业学院-软件学院</a>"# content1 = '<script>alert(1);</script>'from datetime import datetimenow = datetime.now()content2 = "hello wrold!"return render(request, "filter_ts.html", locals())
{{ content | safe }}
{{ content1 | safe }}
<hr>{# 过滤器本质就是函数,但是模板语法不支持小括号调用,所以需要使用:号分割参数 #}
<p>{{ now | date:"Y-m-d H:i:s" }}</p>
<p>{{ conten1 | default:"默认值" }}</p>
<hr>
{# 一个数据可以连续调用多个过滤器 #}
<p>{{ content2 | truncatechars:6 | upper }}</p>

image-20230801003418542

6.3.4 自定义过滤器

虽然官方已经提供了许多内置的过滤器给开发者,但是很明显,还是会有存在不足的时候。

例如:希望输出用户的手机号码:13512345678 显示:135*****678.

这时我们就需要自定义过滤器。

自定义模板标签和过滤器参考

要声明自定义过滤器步骤:

  1. 当前使用和声明过滤器的子应用必须在setting.py配置文件中的INSTALLED_APPS中注册了!!!

image-20230801003810131

  1. 创建**templatetags(必须包含__init__.py)** 目录,与 models.pyviews.py 等同级

image-20230801004311020

  1. 在包目录下创建任意py文件,用于自定义过滤器

image-20230801004415572

  1. **my_filters**模块必须包含一个名为 register 的模块级变量,它是一个 template.Library 实例(固定写法)
from django import template
register = template.Library()
  1. 编写自己想要的过滤器规则
# 自定义过滤器-用于隐藏电话号码
@register.filter("mobile")
def mobile(content):return content[:3] + "*****" + content[-3:]
  1. 在需要使用的模板文件中顶部使用load标签加载过滤器文件my_filters.py
{% load my_filters %}

具体使用:

自定义过滤器 my_filters.py

image-20230801005133070

视图函数 my_filters.py

image-20230801005116184

templates 模板中使用:

image-20230801005340791

实现效果:

image-20230801005350537

6.3.5 自定义标签

自定义标签实现步骤和自定义过滤器一样,只是注册的写法不同

# 自定义过滤器
@register.filter# 自定义标签
@register.simple_tag

6.3.6 模板继承

模板继承可以让我们多个html页面继承同一个页面(也就是父页面),让我们页面布局更加统一。

比如:网页的头部和尾部内容一般都是一致的,我们就可以通过模板继承来实现复用。

传统的模板分离技术,依靠{% include “模板文件名”%} 实现,将页面嵌入到另一个页面中。

虽然达到了页面代码复用的效果,但是由此也会带来大量的碎片化模板,导致维护模板的成本上升。

所提Django框架中除了提供这种模板分离技术以外,还并行的提供了 模板继承给开发者.

父模板用于放置可重复利用的内容,子模板继承父模板的内容,并放置自己的内容。

{% include "模板文件名"%}  # 模板嵌入
{% extends "base.html" %} # 模板继承 

6.3.6.1 继承父模板中公共内容

先来定义一个 base 父模板 templates/base.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>base父模板</title>
</head>
<body><h1>base.html的头部</h1><h1>base.html的内容</h1><h1>base.html的脚部</h1>
</body>
</html>

定义视图 app01/views.py:

def extends_tp(request):"""模板继承"""return render(request,'extends_tp.html',locals())

设置路由 app01/urls.py:

    re_path('extends_tp/',views.extends_tp)

定义子模版 templates/extends_tp.html

<!--继承父模板 base.html-->
{% extends "base.html" %}

运行:

image-20230801234936017

6.3.6.2 子模版改写父模板

{%block %} 子模版重写父模板内容 {%endblock%}

{{block.super}} # 使用父模板内容

标签 block…endblock: 是父模板中的预留区域,该区域留给子模板填充差异性的内容,不同预留区域名字不能相同。

{% block 名称 %} 
预留给子模板的区域,可以设置设置默认内容
{% endblock 名称 %}

子模板如果没有设置父模板预留区域的内容,则使用在父模板设置的默认内容,当然也可以都不设置,就为空。

子模板设置父模板预留区域的内容:

{ % block 名称 % }
内容 
{% endblock 名称 %}

重新定义一个 base 父模板 templates/base1.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> {%block title %} base1父模板 {% endblock %}</title>
</head>
<body><h1>base1.html的头部</h1>{% block content %}<h1>base1.html的内容</h1>{% endblock %}<h1>base1.html的脚部</h1></body>
</html>

定义视图 app01/views.py:

def extends_tp1(request):"""子模板重写父模板内容"""return render(request, 'extends_tp1.html', locals())

设置路由 app01/urls.py:

    re_path('extends_tp1/',views.extends_tp1),

定义子模版 templates/extends_tp1.html

<!--继承父模板 base.html-->
{% extends "base1.html" %}
{% block title %} extends_tp1.html的标题 {% endblock  %}
{% block content %}{{ block.super }} {# 父级模板同名block标签的内容 #}<h1>extends_tp1.html的独立内容</h1>{{ block.super }}
{% endblock %}

运行:

image-20230802004504791

注意事项:

  • 如果你在模版中使用 {% extends %} 标签,它必须是模版中的第一个标签(不然会报错)。

  • 在base模版中设置越多的 {% block %} 标签越好。请记住,子模版不必定义全部父模版中的blocks,所以,你可以在大多数blocks中填充合理的默认内容,然后,只定义你需要的那一个。多一点钩子总比少一点好。

  • 为了更好的可读性,你也可以给你的 {% endblock %} 标签一个 名字 。例如:

    {% block content %}{% endblock content %}
    

    ,在大型模版中,这个方法帮你清楚的看到哪一个  {% block %}` 标签被关闭了。

  • 不能在一个模版中定义多个相同名字的 block 标签。

  • 如果需要从父模板中获取块的内容,则使用 {{ block.super }}

6.4 静态文件

​ 主要是使用 css、javascript和图片文件。

开发中在开启了debug模式时,django可以通过配置,允许用户通过对应的url地址访问django的静态文件。

主应用setting.py配置:

STATIC_URL = '/static/'  # django模板中,可以引用{{STATIC_URL}}变量避免把路径写死。
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')
]

总路由配置(主应用路由设置):

    # 对外提供访问静态文件的路由,serve_static 是django提供静态访问支持的映射类。依靠它,客户端才能访问到django的静态文件。path(r'static/<path:path>', server_static, {'document_root': settings.STATICFILES_DIRS})

总路由配置可不写

注意:项目上线以后,关闭debug模式时,django默认是不提供静态文件的访问支持,项目部署的时候,我们会通过收集静态文件使用nginx这种web服务器来提供静态文件的访问支持。

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

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

相关文章

车载网络扫盲

目录 车载以太网发展技术 车载网络通信架构与拓扑 车载网络的车载网关 车载网络通信协议 二层确定性以太网协议 二层车载网络扩展协议 三层安全加密协议 四层应用通信协议 车载网络通信架构的网络安全 车载以太网发展技术 车载网络技术包括车载影音娱乐和车载导航需要的MOST&am…

Java多线程篇(1)——深入分析synchronized

文章目录 synchronized原理概述锁升级 初始状态偏向锁偏向锁获取/重入偏向锁的撤销/重偏向和升级批量重偏向和批量偏向撤销偏向锁的释放 轻量级锁轻量级锁获取/重入轻量级锁膨胀轻量级锁释放 重量级锁重量级锁获取/重入重量级锁释放重量级锁的降级 其他锁粗化、锁消除调用hashc…

IDEA(2023)修改默认缓存目录

&#x1f607;作者介绍&#xff1a;一个有梦想、有理想、有目标的&#xff0c;且渴望能够学有所成的追梦人。 &#x1f386;学习格言&#xff1a;不读书的人,思想就会停止。——狄德罗 ⛪️个人主页&#xff1a;进入博主主页 &#x1f5fc;专栏系列&#xff1a;无 &#x1f33c…

OSCP系列靶场-Esay-Vegeta1保姆级

OSCP系列靶场-Esay-Vegeta1保姆级 目录 OSCP系列靶场-Esay-Vegeta1保姆级总结准备工作信息收集-端口扫描目标开放端口收集目标端口对应服务探测 信息收集-端口测试22-SSH端口的信息收集22-SSH端口版本信息与MSF利用22-SSH协议支持的登录方式22-SSH手动登录尝试(无)22-SSH弱口令…

二叉树顺序存储结构

目录 1.二叉树顺序存储结构 2.堆的概念及结构 3.堆的相关接口实现 3.1 堆的插入及向上调整算法 3.1.1 向上调整算法 3.1.2 堆的插入 3.2 堆的删除及向下调整算法 3.2.1 向下调整算法 3.2.2 堆的删除 3.3 其它接口和代码实现 4.建堆或数组调堆的两种方式及复杂度分析…

使用 Python 来创建一个基本的命令行密码管理器

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 目录 密码管理器项目简介…

长亭雷池社区版本安装与使用

0x01 雷池介绍 一款足够简单、足够好用、足够强的免费 WAF。基于业界领先的语义引擎检测技术&#xff0c;作为反向代理接入&#xff0c;保护你的网站不受黑客攻击。核心检测能力由智能语义分析算法驱动&#xff0c;专为社区而生&#xff0c;不让黑客越雷池半步。 官方网址&…

【Linux】多线程互斥与同步

文章目录 一、线程互斥1. 线程互斥的引出2. 互斥量3. 互斥锁的实现原理 二、可重入和线程安全三、线程和互斥锁的封装1. 线程封装1. 互斥锁封装 四、死锁1. 死锁的概念2. 死锁的四个必要条件3. 避免死锁 五、线程同步1. 线程同步的理解2. 条件变量 一、线程互斥 1. 线程互斥的…

卷积网络:实现手写数字是识别50轮准确率97.3%

卷积网络&#xff1a;实现手写数字是识别50轮准确率 1 导入必备库2 torchvision内置了常用数据集和最常见的模型3 数据批量加载4 绘制样例5 创建模型7 设置是否使用GPU8 设置损失函数和优化器9 定义训练函数10 定义测试函数11 开始训练12 绘制损失曲线并保存13 绘制准确率曲线并…

机器人连续位姿同步插值轨迹规划—对数四元数、b样条曲线、c2连续位姿同步规划

简介&#xff1a;Smooth orientation planning is benefificial for the working performance and service life of industrial robots, keeping robots from violent impacts and shocks caused by discontinuous orientation planning. Nevertheless, the popular used quate…

学习记忆——方法篇——连锁拍照、情景故事和逻辑故事法

三大方法速记这些内容 1、连锁拍照法速记重要事件 2、情景故事速记速记购物信息 3、逻辑故事法速记客户档案 一、连锁拍照法速记重要事件 例&#xff1a;女朋友在出差之前嘱咐男朋友几件事 1、把房间收拾干净&#xff0c;最重要的是要把书架整理了&#xff0c;垃圾倒了 2、记…

Spring+MyBatis使用collection标签的两种使用方法

目录 项目场景&#xff1a; 实战操作&#xff1a; 1.创建菜单表 2.创建实体 3.创建Mapper 4.创建xml 属性描述&#xff1a; 效率比较&#xff1a; 项目场景&#xff1a; 本文说明了Spring BootMyBatis使用collection标签的两种使用方法 1. 方法一: 关联查询 2. 方法…

学习Bootstrap 5的第九天

目录 列表组 基础的列表组 实例 活动的列表项 实例 禁用的列表项 实例 链接列表项 实例 移除列表边框 实例 带编号的列表组 实例 水平列表组 实例 多种颜色列表项 实例 多种颜色的链接列表项 实例 带徽章的列表组 实例 列表组案例 实例一 实例二 列表组…

连nil切片和空切片一不一样都不清楚?那BAT面试官只好让你回去等通知了。

连nil切片和空切片一不一样都不清楚&#xff1f;那BAT面试官只好让你回去等通知了。 问题 package mainimport ("fmt""reflect""unsafe" )func main() {var s1 []ints2 : make([]int,0)s4 : make([]int,0)fmt.Printf("s1 pointer:%v, s2 p…

NLP机器翻译全景:从基本原理到技术实战全解析

目录 一、机器翻译简介1. 什么是机器翻译 (MT)?2. 源语言和目标语言3. 翻译模型4. 上下文的重要性 二、基于规则的机器翻译 (RBMT)1. 规则的制定2. 词典和词汇选择3. 限制与挑战4. PyTorch实现 三、基于统计的机器翻译 (SMT)1. 数据驱动2. 短语对齐3. 评分和选择4. PyTorch实现…

本地MQTT服务器搭建(EMQX)

一、下载EMQX 下载地址&#xff1a;EMQ (emqx.com) 打开官网后&#xff0c;选择右边的免费试用按钮 然后单击EMQX Enterprise标签&#xff0c;然后选择下面的EMQX开源版&#xff0c;选择开源版的系统平台为Windows&#xff0c;单击免费下载。 在新页面下单击立即下载 二、安装…

Kotlin(六) 类

目录 创建类 调用类 类的继承------open 构造函数 创建类 创建类和创建java文件一样&#xff0c;选择需要创建的目录New→Kotlin File/Class Kotlin中也是使用class关键字来声明一个类的&#xff0c;这一点和Java一致。现在我们可以在这个类中加入字段和函数来丰富它的功…

循环语句详解

文章目录 循环语句详解1. 循环使用 v-for 指令2. v-for 还支持一个可选的第二个参数&#xff0c;参数值为当前项的索引3. 模板template 中使用 v-for4. v-for 迭代对象-第一个参数为value5. v-for的第二个参数为键名6. v-for的第三个参数为索引7. v-for迭代整数8. computed计算…

leetcode 第454题.四数相加II

给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 454. 四数相加 II - 力扣&#xff08;LeetCode&#xf…

大型语言模型,第 1 部分:BERT

一、介绍 2017是机器学习中具有历史意义的一年&#xff0c;当变形金刚模型首次出现在现场时。它在许多基准测试上都表现出色&#xff0c;并且适用于数据科学中的许多问题。由于其高效的架构&#xff0c;后来开发了许多其他基于变压器的模型&#xff0c;这些模型更专注于特定任务…