Django基础4——模板系统

news/2025/1/1 8:53:45/

文章目录

  • 一、基本了解
    • 1.1 引用变量
    • 1.2 全局变量
  • 二、if判断
    • 2.1 语法
    • 2.2 案例
  • 三、for循环
    • 3.1 语法
    • 3.2 案例
    • 3.3 forloop变量
    • 3.4 容错语句
  • 四、过滤器
    • 4.1 内置过滤器
    • 4.2 自定义过滤器
  • 五、模板继承
  • 六、模板导入
  • 七、引用静态文件

一、基本了解

概念：

  • Django模板系统，用于自动渲染一个文本文件，一般用于HTML页面。模板引擎渲染的最终HTML内容返回给客户端浏览器。
  • 模板文件有两部分组成：
    • 静态部分，例如html、css、js
    • 动态部分，django模板语言，类似于jinja语法

1.1 引用变量

Django中的变量：

  • 在函数视图render中的context传入，类似于字典对象。
  • 变量在模板中引用格式：{{ key }}

1.测试代码。

#######################################################
1、编写url路由规则，devops/urls.py文件。
from django.urls import re_path
from devops import views
urlpatterns = [re_path('^hello/$',views.hello)
]
#######################################################
2、编写视图函数，devops/views.py文件。
from django.shortcuts import render
def hello(request):user = {'name': '卿君', 'property': {'sex': '男', 'age': 25}}return render(request, 'user.html', {'user': user})       ##这里将字典中的key传给html模板进行渲染。
#######################################################
3、编写html模板，templates/user.html文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body>
传递过来的字典: {{ user }}<br>    ##引用视图render中的key
姓名: {{ user.name }}<br>        ##单独取出字典中的key
性别: {{ user.property.sex }}<br>        ##递归取值。
年龄: {{ user.property.age }}<br>
</body>
</html>

2.访问网页，验证效果。
在这里插入图片描述

1.2 全局变量

  • 适用于每个页面都显示出来的前端页面。
  • 比如博客中不管点到哪个页面去，右上角都会显示用户头像。这时的用户头像这个接口视图函数就可以引用全局变量，不然就需要在每个视图中添加头像的这块代码。

1.没使用全局变量效果。要在需要能显示头像的视图里添加render对html进行渲染再返回给浏览器。
在这里插入图片描述
2.使用全局变量效果。

###############################################
1、项目根目录devops下创建contexts.py文件，编写全局变量。
def user(request):user = 'qingjun'return {'user':user}
###############################################
2、django配置文件setting.py中添加此处理器。###############################################
3、在html模板中引用全局变量，此时不需要再在视图中添加代码了，可以直接引用了。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body>
用户登录：{{ login_user }}<br>
传递过来的字典: {{ user }}<br>
姓名: {{ user.name }}<br>
性别: {{ user.property.sex }}<br>
年龄: {{ user.property.age }}<br>
{{ user }}            ##引用全局变量。
</body>
</html>

在这里插入图片描述
在这里插入图片描述

二、if判断

类型操作符
比较操作符== 等于
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于
逻辑操作符and 与
or 或
成员操作符not 逻辑否定
in 包含在内

2.1 语法

1.通用语法，配合操作符使用。

{% if <表达式> %}<内容块>
{% elif <表达式> %}<内容块>
{% else %}<内容块>
{% endif %}

2.特有语法，省略操作符使用。

########################################################
##相等执行内容块
{% ifequal <值1> <值2> %}    # 等同于{% if <值1> == <值2> %} <内容块>
{% endifequal %}########################################################
##不相等执行内容块
{% ifnotequal <值1> <值2> %}<内容块>
{% endifnotequal %}

2.2 案例

  • 在html模板中添加if判断逻辑，其他文件内容与之前一样，这里直接复制过来了。

1.通用语法编写。

#######################################################
1、编写url路由规则，devops/urls.py文件。
from django.urls import re_path
from devops import views
urlpatterns = [re_path('^hello/$',views.hello)
]
#######################################################
2、编写视图函数，devops/views.py文件。
from django.shortcuts import render
def hello(request):user = {'name': '卿君', 'property': {'sex': '男', 'age': 25}}return render(request, 'user.html', {'user': user})       ##这里将字典中的key传给html模板进行渲染。
#######################################################
3、编写html模板，templates/user.html文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body>
传递过来的字典: {{ user }}<br>    ##引用视图render中的key
{% if user.property.age == 25 %}匹配正确
{% else %}匹配错误
{% endif %}
</body>
</html>

在这里插入图片描述
2.省略操作符编写。

##其他文件内容操持不变，只需修改templates/user.html文件模板代码。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body>
传递过来的字典: {{ user }}<br>    ##引用视图render中的key
{% ifequal user.property.age 22 %}匹配正确
{% else %}匹配错误
{% endifequal %}
</body>
</html>

