zoukankan      html  css  js  c++  java
  • Django之模板层

    一前后端数据传递接收的方式

    1、后端向前端传递数据的方式

    # 第一种
    return render(request,'index.html',{'n':n})
    # 第二种
    return render(request,'index.html',locals())  # 将当前所在的名称空间中的名字全部传递给前端页面
            
    • 后端传函数名到前端,会自动加括号调用,但是不支持传参
    • 后端传对象到前端,就相当于打印了这个对象

    2、前端获取传过来的容器类型的内部元素

    # 统一采用句点符(.)获取
    ('关某某','谢某某','陈某某','容嬷嬷')>>>:{{ t }},{{ t.1 }}  # 数字对应的就是数据的索引

    注意:

    • 前端只能够调用python后端数据类型的一些不需要传参的内置方法

    模板语法的注释:

    # 不会展示到前端页面:
                {#需要注释的内容#}    
    
    
    
    # 会展示到前端页面:
                <!--我是原生的html注释-->

    二、标签

    1、for循环

    {% for foo in l %}
        <p>{{ foo }}</p>
        <p>{{ forloop }}</p>
    {% endfor %}

    2、if判断

    {% if flag %}
        <p>flag不为空</p>
        {% else %}
        <p>flag是空</p>
    {% endif %}

    3、for,if,elif,else嵌套使用

    {% for foo in l %}
        {% if forloop.first %}
            <p>这是我的第一次</p>
        {% elif forloop.last %}
            <p>这是最后一次了啊</p>
        {% else %}
            <p>嗨起来!!!</p>
        {% endif %}
    {% endfor %}    

    4、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 %}

    三、过滤器

    <p>前端统计字符串的长度:{{ s|length }}</p>
    <p>前端获取数据如果是空就返回default后面默认的参数值:{{ flag|default:'你这个东西是个空'}}</p>
    <p>将数字格式化成表示文件大小的单位:{{ file_size|filesizeformat }}</p>
    <p>{{ ctime }}</p>
    <p>格式化时间(不要加百分号){{ ctime|date:'Y-m-d' }}</p>
    <p>字符串的切片操作:{{ res|slice:'0:8' }}</p>
    <p>{{ res|slice:'0:8:2' }}</p>
    
    <p>截取固定的长度的字符串 三个点也算:{{ s|truncatechars:10 }}</p>
    
    <p>按照空格截取文本内容:{{ res|truncatewords:4 }}</p>
    <p>{{ s|truncatewords:4 }}</p>
    
    <p>{{ 'hahah'|add:'heheheh' }}</p>
    
    {#重点#}
    <p>{{ ht }}</p>
    <p>{{ sr }}</p>
    <p>{{ ht|safe }}</p>
    <p>{{ sr|safe }}</p>

    前后端取消转义(重点

    # 前端:
        |safe
    
    
    # 后端:
        from django.utils.safestring import mark_safe
        xxx = mark_safe('<h1>我是h1标签</h1>')

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

    1、必须做的三件事

    1. 在应用名下新建一个名为templatetags文件夹(必须叫这个名字)
    2. 在该新建的文件夹内新建一个任意名称的py文件
    3. 在该py文件中需要固定写下面两句代码:
    from django import template
    register
    = template.Library()

    2、自定义标签

    @register.simple_tag
    def plus(a,b,c):
        return a+b+c

    3、自定义过滤器

    @register.filter(name='XBB')
    def index(a,b):
        return a+b

    4、自定义inclusion_tag

    # 自定义inclusion_tag
        @register.inclusion_tag('login.html',name='login')
        def login(n):
            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 %}

    五、模块的继承与导入

    1、模块的继承

    1.1、主模块相关

    #  首先需要在被继承的模板中划分多个区域
    {% block 给区域起的名字 %}
    
    {% endblock %}
            
    #  通常情况下一个模板中应该至少有三块
        {% block css %}
            页面css代码块
        {% endblock %}
    
        {% block js %}
            页面js代码块
        {% endblock %}
    
        {% block content %}
            页面主体内容
        {% endblock %}        

    1.2、子模块继承主模块

    #  先继承模板所有的内容
    {% extends 'home.html' %}
                
    #  然后根据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 %}

    注意:

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

    六、静态文件配置

    {% load static %} 
    
    
        <link rel='stylesheet' href="{% static 'css/mycss.css'%}">  # 第一种方式
        <link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">  # 第二种方式
  • 相关阅读:
    爬虫笔记之JS检测浏览器开发者工具是否打开
    上海租房@8群
    在Windows中玩转Docker Toolbox(镜像加速)
    Docker 清理命令 删除所有的镜像和容器
    修改docker安装的machine位置
    Sass @mixin 与 @include
    webpack之SourceMap
    c#中Indexof()和Split()的用法
    《MVC+EF》——用DBFirst创建ADO.NET实体数据模型和对象关系映射
    sql server 用户'sa'登录失败(错误18456)
  • 原文地址:https://www.cnblogs.com/wangyisen/p/11004472.html
Copyright © 2011-2022 走看看