Django模板层(前端渲染、过滤器、标签控制、模板继承)

Django模板层(前端渲染、过滤器、标签控制、模板继承)

目录

    • Django模板层(前端渲染、过滤器、标签控制、模板继承)
    • 模板渲染
      • 八大基础数据类型渲染
      • 渲染函数与类
        • 函数
        • 过滤器
          • 常用过滤器
          • 标签
            • for循环语句
              • forloop
                • forloop其他参数
                • **for ... empty**
                • if语句
                • with语句
                • 注意事项
                • 模板继承
                  • 关键语句
                  • 母版内容
                  • 子版内容
                  • 总结:

                    模板渲染

                    后端:

                    在render解析时加入方法locals,可以将函数中的参数传递给前端

                    def test(request):
                        name = '张三'
                        age = 18
                        return render(request,'app01/test.html',locals())
                    

                    前端:

                    用{{ }}接受参数,并渲染在前端页面上

                    {{ name }}

                    {{ age }}

                    八大基础数据类型渲染

                    def test(request):
                        # 【一】字符串类型的数据
                        name = "张三"
                        # 【二】数字类型的数据
                        # (1)整数
                        age = 18
                        # (2)浮点数 : 如果是0精确度只能到小数点后一位
                        salary = 100.6666666
                        # 【三】列表类型
                        num_list = [1, 2, 3, 4, 5, 6, 7]
                        # 【四】字典类型的数据
                        user_data = {"username": "dream", "password": "521521", "age": 1888, "hobby": ["music", "sport", "walk"],
                                     "addr": {"country": "China", "location": "Shanghai"}}
                        # 【五】布尔类型
                        is_right = True
                        # 【六】元组类型
                        num_tuple = (1, 2, 3, 4, 5)
                        # 【七】集合类型
                        num_set = {1, 2, 3, 4, 5, 5, 5}
                        return render(request,'app01/test.html',locals())
                    

                    字符串:{{ name }}

                    整数:{{ age }}

                    浮点:{{ salary }}

                    列表:{{ num_list }}

                    字典:{{ user_data }}

                    布尔:{{ is_right }}

                    元组:{{ num_tuple }}

                    集合:{{ num_set }}

                    渲染结果:

                    渲染函数与类

                    函数
                    def test(request):
                        def one():
                            content = 10
                        def two():
                            return 2+2
                        return render(request,'app01/test.html',locals())
                    

                    无返回值函数:{{ one }}

                    有返回值函数:{{ two }}

                    渲染结果:

                    def index(request):
                        class index(object):
                            def __init__(self,name,age):
                                self.name = name
                                self.age = age
                            def fun1(self):
                                return '绑定对象方法'
                            @classmethod
                            def fun2(cls):
                                return '绑定类方法'
                            @staticmethod
                            def fun3():
                                return '非绑定方法'
                            def __str__(self):
                                return '这是index类'
                        my_index = index(name="张三",age=18)
                        return render(request,'app01/test.html',locals())
                    

                    绑定对象方法:{{ my_index.fun1 }}

                    绑定类方法:{{ my_index.fun2 }}

                    非绑定方法:{{ my_index.fun3 }}

                    类:{{ my_index }}

                    过滤器

                    在Django中过滤器可以改变前端页面显示的变量,由符号|表示

                    如:{{index|lower}},该操作会将index函数转换为小写,相当于引用了lower()方法

                    常用过滤器

                    渲染 name 变量

                    {{ name }}

                    【1】计算当前变量值的长度

                    {{ name|length }}

                    【2】字母大小写转换

                    {{ name|lower }}
                    {{ name|upper }}

                    【3】指定默认值

                    {{ age|default:18 }}

                    【4】渲染文件大小

                    {{ img_data|filesizeformat }}

                    【5】格式化日期对象

                    {{ current_time }}
                    {{ current_time|date:"Y-m-d H:i:s" }}

                    【6】切片(顾头不顾尾)

                    {{ name }}
                    {{ name|slice:"0:4:2" }}

                    【7】切取摘要

                    {{ content }}
                    {{ content|truncatechars:9 }}

                    【8】移除指定字符

                    {{ name }}
                    {{ name|cut:"r" }}

                    【9】拼接

                    可以拼接的前提是后端的数据可以迭代
                    {{ num_list }}
                    {{ num_list|join:"|" }}

                    【10】取消转义

                    {{ html_content }}
                    第二种方案:不在后端用 make_safe 包一下
                    {{ html_content|safe }}

                    标签

                    for循环语句

                    def index(request):
                        class index(object):
                            def fun1(self):
                                name = ['a','b','c','d']
                                return name
                        my_index = index()
                        return render(request,'app01/test.html',locals())
                    
                    {#输入for可以快速生成for循环语句#}
                    
                      {% for i in my_index.fun1 %}
                    • {{ i }}
                    • {% endfor %}
                    forloop
                    a = [1, 2, 3]
                    {% for re in a %} 

                    {{ forloop }}

                    {% endfor %}
                    {'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 3, 'revcounter0': 2, 'first': True, 'last': False}
                    {'parentloop': {}, 'counter0': 1, 'counter': 2, 'revcounter': 2, 'revcounter0': 1, 'first': False, 'last': False}
                    {'parentloop': {}, 'counter0': 2, 'counter': 3, 'revcounter': 1, 'revcounter0': 0, 'first': False, 'last': True}
                    
                    • first
                      • 标识 for 循环是否是第一次
                      • last
                        • 标识 for 循环是否是以后一次
                        • counter0
                          • 类似索引
                          • counter
                            • 计数
                            • 取值
                              forloop其他参数
                              VariableDescription
                              forloop.counter当前循环的索引值(从1开始)
                              forloop.counter0当前循环的索引值(从0开始)
                              forloop.revcounter当前循环的倒序索引值(从1开始)
                              forloop.revcounter0当前循环的倒序索引值(从0开始)
                              forloop.first当前循环是不是第一次循环(布尔值)
                              forloop.last当前循环是不是最后一次循环(布尔值)
                              forloop.parentloop本层循环的外层循环

                              用法:

                                {% for i in my_index.fun1 %}
                              • {{ forloop.counter }}:{{ i }}
                              • {% endfor %}
                              for … empty
                              def fun1(self):
                                  return None
                              
                                {% for i in my_index.fun1 %}
                              • {{ forloop.counter }}:{{ i }}
                              • {% empty %}
                              • 无数据
                              • {% endfor %}

                              当数据为空时执行empty下的代码

                              if语句

                              if\elif\else

                              if\else
                              {% if a > 1 %}
                                  正确
                              {% else %}
                                  错误
                              {% endif %}
                              
                              if\elif\else {% if a|length >1 %} 大于1 {% elif a|length>5 %} 大于5 {% else %} 小于等于1 {% endif %}
                              def test(request):
                                  a = 10
                                  return render(request,'app01/test.html',locals())
                              

                              with语句

                              将变量改名,一般用于将复杂且长的参数改简短

                              # 传递数值a
                              def test(request):
                                  a = 10
                                  return 
                              render(request,'app01/test.html',locals())
                              ##################################################
                              # a改名为b
                              {% with a=b%}
                              或
                              {% with a as b %}
                                  {{ a }}
                                  {{ b }}
                              {% endwith %}
                              

                              注意事项

                              • Django的模板语言不支持连续判断,即不支持以下写法:
                                {% if a > b > c %}
                                ...
                                {% endif %}
                                
                                • Django的模板语言中属性的优先级大于方法
                                  def xx(request):
                                      d = {"a": 1, "b": 2, "c": 3, "items": "100"}
                                      return render(request, "xx.html", {"data": d})
                                  
                                  • 如上,我们在使用render方法渲染一个页面的时候
                                    • 传的字典d有一个key是items并且还有默认的 d.items() 方法
                                    • 此时在模板语言中:
                                      {{ data.items }}
                                      
                                      • 默认会取d的items key的值

                                        模板继承

                                        关键语句

                                        继承css

                                        {% block page-css %}  
                                        {% endblock %}
                                        

                                        继承主内容:

                                        {% block page-main %}
                                        {% endblock %}
                                        

                                        继承语句:(写在子版html的第一行)

                                        {% extends 'home.html' %}
                                        

                                        母版内容

                                        {% load static %}
                                          Title      {% block page-css %}  {% endblock %}
                                        {# #}
                                        

                                        这是母版

                                        {% block page-main %}

                                        这是母版的内容

                                        {% endblock %}

                                        渲染效果:

                                        子版内容

                                        {% extends 'home.html' %}
                                        {% load static %}
                                          Title      {% block page-css %}  {% endblock %}
                                        {% block page-main %} 

                                        我是被替换掉的母版内容

                                        {% endblock %}

                                        渲染效果:

                                        总结:

                                        子版会继承母版的所有内容

                                        仅有被

                                        {% block page-main %}
                                        {% endblock %}
                                        

                                        {% block page-css %}
                                        {% endblock %}
                                        

                                        包裹的内容是可以被子版替换的