三、模板变量及模板过滤器
1 模板路径配置与查找
模板路径在配置文件的settings.py中进行配置，其配置方式有两种：
- DIRS 定义一个目录列表，模板引擎按列表顺序搜索这些目录以查找模板源文件。templates文件夹在项目跟目录下.
- APP_DIRS 知会模板引擎是否应该进入每个已安装的应用中查找模板,值为True则模板会去注册过的app下面的templates文件夹查找模板。故而我们也可以在每个app的里面创建模板目录templates存放模板，这种方式需要将这个app添加到setting.py文件的 INSTALLED_APPS 列表中.
其中，第一种方式的优先级高，模板引擎会优先搜索第一种方式中的模板文件，如果不存在才会搜索第二种方式中的模板文件。引擎只要找到符合要求的模板就会返回。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。2 模板变量
- 模板变量使用规则
- 语法： {{变量名}}
- 变量名由字母、数字和下划线组成，不能有空格和标点符号，且不能以下划线开头
- 可以使用字典、列表、函数、模型、方法
- 不要与python或Django关键字重名
- 变量和查找
- 其中，遇到点(.)时，按以下顺序查找：
- 字典键值查找
- 属性或方法查找
- 数字索引查找
如果结果是可调用的，则调用是不带参数，模板的值为调用的结果
渲染失败则返回空('')
3 模板过滤器
- 作用
对变量进行过滤。在真正渲染出来之前，过滤器会根据功能处理好变量，然后得出结果后再替换掉原来的变量展示出来。
语法：{{fruits|lower}}
- 链式使用
管道符号进行链式调用，比如实现一个功能，先把所有字符变成小写，把第一个字符转换成大写。
语法：{{fruits|lower|capfirst}}
- 使用参数
过滤器可以使用参数，在过滤器名称后面使用冒号”:”再加上参数，比如要把一个字符串中所有的空格去掉，则可以使用cut过滤器。
语法：{{fruits|cut:" "}}
使用参数的时候，冒号和参数之间不能有任何空格，一定要紧挨着。
- 常用过滤器
|
- date和time过滤器格式
|
- 例子
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代码，这样做的目的是为了处理一些不安全的变量。
|
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 ]
- 效果图
更多精彩
