七 .Django 模板(template)

于 2019-08-14 02:49:00 发布
阅读量140 收藏
点赞数
文章标签： python javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/lovershowtime/p/11349576.html
版权

一 .Django 模板(template)使用

1 . 组成：HTML代码＋逻辑控制代码

https://www.cnblogs.com/dangrui0725/p/9612157.html

1、变量　　{{  var_name }}

  当模版引擎遇到一个变量，将计算这个变量，然后将结果输出

  变量名必须由字母、数字、下划线（不能以下划线开头）和点组成

  当模版引擎遇到点(".")，会按照下列顺序查询：

字典查询，例如：foo["bar"]   {{foo.bar}}
属性或方法查询，例如：foo.bar
数字索引查询，例如：foo[bar]  {{all_students.0}}
如果变量不存在， 模版系统将插入'' (空字符串)

在模板中调用方法时不能传递参数

   <h1>hello---{{name}}</h1>
   <br/>
   <h1>list列表</h1>
   <h1>{{cc}}</h1>
   <h1>{{cc.0}}通过点来取值</h1>
   <h1>{{cc.1}}通过点来取值</h1>  
  
 
   <h1>dict字典</h1>
   <h1>{{f}}</h1>
   <h1>{{f.name}}通过点来取值</h1>
   <h1>{{f.age}}通过点来取值</h1> 
2 .{ % tag % }

作用
在输出中创建文本
控制循环或逻辑
加载外部信息到模板中供以后的变量使用

标签看起来像是这样的： {% tag %}。标签比变量更加复杂：一些在输出中创建文本，一些通过循环或逻辑来控制流程，一些加载其后的变量将使用到的额外信息到模版中。

一些标签需要开始和结束标签 （例如{% tag %} ...标签 内容 ... {% endtag %}）

 
3 .for标签
 {%for 变量 in 列表%}
  语句1
{%endfor%}


{%for 变量 in 列表%}
 语句1
{%empty%}      注意：列表为空不存在时执行语句2
  语句2
{%endfor%}

<ul>
{% for cc in bb %}
     <li>
          {{cc.sanme}}------{{cc.age}}
     </li>
{%empty%}
    <li> 目前没有学生。。。。。。。。。。。。。。。。 </li>
{%endfor%}
</ul>

 

<h3>循环取值1</h3><hr>
{% for item in person_list %}
    <p>{{ item.name }},{{ item.age }}</p>
{% endfor %}

<h3>循环取值2:倒序</h3><hr>
{% for item in person_list reversed %}
    <!--序号从1开始-->
    <p>{{ forloop.counter }}----->{{ item.name }},{{ item.age }}</p>
    <!--序号从0开始--><p>{{ forloop.counter0 }}----->{{ item.name }},{{ item.age }}</p><!-- 序号倒序 --><p>{{ forloop.revcounter }}----->{{ item.name }},{{ item.age }}</p>
{% endfor %}

<h3>循环取值3：字典</h3><hr>
{% for k,v in d.items %}
    <p>{{ k }},{{ v}}</p>
{% endfor %}
for....empty ：for 标签带有一个可选的{% empty %} 从句，以便在给出的组是空的或者没有被找到时，可以有所操作。
{% for person in person_list %}
    <p>{{ person.name }}</p>

