zoukankan      html  css  js  c++  java
  • Django框架之前端渲染-模板层

    Django 模板层

     

    Django 模板层

    前后端数据传递

    (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注释-->

    过滤器

    # 下面的内容,第一行是在前端的代码,第二行是运行的结果
    
    (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>')  

    标签

    (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 %}
      
      例:
    {% if article_obj.classify == classify %}  //这里 == 两端必须有空格,不然飘红
     
    (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 %}

    模板的继承与导入

    (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文件名' %}

    静态文件配置

    {% load static %}  
    
    <link rel='stylesheet' href="{% static 'css/mycss.css'%}">  # 第一种方式
    <link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">  # 第二种方式
  • 相关阅读:
    js进阶 12-7 pageY和screenY以及clientY的区别是什么
    printf交替使用
    【iOS发展-81】setNeedsDisplay刷新显卡,并CADisplayLink它用来模拟计时器效果
    android tv 全屏幕垂直画
    uva 10305
    (札记)Java应用架构设计-模块化模式与OSGi
    《学习opencv》笔记——矩阵和图像处理——cvAnd、cvAndS、cvAvg and cvAvgSdv
    一旦专利
    SharePoint 2010 升级到2013时间 为了确保用户可以连接,但无法改变升级数据
    [TroubleShooting] The remote copy of database xx has not been rolled forward to a point in time
  • 原文地址:https://www.cnblogs.com/dongxixi/p/11013803.html
Copyright © 2011-2022 走看看