零基础入手Django(三)：模板变量

2023-04-22 11:31 作者:IT小叮当 0人读过 | 我要投稿

今天，小叮当继续为大家分享Django的干货。主要内容有：模板路径配置和变量、常用过滤器以及静态文件的引用。

一、模板路径配置

1.redirect重定向传参

我们仍以“hello_django"项目为例，上次我们配置的”article2"即为redirect重定向。

我们到urls.py中配置相应的路径，传入相应的参数"num"

如下

我们在views.py中相应部分接受参数即可。

如下

在浏览器中测试

值得注意的是，当视图函数重定向，有reverse函数时，我们可通过“args"进行传参，但传参的对象是元组。

2.模版路径配置的两种方法

（1）templates放在主目录下

这种模版的创建方法就是，在项目主目录下创建“templates"文件夹，在“templates"文件夹下创建对应app的文件夹，将对应的html文件放到其中。通过设置“settings.py"中的“DIRS"来寻找模板文件。

（2）templates放在app目录下

首先值得注意的是，templates放在app目录下时，文件夹的名称必须为“templates” ,之后在主目录中的“settings.py”中找到“INSTALLED_APPS"在其中注册app

例如，在book目录下新建“templates”文件夹

新建book_index.html，返回“我是在名字为book的app下新建的模板”

在”INSTALLED_APPS“中，注册app，填写对应的app名称即可。

检查“settings.py"中的”TEMPLATES"中“APP_DIRS"是否为"True"(默认情况下为True)，若不为True，app将不会注册成功。

在app的views.py中编写视图函数渲染模板。

在urls.py中配置相应的访问url

具体代码如下：

在浏览器中测试：

输入网址：“http://192.168.255.130:8000/book/test/”

二、模板变量

当我们登录qq邮箱后，qq邮箱页面便会显示我们的昵称，不同的用户登录，在qq邮箱页面相应的位置便会显示不同的昵称。

这是怎么做到的呢？其实，这就是一个模板变量，根据不同的后台数据，模板响应不同的数据。

1.以上几次创建好的“movie” app为例说明

（1）在movie文件夹下新建urls.py

代码如下：

（2）使用include在主目录的urls.py中

给“movie”的urls.py分配路由:

在templates文件夹建好的“movie”文件夹中新建movie的主页模板“index”

代码如下

其中{{name}}即为模版变量，用来接受视图函数返回的名为“name"的变量。

（3)在movie下的views.py中定义视图函数，用来渲染movie主页模版

视图函数代码为：

（4）在创建好的movie下的urls.py中导入views.py,并为movie主页添加路由

代码如下

（5）启动服务后，在浏览器中查看

输入网址” http://192.168.255.130:8000/movie/index/ “

可以看到模版变量已经渲染成功。

2.模版变量可以是多种类型

（1）重新定义movie下views.py

(2)重新定义”templates"下movie中的index.html模版文件

（3）在浏览器中测试

输入“http://192.168.255.130:8000/movie/index/”

3.小结

模版变量使用规则：

（1）语法: {{ 变量名}}

（2）命名由字母和数字以及下划线组成，不能有空格和标点符号

（3）可以使用字典、模型、方法、函数、列表

（4）不要和python或django关键字重名

（5）如果data是一个字典，那么访问data.items将会访问data这个字典的key名为items的值，而不会访问字典的items方法。

（6）点在模板渲染时有特殊的含义。变量名中点表示查找。

三、常用过滤器

所谓过滤器，就是可以将模版传过来的变量进行过滤，使之符合我们想要的结果。

准备工作

（1）重新定义movie下的views.py文件

（2）重新定义“templates"文件下movie中的index.html文件

（3）浏览器中访问：

输入” http://192.168.255.130:8000/movie/index/“

小结：可见过滤器就是在模版变量后加上竖杠”｜“之后写上相应的过滤器名称，即可实现对模版变量的过滤功能。

2.空值过滤器

（1）default

当模版变量不存在（没有在视图函数中定义而在模版中直接使用）时，系统会默认其值为空。

例如，我们在模版中直接使用xdd666变量，而没有在views.py中定义时

在浏览器中访问

我们发现页面没有报错，xxxxx与yyyy直接拼接在了一起。这说明当模版变量不存在时，系统会默认其为空值。

我们为这个不存在的模版变量加上default过滤器，并设值为”我不在“

再次在浏览器中访问

这说明，default过滤器的作用是，为”没有在视图函数中定义而直接在模版中使用的变量”设置默认值，而对于定义过的变量，则会使用定义过的值。

(2)default_if_none

对在模版中出现的未知定义使用default_if_none过滤器

在浏览器中发现其没有效果！！！

这是因为“deault_if_none"过滤器针对的是，定义了的变量，只不过变量的值为none而已。这种情况，在数据库查找时，可能用的到。

