第3节、模板

binscor
2019-09-03 / 0 评论 / 666 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年09月10日,已超过1128天没有更新,若内容或图片失效,请留言反馈。

一、概述

模板由俩部分组成:

  1. html代码
  2. 逻辑控制代码

作用:

快速生成html页面

优点:

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

二、模板的渲染

(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. 可以在模板中调用方法/调用属性
  2. 字典查询(不建议)
  3. 数字索引

四、 模板中标签

格式: {% 标签名称 %}

作用:

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

(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>

注意:

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

(3) 注释

  1. 单行注释

    {# 内容 #}

  2. 多行注释

    {% 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>

六、模板的继承

  1. block 在父模板中 预留区域 使子模板可以去填充
  2. 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|过滤器 } }

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

过滤器

  1. upper 大写
  2. lower 小写
  3. capfirst 首字母大写
  4. first 第一个字符
  5. center 输出指定的长度 并把值居中

    { { 'test' | center:10 } } #把test字符串填充为10个长度 居中显示test
  6. cut 查找并删除指定字符

    { { ’123abc‘|cut:"abc" } } #123
  7. default 默认值 当值为undefined或bool的False时都执行默认值

    { { False|default:'默认值' } }
  8. default_if_none 如果值为None则执行默认值

    { { None|default_if_none:'默认值' } }
  9. divisibleby 判断值是否能被某个数整除

    { { num|divisibleby:num } }
  10. escape 转换为html实体
  11. safe 不转义html标签
  12. autoescape 可以解析和不解析

    {% autoescape on/off %} #on不解析html代码 off解析
    {% endautoescape %}
  13. floatformat 保留小数位数 默认保留一位

    { { 123.123|floatformat:2 } } #保留俩位小数
  14. length 计算个数
  15. random 返回列表的随机项

    { { list:random } }
  16. wordcount 统计单词的个数
  17. date 格式化时间

    {'date':datetime.now()}
    { { date|date:'Y-m-d' } }
    { { date|date:'F j,Y' } }
  18. addslashes 添加斜线进行特殊字符转义
  19. join 拼接字符串
  20. 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. 判断验证码
  2. 判断用户名
  3. 判断密码
  4. 登录或者显示错误信息
0

评论 (0)

取消