三、模板变量及模板过滤器

发布时间:2019-05-27 22:20:21编辑:auto阅读(1821)

    1 模板路径配置与查找

    模板路径在配置文件的settings.py中进行配置,其配置方式有两种:

    1. DIRS 定义一个目录列表,模板引擎按列表顺序搜索这些目录以查找模板源文件。templates文件夹在项目跟目录下.
    2. APP_DIRS 知会模板引擎是否应该进入每个已安装的应用中查找模板,值为True则模板会去注册过的app下面的templates文件夹查找模板。故而我们也可以在每个app的里面创建模板目录templates存放模板,这种方式需要将这个app添加到setting.py文件的 INSTALLED_APPS 列表中.

    其中,第一种方式的优先级高,模板引擎会优先搜索第一种方式中的模板文件,如果不存在才会搜索第二种方式中的模板文件。引擎只要找到符合要求的模板就会返回。

    2 模板变量

    • 模板变量使用规则
    1. 语法: {{变量名}}
    2. 变量名由字母、数字和下划线组成,不能有空格和标点符号,且不能以下划线开头
    3. 可以使用字典、列表、函数、模型、方法
    4. 不要与python或Django关键字重名
    5. 变量和查找
    • 其中,遇到点(.)时,按以下顺序查找:
    1. 字典键值查找
    2. 属性或方法查找
    3. 数字索引查找

    如果结果是可调用的,则调用是不带参数,模板的值为调用的结果

    渲染失败则返回空('')

    3 模板过滤器

    • 作用

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

      语法:{{fruits|lower}}

    • 链式使用

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

      语法:{{fruits|lower|capfirst}}

    • 使用参数

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

      语法:{{fruits|cut:" "}}

    使用参数的时候,冒号和参数之间不能有任何空格,一定要紧挨着。

    • 常用过滤器
    过滤器 作用
    add 字符串、数字、列表相加,如果失败则返回空""
    default 如果变量解析失败,使用给定的默认值。包括空""和None
    first 返回第一个值
    last 返回最后一个值
    date 格式化时间和日期
    time 格式化时间
    join 连接字符串列表
    length 返回字符串、列表或数组的长度
    length_is 判断目标变量长度是否为指定值,返回True或Flase
    lower 所有字母小写
    upper 所有字母大写
    truncatechars 根据其后给定参数截断字符,超出用...表示
    truncatewords 同上,不过其以单词为单位
    capfirst 首字母大写
    slice 切割列表,用法与python切片相同
    striptags 去掉所有的html标签
    safe 关闭变量的自动转义
    floatformat 浮点数格式化
     
    • date和time过滤器格式
    格式 效果
    Y 四位数的年,如:2018
    y 两位数的年,如:18
    m 两位数的月,如:01,09
    n 一位数的月,如:1,9,12
    d 两位数的日,如:01,09,31
    j 一位数的日,如:1,9,31
    g 12小时制的一位数的小时,如:1,9,12
    G 24小时制的一位数的小时,如:0,8,23
    h 12小时制的两位数的小时,如:01,09,12
    H 24小时制的两位数的小时,如:01,13,24
    i 分钟,从00-59
    s 秒,从00-59
     
    • 例子
     1 # student下的views.py
     2 from django.http import HttpResponse
     3 from django.shortcuts import render, reverse, redirect
     4 from datetime import datetime
     5 
     6 def hello(request):
     7     current_time = datetime.now()
     8     lt = [1, 'l', 66]
     9     li = ['p']
    10     dt = {'tt': 55, 'age': 10}
    11     tl = ('l', 4, 99)
    12 
    13     def func():
    14         return 'hello'
    15 
    16     class Car:
    17         def __init__(self, brand, price):
    18             self.brand = brand
    19             self.price = price
    20 
    21         @staticmethod
    22         def travel(self):
    23             print('ssssss')
    24             return 'sou~~~'
    25     s_car = Car('ferrari', 1)
    26     return render(request, 'student/index.html',
    27                   context={
    28                       'current_time': current_time,
    29                       'lt': lt,
    30                       'li': li,
    31                       'dt': dt,
    32                       'tl': tl,
    33                       'func': func,
    34                       'car': s_car,
    35                       'travle': s_car.travel,
    36                   })
     1 {#对应的index.html#}
     2 <!DOCTYPE html>
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>学生</title>
     7 </head>
     8 <body>
     9     <h1>这里是学生首页</h1>
    10     <form action="">
    11         <h1>当前时间:{{ current_time|date:'Y-m-d H:i:s' }}</h1>
    12         <h2>这是一个列表:{{ lt|add:li }}</h2>
    13         <h2>这是列表的一个切片:{{ lt|slice:":2" }}</h2>
    14         <h2>列表{{ lt }}的长度为:{{ lt|length }}</h2>
    15         <h2>列表{{ lt }}的长度是{{ lt|length }}吗:{{ lt|length_is:3 }}</h2>
    16         <h2>这是一个字典:{{ dt }}</h2>
    17         <h2>这是一个元组:{{ tl }}</h2>
    18         <h2>这是元组的第一个值:{{ tl|first }}</h2>
    19         <h2>这是元组的最后一个值:{{ tl|last }}</h2>
    20         <h2>这是列表的一个值:{{ lt.0|add:5 }}</h2>
    21         <h2>这是一个函数:{{ func|capfirst }}</h2>
    22         <h2>这是一个类对象:{{ car }}</h2>
    23         <h2>这是一个类对象属性:{{ car.brand }}</h2>
    24         <h2>这是一个类对象方法:{{ travel|default:"nothing"|add:' haha'|title }}</h2>
    25         <p>用户名:<input type="text"></p>
    26         <p>密码:<input type="password"></p>
    27         <p><input type="submit" value="登录"></p>
    28     </form>
    29 </body>
    30 </html>

    最后效果

    4 自动转义

    自动转义是将变量的一些特殊字符,比如左箭头(<)、右箭头(>)转义成html代码,这样做的目的是为了处理一些不安全的变量。

    转义前 转义后
    < &lt;
    > &gt;
    &#39;
    &quot;
    & &amp;
     

    5 静态文件的引用

    • 在项目目录下创建static的目录, 为了区分开各种类型的文件分别创建css,image,js的目录.
    • 在settings.py文件中添加STATICFILES_DIRS,设置静态文件目录路径,同templates。
    1 STATIC_URL = '/static/'
    2 STATICFILES_DIRS = [
    3     os.path.join(BASE_DIR, 'static')
    4 ]
    • 引用
      • 创建模板/templates/studentlogin.html
     1 {% load static %}
     2 <!DOCTYPE html>
     3 <html lang="zh-CN">
     4   <head>
     5     <meta charset="utf-8">
     6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     7     <meta name="viewport" content="width=device-width, initial-scale=1">
     8     <meta name="description" content="">
     9     <meta name="author" content="">
    10     <title>Signin Template for Bootstrap</title>
    11     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    12     <link href="{% static 'student/css/signin.css' %}" rel="stylesheet">
    13   </head>
    14 </html>
    15 <!-- 仅有部分代码 -->
      • 创建/static/student/css/signin.css
     1 body {
     2   padding-top: 40px;
     3   padding-bottom: 40px;
     4   background-color: #eee;
     5 }
     6 
     7 .form-signin {
     8   max-width: 330px;
     9   padding: 15px;
    10   margin: 0 auto;
    11 }
    12 .form-signin .form-signin-heading,
    13 .form-signin .checkbox {
    14   margin-bottom: 10px;
    15 }
    16 .form-signin .checkbox {
    17   font-weight: normal;
    18 }
    19 .form-signin .form-control {
    20   position: relative;
    21   height: auto;
    22   -webkit-box-sizing: border-box;
    23      -moz-box-sizing: border-box;
    24           box-sizing: border-box;
    25   padding: 10px;
    26   font-size: 16px;
    27 }
    28 .form-signin .form-control:focus {
    29   z-index: 2;
    30 }
    31 .form-signin input[type="email"] {
    32   margin-bottom: -1px;
    33   border-bottom-right-radius: 0;
    34   border-bottom-left-radius: 0;
    35 }
    36 .form-signin input[type="password"] {
    37   margin-bottom: 10px;
    38   border-top-left-radius: 0;
    39   border-top-right-radius: 0;
    40 }
      • student/views.py中引入
    1 def login(request):
    2     return render(request, 'student/login.html')
      • student/urls.py中引入
    1 urlpatterns = [
    2     path('login/', views.login),
    3 ]
    • 效果图

     

关键字