Django框架之模板系统的常用操作

一、后端与前端的数据交互

1.后端向前端传输数据的方式

 # 第一种
 return render(request,'index.html',{'n':n})
 # 第二种
 # locals()会将当前所在的名称空间中的名字全部传递给前端页面
 return render(request,'index.html',locals())  

2.后端向前端传输数据的类型

def index(request):
    n = 6969
    s = '我于死亡之中绽放,亦如黎明中的花朵'
    
     #前端获取后端传过来的容器类型的内部元素 统一采用句点符(.)
 #('关某某','谢某某','陈某某','容嬷嬷')>>>:{{ t }},{{ t.1 }} 数字对应的就是数据的索引
    l = ['a','b','c','d','e','f','g']  
    d = {'name':'Tom','password':'222','hobby':['抽烟','喝酒','烫头']}
    t = ('关某某','谢某某','陈某某','容嬷嬷')
    st = {'python','java','php','golang'}    #注意集合是无序的
   
    #后端传函数名到前端,会自动加括号调用,但是不支持传参
    def func():
           return '你调用了我?'

    class Demo(object):
        def __init__(self,name):
               self.name = name

        def func(self):
               return self.name

        @classmethod
        def index(cls):
               return 'cls'

        @staticmethod
        def bar(name,age):
               return 'bar'

        def __str__(self):
               return '大帅比'
        
    #后端传对象到前端,就相当于打印这个对象
    #对象.属性/方法,能获取对应值{{ obj.name }}
    obj = Demo('Tom')
    
    return render(request,'index.html',locals())

3.补充

1.前端调用后端数据类型(不需要传参)的内置方法

2.模板语法的注释不会展示到前端页面

3.原生的html注释会展示到前端:<!--我是原生的html注释-->

二、过滤器

在Django的模板语言中,通过使用 过滤器 来改变变量的显示。

过滤器的语法: {{ value|filter_name:参数 }},使用管道符"|"来应用过滤器。

例如:{{ name|lower }}会将name变量应用lower过滤器之后再显示它的值。lower在这里的作用是将文本全都变成小写。

前端统计字符串的长度:
<p>{{ s|length }}</p>

前端获取数据如果是空就返回default后面默认的参数值:
<p>{{ flag|default:'你这个东西是个空'}}</p>

将数字格式化成表示文件大小的单位:
<p>{{ file_size|filesizeformat }}</p>


<p>{{ ctime }}</p>    {#June 11,2019,10:36 a.m.#}
格式化时间(不要加百分号)
<p>{{ ctime|date:'Y-m-d' }}</p>     {# 2019-06-11 #}

字符串的切片操作:
<p>{{ res|slice:'0:8' }}</p>
<p>{{ res|slice:'0:8:2' }}</p>

截取固定的长度的字符串 三个点也算:
<p>{{ s|truncatechars:10 }}</p>
按照空格截取文本内容:
<p>{{ res|truncatewords:4 }}</p>

字符串和数字不能混用(返回空):
<p>{{ 'haha'|add:'hehe' }}</p> {# hahahehe #}
<p>{{ 249|add:1 }}</p>    {# 250 #}


ht = <h1>我是h1标签</h1>
sr = <script>alter(123)</script>

<p>{{ ht }}</p>    {# <h1>我是h1标签</h1> #} 不识别h1标签
<p>{{ sr }}</p>    {# <script>alter(123)</script> #} 不识别script标签

前端取消转义
<p>{{ ht|safe }}</p>  加 |safe 后能识别标签
<p>{{ sr|safe }}</p>

后端取消转义
from django.utils.safestring import mark_safe
res = mark_safe('<h1>我是h1标签</h1>')

三、标签

for循环
            {% for foo in l %}
                <p>{{ foo }}</p>
                <p>{{ forloop }}</p>
            {% endfor %}
            
if判断
            {% if flag %}
                <p>flag不为空</p>
                {% else %}
                <p>flag是空</p>
            {% endif %}

嵌套使用
            {% for foo in l %}
                {% if forloop.first %}
                    <p>这是我的第一次</p>
                {% elif forloop.last %}
                    <p>这是最后一次了啊</p>
                {% else %}
                    <p>嗨起来!!!</p>
                {% endif %}
            {% endfor %}
empty:当你的for循环对象为空的时候会自动走empty代码块儿的内容
            后端:
                l = None

            前端:
            {% for foo in l %}
                {% if forloop.first %}
                    <p>这是我的第一次</p>
                {% elif forloop.last %}
                    <p>这是最后一次了啊</p>
                {% else %}
                    <p>嗨起来!!!</p>
                {% endif %}
                {% empty %}
                    <p>你给我的容器类型是个空啊,没法for循环</p>
            {% endfor %}

四、自定义标签、过滤器、inclusion_tag

1.自定义三步:

应用名下新建(必须)名为 templatetages 文件夹

在新建的文件夹中新建任意名称的 py 文件

该 py 文件中需要固定写下面两句代码:

from django import template
    register = template.Library()  

2.自定义标签、过滤器

注意:使用自定义的过滤器 标签 inclusion_tag 必须先在需要使用的html页面加载该py文件

#后端
@register.filter(name='XBB')    #自定义过滤器
    def index(a,b):
        return a+b
    
@register.simple_tag    #自定义标签
def plus(a,b,c):
    return a+b+c

#前端
{% load my_tag %}    #导入自定义标签、过滤器所在的文件

{{ 666|XBB:8 }}        #自定义过滤器使用

{% plus 1 2 3 %}    #自定义标签使用

3.自定义inclusion_tag

# 自定义inclusion_tag
@register.inclusion_tag('login.html',name='login')
def login(n):
# l = []
# for i in range(n):
#     l.append('第%s项'%i)
l = [ '第%s项'%i for i in range(n)]
return {'l':l}        #将l传给login.html页面

# login.html
<ul>                #在login.html页面进行渲染
    {% for foo in l %}        
        <li>{{ foo }}</li>
    {% endfor %}
</ul>

# 前端调用
{% login 5 %}    #在另一个页面调用渲染的结果

五、模板的继承与导入

1.模板继承

首先需要在被继承的模板中划分区域

语法:{% block 给区域起的名字 %}

     {% endblock %}

{% 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>
                        <nav aria-label="Page navigation" class="text-center">
                            <ul class="pagination ">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    {% endblock %}
View Code

子板继承模板

先继承模板所有的内容

{% extends 'home.html' %}

然后根据block块的名字修改指定区域的内容

{% block content %}

{% endblock %}

{% extends 'homepage.html' %}
{% block content %}
<div class="col-md-8 col-md-offset-2">
    <h1>添加书籍</h1>
    <form action="" method="post">
        <p>书籍名称:<input type="text" name="book_name" class="form-control"></p>
        <p>价格:<input type="text" name="book_price" class="form-control"></p>
        <p>作者:<input type="text" name="book_author" class="form-control"></p>
        <p>出版社:<input type="text" name="book_publish" class="form-control"></p>
        <input type="submit" class="btn btn-success">
    </form>
</div>
{% endblock %}

2.模板的导入:

将一段html当做模块的方式导入到另一个html展示

 {% include '想导入的html文件名' %}

 

 

 

posted @ 2019-06-11 22:16  西西灬弗斯  阅读(179)  评论(0编辑  收藏  举报