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.mzph.cn/news/591586.shtml

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

相关文章

Linux network — 网络层收发包流程及 Netfilter 框架浅析

Linux network — 网络层收发包流程及 Netfilter 框架浅析 1. 前言2. 基础网络知识2.1 网络分层模型2.2 数据包协议分层2.3 sk_buff 结构2.4 收发包整体框架 3. 网络层&#xff08;IPv4&#xff09;收发包流程4. Netfilter 框架4.1 IPv4 网络层的 Netfilter Hook 点4.2 iptable…

算法——队列+宽搜(BFS)

队列这种数据结构大都服务于一个算法——宽搜&#xff08;BFS&#xff09;。宽搜还可以运用到二叉树、图、迷宫最短路径问题、拓扑排序等等 N叉数的层序遍历 N叉树的层序遍历 题目解析 给定一个 N 叉树&#xff0c;返回其节点值的_层序遍历_。&#xff08;即从左到右&#…

使用Wireshark进行网络流量分析

目录 Wireshark是什么&#xff1f; 数据包筛选 筛选指定ip 使用逻辑运算符筛选 HTTP模式过滤 端口筛选 协议筛选 包长度筛选 数据包搜索 数据流分析 数据包导出 Wireshark是什么&#xff1f; 通过Wireshark&#xff0c;我们可以捕获和分析网络数据包&#xff0c;查看…

【Maven】工程依赖下载失败错误解决

在使用 Maven 构建项目时&#xff0c;可能会发生依赖项下载错误的情况&#xff0c;主要原因有以下几种&#xff1a; 下载依赖时出现网络故障或仓库服务器宕机等原因&#xff0c;导致无法连接至 Maven 仓库&#xff0c;从而无法下载依赖。 依赖项的版本号或配置文件中的版本号错…

SPI

一、简介 SPI是一种同步、全双工、主从式接口。来自主机或从机的数据在 时钟上升沿或下降沿同步。主机和从机可以同时传输数据。SPI接 口可以是3线式或4线式。 MOSI(Master Output Slave Input) – 主设备输出/从设备输入信号&#xff1b;MISO(Master Input Slave Output) – 主…

经典卷积神经网络-ResNet

经典卷积神经网络-ResNet 一、背景介绍 残差神经网络(ResNet)是由微软研究院的何恺明、张祥雨、任少卿、孙剑等人提出的。ResNet 在2015 年的ILSVRC&#xff08;ImageNet Large Scale Visual Recognition Challenge&#xff09;中取得了冠军。残差神经网络的主要贡献是发现了…

Nginx 反向代理负载均衡

Nginx 反向代理负载均衡 普通的负载均衡软件&#xff0c;如 LVS&#xff0c;其实现的功能只是对请求数据包的转发、传递&#xff0c;从负载均衡下的节点服务器来看&#xff0c;接收到的请求还是来自访问负载均衡器的客户端的真实用户&#xff1b;而反向代理就不一样了&#xf…

Android混淆那些事

前言 作为一个Android开发&#xff0c;大家或多或少都有一些关于混淆的了解&#xff08;毕竟披个纱布也比裸奔要好的多吧&#xff09;。混淆的概念虽然容易理解&#xff0c;但相信大多数开发可能还是在网上搜索通用配置后通过C-V大法接入到自己的项目中&#xff0c;这也使得混…

canvas绘制网格线示例

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

docker 部署教学版本

文章目录 一、docker使用场景及常用命令1&#xff09;docker使用场景2&#xff09;rocky8(centos8)安装 docker3&#xff09;docker 常用命令补充常用命令 二、 单独部署每个镜像&#xff0c;部署spring 应用镜像推荐&#xff08;2023-12-18&#xff09;1、 安装使用 mysql1.1 …

高可用解决方案 Keepalived 概述

概述 Keepalived 介绍 Keepalived 是 Linux 下一个轻量级别的高可用解决方案&#xff0c;通过 **VRRP 协议&#xff08;虚拟路由冗余协议&#xff09;**来实现服务或者网络的高可用&#xff0c;可以利用其来解决单点故障。 起初是为 LVS 设计的&#xff0c;一个 LVS 服务会有 …

计算机毕业论文内容参考|基于智能搜索引擎的图书管理系统的设计与实现

文章目录 摘要前言绪论课题背景国内外现状与趋势课题内容相关技术与方法介绍系统分析系统设计系统实现系统测试总结与展望摘要 本文介绍了基于智能搜索引擎的图书管理系统的设计与实现。该系统旨在提供一个高效、智能化的图书管理平台,帮助用户更快、更准确地找到所需的图书资…

2024年PMP报考需要什么条件?怎么报名?

一、PMP是什么 PMP 是项目管理的入门级证书&#xff0c;全称是项目管理专业人士资格认证&#xff0c;由美国项目管理协会&#xff08;PMI&#xff09;举办的&#xff0c;受到全球200多个国家的认可&#xff0c;从1999 年到现在已经有20多年发展历史了。 顾名思义&#xff0c;…

【大数据面试知识点】分区器Partitioner:HashPartitioner、RangePartitioner

Spark HashParitioner的弊端是什么&#xff1f; HashPartitioner分区的原理很简单&#xff0c;对于给定的key&#xff0c;计算其hashCode&#xff0c;并除于分区的个数取余&#xff0c;如果余数小于0&#xff0c;则用余数分区的个数&#xff0c;最后返回的值就是这个key所属的…

阶段十-分布式-nginx服务器

一、Nginx简介 Nginx 是高性能的 HTTP 和反向代理的服务器&#xff0c;处理高并发能力是十分强大的&#xff0c;能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。tomcat并发数量理论值是500&#xff0c;实际也就300左右。 1.2 正向代理 正向代理代理的是客户…

世微 DW01 4.2V锂电池保护电路芯片 专业电源管理芯片

一、 描述 DW01A 是一个锂电池保护电路&#xff0c;为避免锂电池因过充电、过放电、电流过大导致电池寿命缩短或电池被损坏而设计的。它具有高精确度的电压检测与时间延迟电路。 二、 主要特点 工作电流低&#xff1b; 过充检测 4.3V&#xff0c;过充释放 4.05V&#xff1b; 过…

缅怀一代传奇!TVP创始委员陈皓与他的《左耳听风:传奇程序员练级攻略》

引言 中文技术圈时常被一种浮躁所困扰。互联网企业历经跑马圈地的红利期后&#xff0c;开始在精细化运营的路上艰难求索&#xff1b;圈子里的程序员们&#xff0c;也被日益放缓的业务需求和不断内卷的行业态势所影响&#xff0c;职业困境、年龄危机成了老生常谈的话题。 成长往…

three.js 多通道组合

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div style"border: 1px so…

AI大模型引领未来智慧科研暨ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的高级应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

C语言中关于while语句的理解以及getchar和putchar

while是一个循环语句&#xff0c;关于while的一些理解可以看下面这串代码 #include <stdio.h> int main() {int i 0;scanf("%d", &i);printf("输入十以内的数字&#xff0c;从输入的数字开始一直数到十&#xff1a;");while (i<10){printf(…