第3节、模板

一、概述

模板由俩部分组成：

html代码
逻辑控制代码

作用：

快速生成html页面

优点：

视图和模板可以理解为 M:N的关系模板可以被任意视图调用视图调用任意模板
模板实现了业务逻辑和内容显示的分离

二、模板的渲染

(1) render

render(request,tem_name,context=None)

请求对象
模板名称
渲染的内容

实例：

url(r'^$',main.index,name='index'),

def index(request):
    return render(request,'index.html',{'title':"首页"})

(2) loader 渲染模板

导入
from django.template import loader

实例:

from django.template import loader
def index(request):
    tem = loader.get_template('index.html') #拿到模板对象
    result = tem.render({'title':"首页"}) #渲染模板
    print(result)
    return HttpResponse(result)  #响应模板

三、模板中变量

格式： { { 变量名称 } }

就是视图像模板传递的数据

注意：

如果模板渲染的变量不存在则插入空白字符

模板中使用语法：

可以在模板中调用方法/调用属性
字典查询（不建议）
数字索引

四、模板中标签

格式： {% 标签名称 %}

作用：

在输出中创建文本
控制逻辑和循环

(1) if/elif/else/endif 标签

可用的运算符

> < >= <= == ! and or not in not in

语法格式：

{% if condition %}
    ...
{% endif %}

实例：

{% if grade > 80 %}
    print({ { grade } }大于 80)
{% elif grade >= 70 %}
        print({ { grade } }大于等于 70)
{% else %}
    print({ { grade } }<70)
{% endif %}

(2) for标签

A 语法格式：

{% for xxx in xxx %}
    ...
{% endfor %}

实例：

{% for i in lista %}
        <li>{ { i } }</li>
    {% empty %}
           <li>当list变量不存在 则执行empty</li>
{% endfor %}

B 迭代字典：

{'dict':{'name':"张三",'age':18} }
{#{% for key in dict %}#}  #迭代拿到的是key
{% for key,value in dict.items %} #拿到key和value
    <p>{ { key } }------{ { value } }</p>
{% endfor %}

C 获取for迭代的状态

变量	描述
forloop.counter	迭代的索引从1开始
forloop.counter0	迭代的索引从0开始
forloop.revcounter	迭代的索引从最大长度递减到1
forloop.revcounter0	迭代的索引从最大长度递减到0
forloop.first	是否为第一次迭代
forloop.last	是否为最后一次迭代
forloop.parentloop	获取迭代嵌套的上一曾迭代的对象

实例

<ul>
{% for i in list %}
    {% for i in list %}
        <li>{ { forloop.counter } }---{ { forloop.counter0 } }---{ { forloop.revcounter } }----{ { forloop.revcounter0 } }----{ { forloop.first } }----{ { forloop.last } }---{ { forloop.parentloop.counter } }</li>
    {% endfor %}
{% endfor %}
</ul>

注意：

模板中的迭代不能使用range() 不支持
for不支持和else搭配而是和empty搭配功能和esel一样当迭代的变量不存在则执行empty

(3) 注释

单行注释
{# 内容 #}
多行注释
{% comment %}
...
{% endcomment %}

(4) ifequal 标签

说明: 判断俩个值是否相等相等则为True

实例

{% ifequal 1 1 %}
    print(1==1)
    {% else %}
    print(1!=1)
{% endifequal %}

(5) ifnotequal 标签

说明: 判断俩个值是否不相等不相等则为True

{% ifnotequal 1 1 %}
    print(1==1)
    {% else %}
    print(1!=1)
{% endifnotequal %}

五、模板的导入 include

语法格式:

{% include '路径/模板名称.html' %}

注意：

include会将导入的模板的所有代码 copy到你include的位置

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% include 'common/header.html' %}
{% include 'common/footer.html' %}
</body>
</html>

六、模板的继承

block 在父模板中预留区域使子模板可以去填充
extends 继承父模板实现模板的复用

实例：

common/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
        {% block meta %}
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        {% endblock %}
        <title>{% block title %}Title{% endblock %}</title>
        {% block styles %}
            <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        {% endblock %}
    {% endblock %}
</head>
<body>
{% block navbar %}
    <nav class="navbar navbar-inverse" style="border-radius: 0;">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
{% endblock %}
{% block content %}
    <div class="container">
        {% block pagecontent %}

        {% endblock %}
    </div>
{% endblock %}
{% block scripts %}
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}
</body>
</html>

注意：

