Django基础4——模板系统

文章目录

  • 一、基本了解
    • 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.mzph.cn/news/61042.shtml

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

相关文章

11. 网络模型保存与读取

11.1 网络模型保存(方式一) import torchvision import torch vgg16 torchvision.models.vgg16(pretrainedFalse) torch.save(vgg16,"./model/vgg16_method1.pth") # 保存方式一&#xff1a;模型结构 模型参数 print(vgg16) 结果&#xff1a; VGG((feature…

Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required问题解决

运行程序的时候出现了如下的报错&#xff1a; 解决方法&#xff1a;去除EnableAutoConfiguration中的(exclude{DataSourceAutoConfiguration.class})

Compose - 交互组合项

按钮 Button OutLinedButton带外边框、TextButton只是文字、IconButton只是图标形状。 Button(onClick { }, //点击回调modifier Modifier,enabled true, //启用或禁用interactionSource MutableInteractionSource(),elevation ButtonDefaults.elevatedButtonElevation( /…

antdesign Vue table - 换行

表头换行 customHeaderCell: () > {return {style: {whiteSpace: pre-wrap,},}; }, 列表换行 customCell:() > {return {style: {wordWrap:break-word,wordBreak:break-all,whiteSpace:normal,minHeight:50px,// width:150,}} }

EFLK日志平台(filebeat-->kafka-->logstash-->es-->kiabana)

ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 安装顺序 1.安装es 7.17.12 2.安装kibana 7.17.12 3.安装x-pack 保证以上调试成功后开始下面…

【24考研】:四川大学计算机学院23届874考研考情分析

四川大学计算机学院23届CS考研考情分析 作者&#xff1a;老李 往年都是大佬们做的&#xff0c; 今年正好自己在做公众号这一块&#xff0c; 因此不自量力的承担这个工作&#xff0c;顺便锻炼一点pandas包和plt包的应用能力。 所以形式上我也会仿照一下往年的大佬。 21考情&a…

CompletableFuture stream 处理demo

全程无废话&#xff0c;上代码&#xff0c;记录方便自己查阅。 package com.hsj;import com.google.common.collect.Lists; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import org.junit.jupiter.api.T…

vue使用qrcodejs2生成二维码

目录 概要 构建展示的vue组件qrcode.vue 组件的使用 概要 项目中用到需要展示二维码的样式&#xff0c;想到了qrcode 例如&#xff1a; 前提&#xff1a;安装包 npm install qrcodejs2 --save 构建展示的vue组件qrcode.vue <template><div style"width: …

如何用Python爬虫持续监控商品价格

目录 持续监控商品价格步骤 1. 选择合适的爬虫库&#xff1a; 2. 选择目标网站&#xff1a; 3. 编写爬虫代码&#xff1a; 4. 设定监控频率&#xff1a; 5. 存储和展示数据&#xff1a; 6. 设置报警机制&#xff1a; 7. 异常处理和稳定性考虑&#xff1a; 可能会遇到的…

Uniapp笔记(三)uniapp语法2

一、本节项目预备知识 1、组件生命周期 1.1、什么是生命周期 生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段&#xff0c;强调的是一个时间段 我们可以把每个uniapp应用运行的过程&#xff0c;也概括为生命周期 小程序的启动&#xff0c;表示生命周…

2781. 最长合法子字符串的长度

2781. 最长合法子字符串的长度 C代码&#xff1a;滑动窗口、哈希表 typedef struct{char* str;UT_hash_handle hh; } HashTable;HashTable* head;void AddToHash(char* str) {HashTable* out (HashTable*)malloc(sizeof(HashTable));out->str str;HASH_ADD_STR(head, str…

ThinkPHP 文件上传 fileSystem 扩展的使用

ThinkPHP 文件上传 ThinkPHP 文件上传 扩展 filesystem一、安装 FileSystem 扩展二、认识 filesystem 配置文件 config/filesystem.php三、上传验证&#xff08;涉及到验证器的知识点&#xff09;四、文件上传demo ThinkPHP 文件上传 扩展 filesystem ThinkPHP 为我们 提供了 …

【前端】JQ实时显示当前日期、时间、星期

效果图 html <span id"time"></span> JS // 实时显示当前时间 $(document).ready(function () {function showTime() {var today new Date;var y today.getFullYear();var M today.getMonth() 1;var d today.getDate();var w today.getDay();va…

计算机行业前景展望

计算机行业的前景展望是非常广阔的。随着技术的快速发展和应用领域的不断拓展&#xff0c;计算机行业将继续扮演着重要的角色。以下是一些计算机行业前景的关键方面&#xff1a; 人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;&#xff1a;AI和ML技术…

WPF 数据验证

WPF提供了能与数据绑定系统紧密协作的验证功能。提供了两种方法用于捕获非法值&#xff1a; 1、可在数据对象中引发错误。 可以在设置属性时抛出异常&#xff0c;通常WPF会忽略所有在设置属性时抛出的异常&#xff0c;但可以进行配置&#xff0c;从而显示更有帮助的可视化指示…

Android 音频框架 基于android 12

文章目录 前言音频服务audioserver音频数据链路hal 提供什么样的作用 前言 Android 的音频是一个相当复杂的部分。从应用到框架、hal、kernel、最后到硬件&#xff0c;每个部分的知识点都相当的多。而android 这部分代码在版本之间改动很大、其中充斥着各种workaround的处理&a…

解释 Git 的基本概念和使用方式。

Git是一个版本控制工具&#xff0c;可以追踪文件的修改历史和不同版本&#xff0c;以便于团队合作和项目的管理。 下面是Git的一些基本概念和使用方式&#xff1a; 仓库&#xff08;Repository&#xff09;&#xff1a;Git中存储代码的地方&#xff0c;包含了代码的历史记录和…

《论文阅读18》JoKDNet

一、论文 研究领域&#xff1a;用于大尺度室外TLS点云配准的联合关键点检测和特征表达网络论文&#xff1a;JoKDNet: A joint keypoint detection and description network for large-scale outdoor TLS point clouds registration International Journal of Applied Earth Ob…

docker-compose安装node-exporter, prometheus, grafana

基础 exporter提供监控数据 prometheus拉取监控数据 grafana可视化监控数据 准备 全部操作在/root/mypromethus中执行 node_exporter docker-compose -f node-exporter.yaml up -d # web访问&#xff0c;查看node_exporter采集到的数据 http://192.168.1.102:9101/metrics…

Delphi 11.3 FMX 多设备平台中使用 TGrid 实现类似 TDBGrid 的效果

Delphi Firemonkey 中 TDBGrid 这个控件已经没有了。如何实现类似这个效果呢。其实可以用TGrid 来实现。以下用 11.3 来讲解。 查询里面用到的 connection 和 query 等控件那些一般的数据库用法&#xff0c;就不做过多描述了。请参考其他资料。 方法一.通过界面配置来实现 在…