Django学习之静态文件与模板详解
目录
- 前言
- 模板
- 存放目录
- 模板调用
- 模板语法
- 数据传递
- 元素引用
- for语句
- if语句
- 静态文件
- 存放目录
- 文件调用
- 总结
前言
我们已经配置完Django，今天就来学学静态文件与模板的放置使用。
模板
在上一章节中我们的视图函数test使用了HttpResponse返回一个字符串
作为我们第一个Django程序
但只有这些是远远不够的，你说要是别人看自己的网页就几行文字在那里，既不美观也无意义。
存放目录
我们平时看到的网页都是通过HTML向我们呈现的内容的，Django也一样。一个完整系统必须有着大量网页用于实现不同的功能，而那些HTML文件也有一个专门存放的目录叫templates模板。这个目录一般在APP目录下创建，每个APP均可创建一个templates用来存放HTML文件。当我们调用HTML文件的时候，系统就会根据APP的注册顺序在每个APP下的templates找所需要的HTML文件。
模板调用
那么现在我们在APP文件下创建一个templates目录。
并在该目录下创建一个名为demo的HTML文件
输入些内容后就在能在视图函数调用这个模板了。
进入view.py文件定义一个函数以调用demo.html模板。
from django.shortcuts import render, HttpResponse
# Create your views here.
def test(request):
return render(request, "demo.html")
注意：函数一定要加上 request参数，在引用html模板时使用的render同样需要加上request参数。
接下来在url.py文件中，确定好关系就OK了。(网页路径以hd/为例)
点击运行后，输入网址http://127.0.0.1:8000/hd/进入。
就能看到跟上图类似的运行结果了。
模板语法
Django不是标记语言，它能进行数据处理。渲染网页前会先执行Django语句，然后将得出的符合逻辑的能够呈现给用户看的结果替换掉对应位置的Django语句。
数据传递
在制作网页时，如果我们不能一下子知道元素的值，比如需要通过数据库才能获取数据操作等，那么我们就要在视图函数中将需要的数据以字典的形式进行传递给HTML。值得高兴的是，常用的数据类型都能传递。
传递方法：将变量以字典形式通过render函数进行传递，在HTML引用时，通过双花括号+键名引用。
现在试试吧！
在视图函数编写些函数，然后传递过去
s = "这是一个字符串"
d = {"这是一个": "字典"}
return render(request, "demo.html", {"str": s, "dict": d})
之后在对应的HTML页面引用它
<h3> {{ str }} {{dict}}</h3>
最后点运行。
元素引用
Django同样支持引用字典，列表，元组等数据类型里面的值，不一样的是Django用.取代了[]。
比如想引用字典里面的值需要通过 {{字典名.键名}} 来引用值（注意，键名无需使用引号。），如果想引用列表则 {{列表名.索引值}} 亦或者 多维列表 {{列表名.索引1.索引2...}} 来引用。
view.py
def test(request):
d = {"这是一个": "字典"}
l1 = [1, 2, 3]
l2 = [[1, 2], [3, 4]]
return render(request, "demo.html",
{"list1": l1, "dict": d, "list2": l2}
)
demo.html
<body>
<h1>快看调用成功了没有？</h1>
<h3> {{list1.0}}</h3>
<h3> {{list2.0.1}}</h3>
<!--注意键名无需带引号-->
<h3> {{dict.这是一个}}</h3>
</body>
结果
for语句
Django也支持循环语句，但在使用完循环后需要加结束语句。这些命令都在 {% 命令 %}尖括号百分号之间。{与%之间没有空格
循环使用字典时， 如果你想获取键（keys）,值（values），键值对（items）后面都不需要添加括号。
先看字典
d = {"今天": "天气", "真不错": "对吗？"}
l1 = [1, 2, 3]
return render(request, "demo.html",
{"list1": l1, "dict": d}
)
<h1>快看调用成功了没有？</h1>
<!--无需带括号-->
{% for k, v in dict.items %}
<h4>{{k}} -- {{v}}</h4>
{% endfor %}
再看看列表，Django不支持range，所以只能迭代列表。
还是那串代码
def test(request):
d = {"今天": "天气", "真不错": "对吗？"}
l1 = [1, 2, 3, 4]
return render(request, "demo.html",
{"list1": l1, "dict": d}
)
只是改了HTML
<h1>快看调用成功了没有？</h1>{% for i in list1 %} <h4>{{list1}}</h4> <h4>{{i}}</h4> <!--不能这样输出值--> <h4>{{list1.i}} 前面好像没输出</h4>{% endfor %}
循环最后要使用endfor结束。另外，似乎不能通过列表值来访问列表元素，导致{{list1.i}}没有值
if语句
Django同样支持条件语句。
<!--list = [1,2,3,4]-->
<!--list.1 = 2-->
{% if list.1 == 0 %}
<h1>11111111111111111</h1>
{% elif list.1 == 1 %}
<h1>2222222222222222222</h1>
{% else %}
<h1>333333333333333333333</h1>
{% endif %}
静态文件
为了能够呈现更精美的内容亦或者提高代码编写效率，我们往往会使用到一些静态文件。
在开发过程中一般将图片，插件，css，js等当做静态文件处理。
存放目录
静态文件那么重要当然有他们各自的归宿，它们都存放在static目录下。同样的static目录也在APP下面创建，每个APP都可以有一个专门存放静态文件的目录static。我们最好也能在static下对不同类型的文件进行分类存放。如，图片存放在img文件夹中，插件存放在plugins文件夹中，css文件存放在css文件夹，js存放在js文件夹。
文件调用
我以一张图片为例，讲解一下是如何调用它的。
我们先将图片放入static的img文件夹内，
在demo.html模板中的body使用img元素即可调用图片。一般的调用是这样的
<img src="/static/img/1.jpg" alt="没图片的话点运行重启项目试试">
如果没有显示图片的话重新运行一下应该就能加载了。
但是在Django中有专门调用静态文件的语法，我们也建议使用Django专门调用静态文件的方法。进入设置，滑到底部有这一个变量
这里就记录了我们静态文件的存放位置。使用Django语法，如果静态文件改名了，或者移到其他位置，直接在这里修改一下就好了，就不用在html引用静态文件的时候逐个逐个修改路径了。
现在就来看一下它的使用方法。在html顶部输入
{% load static %}
声明导入静态文件
不知道为什么我第二行会有红线，可能pycharm不知道这是一个Django语句，不管它，接着输入img图片的导入路径
<img src="{% static 'img/1.jpg'%}" alt="没图片的话点运行重启项目试试">
点击运行
进入网址http://127.0.0.1:8000/hd/即可完成图片调用
css,js等文件导入的方法都是一样的，只要我们知道了Django导入静态文件的语法，渲染精致的html页面就不成问题啦！现在快去试试
总结
无论是 {{ 变量 }} 还是 {% 表达式 %} 都属于Django语法的一部分，在render函数内部会将HTML中的DJango语句处理完并替换成相应的字符串后再将标准的HTML格式内容发送给浏览器。
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
Django项目中动态设置静态文件路径的全过程
目录 前言 一.修改BASE_DIR: 二.修改模板文件路径(TEMPLATES中的DIRS的值): 三.修改国际化文件路径,由于LOCALE_PATHS默认不存在,需要自己在合适位置添加,如下图所示: 四.修改公共文件路径,如下图所示: 五.修改STATIC_ROOT文件路径,如下图所示: 六.修改多媒体路径,如下图所示: 总结 前言 Django项目需要在settings.py文件中设置各种文件的路径,例如:媒体文件(media)的路径.静态文件(static files)的路径.模板文件(
-
django模板加载静态文件的方法步骤
加载静态文件 在一个网页中,不仅仅只有一个 html 骨架,还需要 css 样式文件, js 执行文件以及一些图片等.因此在 DTL 中加载静态文件是一个必须要解决的问题.在 DTL 中,使用 static 标签来加载静态文件.要使用 static 标签,首先需要 {% load static %} .加载静态文件的步骤如下: 首先确保 django.contrib.staticfiles 已经添加到 settings.INSTALLED_APPS 中. 确保在 settings.py 中设置了
-
Python Django模板系统详解
目录 设置模板路径 模板变量 引用静态文件 总结 设置模板路径 在django项目下创建templats文件来存放html文件 为了减少模板加载调用过程及模板本身的冗余代码,Django 提供了一种使用方便且功能强大的 API ,当使用模板加载API时,需要将模板路径告诉框架,在项目settings.py中设置模板路径,如图: settings.py中的BASE_DIR为项目路径. 在TEMPLATES中的BIRS来设置模板路径 templates下编写index.html写入如下代码: !DO
-
Django零基础入门之静态文件的引用
目录 效果展示: 1.静态文件引用: (1)创建静态文件目录: (2)静态文件路径的配置: (3)创建三大静态文件: (4)静态文件的引用: 引言: 在我们Django中如何引用三大静态文件(JavaScript,CSS,image)呢? 这就是本文要讲述的内容--静态文件的引用! 效果展示: 点击确定之后: 1.静态文件引用: (1)创建静态文件目录: 在项目目录下创建static目录, 为了区分开各种类型的静态文件,再分别创建css,image,js文件目录: (2)静态文件路径的配置: 在
-
Django中模板的继承及引用实现
引言 大家啊可以随便取找个网站,比如:淘宝.多去看看它不同的页面,用你闪亮的大眼睛去找不同点和相同点. 到一定时候,你会发现,网站中有些不同的页面,它们中的部分数据是完全一模一样的:而且有些数据不一样的部分,它们前端的排版格式却是一模一样的哦! 你肯定会心生疑问--难道这些页面全都要一个个敲代码做嘛!这也太绝望了吧!!! 但是--不要忘记了!程序猿一大原则是:绝不做重复的事! 所以对于上述现象,就涉及到了一个知识点--模板的继承与引用!!! 1.模板的继承与引用 Django模版引擎中最强大也是
-
Django学习之静态文件与模板详解
目录 前言 模板 存放目录 模板调用 模板语法 数据传递 元素引用 for语句 if语句 静态文件 存放目录 文件调用 总结 前言 我们已经配置完Django,今天就来学学静态文件与模板的放置使用. 模板 在上一章节中我们的视图函数test使用了HttpResponse返回一个字符串 作为我们第一个Django程序 但只有这些是远远不够的,你说要是别人看自己的网页就几行文字在那里,既不美观也无意义. 存放目录 我们平时看到的网页都是通过HTML向我们呈现的内容的,Django也一样.一个完整系统
-
Django学习教程之静态文件的调用详解
前言 静态文件是指 网站中的 js, css, 图片,视频等文件,本文主要给大家介绍了关于Django学习之静态文件调用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 1.settings.py 静态文件相关示例代码及说明: # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.8/howto/static-files/ STATIC_URL = '/st
-
Python学习之yaml文件的读取详解
目录 yaml 文件的应用场景与格式介绍 yaml 文件的应用场景 yaml 文件的格式 第三方包 - pyyaml 读取 yaml 文件的方法 yaml文件读取演示案例 yaml 文件的应用场景与格式介绍 yaml 文件的应用场景 yaml其实也类似于 json.txt ,它们都属于一种文本格式.在我们的实际工作中, yaml 文件经常作为服务期配置文件来使用. 比如一些定义好的内容,并且不会修改的信息,我们就可以通过定义 yaml 文件,然后通过读取这样的文件,将数据导入到我们的服务中进行使
-
Go语言学习笔记之文件读写操作详解
目录 文件写 文件读 小结 文件操作比较多,分为几篇来写吧.首先是文件的读写,在平时的工程化操作中使用最多. 文件写 样例代码如下 package main import ( "bufio" "fmt" "io" "os" ) //写文件 func DoWriteFile() error { _filePath := "./test.txt" _file, _err := os.OpenFile(_file
-
Django 静态文件配置过程详解
静态文件配置 概述: 静态文件交由Web服务器处理,Django本身不处理静态文件.简单的处理逻辑如下(以nginx为例): URI请求 --> 按照Web服务器里面的配置规则先处理,以nginx为例,主要求配置在nginx.conf里的location --> 如果是静态文件,则由nginx直接处理 --> 如果不是则交由Django处理,Django根据urls.py里面的规则进行匹配 以上是部署到Web服务器后的处理方式,为了便于开发,Django提供了在开发环境的对静态文件的处理
-
.Net Core中间件之静态文件(StaticFiles)示例详解
一.介绍 静态文件(static files),诸如 HTML.CSS.图片和 JavaScript 之类的资源会被 ASP.NET Core 应用直接提供给客户端. 在介绍静态文件中间件之前,先介绍 ContentRoot和WebRoot概念. ContentRoot:指web的项目的文件夹,包括bin和webroot文件夹. WebRoot:一般指ContentRoot路径下的wwwroot文件夹. 介绍这个两个概念是因为静态资源文件一般存放在WebRoot路径下,也就是wwwroot.下面
-
对Django中static(静态)文件详解以及{% static %}标签的使用方法
在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等.因此在DTL中加载静态文件是一个必须要解决的问题.在DTL中,使用static标签来加载静态文件.要使用static标签,首先需要{% load static %}. 加载静态文件的步骤如下: 首先确保django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中. 确保在settings.py中设置了STATIC_URL. 注意: 上面两条都是在创建Dja
-
Python学习之文件的读取详解
目录 文件读取的模式 文件对象的读取方法 使用 read() 函数一次性读取文件全部内容 使用 readlines() 函数 读取文件内容 使用 readline() 函数 逐行读取文件内容 mode().name().closed() 函数演示 文件读取小实战 with open() 函数 利用with open() 函数读取文件的小实战 上一章节 我们学习了如何利用 open() 函数创建一个文件,以及如何在文件内写入内容:今天我们就来了解一下如何将文件中的内容读取出去来的方法. 文件读取的
-
Git基础学习之文件删除操作命令详解
目录 1.删除文件说明 2.删除文件操作 (1)仅删除暂存区的文件 (2)完全删除文件 3.本文用到的命令总结 1.删除文件说明 在Git工作目录中要删除某个文件,首先要清楚该文件所处的状态. 若要是该文件未被Git管理,在工作区直接进行删除即可.(不演示) 但是,若该文件已经经过多次git add与git commit操作后,就必须要从已跟踪文件清单中删除(确切地说,是在暂存区中删除),然后提交. 可以用git rm命令完成此项工作,并连带从工作目录中删除指定的文件,这样文件之后就不会出现在未
-
Django基于ORM操作数据库的方法详解
本文实例讲述了Django基于ORM操作数据库的方法.分享给大家供大家参考,具体如下: 1.配置数据库 vim settings #HelloWorld/HelloWorld目录下 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', #mysql数据库中第一个库test 'NAME': 'test', 'USER': 'root', 'PASSWORD': '123456', 'HOST':'127.0.0.1', '