{% empty %}
    <p>sorry,no person here</p>
{% endfor %

 

4.if标签
 {%if表达式%}
 语句
 {%endif%}
 {%if表达式%}
        语句1
{%else%}
       语句2
{%endif%}

  {%if 条件%}

　　　  执行的代码

　{%elif 条件%}

　　　　执行的代码

　{%else%}

　　　　执行的代码

　{%endif%}

 
  
 
  
 {%if num%}
    <h1>哈哈哈哈哈哈哈哈哈哈哈哈哈11111111111111111111 哈哈哈 num </h1>
 {%endif%}
 
  
 
 
  
{% if i > 300 %}
 <p>大于{{ i }}</p>
{% elif i == 200 %}
 <p>等于{{ i }}</p>
{% else %}
 <p>小于{{ i }}</p>
{% endif %}
 
 
 
 
 
  
5. comment注释
 
  
{%comment%}
    注释内容
 {%endcomment%}
 
  
 
 
 
 
 
 
  
6 .ifequal / ifnotequal   

ifequal / ifnotequal   作用 判断是否相等

     格式:  {%ifequal 值1  值2%}
            语句
            {%endifequal%}  注意： 如果值1= 直2 执行语句

     实例:
      {%ifequal  'lover' 'lover'}
          <li> 目前没有学生。。。。。。。。。。。。。。。。 </li>
       {%endifequal%}

                         
 
 
 
 
 
  
7、csrf_token：这个标签用于跨站请求伪造保护

提交数据的时候就会做安全机制，当你点击提交的时候会出现一个forbbiddon
的错误，就是用setting配置里的scrf做安全机制的，那么我们可以吧它给注释了，，，
或者在form表单下面添加一个{% csrf_token %},,,
这才是真正解决的办法，注释不是解决的办法

<h3>scrf_token</h3><form action="/tag/" method="post">
    {% csrf_token %}
    <p><input type="text" name="haiyan"></p>
    <input type="submit">
</form>


 
 
 
 
 
  
8 .with：

使用一个简单地名字缓存一个复杂的变量，当你需要使用一个“昂贵的”方法（比如访问数据库）很多次的时候是非常有用的

{% with total=business.employees.count %}
    {{ total }} employee{{ total|pluralize }}
{% endwith %}
<p>{{ person_list.2.name }}</p>
{% with name=person_list.2.name %}
    <p>{{ name }}</p>
{% endwith %}
 
 
 
 
 
  
9 .url：反向解析

   url(r'^post/', views.postister,name="aa"),

   <form action="{% url 'aa' %}" method="post">  

 
  
 
   
     url(r'^', include('myapp.urls',namespace="app")),
     url(r'^good/(\d+)$',views.good,name="good"),
    <a href="{%url 'app:good' 1 %}">链接111111。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</a>
 
  
 
 
 
 
 
  
10 .load staticfiles  静态文件

2.settings.py中配置要在 STATIC_URL = '/static/'  下边　


 
  
{% load staticfiles %}
 
  


STATICFILES_DIRS = [
　　　　os.path.join(BASE_DIR, 'static'), 
　　]

　　或
　　STATIC_ROOT = os.path.join(BASE_DIR, 'static')

3.前端引入
　　方法一、　　　
　　　　在页面的较上处写：
　　　　　　{% load staticfiles %}
　　　　　　在 link script 等src 写 ：
　　　　　　{%static 'xxx.css'%}　
　　　　　　{%static 'xxx.js'%}

 
  
<!DOCTYPE html>
<html>
 <head>
 {%load staticfiles%}
 <meta charset="UTF-8">
 <title>显示数据</title>
<!-- <link rel="stylesheet" type="text/css" href="{%static 'webpage/css/aa.css'%}">-->
 <script type="text/javascript" src="{%static 'webpage/js/jquery1.js'%}"></script>
 <style>
 
 
 
 
 
  
11 .{{request_path}}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>404页面</title>
    </head>
    <body>
     <h1>页面信息飞到外星去了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</h1>

    <h2>{{request_path}}</h2>



    </body>
</html>
 
 
 
 
 
  
5. 过滤器

语法：{ { 变量|过滤器 }}

{ { name|lower }}，表示将变量name的值变为小写输出

使用管道符号 (|)来应用过滤器

通过使用过滤器来改变变量的计算结果

 
  
 
   
   <h1>从字符串中移除指定的字符:-- {{e|cut:" "}}</h1>

   <h1>add:加法 ---{{w|add:10}}</h1>

   <h1>add:加法 ---{{w|add:10}}</h1>

   <h1>格式化时间字符串-- {{r}}</h1>
   <h1>格式化时间字符串-- {{r|date:"Y-m-d"}}</h1>
    根据给定格式转换日期为字符串     date   格式  {{dateVal|date：'y-m-d'}}
     
   <h1>空列表--- {{ls}}</h1> 
   <h1>空列表--- {{ls|default:"空的列表"}}</h1>
   <br/>

   <h1>模板中a链接跳转 要加上过滤 </h1> 
   <h1>a链接跳转--- {{aa}}</h1> 
   <h1>a链接跳转--- {{aa|safe}}</h1>
   {%autoescape off%}
   <h1> {{aa}}</h1> 
   {%endautoescape%}

   <br/>


   <h1>字符串处理过滤器</h1> 
   <h1>---{{s|filesizeformat}}</h1>
   <h1>取值--- {{s|first}}</h1>
   <h1>获取字符串长度--- {{s|length}}</h1>
   <h1>字符串截取--- {{s|slice:"5"}}</h1>
   <h1>{{q}}</h1>
   <h1>把字符串转换成大写:-- {{q|upper}}</h1>
 
   

 如果一个变量没有被提供 或者值为false 空 可以默认使用 default
 格式：{{var|default：'AHAHAHAHAH'}}
 
   
 <h2>{{aa|default:"没有了哈哈哈"}}</h2>
 
  
 
 
 
 
 
  
 12 include：加载模板并以标签内的参数渲染
 
  
格式: {%include 模板目录 参数1 参数2%
 
  
 { %include "foo/bar.html" % }

 
  
该标签允许在（模板中）包含其它的模板的内容。 标签的参数是所要包含的模板名称，可以是一个变量，也可以是用单/双引号硬编码的字符串。
 
  
每当在多个模板中出现相同的代码时，就应该考虑是否要使用 {% include %} 来减少重复。
 
  
{% include 'test.html' %}
 
  
 
 
 
 
 
 
  
13 加减乘除:

<h4>num={{num}} </h4>
<!-- 加 -->
<h4>{{num|add:10}} </h4>
<!-- 减 -->
<h4>{{num|add:-5}} </h4>
<!-- num/1*4 -->
<!-- 乘 -->
<h4>{% widthratio num 1 5 %} </h4>
<!-- num/5 -->
<!-- 除 -->
<h4>{% widthratio num 5 1 %} </h4>
 
 
 
 
 
  
14 .{% load %}: 加载标签库 

{% load xxx %} 加载自定义的filter
  {%load my_tags%}
 
 
 
 
 
  
15 .自定义filter和tag
 
  
1、在app中创建名称为templatetags的包(必须的)
2、在里面创建任意 .py 文件，如：my_tags.py
3、写my_tags.pyfrom django import template
 
  

 
  
 
   
from django.utils.safestring import mark_safe
from django import template
register = template.Library()   #register的名字是固定的,不可改变
@register.filter　　# 自定义的filter   只能有三个参数
def filter_multi(v1,v2):
    return  v1 * v2　　　　　　

@register.simple_tag　　# 自定义的tag
def simple_tag_multi(v1,v2):
    return  v1 * v2

@register.simple_tag　　# 自定义的tag
def my_input(id,arg):
    result = "<input type='text' id='%s' class='%s' />" %(id,arg,)
    return mark_safe(result)


# 自定义标签
@register.simple.tag
def bb(x,y,c):
    return x*y*c
 
  
 
  
 
   
在模板中调用自己写的filter

{% load my_tags%}
 # num=12

{{ num|filter_multi:2 }} #24

{{ num|filter_multi:"[22,333,4444]" }}


{% simple_tag_multi 2 5 %}  参数不限,但不能放在if for语句中
{% simple_tag_multi num 5 %}

# filter可以用在if等语句后，simple_tag不可以


 
  
 
 
 
 
2 . 模板继承
 
 
 
  
模板继承和类的继承含义是一样的，主要是为了提高代码重用，减轻开发人员的工作量。 典型应用：网站的头部、尾部信息
 
 
 
 
 
  
如果发现在多个模板中某些内容相同，那就应该把这段内容定义到父模板中。
标签block：用于在父模板中预留区域，留给子模板填充差异性的内容，名字不能相同。 为了更好的可读性，建议给endblock标签写上名字，这个名字与对应的block名字相同。父模板中也可以使用上下文中传递过来的数据。

 
  
 
   
父模板
 
   
base.html 
 
   
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页哈哈哈哈哈</title>
        <style type="text/css">
         #header{
           width: 100%;
           height: 100px;
           background:red;
         }
          #footer{
           width: 100%;
           height: 100px;
           background:blue;
         }
        </style>
    </head>
    <body>
    <!-- 头 -->
   <div id="header"></div>  

   <div id="main"> 
         {%block  main%}


         {%endblock main%}

   </div>
   <!-- 尾 -->
   <div id="footer">1111</div> 
    </body>
