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

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

 一、模板路径配置

1.redirect重定向传参

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

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

path('article_new/<num>/', views.article2,name="article2"),

如下

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

def article(request,num,**kwargs):        return redirect('article_new/%s'%num)

如下

在浏览器中测试

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

def article(request,num,**kwargs):        return redirect(reverse('article2'),args=(num,))

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中编写视图函数渲染模板。

def test_app(request,**kwargs):    return render(request,'book_index.html')

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

具体代码如下:

path('test/',views.test_app),

在浏览器中测试:

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

二、模板变量

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

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

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

(1)在movie文件夹下新建urls.py

代码如下:

#!/usr/bin/env python

# -*- coding:utf-8 -*-  __author__ = 'IT小叮当'__time__ = '2019-01-16 16:34'from django.urls import path

urlpatterns=[

]

(2)使用include在主目录的urls.py中

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

path('movie/',include('movie.urls'))

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

代码如下

movie主页

我是{{ name }}

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

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

视图函数代码为:

from django.shortcuts import render

# Create your views here.def index(request):    myname='IT小叮当'    return render(request,'movie/index.html',context={'name':myname})

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

代码如下

#!/usr/bin/env python

# -*- coding:utf-8 -*-  __author__ = 'IT小叮当'__time__ = '2019-01-16 16:34'from django.urls import path

from . import views

urlpatterns=[

path('index/',views.index),]

(5)启动服务后,在浏览器中查看

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

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

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

(1)重新定义movie下views.py

from django.shortcuts import render

# Create your views here.

#定义函数def hello():    return '大家好,这是小叮当自定义的函数!'#定义类class xdd:    def __init__(self,name,age):        self.name=name        self.age=age    def say(self):        return '大家好!我是IT小叮当,这是在类里建的方法!'xdd_info=xdd('IT小叮当',18)

#定义列表li=['a','b','c']

#定义字典di={'x':1,'y':2}

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

context={'strname':'我是字符串',#传递字符串                           'hello':hello,#传递自定义函数                           'xdd_say':xdd_info.say,#传递类方法                           'xdd':xdd_info,#传递类对象                           'list':li,#传递列表                           'dict':di,#传递字典                           }

)

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

movie主页

模板变量为字符串:{{ strname }}

模板变量为函数对象:{{ hello }}

模板变量为类方法对象:{{ xdd_say }}

模版变量为类对象:{{ xdd }}

模版变量为类对象,并访问类对象的属性:{{ xdd.name }}

模版变量为类对象,并访问类对象的方法:{{ xdd.say }}

模版变量为列表对象:{{ list }}

模版变量为列表对象,访问列表的元素{{ list.1 }}

模版变量为字典对象{{ dict }}

模版变量为字典对象,访问字典的键{{ dict.x }}

(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文件

from django.shortcuts import render

# Create your views here.

mytest="THIS IS TEST!"def index(request):    return render(request,'movie/index.html',

context={                           'test':mytest,

}

)

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

movie主页

原始的模版变量:{{ test }}

变小写:{{ test|lower }}

(3) 浏览器中访问:

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

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

2.空值过滤器

(1)default

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

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

在浏览器中访问

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

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

xxxxxx{{ xdd666|default:'我不在'}}yyyy

再次在浏览器中访问

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

(2)default_if_none

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

xxxxxx{{ xdd666|default_if_none:'我不在'}}yyyy

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

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

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

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

context={                           'test':mytest,

'xdd666':None,

}                  )

重新在浏览器中访问

3.capfirst

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

在模版中引入:

变小写后,首字母变大写:{{ test|lower|capfirst }}

在浏览器中查看

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

4.cut

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

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

模版中

切掉空格:{{ test|cut:' ' }}

切掉IS: {{ test|cut:'IS' }}

浏览器中查看

5.常用过滤器小结

常用的过滤器总结如下

1add:字符串相加,数字相加,列表相加,如果失败,将会返回一个空字符串。

