Python（四十七）模板变量及模板过滤器

作者: Lonelyroots | 来源:发表于2022-01-08 22:21 被阅读0次

Python（四十七）模板变量及模板过滤器
Django_补充小技巧
Django模板-模板语言
Jinja2 变量过滤器测试器
django过滤器
Django 模板变量及模板过滤器
3. 模板变量及模板过滤器
Django中模板过滤器的使用（十一）
模板语法
Django的模板层

从2021年9月2日发文至今，Python系列（包括代码在内）共计88918个字、四十七篇！

1. 模板路径总结

1.1. 模板放在哪里？

1.在主目录下创建一个templates目录用来存放所有的html的模板文件。
2.templates目录里面在新建各个以app名字命名的目录来存放各个app中模板文件。

1.2. setting.py中的模板路径配置

将存放html模板的templates目录路径添加到settings.py文件中的DIRS中。

在配置文件setting.py中找到TEMPLATES设置来配置。
这是一个设置选项的列表，模板大多包含两项通用设置；两种方式配置模板:
第一种: DIRS定义一个目录列表，模板引擎按列表顺序搜索这些目录以查找模板源文件。将templates放在主项目目录下，也就是上面这种方式。
第二种:APP_DIRS告诉模板引擎是否应该进入每个已安装的应用中查找模板，值为True，则模板会去安装了的app下面的templates文件夹查找模板。所以我们也可以在对应app下创建一个templates文件，然后将模板文件放到对应的templates文件下方，这种方式需要将这个app添加到setting.py文件的INSTALLED_APPS列表中。

2. 模板变量

2.1. 模板变量使用规则

1.语法: {{ 变量名 }}
2.命名由字母和数字以及下划线组成，不能有空格和标点符号
3.可以使用字典、模型、方法、函数、列表等
4.不要和python或django关键字重名
5.变量和查找
注:
1.如果data是一个字典，那么访问data.items将会访问data这个字典的key名为items的值，而不会访问字典的items方法。
2.点在模板渲染时有特殊的含义，变量名中点表示查找。

主路由的urls.py文件：

from django.contrib import admin
from django.urls import path,re_path,include
# 从同级目录下导入文件
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/',views.index),      # 通过index路由，访问视图函数
    # path('test/<name>/<age>/', views.test),  # 路由可以随便取，但参数一定要一致即<name>

    # # 转换器的使用，限定参数类型
    # # slug：匹配数字、字母、横杠、下划线组成的字符串；int：匹配正整数与0
    # path('test/<slug:name>/<int:age>/',views.test),     #路由可以随便取，但参数一定要一致即<name>，这里有限定参数的类型

    # 正则匹配,?P规定参数
    # re_path('^test/(?P<name>[A-z0-9_]{6,12})/(?P<age>[0-1][0-9]{0,2})/$',views.test),

    # path('book/',include('book.urls')),      # 给book app分配一个子路由，访问的是整个文件
    # path('movie/',include('movie.urls')),      # 给movie app分配一个子路由，访问的是整个文件

    # path('book/',include('book.urls'),{'flag':'True'}),     # 如果需要给app—book的所有分路由一个参数值，那就用字典来传递，既然传递了这个参数值，book的views视图函数就必须要用**kwargs来接收
    path('book/',include('book.urls')),      # 给book app分配一个子路由，访问的是整个文件
    path('movie/',include('movie.urls')),
]

分路由book的views.py文件：

"""一二、模板变量"""
from django.shortcuts import render     # 渲染页面需导入模块
def hello():
    return "hello world!"

class Person:
    def __init__(self,name,age):
        self.name = name
        self.age = age
    def learn(self):
        return 'this is learning'
ch = Person('chenhong',18)

li = ['q','w','e',1,2,3]
dic = {'a':1,'b':2,'c':3}

def temp(request):
    return render(request,'book/index.html',context={
        'book_name':'book_python',
        'hello':hello,      # 函数，传函数体就可以
        'ch':ch,     # 类对象
        'learn':ch.learn,       # 实例对象调用类里的方法
        'li':li,     # 列表
        'dic':dic       # 字典
    })

def login(request,name,pwd):
    if name == 'ch' and pwd == 'qwe123':
        return  render(request,'book/index.html',context={'username':name})
    else:
        return HttpResponse('用户名或者密码错误，登陆失败！')