</html>
 
  
 
  
子模版1
 
  
 
   
01data_temp.html
 
   
{% extends 'app_html/base.html' %}

{%block main%}
<h1>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</h1>
{%endblock main%}
 
  
 
  
子模版2
 
  
 
   
02data_tomp.html

{% extends 'app_html/base.html' %}

{%block main%}

<h1>哈哈哈哈哈哈哈哈哈哈</h1>

<h1>555555555555555555555555555555555555</h1>

{%endblock main%}
 
  
 
 
 
 
 
 
 
 
  
父模板 01base.html

<!DOCTYPE html>
<html>
    <head>

         {%load staticfiles%}
        <meta charset="UTF-8">
        <title></title>

        <!-- <script type="text/javascript" src="/static/webpage/js/jquery1.js" ></script> -->
         <!-- 引用静态的方式-->
        <script type="text/javascript" src="{%static 'webpage/js/jquery1.js'%}" ></script>

        <link rel="stylesheet" type="text/css" href="{%static 'webpage/css/aa.css'%}">
    </head>
    <body>

     <div class="outer">
       <div class="nav">管理系统！！</div>
       <div class="left">
            <div class="student manage"><a href="/myapp/st/">学生管理</a></div>
            <div class="teacher manage"><a href="">老师管理</a></div>
            <div class="course  manage"><a href="">课程管理</a></div>
            <div class="classes manage"><a href="">班里管理</a></div>
       </div>
   
        <div class="content">
        {% block content %}
             <h1>welcome To Login  !!!</h1>
        {% endblock %}
        </div>
     </div>
   
    </body>
