首页 > 其他 > 详细

Django框架-模板层

时间:2019-09-20 02:10:39      阅读:97      评论:0      收藏:0      [点我收藏+]

Django框架-模板层

一、模板语法传值

1、验证是否python所有的数据类型都可以传递到前端

locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费

技术分享图片

技术分享图片

技术分享图片

结论:整型、浮点型、字符串、列表、字典、元组、集合等基本数据类型都可以通过模板语法传值

2、传函数名

技术分享图片

技术分享图片

技术分享图片

技术分享图片

浏览器上显示的是None后端打印了index,而且由于我们函数没有设置返回值,猜想:给浏览器传一个函数名时,会自动加括号调用该函数,并将返回值传给浏览器

技术分享图片

技术分享图片

给函数设置一个返回值,浏览器显示的内容正是函数的返回值,说明我们的猜想并没有错

技术分享图片

假如该函数调用时需要传参会怎么样呢?

技术分享图片

技术分享图片

发现:浏览器值并没有显示index对应的内容

技术分享图片

同时我们观察后端,发现终端上并没有打印index

技术分享图片

技术分享图片

并且,我们无法在HTML文件中给index函数传参,所以我们得出结论:当遇到需要参数才能调用的函数时,系统会直接跳过,模板语法不支持。

3、传对象

技术分享图片

技术分享图片

技术分享图片

结论:对象可以通过模板语法传值,直接传对象显示的就是对象的内存地址,并且可以通过模板语法调用对象的方法(包括对象绑定方法,类绑定方法,静态绑定方法)。

二、过滤器,标志|

1、内部原理:将|前面的对象当做第一个参数传入过滤器中,将过滤器后面的参数当做第二个参数传入过滤器,所以过滤器只能接收两个参数,但是你可以在给第二个参数传值的时候,传一个字符串,比如"1,2,3,4,5,6",在后端利用逗号切割,将一个参数分割成多个参数。

2、length

统计列表和字典的长度

技术分享图片

技术分享图片

length内部

技术分享图片

异常捕获的作用:当遇到没法统计长度的对象时,返回0。当统计整数的长度时,显示0

3、default

技术分享图片

n是一个整数,当n为1时,浏览器显示1,当n为0时,浏览器显示default后面字符串中的内容。

n是"xxx"时,显示xxx,n是空字符串时,显示default后面字符串中的内容。

当传入的参数不存在时,也会显示default后面字符串中的内容。

default内部源码

技术分享图片

value为真返回value,value为假返回arg,arg就是default冒号后面的内容

当default后面也不传参数时,浏览器会报错

技术分享图片

4、filesizeformat,可以将传入数字转换成文件的大小

技术分享图片

技术分享图片

技术分享图片

5、truncatewords,截断语句

技术分享图片

技术分享图片

技术分享图片

truncatewords后面不加参数的话,浏览器会报错,说缺少了一个参数

技术分享图片

技术分享图片

当我们设置了一个参数3时,浏览器出现了上面的效果,my,name,is正好三个单词

技术分享图片

这个效果我们经常在一些地方能够看见,预知后事如何,点击进入查看

当我们传入中文时会发生什么呢

技术分享图片

技术分享图片

浏览器将我们传入的中文完整的显示出来

技术分享图片

技术分享图片

而当我们在中文之间加上空格时,浏览器就只显示三个词语

得出结论:truncatewords是按空格来截断字符串的,后面的参数就是要显示的单词或词语的个数

6、truncatechars按字符截取内容,点也算

技术分享图片

技术分享图片

技术分享图片

技术分享图片

? 与truncatewords类似,但是truncatechars是按字符截断字符串点也计算在内,所以后面传的参数至少大于3。

7、传入的字符串会不会识别其中的标签?

技术分享图片

技术分享图片

技术分享图片

结论:对于字符串中的标签,模板语法并不能识别,浏览器显示原始字符串

这一机制是有益的,避免了他人通过字符串写script脚本传给浏览器恶意攻击网站

扩展:前后端取消转义

前端:

技术分享图片

技术分享图片

技术分享图片

后端:

技术分享图片

技术分享图片

技术分享图片

导入一个模块,将要传入的字符串放进去,标记它是安全的,前端不需要加safe。

8、date格式化时间

技术分享图片

技术分享图片

技术分享图片

直接传时间显示的格式不太好,考虑格式化时间

技术分享图片

技术分享图片

可以显示年月日,X无法表示时分秒

9、add加法运算

n=0

技术分享图片

技术分享图片

浏览器显示100,确实加上了

技术分享图片

? 异常捕获,先尝试将两个参数转成整数相加,如果报错,则将两个参数直接相加(字符串相加),如果还报错则返回空字符串