2default:提供一个默认值,在这个值被django认为是False的时候使用。比如:空字符串、None区别于default_if_none,这个只有在变量为None时才会使用默认值。

3first:返回列表中的第一个值。

4last:返回列表中的最后一个值。

5date:格式化日期和时间

6time:格式化时间。

7join:跟python中的join一样的用法。用于拼接字符串。

8length:返回字符串或者是数组的长度。

9length_is:字符串或者是数组的长度是否是指定的值。

10lower:把所有字符串都变成小写。

11truncatechars:根据后面给的参数,截断字符,如果超过了用...表示。

12truncatewords:同truncatechars,这个是以一个单词为单位进行截断。以上两个有XXX_html类型的,针对html,截断标签中的字符,而不会截断标签。

13capfirst:首字母大写。

14slice:切割列表。用法跟python中的切片操作是一样的,区间是前闭合后开放。

15striptags:去掉所有的html标签。

16safe:关闭变量的自动转义。

17floatformat:浮点数格式化。

(1)add举例

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

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

context={                           'test':mytest,

'xdd666':None,

'num1':18,

'num2':2,

}

)

模板中引用add

两数相加: {{ num1|add:num2 }}

浏览器中查看

(2)first 和last举例

视图函数

#定义列表li=['a','b','c']

mytest="THIS IS TEST!"def index(request):    return render(request,'movie/index.html',

context={                           'list':li,#传递列表                           'dict':di,#传递字典                           'test':mytest,

'xdd666':None,

'num1':18,

'num2':2,

}

)

模版定义

列表:{{ list }}

first取列表第一个值:{{ list|first }}

last取列表最后一个值:{{ list|last }}

浏览器查看

(3)join举例

模板定义

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

浏览器查看

(4)truncatechars和truncatewords举例

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

模版定义

未截取:{{ test }}

截断字符:{{ test|truncatechars:7 }}

截断单词:{{ test|truncatewords:2 }}

浏览器查看

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

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

(4)truncatechars_html和truncatewords_html举例

truncatechars_htmltruncatewords_html截断的对象为html标签内容时,标签不会被截断。而truncatecharstruncatewords在截断时,则会将标签计算在

视图函数中定义html变量

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

context={

'html':'

THIS IS IN HTML!

'                           }                  )

模版中使用过滤器

未截取:{{ html }}

截断7字符:{{ html|truncatechars:7 }}

截断2单词:{{ html|truncatewords:2 }}

截断7字符_html:{{ html|truncatechars_html:7 }}

截断2单词_html:{{ html|truncatewords_html:2 }}

浏览器中显示

(5)slice举例

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

模版定义

列表:{{ list }}

切片[1:2]的结果 :{{ list|slice:'1:2' }}

浏览器中显示

(6)striptags和safe举例

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

模版中定义

原始:{{ html }}

去掉标签:{{ html|striptags }}

显示标签效果:{{ html|safe }}

浏览器中查看

(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 }}

列表长度为:{{ list|length }}

列表长度是否为4:{{ list|length_is:4 }}

列表长度是否为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 }}

自定义输出当前时间:{{ now|date:'Y-n-d-H:i:s' }}

默认time输出:{{ now|time }}

自定义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"(用来测试)

代码如下:

静态文件引用

(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

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

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

<script src="/static/js/myjs.js"></script>

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

<img src="/static/images/二维码.jpg">

整体的代码如下:

静态文件引用

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

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

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

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

(1)load加载static

{% load static %}

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

<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">

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

<script src="{% static 'js/myjs.js' %}"></script>

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

<img src="{% static 'images/二维码.jpg' %}">

整体的代码如下:

{% load static %}

静态文件引用    

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

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

小结:

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,245评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,749评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,960评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,575评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,668评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,670评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,664评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,422评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,864评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,015评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,646评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2 352

推荐阅读更多精彩内容