一、模板概述
-
模板组成
HTML代码 动态插入的代码(挖坑、填坑逻辑控制代码) -
作用
快速生成HTML页面 -
优点
模板的设计实现了业务逻辑与现实内容的分离 视图可以使用任何模板 -
模板处理
加载 渲染
二、定义模板
-
变量
- 视图传递给模板的数据 - 变量遵守标识符规则 - 语法 {{ var }} - 注意 变量若不存在，则插入空的字符串 - 点语法 字典查询、属性或方法、数字索引 -
标签
- 语法 {% tag %} - 作用 在输出中创建文本 控制逻辑和循环 -
单行注释
{# 注释内容 #} -
标签if
- 语法1 {% if 条件 %} 语句 {% endif %} - 语法2 {% if 条件 %} 语句1 {% else %} 语句2 {% endif %} - 语法3 {% if 条件 %} 语句1 {% elif 条件 %} 语句2 {% elif 条件 %} 语句3 .... {% else %} 语句 {% endif %} - 例如 {% if username %} 欢迎 <span> {{username}} </span> 回来 {%else%} 游客登录，新用户注册有惊喜! {%endif%} -
标签for
- 格式1 {% for 变量 in 列表 %} 语句 {% endfor %} - 格式2 {% for 变量 in 列表 %} 语句1 {% empty %} 语句2 {% endfor %} 备注: 列表为空或列表不存在时执行语句2 - 格式3 {{forloop.counter}} 表示当前是第几次循环 - 例如 {% for student in students %} <li> 我叫{{student.sname}}，性别{{student.ssex}}，今年{{student.sage}}岁，座右铭:"{{student.sbrief}}"。 </li> {% endfor %} - 例如 <ul> {% for name in names %} {% if forloop.counter|divisibleby:2 %} <li style="color: red"> {{forloop.counter}} - {{name}} </li> {% else %} <li style="color: blue"> {{forloop.counter}} - {{name}} </li> {% endif %} {% empty %} <li> 没有学生喔. </li> {% endfor %} </ul> -
标签comment
- 作用 多行注释 - 例如 {% comment %} <p>姓名: {{student.sname}}</p> <p>性别: {{student.ssex}}</p> <p>年龄: {{student.sage}}</p> <p>座右铭: {{student.sbrief}} </p> {% endcomment %} -
标签ifequal、ifnotequal
- 作用 判断值1与值2是成立 - 例如 {% ifequal 'hello' 'world' %} <h1> 喔，hello和world一样呢。 </h2> {% endifequal %} - 例如 # return render(request, 'meituan/testtemp.html',{'class1':'python03','class2':'python03'}) {% ifequal class1 class2 %} <p>你们在同一个班级呢。</p> {% else %} <p>你们是不同班级。</p> {% endifequal %} -
过滤器
- 作用 在变量被显示前修改它 - 语法 {{ var|过滤器 }} - lower 小写 <h1> {{str|lower}} </h1> - upper 大写 <h1> {{str|upper}} </h1> - join 传递参数(参数用引号引住) <h1> {{list|join:'#'}} </h1> - default 默认值(如果一个变量没有被提供或值为false、空，可以使用默认值) <h1> {{username|default:'游客'}} </h1> - date 根据给定格式转换日期为字符串 <h1> {{dateValue|date:'y-m-d'}} </h1> -
标签inlcude
- 作用 加载模板并以标签内的参数渲染 - 格式 {% include '模板目录' 参数1 参数2 %} - 例如: # 不传递参数 {% include "content.html" %} # 传递参数scoreList {% include "content.html" with scores=scoreList %}由零合一，先完成小细节，最后使用include一起包含进去!
-
标签url
- 作用 反向解析 - 格式 {% url 'namespace:name' p1 p2 %}备注: 具体看下面详细说明。
-
标签block、extends
- 作用 用于模板的继承备注: 具体看下面详细说明。
-
标签autoescape
- 作用 用于HTML转义备注: 具体看下面详细说明。
-
标签csrf_token
- 作用 用于跨域请求伪造保护 - 格式 {% csrf_token %}备注: 具体看下面详细说明。
三、反向解析
- 反向解析语法
{% url 'namespace:name' p1 p2 %}
- 项目的urls.py文件中
url(r'^meituan/', include('app.urls', namespace='app') )
- 应用的urls.py文件中
# 路由(带参数)
url(r'^goods/(\d+)/$',views.goods, name='goods'),
# 视图函数(带参数,和url与之对应)
def goods(request, page):
return HttpResponse('商品列表: 第%s页' % page)
- 模板(带有参数的)
<a href="{% url 'app:goods' 3 %}"> 商品列表 </a>
<a href="{% url 'app:students' student.id %}">{{ student.s_name }}</a>
备注:
name属性，即是给对对应的url添加一个名字;
但是使用 name 也存在一定的问题 ,比如在同一个项目中的不同的app中 name 可能会重名；
Django在反解URL时，会在项目全局顺序搜索，当查找到第一个name指定URL时，立即返回；
当不小心定义相同的name时，可能会导致URL反解错误，为了避免这种事情发生，引入了命名空间；
namespace命名空间；
反向解析场景: 正常情况下页面中设置的商品页链接地址都是
goods/，而在服务器中路由如果发生一些细微的改变时，那么在页面中所有关于商品页链接地址都需要修改。为此可以使用反向解析解决此问题。
四、模板继承
-
作用
模板继承可以减少页面内容的重复定义，实现页面的复用。 -
block标签
- 作用 在父木模板中预留区域，子模板去填充 - 语法 {% block 标签名 %} {% endblock 标签名 %} -
extends标签
- 作用 继承模板，需要写在模板文件的第一行 - 语法 {% extends '父模板路径' %} -
示例(定义父模板)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> {% block title %} {% endblock title %} <style> #header,#footer{ height: 300px; background: red; line-height: 300px; color: white; text-align: center; font-size: 30px; } #footer{ background: blue; } </style> {% block style %} {% endblock style %} </head> <body> <!--父模板(很多页面中，头部和尾部都是一致的)--> <div id="header">header</div> <!--主体内容不同，需要各部分进行填充--> <div id="content"> <!--主体内容不确定，就直接这样写即可--> {% block content %} {% endblock content %} <br> <br> {% block test %} {% endblock test %} </div> <div id="footer">footer</div> </body> </html> -
示例(定义子模板1)
{% extends 'meituan/base.html' %} {% block content %} <h1> 首页 --- 主体内容 </h1> <a href="{% url 'meituan:about' %}">关于我们</a> {% endblock content %} -
示例(定义子模板2)
{% extends 'meituan/base.html' %} {% block title %} <title>关于我们</title> {% endblock title %} {% block style %} <style> h2{ background: black; color: white; } </style> {% endblock style %} {% block content %} <h1> about关于我们 </h1> {% endblock content %} <!--继承，可以填充，也可以不填充--> {% block test %} <h2>我住隔壁，我姓王，你有事情我帮忙。</h2> {% endblock test %}
五、HTML转义
-
问题
<!--views.py--> return render(request,'meituan/test2.html',{'code': '<h1>今天是周一.</h1>'}) <!--HTML转义--> {{code}} <!--问题--> 将接受到的code当前普通字符串渲染 -
转义
将接受到字符串当成HTML代码渲染 <!--方式1--> {{code|safe}} <!--方式2--> <!--关闭自动转义--> {% autoescape off %} {{code}} {% endautoescape %}
六、CSRF
- 跨域请求伪造
某些恶意网站包含链接、表单、按钮、JS，利用用户登录在浏览器中认证，从而攻击服务
- 放置CSRF
在settings.py文件中MIDDLEWARE添加'django.middleware.csrf.CsrfViewMiddleware'
在form表单中添加 '{% csrf_token %}'
- 例如
<form action="{% url 'app:login' %}" method="post">
{% csrf_token %}
<input type="text" placeholder="输入验证码" name="text"> <br>
<input type="submit" value="验证">
</form>
在没有放置CSRF时，会报错一下错误
Forbidden (403) CSRF verification failed. Request aborted. More information is available with DEBUG=True.。
七、验证码
- 作用
- 在用户注册、登录页面的使用使用，为了防止暴力请求，减轻服务器的压力
- 防止CSRF的一种方式
request.session.get["k1"]，如果不存在则会报错，为了防止出错可以request.session.get('k1',none)
- 示例(视图之生成验证码)
# 验证码
def verifycode(request):
# 导入绘图模块
from PIL import Image,ImageDraw,ImageFont
# 导入随机函数模块
import random
# 文件操作
import io
# 定义变量，用于图片的背景色、宽、高
# random.randrange()返回指定递增基数集合中的一个随机数
bgcolor = (random.randrange(20,100),random.randrange(20,100),random.randrange(20,100))
width = 100
heigh = 50
# 创建图片
image = Image.new('RGB',(width,heigh),bgcolor)
# 创建画笔对象
draw = ImageDraw.Draw(image)
# 调用画笔的point函数，绘制噪点
for i in range(0,100):
xy = (random.randrange(0,width),random.randrange(0,heigh))
fill = (random.randrange(0,255),255,random.randrange(0,255))
draw.point(xy,fill=fill)
# 定义验证码的备选值
str = '1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm'
# 随机选取4个值作为验证码
rand_str = ''
for i in range(0,4):
rand_str += str[random.randrange(0,len(str))]
# 构建字体对象
# font = ImageFont.truetype(path) # 指定路径加载字体
# font = ImageFont.load_default() # 加载一个默认的字体
# truetype(font=None, size=10, index=0, encoding="", layout_engine=None)
font = ImageFont.truetype('fonts/Songti.ttc',40)
# font = ImageFont.truetype('fonts/STXINGKA.ttf',40)
#构建字体颜色
fontcolor1 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor2 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor3 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor4 = (255, random.randrange(0, 255), random.randrange(0, 255))
# 绘制4个字
# def text(self, xy, text, fill=None, font=None, anchor=None, *args, **kwargs):
draw.text((5, 2), rand_str[0], font=font, fill=fontcolor1)
draw.text((25, 2), rand_str[1], font=font, fill=fontcolor2)
draw.text((50, 2), rand_str[2], font=font, fill=fontcolor3)
draw.text((75, 2), rand_str[3], font=font, fill=fontcolor4)
# 释放画笔
del draw
# 存入session，用于验证
request.session['verify'] = rand_str
# 文件操作
buff = io.BytesIO()
# 将图片保存在内存中，文件类型png
image.save(buff,'png')
# 将内存中图片数据返回给客户端，MIME类型为图片类型
# 直接是返回验证码图片
return HttpResponse(buff.getvalue(),'image/png')
PIL(Python Imaging Library)是Python一个强大方便的图像处理库，名气也比较大,不过只支持到Python 2.7。Pillow是PIL的一个派生分支，但如今已经发展成为比PIL本身更具活力的图像处理库。目前最新版本是3.0.0。
ython 3.x 安装Pillow:pip install Pillow
- 示例(视图之登录)
# 登录操作
def verifycodefile(request):
# 获取到session的flag标志值
flag = request.session.get("flag", True)
str = ''
if flag == False:
str = "请重新输入"
# 清空session
request.session.clear()
return render(request, 'meituan/verifycodefile.html', {"flag": str})
- 示例(视图之登录验证码验证)
# 登录验证
def verifycodecheck(request):
# 输入的验证码
# upper()转为大写
code1 = request.POST.get('verifycode').upper()
# session验证码
code2 = request.session['verify'].upper()
if code1 == code2: # 验证成功
return render(request,'meituan/success.html')
else: # 重新登录操作
request.session["flag"] = False
return redirect('/meituan/verifycodefile/')
- 示例(url管理器)
urlpatterns=[
url(r'^verifycode/$',views.verifycode), # 验证码测试
url(r'^verifycodecheck/$',views.verifycodecheck), # 验证操作
url(r'^verifycodefile/$',views.verifycodefile), # 带验证码登录
]
- 示例(模板)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录 | 验证码测试</title>
</head>
<body>
<!--验证码-->
<!--默认什么都添加，就是直接显示-->
<!--添加登录功能验证-->
<form action="/meituan/verifycodecheck/" method="post">
{%csrf_token%}
<input type="text" name="verifycode" />
<img src="/meituan/verifycode/" /> <br>
<input type="submit" value="验证" /> <br>
<span>{{flag}}</span>
</form>
</body>
</html>