技术分享图片

技术分享图片

10、slice切片,支持步长

技术分享图片

三、标签(逻辑相关)

1、for循环

技术分享图片

技术分享图片

for循环自带的forloop

技术分享图片

技术分享图片

2、if判断

技术分享图片

技术分享图片

技术分享图片

技术分享图片

if判断与for循环连用

技术分享图片

技术分享图片

empty

技术分享图片

技术分享图片

3、点取值

Django的模板语法在取值的时候,统一使用句点符不同于jinja2模块,Django的模板语法是自己写的

技术分享图片

技术分享图片

技术分享图片

4、with的用法

技术分享图片

5、字典取值

技术分享图片

技术分享图片

四、自定义过滤器和标签

1、自定义固定的三步走战略:

  • 必须在你的应用下新建一个名为templatetags文件夹
  • 在该文件夹内新建一个任意名称的py文件
  • 在该py文件中固定先写下面两句代码
from  django import template
register = template.Library()

2、自定义过滤器

@register.filter(name='baby')
def index(a,b):
    return a+b
# 该过滤器只做一个加法运算,是add的简易版本

自定义过滤器的使用:

技术分享图片

3、自定义标签

技术分享图片

技术分享图片

4、自定义inclusion_tag

? 接收用户传入的参数,然后作用于一个HTML页面,再该页面上渲染数据,之后将渲染好的页面放到用户调用inclusion_tag的地方。

技术分享图片

技术分享图片

技术分享图片

技术分享图片

传参的不同,渲染出来的页面也是不一样的

技术分享图片

技术分享图片

调用函数,将返回值传给一个页面,进行渲染,然后将渲染好的页面放在调用函数的位置。

使用场景:当你的页面上有一部分html代码需要经常被各个地方使用,并且需要传参才能渲染出来,那么你可以把该html代码部分制作成一个inclusion_tag,哪里需要使用就调用函数即可。

五、模板的继承

1、有这么一个页面,分为三部分,导航条,左侧边栏,和主体,当我们点击页面上的链接时,只有主体在变,导航条和左侧边栏都不变。这个时候就可以使用模板的继承。

2、当多个页面整体的样式都大差不差的情况下,可以设置一个模板文件,在该模板文件中,使用block块划分多个区域,之后子版在使用模板的时候,可以通过block块的名字来选定到底需要修改哪一部分区域。

模板一般情况下 应该至少有三个可以被修改的区域
{% block css %}
    子页面自己的css代码
{% endblock %}
{% block content %}
    子页面自己的html代码
{% endblock %}
{% block js %}
    子页面自己的js代码
{% endblock %

下面是home页面的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板的继承</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load  static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css'%}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    {% block css %}
    
    {% endblock %}
    
</head>
<body>
<nav class="navbar navbar-inverse">
  <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>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
              <a href="/loginn/" class="list-group-item active">登陆</a>
              <a href="/register/" class="list-group-item">注册</a>
              <a href="/home/" class="list-group-item">主页</a>
            </div>
        </div>
        <div class="col-md-10">

            {#这是模板语法的注释 不会展示到前端#}
            {#在你想把某一个页面作为模板的时候  可以在该页面上使用block划分区域 并且给该区域命名#}
            {#之后你在使用该模板的时候  就可以通过名字 来指定需要修改哪一个区域的内容#}
            {% block content %}
                <div class="jumbotron">
                  <h1>Hello, world!</h1>
                  <p>...</p>
                  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                </div>
            {% endblock %}

        </div>
    </div>
</div>

{% block js %}

{% endblock %}
</body>
</html>

使用方法

{% extends 'home.html' %}

{% block css %}
    <style>
        h1 {
            color: red;
        }
    </style>
{% endblock %}


{% block content %}
<h1>登陆页面</h1>
<form action="">
    <p>username:<input type="text" class="form-control"></p>
    <p>password:<input type="text" class="form-control"></p>
    <input type="submit" class="btn btn-danger">
</form>
{% endblock %}


{% block js %}

{% endblock %}

? 使用{% extends ‘home.html‘ %}继承该模板,使用{% block xxx %}{% endblock %}对需要修改的区域进行修改,不需要修改的区域与母版页面一致。在block代码块内可以通过{{ block.super }}将母版页面的该区域内容导入过来,并可以多次使用。

技术分享图片

六、模板的导入

1、当你写了一个特别好看的form表单/列表标签等,可以将它当成一个模块,哪个地方需要,就直接导入使用即可,与inclusion_tag类似,但是模板的导入不支持传参。

2、使用方法{% include ‘beautiful.html‘ %}

Django框架-模板层

原文:https://www.cnblogs.com/DcentMan/p/11553035.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!