Front-end rendering framework Django - Django template layer template layer

 

Django template layer

 

Django template layer

Front and rear ends data transfer

(1) 后端朝前端页面传递数据的方式:
    # 将当前所在的名称空间中的名字全部传递给前端页面
    # 第一种
        return render(request,'index.html',{'n':n})
    # 第二种
        return render(request,'index.html',locals())  
    
(2) 后端传函数名到前端，会自动加括号调用，但是不支持传参

(3) 后端传对象到前端，就相当于打印了这个对象

(4) 前端获取后端传过来的容器类型的内部元素 统一采用句点符(.)
('关某某','谢某某','陈某某','容嬷嬷')>>>:{{ t }},{{ t.1 }}  数字对应的就是数据的索引
    
(5) 前端能够调用python后端数据类型的一些不需要传参的内置方法

(6) 注释：
    模板语法的注释，不会展示到前端页面：
        {#调用python自带的内置方法,可以调用不需要传参的一些内置方法#}
    原生html的注释，会展示到前端:
        <!--我是原生的html注释-->

filter

# 下面的内容，第一行是在前端的代码，第二行是运行的结果

(1) <p>前端统计字符串的长度:{{ s|length }}</p>
# 结果：前端统计字符串的长度:16

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

(3) <p>将数字格式化成表示文件大小的单位:{{ file_size|filesizeformat }}</p>
# 结果：将数字格式化成表示文件大小的单位:20.3 MB

(4) <p>{{ ctime }}</p>
# 结果：June 11, 2019, 7:30 p.m.

(5) <p>格式化时间(不要加百分号):{{ ctime|date:'Y-m-d' }}</p>
# 结果：格式化时间(不要加百分号):2019-06-11

(6) <p>字符串的切片操作:{{ res|slice:'0:8' }}</p>
# 结果：字符串的切片操作:hello bi

(7) <p>{{ res|slice:'0:8:2' }}</p>
# 结果：hlob         起始位置：结束位置：步长

(8) <p>截取固定的长度的字符串 三个点也算:{{ s|truncatechars:10 }}</p>
# 结果：截取固定的长度的字符串 三个点也算:这是 一段 字...

(9) <p>按照空格截取文本内容:{{ res|truncatewords:4 }}</p>
# 结果：按照空格截取文本内容:hello big ba by~ ...

(10) <p>{{ s|truncatewords:4 }}</p>
# 结果：这是 一段 字符串 没有别的东西

(11) <p>{{ 'hahah'|add:'heheheh' }}</p>
# 结果：

后端代码：
    ht = '<h1>我是h1标签</h1>'
    sr = '<script>alert(123)</script>'
    
前端：
    <p>{{ ht }}</p> 
    <p>{{ sr }}</p>
    # 上面两个在前端显示的是纯字符串，不会将其转义成代码执行
    
    <p>{{ ht|safe }}</p>
    <p>{{ sr|safe }}</p>
    # 下面的两句，通过|safe过空滤器将其转义代码执行
    
前后端取消转义(*****)
    前端:
        |safe
    后端:
        from django.utils.safestring import mark_safe
        xxx = mark_safe('<h1>我是h1标签</h1>')  

label

(1) for循环：
    {% for foo in l %}
        <p>{{ foo }}</p>
        <p>{{ forloop }}</p>
    {% endfor %}

解释一波：从容器l中一个个的读取数据，然后将其塞入前端的标签里面
    {{ foo }}：取l里面的一个个的值
    {{ forloop }}：下面是一条记录
    {'revcounter': 7, 'counter0': 0, 'last': False, 'parentloop': {}, 'counter': 1, 'first': True, 'revcounter0': 6}
    
  {{ forloop.counter0 }}  从0开始计数
  {{ forloop.counter1 }}  从1开始计数

(2) if判断
    {% if flag %}
        <p>flag不为空</p>
        {% else %}
        <p>flag是空</p>
    {% endif %}

(3) 嵌套使用
{% for foo in l %}
    {% if forloop.first %}
        <p>这是我的第一次</p>
    {% elif forloop.last %}
        <p>这是最后一次了啊</p>
    {% else %}
        <p>嗨起来！！！</p>
    {% endif %}
    {% empty %}
        <p>你给我的容器类型是个空啊，没法for循环</p>
{% endfor %}

解释一波：
{% if forloop.first %} 判断此次循环是不是第一次，是，就执行下面的代码
{% elif forloop.last %} 同样的，判断是不是最后一次，是，就执行下面代码
{% empty %} 当你的for循环对象为空的时候会自动走empty代码块儿的内容

(3) 嵌套使用
{% for foo in l %}
    {% if forloop.first %}
        <p>这是我的第一次</p>
    {% elif forloop.last %}
        <p>这是最后一次了啊</p>
    {% else %}
        <p>嗨起来！！！</p>
    {% endif %}
    {% empty %}
        <p>你给我的容器类型是个空啊，没法for循环</p>
{% endfor %}

解释一波：
{% if forloop.first %} 判断此次循环是不是第一次，是，就执行下面的代码
{% elif forloop.last %} 同样的，判断是不是最后一次，是，就执行下面代码
{% empty %} 当你的for循环对象为空的时候会自动走empty代码块儿的内容

使用之前请先导入  --> 在html模板页面中导入
    {% load my_filter %}
    这个my_filter是自定义的py文件名（上面定义的三个步骤其二）
(5) 自定义标签
# 自定义标签
    @register.simple_tag
    def plus(a,b,c):
        return a+b+c

(6) 自定义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}
# login.html
    <ul>
        {% for foo in l %}
        <li>{{ foo }}</li>
        {% endfor %}
    </ul>