在这里插入图片描述

三、for循环

  • 一般用于遍历数据类型的元素进行处理，例如列表。

3.1 语法

{% for <变量> in <序列> %}<内容块> 
{% endfor %}

3.2 案例

1.示例代码。

#######################################################
1、编写url路由规则，devops/urls.py文件。
from django.urls import re_path
from devops import viewsurlpatterns = [re_path('^hello/$',views.hello)
]#######################################################
2、编写视图函数，devops/views.py文件。
def hello(request):user = { 'qingjun': {'name': '卿君', 'sex': '男', 'age': 33, 'lable':['教育','老师']},'zhaoyong': {'name': '赵勇', 'sex': '男', 'age': 25, 'lable':['教育','助教']},'wangqing': {'name': '忘情', 'sex': '女', 'age': 28, 'lable':['教育','班主任']},}return render(request, 'user.html', {'user': user})#######################################################
3、编写html模板，templates/user.html文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body>##遍历循环取出字典中的key
{% for k in user %}<li>{{ k }}</li>    ##列表形式展示内容。
{% endfor %}##生成一个表单
<table border="1">      ##此为标题头。     <thead><tr><th>用户名</th><th>姓名</th><th>性别</th><th>年龄</th><th>标签</th></tr></thead><tbody>           ##此为表但内容，遍历循环取出字典中的key-value进行填充。{% for k,v in user.items %}<tr><td>{{ k }}</td><td>{{ v.name }}</td><td>{{ v.sex }}</td><td>{{ v.age }}</td><td>{% for i in v.lable %}<li>{{ i }}</li>{% endfor %}</td></tr>{% endfor %}</tbody></body>
</html>

2.验证效果。
在这里插入图片描述

3.3 forloop变量

  • forloop是在{% for %}标签中生成的变量，用于获取当前循环进展信息。
变量描述
forloop.counter循环计数器，当前循环的索引从1开始
forloop.counter0循环计数器，当前循环的索引从0开始
forloop.revcounter当前循环倒数计数，最后一次循环为1，反向计数
forloop.revcounter0当前循环倒数计数，最后一次循环为0，反向计数
forloop.first当前循环为第一个循环时，该变量为True
forloop.last当前循环为最后一个循环时，该变量为True
forloop.parentloop再嵌套循环中，指向当前循环的上级循环

1.前端显示循环索引，从1开始计数。

##紧接3.2示例，只需修改templates/user.html模板内容，修改内容如下。{% for k in user %}{{ forloop.counter }}    ##添加此行<li>{{ k }}</li>
{% endfor %}

在这里插入图片描述
2.前端显示循环索引，从0开始计数。

##紧接3.2示例，只需修改templates/user.html模板内容，修改内容如下。{% for k in user %}{{ forloop.counter0 }}    ##添加此行<li>{{ k }}</li>
{% endfor %}

在这里插入图片描述

3.4 容错语句

  • for…empty 当循环的序列为空时，执行empty下面的内容。

语法：

{% for <变量> in <序列> %}<遍历>
{% empty %}<代码块>
{% endfor %}

1.正常循环时，不会执行empty语句。

##紧接3.2示例，只需修改templates/user.html模板内容，修改内容如下。
{% for k in user %}<li>{{ k }}</li>
{% empty %}循环错误，请检查
{% endfor %}

在这里插入图片描述

2.循环错误时，执行empty语句。

##紧接3.2示例，只需修改templates/user.html模板内容，修改内容如下。
{% for k in user1 %}    ##视图中没有user1，会遍历错误。<li>{{ k }}</li>
{% empty %}循环错误，请检查
{% endfor %}

在这里插入图片描述

四、过滤器

4.1 内置过滤器

  • 过滤器：在变量被显示前修改值的一种方法。常用于服务端返回给浏览器数据之前，修改数据。
  • 语法：{{ value | 过滤器:参数 }}
过滤器说明示例
add将两个值转换为整数相加{{ 11 | add:“6” }} 结果 17
cut切除字符。从给定字符串中删除arg的所有值。{{ “hello world” | cut:“w” }} 结果 hello orld
default如果值的计算结果为 False，则使用给定的默认值。
否则，使用该值。		{{ “” | default:“hello world” }} 结果 hello world
first返回第一个元素{{ “hello world” | first }} 结果 h
last返回最后一个元素{{ “hello world” | last }} 结果 d
join使用字符串连接列表，如Python的 str.join(list){{ abc | join:“,” }} 结果 1,2,3 # abc = [1,2,3]
length返回值的长度。这适用于字符串和列表{{ “hello world” | length }} 结果 11
lower将字 符串转换为小写{{ “AAA” | lower }} 结果 aaa
upper将字符串转换为大写{{ “aaa” | upper }} 结果 AAA
slice切片, 类似于Python中的切片操作。{{ “hello world” | slice:“2:” }} 结果 llo world
title所有单词首字母大写{{ “aaa” | title }} 结果 Aaa
truncatechars如果长度大于指定的字符数，则截断字符串。
截断的字符串将以可翻译的省略号序列（“…”）结束		{{ “hello world” |truncatechars:2 }} 结果 h…
filesizeformat将该值格式化为“人类可读”文件大小（即 ‘13 KB‘，‘4.1 MB‘，‘102 bytes‘ 等）。{{ 10000 | filesizeformat }} 结果 9.8 KB
floatformat当不带参数时，将一个浮点数舍入到小数点后一位，但前提是要显示一个小数部分。{{ 1.33333333 | floatformat }} 结果 1.3 ,
floatformat:2 指定保留的小数位数

