Django 学习教程- Django模板（Template）

系列 

 

Django 学习教程-介绍与安装-CSDN博客

Django 学习教程- Hello world入门案例-CSDN博客

 

d80408bf922e4db3987366973110aa94.png

前言

在上一章节中我们使用django.http.HttpResponse() 来输出 "Hello World！"。该方式将数据与视图混合在一起，不符合 Django 的 MTV 思想。

本文将模板代码与逻辑代码分离以生产案例为标准引导您学习django模板的使用

模板应用实例

基于 helloworld 项目创建 templates 目录并创建 index.html 文件：

helloworld/
|-- helloworld
|   |-- __init__.py
|   |-- settings.py
|   |-- urls.py
|   |-- views.py
|   |-- wsgi.py
|   |-- asgi.py
|-- manage.py
|-- templates`-- index.html

在 index.html 放入如下内容：

<h1>{{ hello }}</h1>

接下来我们需要向Django说明模板文件的路径，修改helloworld/settings.py，修改 TEMPLATES 中的 DIRS 为 [os.path.join(BASE_DIR, 'templates')]，如下所示:

TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(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',],},},
]

修改 views.py，增加一个新的对象，用于向模板提交数据：

from django.shortcuts import renderdef index(request):context          = {}context['hello'] = 'Hello World!'return render(request, 'index.html', context)

修改 urls.py 放入如下内容：

from django.urls import pathfrom . import viewsurlpatterns = [path('index/', views.index),
]

可以看到，我们这里使用 render 来替代之前使用的 HttpResponse。render 还使用了一个字典 context 作为参数。

context 字典中元素的键值 hello 对应了模板中的变量 {{ hello }}。

访问 http://127.0.0.1:8000/index/，你会看到 Hello World！

 

这样我们就完成了使用模板来输出数据，从而实现数据与视图分离。

接下来我们将具体介绍模板中常用的语法规则。

 

Django 模板标签

变量

模板语法：

view：｛"HTML变量名" : "views变量名"｝
HTML：｛｛变量名｝｝

helloworld/helloworld/views.py 文件代码

from django.shortcuts import renderdef runoob(request):views_name = "Django学习教程"return  render(request,"index.html", {"name":views_name})

templates 中的 index.html 

<p>{{ name }}</p>

访问 http://127.0.0.1:8000/index，你将会看到页面： 

0f21cab18f68488789da57d312b05677.png

列表

templates 中的 index.html中，可以用 . 索引下标取出对应的元素。

helloworld/helloworld/views.py 文件代码：

from django.shortcuts import renderdef index(request):views_list = ["Djiango教程1","Djiango教程2","Djiango教程3"]return render(request, "index.html", {"views_list": views_list})

helloworld/templates/runoob.html 文件代码：

<p>{{ views_list }}</p>   # 取出整个列表
<p>{{ views_list.0 }}</p> # 取出列表的第一个元素

 访问 http://127.0.0.1:8000/index，你将会看到页面：

2b7b2b38d83245e6a55462d03a3c52dc.png

字典

templates 中的 index.html中，可以用 .键 取出对应的值。

helloworld/helloworld/views.py 文件代码：

from django.shortcuts import renderdef index(request):views_dict = {"name":"djiango教程"}return render(request, "index.html", {"views_dict": views_dict})

helloworld/templates/index.html 文件代码：

<p>{{ views_dict }}</p> <p>{{ views_dict.name }}</p>

再次访问 http://127.0.0.1:8000/index，可以看到页面：

d72da4089362467790dcd290d0d66109.png

过滤器

length

返回对象的长度，适用于字符串和列表。

字典返回的是键值对的数量，集合返回的是去重后的长度。

HelloWorld/HelloWorld/views.py 文件代码：

from django.shortcuts import renderdef index(request):name ="菜鸟教程"return render(request, "index.html", {"name": name})

HelloWorld/templates/runoob.html 文件代码：

{{ name|length}}

再次访问 http://127.0.0.1:8000/runoob，可以看到页面：

343d6c602cb749c8a8ccd61927606698.png

 

Date

根据给定格式对一个日期变量进行格式化。

格式 Y-m-d H:i:s返回 年-月-日 小时:分钟:秒 的格式时间。

helloworld/helloworld/views.py 文件代码：

from django.shortcuts import renderdef index(request):import datetimenow  =datetime.datetime.now()return render(request, "index.html", {"time": now})

helloworld/templates/index.html 文件代码：

{{ time|date:"Y-m-d" }}

再次访问 http://127.0.0.1:8000/index，可以看到页面： 

0718c87477ec4b4e804d4c26a3508223.png

 

字符串截取（truncatechars）

如果字符串包含的字符总个数多于指定的字符数量，那么会被截断掉后面的部分。

截断的字符串将以 ... 结尾。

helloworld/helloworld/views.py 文件代码：

from django.shortcuts import renderdef index(request):views_str = "djiango教程"return render(request, "index.html", {"views_str": views_str})

helloworld/templates/index.html 文件代码：

{{ views_str|truncatechars:2}}

再次访问 http://127.0.0.1:8000/index，可以看到页面： 

3f6f992302d8472584b59666a7c91d0e.png

 

if/else 标签

基本语法格式如下：

{% if condition %}... display
{% endif %}

或者：

{% if condition1 %}... display 1
{% elif condition2 %}... display 2
{% else %}... display 3
{% endif %}

根据条件判断是否输出。if/else 支持嵌套。

{% if %} 标签接受 and ， or 或者 not 关键字来对多个变量做判断 ，或者对变量取反（ not )，例如：

{% if athlete_list and coach_list %}athletes 和 coaches 变量都是可用的。
{% endif %}

helloworld/helloworld/views.py 文件代码：

from django.shortcuts import renderdef index(request):views_num = 88return render(request, "index.html", {"num": views_num})

helloworld/templates/index.html 文件代码：

{%if num > 90 and num <= 100 %}
优秀
{% elif num > 60 and num <= 90 %}
合格
{% else %}
一边玩去～
{% endif %}

再访问访问 http://127.0.0.1:8000/index，可以看到页面：

37cba5d3364446339a66cacfc5215a15.png

for 标签

{% for %} 允许我们在一个序列上迭代。

与 Python 的 for 语句的情形类似，循环语法是 for X in Y ，Y 是要迭代的序列而 X 是在每一个特定的循环中使用的变量名称。

每一次循环中，模板系统会渲染在 {% for %} 和 {% endfor %} 之间的所有内容。

例如，给定一个运动员列表 athlete_list 变量，我们可以使用下面的代码来显示这个列表：

<ul>
{% for athlete in athlete_list %}<li>{{ athlete.name }}</li>
{% endfor %}
</ul>

helloworld/helloworld/views.py 文件代码：

from django.shortcuts import renderdef index(request):views_list = ["djiango教程","djiango教程1","djiango教程2","djiango教程3",]return render(request, "index.html", {"views_list": views_list})

helloworld/templates/index.html 文件代码：

{% for i in views_list %} {{ i }} {% endfor %}

再访问访问 http://127.0.0.1:8000/index，可以看到页面：

358f77a6af50496e9dbbb60e3c675d81.png

 

ifequal/ifnotequal 标签

{% ifequal %} 标签比较两个值，当他们相等时，显示在 {% ifequal %} 和 {% endifequal %} 之中所有的值。

下面的例子比较两个模板变量 user 和 currentuser :

{% ifequal user currentuser %}<h1>Welcome!</h1>
{% endifequal %}

和 {% if %} 类似， {% ifequal %} 支持可选的 {% else%} 标签：8

{% ifequal section 'sitenews' %}<h1>Site News</h1>
{% else %}<h1>No News Here</h1>
{% endifequal %}

注释标签

Django 注释使用 {# #}。

{# 这是一个注释 #}

include 标签

{% include %} 标签允许在模板中包含其它的模板的内容。

下面这个例子都包含了 nav.html 模板：

{% include "nav.html" %}

 

 

配置静态文件

1、在项目根目录下创建 statics 目录。

7ef086ac2f2944efbb9d0abb99fe3fb1.png

 

2、在 settings 文件的最下方配置添加以下配置：

STATIC_URL = '/static/' # 别名 
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "statics"), 
]

 

09385c5d428cb1fe29d7d1ce61c6abb7.png

3、在 statics 目录下创建 css 目录，js 目录，images 目录，plugins 目录， 分别放 css文件，js文件，图片，插件。

4、把 bootstrap 框架放入插件目录 plugins。

5、在 HTML 文件的 head 标签中引入 bootstrap。

注意：此时引用路径中的要用配置文件中的别名 static，而不是目录 statics。

<link rel="stylesheet" href="/static/plugins/bootstrap.css">

在模板中使用需要加入 {% load static %} 代码，以下实例我们从静态目录中引入图片。

helloworld/helloworld/views.py 文件代码：

from django.shortcuts import renderdef index(request):name ="djiango教程"return render(request, "index.html", {"name": name})

HelloWorld/templates/runoob.html 文件代码：

{{name}}<img src="{% static 'images/django-logo.jpg' %}" alt="django-logo">

再访问访问 http://127.0.0.1:8000/index，可以看到页面：

0d819189da0b4b08861afb93a739ec51.png

 

 

 

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

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

相关文章

JavaScript history对象常用方法【通俗易懂】

JavaScript history对象常用方法【通俗易懂】

✨前言✨   本篇文章主要在于了解及使用JavaScript中history对象常用方法 &#x1f352;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f352;博主将持续更新学习记录收获&#xff0c;友友们有任何问题可以在评论区留言 文章目录 一&…
阅读更多...
技嘉B460M AORUS成功安装Win7

技嘉B460M AORUS成功安装Win7

重要说明&#xff1a;本文适合有win7安装经验的读者&#xff0c;安装win7具体步骤没有提及&#xff0c;只说明了技嘉B460M AORUS要安装win7时&#xff0c;需要的额外设置。 1. 背景介绍 2023年组装了一台电脑&#xff0c;机械硬盘&#xff0c;安装了windows 10&#xff0c; 几…
阅读更多...
004、变量与可变性

004、变量与可变性

1. 变量与可变性 在Rust中&#xff0c;变量默认是不可变的&#xff0c;这一设计是为了让你安全方便地写出复杂、甚至是并行的代码。 当然&#xff0c;Rust也提供了可使用的可变变量的方法&#xff0c;这个待会讨论。 当一个变量是不可变时&#xff0c;一旦它被绑定到某个值上面…
阅读更多...
手机摄影学习

手机摄影学习

手机摄影学习 基础知识1&#xff0c;成像基本原理2&#xff0c;什么是焦距3&#xff0c;快门&#xff08;简称s&#xff09;4&#xff0c;上面功能之间的相互影响5&#xff0c;焦点6&#xff0c;过爆、欠曝7&#xff0c;cmos&#xff08;感光芯片&#xff09;、测光、聚焦&…
阅读更多...
【索引的数据结构】第1章节：B+Tree存储结构

【索引的数据结构】第1章节：B+Tree存储结构

目录结构 之前整篇文章太长&#xff0c;阅读体验不好&#xff0c;将其拆分为几个子篇章。 本篇章讲解 BTree 存储结构。 什么是索引 可以简单理解为索引好比一本书的目录&#xff0c;通过目录我们可以快速定位到我们要查看的章节。 MySQL 中的数据同样也是根据索引分类&…
阅读更多...
【MATLAB】鲸鱼算法优化混合核极限学习机(WOA-HKELM)时序预测算法

【MATLAB】鲸鱼算法优化混合核极限学习机(WOA-HKELM)时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 鲸鱼算法优化混合核极限学习机&#xff08;WOA-HKELM&#xff09;是一种时序预测算法&#xff0c;它结合了鲸鱼算法和混合核极限学习机&#xff08;HKELM&#xff09;的优点。以下是该算法…
阅读更多...
win10连上了wifi热点但是无法上网

win10连上了wifi热点但是无法上网

我的情况是能正常连接wifi热点&#xff08;手机连接这个热点能上网&#xff0c;说明这个wifi热点是正常的&#xff09; 但是没法上网 打开cmd窗口发现能ping通百度&#xff0c;掘金&#xff0c;csdn这些网址。这就更奇怪了&#xff01;于是根据上面的提示&#xff0c;检查了代…
阅读更多...
【笔试强训】Day1_贪心算法_组队竞赛

【笔试强训】Day1_贪心算法_组队竞赛

题目链接&#xff1a;牛客_组队竞赛 目录 题目解析 代码书写 知识补充 题目解析 题目让我们求所有队伍的水平值总和最大 由题可得&#xff1a; 队伍的水平值等于该队伍队员中第二高水平值; 随机给定3*n个数&#xff0c;需要自己组队并且得出队伍水平最大值&#xff1b; 我…
阅读更多...
iOS实时查看App运行日志

iOS实时查看App运行日志

目录 一、设备连接 二、使用克魔助手查看日志 三、过滤我们自己App的日志 &#x1f4dd; 摘要&#xff1a; 本文介绍了如何在iOS iPhone设备上实时查看输出在console控制台的日志。通过克魔助手工具&#xff0c;我们可以连接手机并方便地筛选我们自己App的日志。 &#x1f4…
阅读更多...
【进阶】【Python网络爬虫】【15.爬虫框架】scrapy入门（附大量案例代码）（建议收藏）

【进阶】【Python网络爬虫】【15.爬虫框架】scrapy入门（附大量案例代码）（建议收藏）

Python网络爬虫基础 一、爬虫框架1. 什么是框架&#xff1f;2. 初期如何学习框架&#xff1f; 二、scrapy 入门1. 网络爬虫请求数据解析数据保存数据 2. scrapy安装安装方式全局命令项目命令案例 - scrapy 下厨房网爬取settings.pyspidersblood.py 案例 - scrapy爬取哔哩哔哩网…
阅读更多...
高可用解决方案 Keepalived 概述

高可用解决方案 Keepalived 概述

概述 Keepalived 介绍 Keepalived 是 Linux 下一个轻量级别的高可用解决方案&#xff0c;通过 **VRRP 协议&#xff08;虚拟路由冗余协议&#xff09;**来实现服务或者网络的高可用&#xff0c;可以利用其来解决单点故障。 起初是为 LVS 设计的&#xff0c;一个 LVS 服务会有 …
阅读更多...
【中小型企业网络实战案例 五】配置可靠性和负载分担

【中小型企业网络实战案例 五】配置可靠性和负载分担

【中小型企业网络实战案例 三】配置DHCP动态分配地址-CSDN博客 【中小型企业网络实战案例 四】配置OSPF动态路由协议 【中小型企业网络实战案例 二】配置网络互连互通-CSDN博客 【中小型企业网络实战案例 一】规划、需求和基本配置_大小企业网络配置实例-CSDN博客 配置VRRP联…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023