在views.py中，传入xdd666这个变量，并设置为None

重新在浏览器中访问

3.capfirst

值得注意的是，过滤器可接连使用。如下面的例子，将变量先全部变小写后，再将首字母变大写。

在模版中引入：

在浏览器中查看

可见，capfirst的作用就是将变量的首字母变为大写。

4.cut

cut过滤器后需跟参数，表示删除、切掉指定的参数。

过滤器的传参格式为{{变量|过滤器：‘ 参数’}}

模版中

浏览器中查看

5.常用过滤器小结

常用的过滤器总结如下

（1）add举例

视图函数中定义num1值为18和num2值为2

模板中引用add

浏览器中查看

（2）first 和last举例

视图函数

模版定义

浏览器查看

（3）join举例

模板定义

join以“666"进行拼接： {{ list|join:'666' }}

浏览器查看

（4）truncatechars和truncatewords举例

当我们访问网页时，经常遇到这种情况，访问的网址下面，没有显示全，会有”...“的出现。这种效果，就是通过truncatechars或是truncatewords来实现的。

模版定义

未截取：{{ test }}<br>
截断字符：{{ test|truncatechars:7 }}<br>
截断单词：{{ test|truncatewords:2 }}<br>

浏览器查看

可以看到truncatechars过滤器，截断以字符为单位，包括了3个点。如上，当截断7个字符时，显示的结果为THIS...共7个字。

truncatewords过滤器，截断以单词为单位，如上，设置截断为2时，得到了两个单词”THIS IS"还有3个点.

（4）truncatechars_html和truncatewords_html举例

当truncatechars_html或truncatewords_html截断的对象为html标签内容时，标签不会被截断。而truncatechars和truncatewords在截断时，则会将标签计算在内。

视图函数中定义html变量

def index(request):
return render(request,'movie/index.html',
context={
'html':'<h1>THIS IS IN HTML!</h1>'
}
)

模版中使用过滤器

未截取：{{ html }}<br>
截断7字符：{{ html|truncatechars:7 }}<br>
截断2单词：{{ html|truncatewords:2 }}<br>
截断7字符_html：{{ html|truncatechars_html:7 }}<br>
截断2单词_html:{{ html|truncatewords_html:2 }}<br>

浏览器中显示

（5）slice举例

需要注意的是slice切片的区间，写在过滤器后的字符串中，以冒号隔开，区间是左闭右开。

模版定义

列表：{{ list }}<br>
切片[1:2]的结果：{{ list|slice:'1:2' }}

浏览器中显示

（6）striptags和safe举例

striptags对带有html标签的变量，能够将其标签去掉。而safe对带有html标签的变量，能够将其效果显示出来。

模版中定义

原始：{{ html }}<br>
去掉标签：{{ html|striptags }}<br>
显示标签效果：{{ html|safe }}<br>

浏览器中查看

（7）floatformat举例

在视图函数中定义float浮点变量

def index(request):
return render(request,'movie/index.html',
context={
'float':3.1415
}
)

模版中使用过滤器，保留3位小数（默认是保留1位小数）

保留3位小数：{{ float|floatformat:3 }}

浏览器中显示

（8）length和length_is举例

length过滤器用来返回变量的长度，length_is过滤器用来返回“True"或"False"用来判断变量长度是否为某个值。

模板定义

列表为：{{ list }}<br>
列表长度为：{{ list|length }}<br>
列表长度是否为4：{{ list|length_is:4 }}<br>
列表长度是否为3：{{ list|length_is:3 }}

浏览器中查看

6.date和time过滤器

date和time过滤器的格式如下

1Y:  四位数的年。如2019 2y:  两位数的年。如19 3m:  两位数的月。如01，06 4n:  一位数的月。如1，2，12 5d:  两位数的日。如01，02，31 6j:  一位数的日。如1，3，31 7g:  12小时制的一位数的小时。如1，2，12 8G：  24小时制的一位数的小时。如0，8，23 9h:   12小时制的两位数的小时。如01，08，12 10H:   24小时制的两位数的小时。如01，13，24 11i:   分钟。从00-59 12s:   秒。 从00-59

（1）时间获取与时差更正

在views.py中导入datetime模块，定义”now"变量表示当前时间

#导入时间模块
import datetime
def index(request):
return render(request,'movie/index.html',
context={
'now':datetime.datetime.now
}
)

在模版中定义

当前时间为：{{ now }}

在浏览器中查看

此时，我们发现，系统输出的时间和我们的本地时间，相差了8个小时，也就是说有8个小时的时差！！！

下面我们来进行时差的更正：

我们找到主目录下的settings.py文件中的“TIME_ZONE"其默认值为'UTC'

我们将其改为“Asia/Shanghai”(亚洲/上海)时区