1.测试代码

#######################################################
1、编写url路由规则，devops/urls.py文件。
from django.urls import re_path
from devops import viewsurlpatterns = [re_path('^hello/$',views.hello)
]#######################################################
2、编写视图函数，devops/views.py文件。
def hello(request):login_user = "zhangsan"return render(request, 'user.html', {'login_user': login_user})#######################################################
3、编写html模板，templates/user.html文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body>用户登录：{{ login_user }}<br>
返回第一个元素：{{ login_user | first }}<br>
返回字符串长度：{{ login_user | length }}<br>
转为大写：{{ login_user | upper }}<br></body>
</html>

2.验证效果。
在这里插入图片描述

4.2 自定义过滤器

1.在app下创建templatetags目录，该目录下创建__init__.py和filters.py文件，并且该app必须在INSTALLED_APPS中进行安装。
在这里插入图片描述
2.在filters.py文件自定义过滤器函数。

from django.template import Library
register = Library() # 注册过滤器对象@register.filter #通过装饰注册自定义过滤器
def func(n):return n / 2

3.在模板中使用自定义过滤器。

#######################################################
1、编写根url路由规则，devops/urls.py文件。
from django.urls import path,includeurlpatterns = [path('apm/', include('apm.urls')),
]
#######################################################
2、编写子url路由规则，devops/apm/urls.py文件。
from django.urls import path
from apm import viewsurlpatterns = [path('qingjun/', views.wuhan),
]
#######################################################
3.编写子视图函数，devops/apm/views.py文件。
from django.shortcuts import render
def wuhan(request):login_user = "zhangsan"return render(request,'user.html',{'login_user':login_user})#######################################################
4、编写html模板，并在模板中引用自定义过滤器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body>{% load filters %}   ##添加这两行，表示引用自定义过滤器。
{{ 123 | func }}     ##传入参数123，并调用函数func,，最后返回给前端。</body>
</html>

在这里插入图片描述

五、模板继承

  • 模板继承主要是为了提高代码重用，减轻开发人员的工作量。
  • 典型应用：网站的头部、尾部信息。

1.定义母板，这个页面存放整个网站共用的内容。

##添加母版文件templates/base.html。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>母板</title><style>.nav {background-color: chartreuse;color: black;}.context {background-color: orangered;color: black;}.footer {background-color: rebeccapurple;color: black;}</style>
</head>
<body><div class="nav"><h1>头部区域</h1>
</div><div class="context"><h1>内容区域</h1>
</div><div class="footer"><h1>底部区域</h1>
</div></body>
</html>

2.在母板里添加，预留子模板差异化内容，语法为{% block 名称 %} 预留区域 {% endblock %}

##修改母版文件templates/base.html”内容区域“代码。
<div class="context">{% block context %}{% endblock %}    ##添加此行。
{#    <h1>内容区域</h1>#}
</div>

3.子模板继承这个母版，语法为{% extends ‘base.html’ %}。在子模板里同样语法引用并填充预留区域内容。

############################################################
##在平台首页html模板添加母板。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网站首页</title>
</head>
<body>
{% extends 'base.html' %}    ##添加此行，引用母板base.html{% block context %}<h1>博客首页</h1>       ##正常写中间区域要展示的代码。
{% endblock %}
</body>
</html>############################################################
##在登录页面html模板添加母板。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>平台登陆</title>
</head>
<body>
{% extends 'base.html' %}
{% block context %}<h1>欢迎访问DevOps系统</h1><form action="{% url 'login' %}" method="post">用户名：<input type="text" name="username"><br>密码：<input type="text" name="password"><br><button type="submit">登录</button><span style="color:red;">{{ msg }}</span></form>
{% endblock %}
</body>
</html>

4.验证效果。
在这里插入图片描述
在这里插入图片描述

六、模板导入

  • 导入一个模板（一般是某个网页功能）到当前模板。

1.将一个功能创建为模板，templates/text.html为功能模板。

<style>.hello {background-color: red;}
</style><div class="hello">子模板
</div>

2.将功能模板导入到子模版中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网站首页</title>
</head>
<body>
{% extends 'base.html' %}
{% block context %}<h1>博客首页</h1>{% include "text.html" %}     ##添加此行导入。
{% endblock %}
</body>
</html>

3.验证效果。
在这里插入图片描述

七、引用静态文件

  • 一般需要引用静态文件展示在前端，比如引用图片。

1.项目同级目录下创建static目录，下面存放静态文件。并在django配置文件中指定静态文件的绝对路径。

##settings.py文件末尾添加以下内容。
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),
)
STATIC_URL = '/static/'    ##django默认静态文件存放目录。