</html>

03test.html其他页面
 
  
<!DOCTYPE html>
<html>
 <head>
 
  
 <meta charset="UTF-8">
 <title></title>
 
  

 </head>
 <body>
 <h1 style="color:yellow;"> hello word ！！！！！！！！！！！！！</h1>
 
  
 </body>
</html>
 
  
 
 
  
 
   
子模版 aa.html

{%extends "html_app/01base.html"%}
{%load staticfiles%}    <!-- 03   去加载其他的页面  引用这个-->

{% block content %}

         {{block.super}}   <!-- 继承父类模板的数据 --> 
         {%for li in student_list%}
            <h2>学生{{li}}</h2>
         {%endfor%}
 {%include "html_app/03test.html" %} <!-- 03  去加载其他的页面 >

{% endblock %}
 
  
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
   
父模板 aa.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>母模板</title>
</head>
<body>
<section>
    <h1>顶部导航</h1>
    <p>python自动化-上海-悠悠</p>
    <hr>
</section>

<!--这是一段注释。block是一个块标签， content是标签名称-->
{% block content %} {% endblock content %}
<p>---------自动化教程---------</p>


<!--这是一段注释。block是一个块标签, ad是标签名称-->
{% block ad %} {% endblock ad %}


<section>
    <br><br><br><br><hr>
    <h1>底部导航</h1>
    <p>底部一些友情链接啊，网站导航，版权啊</p>
</section>
</body>
</html>
 
  
 
  
 
   
子模版 bb.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>

<!--这是一段注释。extends继承aa.html页面-->
{% extends "aa.html" %}
{% block content %}
    <p>这里是content块的填充内容</p>
{% endblock content %}


{% block ad %}
<ul>自动化内容</ul>
    {% for i in ads %}
    <li>{{i}}</li>
     {% endfor %}
{% endblock ad %}

</body>
</html>
 
  
 
  
 
  
 
   
注意: 在父模板中

也可以给块标签添加默认值，如：
<!--这是一段注释。block是一个块标签, 可以给默认值-->
{% block defaut %}
<p>如果子页面中，没填充此block内容，这里的就是默认内容</p>
{% endblock defaut %}
 
  
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/lovershowtime/p/11349576.html

                

        

        




    

  


    

      

        

            

              
                
                  aozhisui4810
                
              
            

            

                关注
              
            

        

        

          
      

      









            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值