block使用和flask一样在block的外部添加的内容不会被解析显示出来

如果想复用父模板的block内的代码需要使用变量 block.super 进行复用

{ { block.super } } == flask jinja2 { { super() } }

七、过滤器

语法格式: { { var|过滤器 } }

作用： 在数据展示前使用函数进行数据的修改

过滤器

upper 大写
lower 小写
capfirst 首字母大写
first 第一个字符
center 输出指定的长度并把值居中
{ { 'test' | center:10 } } #把test字符串填充为10个长度居中显示test
cut 查找并删除指定字符
{ { ’123abc‘|cut:"abc" } } #123
default 默认值当值为undefined或bool的False时都执行默认值
{ { False|default:'默认值' } }
default_if_none 如果值为None则执行默认值
{ { None|default_if_none:'默认值' } }
divisibleby 判断值是否能被某个数整除
{ { num|divisibleby:num } }
escape 转换为html实体
safe 不转义html标签
autoescape 可以解析和不解析
{% autoescape on/off %} #on不解析html代码 off解析
{% endautoescape %}
floatformat 保留小数位数默认保留一位
{ { 123.123|floatformat:2 } } #保留俩位小数
length 计算个数
random 返回列表的随机项
{ { list:random } }
wordcount 统计单词的个数
date 格式化时间
{'date':datetime.now()}
{ { date|date:'Y-m-d' } }
{ { date|date:'F j,Y' } }
addslashes 添加斜线进行特殊字符转义
join 拼接字符串
striptags 去除html标签

八、加减乘除

(1) 加法

{ { value|add:num } }

{ { 5|add:5 } }  5+5=10

(2) 减法

{ { value|add:-num } }

{ { 5|add:-5 } }  5-5=0

(3) 乘法

{% widthration %}

{% widthratio 5 1 10 %}   == (5/1)*10

(4) 除法

{% widthration %}

{% widthratio 10 5 1 %}   == (5/10)*1

九、验证码

def verifycode(request):
    # 引入绘图模块
    from PIL import Image, ImageDraw, ImageFont
    # 引入随机函数模块
    import random
    # 定义变量，用于画面的背景色、宽、高
    bgcolor = (random.randrange(20, 100), random.randrange(
        20, 100), random.randrange(20, 100))
    width = 100
    height = 50
    # 创建画面对象
    im = Image.new('RGB', (width, height), bgcolor)
    # 创建画笔对象
    draw = ImageDraw.Draw(im)
    # 调用画笔的point()函数绘制噪点
    for i in range(0, 100):
        xy = (random.randrange(0, width), random.randrange(0, height))
        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(r'/home/xlg/PycharmProjects/fonts/ADOBEARABIC-BOLDITALIC.OTF', 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个字
    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
    # 内存文件操作
    import io
    buf = io.BytesIO()
    # 将图片保存在内存中，文件类型为png
    im.save(buf, 'png')
    # 将内存中的图片数据返回给客户端，MIME类型为图片png
    return HttpResponse(buf.getvalue(), 'image/png')

验证码在模板中展示

url(r'^getcode/$',main.verifycode,name='verifycode'),

<img src="/getcode/" onclick="this.src='/getcode/?id='+Math.random()" style="">

验证过程

判断验证码
判断用户名
判断密码
登录或者显示错误信息

一、概述

二、模板的渲染

(1) render

(2) loader 渲染模板

三、模板中变量

四、模板中标签

(1) if/elif/else/endif 标签

(2) for标签

(3) 注释

(4) ifequal 标签

(5) ifnotequal 标签

五、模板的导入 include

六、模板的继承

七、过滤器

八、加减乘除

(1) 加法

(2) 减法

(3) 乘法

(4) 除法

九、验证码

第9节、日志

第8节、celerys及中间件

第7节、站点、分页、文件上传及富文本编辑器

第6节、系统User及静态资源

评论 (0)

第3节、模板

一、概述

二、模板的渲染

(1) render

(2) loader 渲染模板

三、模板中变量

四、 模板中标签

(1) if/elif/else/endif 标签

(2) for标签

(3) 注释

(4) ifequal 标签

(5) ifnotequal 标签

五、模板的导入 include

六、模板的继承

七、过滤器

八、加减乘除

(1) 加法

(2) 减法

(3) 乘法

(4) 除法

九、验证码

第9节、日志

第8节、celerys及中间件

第7节、站点、分页、文件上传及富文本编辑器

第6节、系统User及静态资源

评论 (0)

四、模板中标签