TIME_ZONE = 'Asia/Shanghai'

之后，在浏览器中重新查看，发现时间已和我们的本地时间一致。

（2）date和time过滤器的使用

从上可以看到，系统默认的时间输出格式是，“月-日-年-时间（a.m.(上午)或p.m.(下午)）这符合英美的习惯却不符合我们的”年-月-日“时间习惯。这时，我们便可以使用过滤器来控制时间的格式输出。

模版定义

系统默认输出当前时间为：{{ now }}<br>
自定义输出当前时间:{{ now|date:'Y-n-d-H:i:s' }}<br>
默认time输出：{{ now|time }}<br>
自定义time输出：{{ now|time:'H:i:s' }}

在浏览器中查看

四、静态文件的引用

例如css、js、图片都属于静态文件，在Django项目中，我们如何引用呢？

1.环境配置

（1）在项目目录中创建”static"文件夹，在其文件夹下创建“css”、“js”、“images”子文件夹。

(2)在主目录中的settings.py 的最后配置“static"的路径（类似于templates的配置）

系统默认为我们建好了”static"的路由

如果没有，我们可以自己创建

STATIC_URL = '/static/'

另外，我们需要再建立一个变量“STATICFILES_DIRS”,类似于templates的“DIR",也是一个列表。

STATICFILES_DIRS=[

]

我们在其中写入”static"的文件路径

STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]

2.新建css、js文件，导入本地图片

（1）在css文件夹下新建css文件，控制背景颜色为天蓝色（用来测试）

起名为“mystyle"

控制背景颜色为天蓝

输入代码如下

body{
background:skyblue;
}

（2）在js文件夹下新建js文件，进行弹窗（用来测试）

起名为”myjs"

弹窗输出“大家好！我是IT小叮当！”

输入代码如下：

alert('大家好！我是IT小叮当');

（3）在images文件夹下随意导入一张本地图片（用来测试）

直接选中本地图片，将其拖到“images"文件夹中，pycharm将会自动弹出"move"界面，选择”ok"即可。

3.创建模版、视图函数、配置路由

（1）在templates下movie中新建“static_test.html"（用来测试）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态文件引用</title>
</head>
<body>

</body>
</html>

（2）在movie下的views.py中新建视图函数

def static_test(request):
return render(request,'movie/static_test.html')

（3）在movie下的urls.py中配置路由

代码如下

path('static/',views.static_test),

（4）每次新建文件后都要确保文件上传到虚拟机中的服务器上

可以在”file transer"中查看

也可以自己手动上传，在项目文件夹处，右键找到“Deployment”--"upload to xxx"(xxx为你建立的远程会话连接)

3.静态文件引用方式一：绝对路径引用

（1）使用link中的href加绝对路径引用css

(2)使用script中的src加绝对路径引用js

(3)使用img中的src加绝对路径引用图片

整体的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态文件引用</title>
<link rel="stylesheet" href="/static/css/mystyle.css">
</head>
<body>
<script src="/static/js/myjs.js"></script>
<img src="/static/images/二维码.jpg">
</body>
</html>

在浏览器中查看，首先弹出弹窗，这说明js引用成功。

点击确定后，出现蓝色背景，说明css引用成功；出现图片，说明图片引用成功。

4.静态文件引用方式二：模版标签引用

对于静态文件，我们也可以通过load加载的方式引用

（1）load加载static

{% load static %}

(2)使用link中的href用模版标签的方法引用css

(3)使用script中的src用模版标签的方法引用引用js

(4)使用img中的src和模版标签的方法引用图片

整体的代码如下：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态文件引用</title>
<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">
</head>
<body>
<script src="{% static 'js/myjs.js' %}"></script>
<img src="{% static 'images/二维码.jpg' %}">
</body>
</html>

在浏览器中查看，首先弹出弹窗，这说明使用模版标签的方法js引用成功。

点击确定后，出现蓝色背景，说明通过模版标签的方法css引用成功；出现图片，说明通过模版标签的方法图片引用成功。

小结：

（1）模版标签的引用静态文件的方法，是把“static"文件夹引用进来了，只要在”static"文件夹下的文件都能找到。

（2）绝对路径引用静态文件的方法，是明确的定位到某个文件，独一无二。

（3）模版标签更像是引用到了一个房间，再从房间内找到个人，在房间内的文件都可引用，；绝对路径引用就像是定位到了房间内的个人具体位置。

标签：

零基础入手Django(三)：模板变量

零基础入手Django(三)：模板变量的评论 (共条)

你可能也喜欢这些文章

最新发布的文章

零基础入手Django(三)：模板变量

本文作者的其他文章

零基础入手Django(三)：模板变量的评论 (共 条)

你可能也喜欢这些文章

最新发布的文章

零基础入手Django(三)：模板变量的评论 (共条)