在这里插入图片描述
2.在模板文件引用静态文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网站首页</title>
</head>
<body>
{% extends 'base.html' %}
{% block context %}<h1>博客首页</h1><img src="/static/jpg/2.jpg" alt="">    ##添加此行，指定静态文件相对路径。{#    <img rel="stylesheet" src="/static/jpg/2.jpg">#}    ##第二种写法。{#    {% load static %}#}     ##第三种写法，读取静态文件目录，再拼接文件路径。{#    <img rel="stylesheet" src="{% static 'jpg/3.jpg' %}">#}
{% endblock %}</body>
</html>

3.访问网页，验证效果，图片已被引用出来。
在这里插入图片描述


http://www.ppmy.cn/news/1061571.html

相关文章

【ES5】—ES5中类与继承

【ES5】—ES5中类与继承

一、如何定义类 类的首字母要大写&#xff0c;用于识别出与普通函数的不同 // 类 构造函数 function People () {this.name xiaoxiaothis.age 18 } // 实例化对象 let p1 new People()二、动态属性和方法 1. 动态属性再构造函数里面定义 // 类 function People (name, …
阅读更多...
❤ Ant Design Vue 2.28的使用

❤ Ant Design Vue 2.28的使用

❤ Ant Design Vue 2.28 弹窗 //按钮 <a-button type"primary" click"showModal">Open Modal</a-button>//窗口 <a-modal v-model:visible"visible" title"Basic Modal" ok"handleOk"><p>Some con…
阅读更多...
计算机竞赛 基于大数据的时间序列股价预测分析与可视化 - lstm

计算机竞赛 基于大数据的时间序列股价预测分析与可视化 - lstm

文章目录 1 前言2 时间序列的由来2.1 四种模型的名称&#xff1a; 3 数据预览4 理论公式4.1 协方差4.2 相关系数4.3 scikit-learn计算相关性 5 金融数据的时序分析5.1 数据概况5.2 序列变化情况计算 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &…
阅读更多...
Qt 打开文件列表选择文件，实现拖拽方式打开文件

Qt 打开文件列表选择文件，实现拖拽方式打开文件

1. 实现打开文件列表选择文件 1.1. 创建 Qt 工程&#xff0c;并添加几个简单控件 这里笔者选用的是 QMainWindow&#xff0c;创建好工程后在 ui 界面设计中添加 QLineEdit、QPushBtton至少这两个控件&#xff0c;如下图摆放。 1.2. 头文件中添加相关操作 在 mainwindow.h 中…
阅读更多...
研磨设计模式day09原型模式

研磨设计模式day09原型模式

目录 场景 代码实现 有何问题 解决方案 代码改造 模式讲解 原型与new 原型实例与克隆出来的实例 浅度克隆和深度克隆 原型模式的优缺点 思考 何时选用&#xff1f; 相关模式 场景 代码实现 定义订单接口 package com.zsp.bike.day08原型模式;/*** 订单的接口*…
阅读更多...
大数据时代的软件开发实践：利用云计算和AI赋能创新

大数据时代的软件开发实践：利用云计算和AI赋能创新

文章目录 云计算的赋能弹性资源管理远程协作与分布式开发持续集成和持续交付成本效益 人工智能的赋能数据驱动的决策自动化智能预测和优化自适应系统 创新的实践方法数据驱动的创新智能化产品开放式创新迭代和反馈 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;…
阅读更多...
深入探讨Eureka的三级缓存架构与缓存运行原理

深入探讨Eureka的三级缓存架构与缓存运行原理

推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 史上最全文档AI绘画stablediffusion资料分享 AI绘画关于SD,GPT,SDXL等个人总结文档 资源分享 「java、python面试题…
阅读更多...
【PHP】PHP变量

【PHP】PHP变量

1、变量介绍 PHP 是一门弱类型语言&#xff0c;不必向 PHP 声明该变量的数据类型。PHP 会根据变量的值&#xff0c;自动把变量转换为正确的数据类型。在强类型的编程语言中&#xff0c;必须在使用变量前先声明&#xff08;定义&#xff09;变量的类型和名称。 <?php $x5;…
阅读更多...
最新文章

Copyright @ 2022~2023