渲染页面的index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板变量</title>
</head>
<body>

{#    一、通过模板变量接收后台传输过来的值#}

    这是字符串对象：{{book_name}}    <br>
    这是函数对象：{{hello}}    <br>
    这是类对象：{{ch}}    <br>
    这是类对象的name属性：{{ch.name}}    <br>
    这是类对象的age属性：{{ch.age}}    <br>
    这是方法对象：{{learn}}    <br>
    这是列表对象：{{li}}    <br>
    这是列表对象的第一个数据：{{li.0}}    <br>
    这是字典对象：{{dic}}    <br>
    这是字典对象的对应键的值：{{dic.a}}{{ dic.b }}    <br>



{#    二、通过模板变量接收后台传输过来的值#}

    欢迎{{ username }}登录网站！    <br>


</body>
</html>

分路由book的urls.py文件：

from django.urls import path
# 从同级目录下导入文件
from . import views

urlpatterns = [
    path('index/',views.index),
    path('hello/',views.hello),
    path('temp/',views.temp),
    path('login/<name>/<pwd>',views.login),

]

查看网页指令：
127.0.0.1:8000/book/hello
127.0.0.1:8000/book/temp
127.0.0.1:8000/book/login/ch/qwe123

3. 常用的过滤器

3.1. 过滤器

作用: 对变量进行过滤。在真正渲染出来之前，过滤器会根据功能处理好变量，然后得出结果后再替换掉原来的变量展示出来。

管道符号进行链式调用，比如实现一个功能，先把所有字符变成小写，把第一个字符转换成大写。

使用参数:过滤器可以使用参数，在过滤器名称后面使用冒号”:”再加上参数，比如要把一个字符串中所有的空格去掉，则可以使用cut过滤器。

分路由book的views.py文件：

"""三、模板过滤器"""
str1 = 'I like django'
tu1 = ('a','b','c','d')
li = ['q','w','e',1,2,3]
dic = {'a':1,'b':2,'c':3}

def temp_1(request):
    return render(request,'book/index.html',context={
        'name':'python chenhong',
        'name1':'PYTHON CHENHONG',
        'age':20,
        'nn':None,
        'li1':li,
        'dic1':dic,
        'tu1':tu1,
        'str1':str1,
        'null':'',
        'num1':1,
        'num2':2,
        'now':datetime.datetime.now,
        'html':'<h1> this is H1 </h1>',
        'float':3.1415926,
        'gt':'&gt;'
    })

这里面有个datetime.datetime.now，在渲染的时候时间会早八小时且不是中文，所以需要去主django配置settings.py文件里修改。LANGUAGE_CODE = 'zh-hans'：将语言改成中文。
TIME_ZONE = 'Asia/Shanghai'：将时间改成现在时间。

渲染页面的index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板过滤器</title>
</head>
<body>

{#    三、过滤器#}

    名字：{{ name }}    <br>
    切割后的名字：{{ name|cut:' '|cut:'p'}}    <br>       {# 切空格和p #}
    年龄：{{ age}}    <br>
    增加年龄：{{ age|add:+1}}    <br>       {# 给age加上1，加减都用add #}
    减少年龄：{{ age|add:-1 }}    <br>       {# 给age减掉1，加减都用add #}
    设置默认值之前：{{ nn }}    <br>
    设置默认值之后：{{ nn|default:'not None' }}    <br>        {# 能够被设置默认值的，都是判断为False的，比如说空字符串、空列表、None #}
    设置None的默认值：{{ nn|default_if_none:'Nn' }}    <br>        {# 只设置None的默认值 #}
    设置null的默认值：{{ null|default:'Nn' }}    <br>        {# 返回Nn #}
    列表：{{ li1 }}    <br>
    列表中的第一个值：{{ li1|first }}    <br>
    列表中的最后一个值：{{ li1|last }}    <br>
    默认时间：{{ now }}    <br>
    格式化date，日期格式：{{ now|date }}    <br>
    格式化time，时间格式：{{ now|time }}    <br>
    格式化日期时间格式：{{ now|date:'Y/m/d/H:i:s' }}    <br>
    字符串：{{ str1 }}    <br>
    字符串join拼接：{{ str1|join:'-' }}    <br>
    获取列表长度：{{ li1|length }}    <br>
    判断列表长度是否为6：{{ li1|length_is:6 }}    <br>
    字符串大写转小写：{{ name1|lower }}    <br>
    截取对应长度字符：{{ str1|truncatechars:9 }}    <br>         {# 根据给的参数，截取9个字符,如果超过了就用...表示 #}
    截取对应长度单词：{{ str1|truncatewords:3 }}    <br>         {# 截取3个单词 #}
    切片：{{ str1|slice:'2:6' }}    <br>       {# 通过下标进行切片 #}
    html数据，会自动转义：{{ html }}    <br>       {# 模板变量默认条件下会进行转义 #}
    关闭变量的自动转义：{{ html|safe }}    <br>         {# 关闭自动转义 #}
    去掉html标签：{{ html|striptags }}    <br>
    默认浮点数：{{ float }}    <br>
    格式化浮点数：{{ float|floatformat:3 }}    <br>     {# 浮点数可以限制保留几位小数 #}
    自动转义的字符：{{ gt }}    <br>        {# 转义：原来什么样，现在就什么样 #}
    关闭自动转义的字符：{{ gt|safe }}    <br>

</body>
</html>

分路由book的urls.py文件：

from django.urls import path
# 从同级目录下导入文件
from . import views

urlpatterns = [
    path('index/',views.index),
    path('temp_1/',views.temp_1),
]

主路由的urls.py文件：

from django.contrib import admin
from django.urls import path,re_path,include
# 从同级目录下导入文件
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('book/',include('book.urls')),      # 给book app分配一个子路由，访问的是整个文件
    path('movie/',include('movie.urls')),
]

查看网页指令：127.0.0.1:8000/book/temp_1

4. 静态文件引用

在项目目录下创建static的目录, 为了区分开各种类型的文件分别创建css,image,js的目录。在settings.py文件中添加STATICFILES_DIRS设置静态文件目录路径，同templates。像下图一样创建一个static文件。

在主文件django的配置文件settings.py文件中加入这句话：STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ]即配置成功。

然后修改分路由book里的templates渲染页面文件，即01_Rotation chart.html。

{% %}：加载静态文件一律采用这种方式书写。
{% load static %}：把所有静态文件加载进来。
{% static '相对路径' %}：加载文件标准格式
<link rel="stylesheet" href="{% static 'css/reset.css' %}">：加载css静态文件
background-image: url({% static 'imgs/1.jpg' %});：加载背景图片
<script src="{% static 'js/slide.js' %}"></script>：加载slide.js静态文件

{% load static %}       {# 把所有静态文件加载进来 #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS lifting operation</title>
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <style>
        .box{
            width: 540px;
            height: 360px;
            border: 1px gray solid;
            border-radius: 5px;
            margin: 40px auto;
            position: relative;
        }
    /*图片左右尖括号样式*/
        .pir li{
            width: 540px;
            height: 360px;
            list-style: none;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .pir #l1{
            background-image: url({% static 'imgs/1.jpg' %});
        }
        .pir #l2{
            background-image: url({% static 'imgs/2.jpg' %});
        }
        .pir #l3{
            background-image: url({% static 'imgs/3.jpg' %});
        }
        .pir #l4{
            background-image: url({% static 'imgs/4.jpg' %});
        }
        .but ul li{
            width: 30px;
            height: 20px;
            /*background-color: cornflowerblue;*/
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            list-style: none;
            /*竖直居中*/
            line-height: 20px;
            /*文字在盒子中水平居中*/
            text-align: center;
            color: crimson;
            /*加粗*/
            font-weight: bolder;
            font-size: 30px;
            /*设置鼠标滑动到此处也不会选中*/
            user-select: none;
        }
        .but ul li:hover{
            color: orange;
            /*鼠标指针样式尖头变成手掌*/
            cursor: pointer;
            /*透明度，越小越透明，越大越不透明*/
            opacity: 0.1;
        }
        .but ul .lt{
            left: 0px;
        }
        .but ul .rt{
            right: 0px;
        }
    /*原点样式*/
        .circle ul{
            /*将无序列表前的小圆点去除*/
            list-style: none;
            width: 80px;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
        }
        .box>.circle ul li{
            width: 10px;
            height: 10px;
            border: 2px gray solid;
            border-radius: 50%;
            float: left;
            margin-right: 5px;
        }
        .box>.circle ul li:hover{
            cursor: pointer;
            border-color: orange;
        }
        .circle li.on{
            background-color: orange;
        }
    </style>

</head>
<body>

    <div class="box">
        <div class="pir">
            <ul>
                <li id="l1" class="show"></li>
                <li id="l2"></li>
                <li id="l3"></li>
                <li id="l4"></li>
            </ul>
        </div>
        <!--尖括号-->
        <div class="but">
            <ul>
                <li class="lt"><</li>
                <li class="rt">></li>
            </ul>
        </div>
        <!--小圆点-->
        <div class="circle">
            <ul>
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

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

</body>
</html>

reset.css文件：

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

slide.js文件：


var $pir = $(".pir li")
var $btn = $(".but li")
var $tab = $(".circle li")
var timer

// 初始化
$pir.hide()
$pir.eq(0).show()
$tab.removeClass("class")
$tab.eq(0).addClass("on")
$btn.hide()

var first=0
function change(i){
    // 取消选中的小圆点和图片的效果
    $tab.eq(first).removeClass("on")
    $pir.eq(first).fadeOut(2000)
    first = i
    $tab.eq(first).addClass("on")
    $pir.eq(first).fadeIn(2000)
}

// 自动轮播
function auto(){
    timer = setInterval(function (){
        var num=first
        if (num>($pir.length)-1){
            num=0
        }
        else{
            num++
        }
        change(num)
    },3000)
}

auto()

// 小圆圈
$tab.click(function (){
    var num=$(this).index()
    if (num!=first){
        change(num)
    }
})

// 左右按钮事件
$btn.click(function (){
    var num=first
    // 下标为1，为真
    if ($(this).index()){
        num++
        if (num>($pir.length)-1){
            num=0
        }
    }// 下标为0，为假
    else{
        num--
        if (num<0){
            num=($pir.length)-1
        }
    }
    change(num)
})

// 鼠标滑入、滑出
$('.box').hover(function (){
    clearInterval(timer)
    $btn.show()
},function (){
    $btn.hide()
    auto()
})

分路由book的views.py文件：

from django.shortcuts import render     # 渲染页面需导入模块
def slide(request):
    return render(request,'book/01_Rotation chart.html')

分路由book的urls.py文件：

from django.urls import path
# 从同级目录下导入文件
from . import views

urlpatterns = [
    path('index/',views.index),
    path('slide/',views.slide),
]

主路由urls.py文件：

from django.contrib import admin
from django.urls import path,re_path,include
# 从同级目录下导入文件
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('book/',include('book.urls')),      # 给book app分配一个子路由，访问的是整个文件
]

文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！

Editor：Lonelyroots

Python（四十七）模板变量及模板过滤器
从2021年9月2日发文至今，Python系列（包括代码在内）共计88918个字、四十七篇！ 1. 模板路径总结 ...
Django_补充小技巧
1.Templates过滤器什么是过滤器？写在模板中，属于Django模板语言可以修改模板中的变量，...
Django模板-模板语言
模板语言包括4种类型，分别是模板变量标签过滤器注释模板变量模板变量的作用是计算并输出，变量名必须由字...
Jinja2 变量过滤器测试器
循环变量上下文变量模板全局变量 Jinja2 模板全局函数 Flask 模板全局函数 Jinja2 常用过滤器...
django过滤器
过滤器写在模板中，属于django模板语言。这样使用： value是变量，filter是过滤器。举例：返回lis...
Django 模板变量及模板过滤器
前一章节我们已经知道了模板的路径设置，这一章节，我们来学习模板的变量，以过滤器。模板变量：此页面可以看出到底是...
3. 模板变量及模板过滤器
1.模板路径的查找查找顺序首先会在根目录下的templates文件夹下面查找之后会在已注册的app中的templ...
Django中模板过滤器的使用（十一）
一、模板过滤器的作用和示例 1、模板过滤器的作用：对变量进行过滤 2、各种例子如下：管道符号进行链式调用，比如实...
模板语法
1. 变量替换 {{ var }} 2. 过滤器过滤器在模板中式放在变量后并用于控制变量显示格式的技术，变量与过...
Django的模板层
python的模板：HTML代码＋模板语法模板语法之变量在 Django 模板中遍历复杂数据结构的关键是句点字...