1.模板路径的查找
- 查找顺序
- 首先会在根目录下的templates文件夹下面查找
- 之后会在已注册的app中的templates文件夹下面查找
- 只要找到一个符合的模板，就返回
- 两种方案
- 项目部署
- app复用
2.静态页面，动态页面
- 静态页面：无法变化，
- 动态页面：根据交互的不同会进行变化
3.渲染机制
- 可以将模板变量渲染进入页面
class Index(View):
def get(self, request):
now = datetime.now()
return render(request, 'index/home.html', context={
'now': now
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
</head>
<body>
<h1>我是主页</h1>
<h4>当前时间是：{{ now }}</h4>
</body>
</html>
4.模板变量
- 语法
- 语法: {{ 变量名 }}
- 命名由字母和数字以及下划线组成，不能有空格和标点符号
- 可以使用字典、模型、方法、函数、列表
- 不要和python或django关键字重名
- 变量和查找
- 变量的解析规则
- 计算变量，将其替换为结果
- 遇到点(.)的时候，按一下顺序查找：
- 字典键值查找
- 属性或方法查找
- 数字索引查找
- 如果结果是可调用的，则调用它时不带参数。调用的结果成为模板的值
- 所谓的结果是可调用的，说明变量是不带参数个函数，或是个方法
- 渲染失败返回: ''
class Fruits:
def __init__(self, name, color):
self.name = name
self.color = color
def food(self):
return '水果也是食物哦'
class Index(View):
def get(self, request):
now = datetime.now()
list1 = [1,2,3]
dict1 = {'name': '刘威', 'age': 18}
dict2 = {'name': '刘威', 'age': 18, 'items':'abc'}
def func():
return '我是一个无参数的可调用函数'
fruit = Fruits('apple', 'red')
return render(request, 'index/home.html', context={
'now': now,
'list1':list1,
'dict1': dict1,
'dict2': dict2,
'func':func,
'fruit':fruit,
})
<body>
<h4>变量调用：{{ now }}</h4>
<h4>列表调用：{{ list1}}</h4>
<h4>列表值调用：{{ list1.2}}</h4>
<h4>字典调用：{{ dict1 }}</h4>
<h4>字典key调用：{{ dict1.name }}</h4>
<h4>字典方法调用：{{ dict2.items }}</h4>
<h4>函数调用：{{ func }}</h4>
<h4>类对象调用：{{ fruit }}</h4>
<h4>类对象属性调用：{{ fruit.name }}</h4>
<h4>类对象方法调用：{{ fruit.food }}</h4>
</body>
模板变量.png
5.模板过滤器 filter
-
作用：对变量进行过滤。在真正渲染出来之前，过滤器会根据功能处理好变量，然后得出结果后再替换掉原来的变量展示出来
- 语法：{{fruits|lower}}
-
链式调用：比如实现一个功能，先把所有字符变成小写，把第一个字符转换成大写
- 语法：{{fruits|lower|capfirst}}
-
使用参数：过滤器可以使用参数，在过滤器名称后面使用冒号”:”再加上参数，比如要把一个字符串中所有的空格去掉，则可以使用cut过滤器
- 语法如下: {{fruits|cut:" "}}
- 注意：使用参数的时候，冒号和参数之间不能有任何空格，一定要紧挨着
-
常用模板过滤器
- add 将参数与值相加 首先尝试转换成整数相加，失败，则尝试字符串，列表相加等。{{ value|add:"2" }}
- capfirst 首字母大写，如果第一个字母不是字母则不起作用。{{ value|capfirst }}
- date 日期格式化 {{ value|date:"D d M Y" }}
- time 时间格式化 {{ value|time:"H:i" }} 格式化格式见官方文档：https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#date
- default 如果变量解析失败，使用给定的默认值。{{ value|default:"nothing" }}（注意如果value是''空字符串，输出将会是'nothing'）
- first 返回列表的第一个元素 {{ value|first }}
- last 返回列表的最有一个元素 {{ value|last }}
- slice 返回一个列表的切片 {{ some_list|slice:":2" }}，前闭后开
- join 连接字符串列表 与str.join（list）一样 {{ value|join:" // " }}
- floatformat 浮点数格式化 不指定小数位参数，默认保留一个为小数
- length 返回字符串或列表的长度
- length_is 判断字符串或列表长度是否指定的值，相等返回True {{ value|length_is:"4" }}
- lower 字符串中的字母都变小写{{ value|lower }}
- upper 字符串中的字母都变大写{{ value|upper }}
- safe 关闭变量的自动转义，使html标签生效{{ value|safe }}
- title 标题化，首字母大写 {{ value|title }}
- truncatechars 根据后面给的参数，截断字符，如果超过了用...表示
- truncatewords 同truncatechars，不过这个一个以单词为单位，进行截断
以上两个针对html，会截断标签中的字符，而不会截断标签 - striptags 去掉所有的html标签
xss 跨域脚本攻击
class Index(View):
def get(self, request):
# 用js写个死循环alert(1), 在渲染到前端，有兴趣的可以试试
js= '<script>alert(1)</script>'
return render(request, 'index/home.html', context={
'js':js
})
<body>
<p>{{ js|safe }}</p>
</body>
6.静态文件(static:css js image)
- 路径配置
# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
- 静态文件的引入
{# index.html #}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="{% static 'css/index/index.css' %}">
</head>
<body>
<p>我是红色</p>
</body>
</html>
/* index.css */
p{
color: red;
}
- 访问
# index.views.py
from django.views import View
from django.shortcuts import render,
class Index(View):
def get(self, request):
return render(request, 'index/home.html')
# index/urls.py
from django.views import View
from django.shortcuts import render,
class Index(View):
def get(self, request):
return render(request, 'index/home.html')
7.Bootstrap套用举例
image.png
image.png
image.png
image.png
image.png
再获取网页源代码，以及相应css文件，导入到我们的项目中，进行代码设计
image.png
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/login/login.css' %}" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
</body>
</html>
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
class Login(View):
def get(self, request):
return render(request, 'login/login.html')
urlpatterns = [
path('login/', views.Login.as_view(), name='login'),
]