# 调用
{% login 5 %}

注意 :要想使用自定义的过滤器 标签 inclusion_tag
      必须先在需要使用的html页面加载你的py文件
        {% load my_tag %}

        {{ 666|XBB:8 }}
        {% plus 1 2 3 %}
        {% login 5 %}

Inheritance and import templates

(1) 首先需要在被继承的模板中划分多个区域
    {% block 给区域起的名字 %}

    {% endblock %}

(2) 通常情况下一个模板中应该至少有三块
    {% block css %}
        页面css代码块
    {% endblock %}

    {% block js %}
        页面js代码块
    {% endblock %}

    {% block content %}
        页面主体内容
    {% endblock %}
(3) 子板继承模板
    1> 先继承模板所有的内容
        {% extends 'home.html' %}
    
    2> 然后根据block块的名字修改指定区域的内容
    {% 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-success">
            </form>
    {% endblock %}

(4) 模板的导入:
将一段html当做模块的方式导入到另一个html展示
    {% include '想导入的html文件名' %}

Static configuration file

{% load static %}  

<link rel='stylesheet' href="{% static 'css/mycss.css'%}">  # 第一种方式
<link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">  # 第二种方式

Django template layer

Front and rear ends data transfer

(1) 后端朝前端页面传递数据的方式:
    # 将当前所在的名称空间中的名字全部传递给前端页面
    # 第一种
        return render(request,'index.html',{'n':n})
    # 第二种
        return render(request,'index.html',locals())  
    
(2) 后端传函数名到前端，会自动加括号调用，但是不支持传参

(3) 后端传对象到前端，就相当于打印了这个对象

(4) 前端获取后端传过来的容器类型的内部元素 统一采用句点符(.)
('关某某','谢某某','陈某某','容嬷嬷')>>>:{{ t }},{{ t.1 }}  数字对应的就是数据的索引
    
(5) 前端能够调用python后端数据类型的一些不需要传参的内置方法

(6) 注释：
    模板语法的注释，不会展示到前端页面：
        {#调用python自带的内置方法,可以调用不需要传参的一些内置方法#}
    原生html的注释，会展示到前端:
        <!--我是原生的html注释-->

filter

# 下面的内容，第一行是在前端的代码，第二行是运行的结果

(1) <p>前端统计字符串的长度:{{ s|length }}</p>
# 结果：前端统计字符串的长度:16

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

(3) <p>将数字格式化成表示文件大小的单位:{{ file_size|filesizeformat }}</p>
# 结果：将数字格式化成表示文件大小的单位:20.3 MB

(4) <p>{{ ctime }}</p>
# 结果：June 11, 2019, 7:30 p.m.

(5) <p>格式化时间(不要加百分号):{{ ctime|date:'Y-m-d' }}</p>
# 结果：格式化时间(不要加百分号):2019-06-11

(6) <p>字符串的切片操作:{{ res|slice:'0:8' }}</p>
# 结果：字符串的切片操作:hello bi

(7) <p>{{ res|slice:'0:8:2' }}</p>
# 结果：hlob         起始位置：结束位置：步长

(8) <p>截取固定的长度的字符串 三个点也算:{{ s|truncatechars:10 }}</p>
# 结果：截取固定的长度的字符串 三个点也算:这是 一段 字...

(9) <p>按照空格截取文本内容:{{ res|truncatewords:4 }}</p>
# 结果：按照空格截取文本内容:hello big ba by~ ...

(10) <p>{{ s|truncatewords:4 }}</p>
# 结果：这是 一段 字符串 没有别的东西

(11) <p>{{ 'hahah'|add:'heheheh' }}</p>
# 结果：

后端代码：
    ht = '<h1>我是h1标签</h1>'
    sr = '<script>alert(123)</script>'
    
前端：
    <p>{{ ht }}</p> 
    <p>{{ sr }}</p>
    # 上面两个在前端显示的是纯字符串，不会将其转义成代码执行
    
    <p>{{ ht|safe }}</p>
    <p>{{ sr|safe }}</p>
    # 下面的两句，通过|safe过空滤器将其转义代码执行
    
前后端取消转义(*****)
    前端:
        |safe
    后端:
        from django.utils.safestring import mark_safe
        xxx = mark_safe('<h1>我是h1标签</h1>')  

label

(1) for循环：
    {% for foo in l %}
        <p>{{ foo }}</p>
        <p>{{ forloop }}</p>
    {% endfor %}

解释一波：从容器l中一个个的读取数据，然后将其塞入前端的标签里面
    {{ foo }}：取l里面的一个个的值
    {{ forloop }}：下面是一条记录
    {'revcounter': 7, 'counter0': 0, 'last': False, 'parentloop': {}, 'counter': 1, 'first': True, 'revcounter0': 6}
    
  {{ forloop.counter0 }}  从0开始计数
  {{ forloop.counter1 }}  从1开始计数

(2) if判断
    {% if flag %}
        <p>flag不为空</p>
        {% else %}
        <p>flag是空</p>
    {% endif %}

(3) 嵌套使用
{% for foo in l %}
    {% if forloop.first %}
        <p>这是我的第一次</p>
    {% elif forloop.last %}
        <p>这是最后一次了啊</p>
    {% else %}
        <p>嗨起来！！！</p>
    {% endif %}
    {% empty %}
        <p>你给我的容器类型是个空啊，没法for循环</p>
{% endfor %}

解释一波：
{% if forloop.first %} 判断此次循环是不是第一次，是，就执行下面的代码
{% elif forloop.last %} 同样的，判断是不是最后一次，是，就执行下面代码
{% empty %} 当你的for循环对象为空的时候会自动走empty代码块儿的内容

(3) 嵌套使用
{% for foo in l %}
    {% if forloop.first %}
        <p>这是我的第一次</p>
    {% elif forloop.last %}
        <p>这是最后一次了啊</p>
    {% else %}
        <p>嗨起来！！！</p>
    {% endif %}
    {% empty %}
        <p>你给我的容器类型是个空啊，没法for循环</p>
{% endfor %}

解释一波：
{% if forloop.first %} 判断此次循环是不是第一次，是，就执行下面的代码
{% elif forloop.last %} 同样的，判断是不是最后一次，是，就执行下面代码
{% empty %} 当你的for循环对象为空的时候会自动走empty代码块儿的内容

使用之前请先导入  --> 在html模板页面中导入
    {% load my_filter %}
    这个my_filter是自定义的py文件名（上面定义的三个步骤其二）
(5) 自定义标签
# 自定义标签
    @register.simple_tag
    def plus(a,b,c):
        return a+b+c

(6) 自定义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}
# login.html
    <ul>
        {% for foo in l %}
        <li>{{ foo }}</li>
        {% endfor %}
    </ul>
# 调用
{% login 5 %}

注意 :要想使用自定义的过滤器 标签 inclusion_tag
      必须先在需要使用的html页面加载你的py文件
        {% load my_tag %}

        {{ 666|XBB:8 }}
        {% plus 1 2 3 %}
        {% login 5 %}

Inheritance and import templates

(1) 首先需要在被继承的模板中划分多个区域
    {% block 给区域起的名字 %}

    {% endblock %}

(2) 通常情况下一个模板中应该至少有三块
    {% block css %}
        页面css代码块
    {% endblock %}

    {% block js %}
        页面js代码块
    {% endblock %}

    {% block content %}
        页面主体内容
    {% endblock %}
(3) 子板继承模板
    1> 先继承模板所有的内容
        {% extends 'home.html' %}
    
    2> 然后根据block块的名字修改指定区域的内容
    {% 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-success">
            </form>
    {% endblock %}

(4) 模板的导入:
将一段html当做模块的方式导入到另一个html展示
    {% include '想导入的html文件名' %}

Static configuration file

{% load static %}  

<link rel='stylesheet' href="{% static 'css/mycss.css'%}">  # 第一种方式
<link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">  # 第二种方式