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

    模版层

    两种给模版传参的方式(字典,locals())

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

    前端如何接收( {{}} )

    先传python基本数据类型(数字,字符串,列表,元祖,字典) 前端加{##}模版语言注释,前端是看不到的

    在传函数名(前端自动加括号执行,要不想被执行只想看函数名打印结果可以放到列表中传到前端)

    传类的对象去前端不要传类

    变量前端都能接收到,现在需要介绍如何查找变量里面的值(深度查询)

    # 获取容器对象内数据 统一使用句点符 .
    ('关某某','谢某某','陈某某','容嬷嬷')>>>:{{ t }},{{ t.1 }}  #数字对应的就是数据的索引
    {{dic.name}}  # 获取字典值
    {{div.hobby.0}}  # 如果一次查询还是容器类型则继续可以点方式取值
    
    {{obj.name}}  # jason
    {{obj.get_name}}  # jason
    {{obj.get_cls}}  # cls
    {{obj.get_static}}  # static
    # 如果对象调用的方法需要传参数  模版不支持!!!
    
    # python中字符串,列表等自带的一些方法,到前端依然可以不加括号直接调用,但是不能调带参数的!!!
    

    模版语法之过滤器

    # 先用|length统计字符串或列表的长度,再点进去查看源码,加注释总结,|前面的值会当作第一个参数传递给|后面的函数
    {{ l1|length }}
    
    # 再来一个可以再传一个参数的过滤器,源码看一下
    {{ l2|default:'是空的' }
     
    # 几个常用的过滤器
    filesizeformat  # 将值格式化为一个 “人类可读的” 文件尺寸 (例如 '13 KB', '4.1 MB', '102 bytes', 等等)
    
    date  # 如果 value=datetime.datetime.now() {{ value|date:"Y-m-d" }} 前端可以展示原生的时间可以经过过滤器处理过后的时间对比查看
    
    slice  # 如果 value="hello world"  {{ value|slice:"0:5:2" }} 支持步长
    
    truncatechars  # 如果字符串字符多于指定的字符数量,那么会被截断。截断的字符串将以可翻译的省略号序列(“...”)结尾。  {{ value|truncatechars:9 }}  三个点也算三个数
     
    truncatewords  # 截断字符 三个点不算数
    
    add  # 给数字加一个值,如果第一个参数是字符串,会默认全转成字符串进行拼接
    
    safe  # 取消转义 	{{ value|safe }}
    # 用script脚本阐明转义的意义
    

    模版语法之标签

    # for循环
    {% for foo in l1 %}
    <p>{{ forloop }}</p>
    {% endfor %}
    # {'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 5, 'revcounter0': 4, 'first': True, 'last': False}
    
    # if判断
    {% if user %}
    	hello
    {%else%}
    	world!
    {% endif %}
    
    # if嵌套在for循环里面
    {% for foo in l1%}
    	{% if forloop.first %}
      	第一次的我
      {% elif forloop.last %}
      	最后一次的我
      {% else %}
      	{{ foo }}
      {% endif %}
    {% endfor %}
    
    # empty
    # 当被循环对象是空的时候才会走empty下面的
    
    # for循环字典
    {% for k in dic.keys%}
    {% for k in dic.values%}
    {% for k in dic.items%}
    
    # with起别名(当获取的变量在多层嵌套关系中的时候)
    {% with div.l1.2 as ttt%}
    {{ ttt }}
    {% endwith %}
    # 只要在这个with包裹的区域内都可以使用ttt
    

    自定义标签({%%}中使用)和过滤器(变量相关{{}}中使用)及inclusion_tag返回html片段

    # 自定义过滤器与标签及inclusion_tag步骤:
    # 1.在app中创建templatetags模块(模块名只能是templatetags)
    # 2.创建任意 .py 文件,如:my_tags.py
    # 3.文件中必须先写下面两句
    from django import template
    register = template.Library()   
    
    # 自定义过滤器
    @register.filter(name='baby')
    def my_sum(v1,v2):
      return v1+v2
    # 模版中使用
    {% load my_tags%}
    {{  price|baby:'88' }}
    
    # 自定义标签
    @register.simple_tag(name='plus')
    def puls(a,b,c)
    	return '%s+%s+%s'%(a,b,c)
    # 模版中使用
    {% load my_tags%}
    {% plus 'jason' 66 666%}
    
    # 注意点:自定义的过滤器可以用在if判断,自定义的标签不可以
    {% if 6|baby:4 %}
    <p>肯定是有值的</p>
    {% endif %}
    # 错误示范
    {% if plus 'jason' 6  6 %}
    <p>肯定是有值的</p>
    {% endif %}
    
    # 自定义inclusion_tag返回前端片段
    from django import template
    register = template.Library()
    
    @register.inclusion_tag('result.html')
    def show_results(n):
        n = 1 if n < 1 else int(n)
        data = ["第{}项".format(i) for i in range(1, n+1)]
        return {"data": data}
      
    # result.html
    <ul>
      {% for choice in data %}
        <li>{{ choice }}</li>
      {% endfor %}
    </ul>
    
    # 模版中使用
    {% load inclusion_tag_test %}
    {% show_results 10 %}
    

    模版的继承与导入

    # 模版的继承
    {% extend 'base.html' %}
    # 既想用自己的也想用母版的
    {% block content %}
    {{ block.super }}  # 固定语法可以直接调用到模版的内容
    {% endblock %}
    
    # 模版的导入
    {% include 'left.html '%}
    

    静态文件配置

    # 第一种 直接写死
    
    # 第二种
    {% load static %}  # 先加载
    
    <link rel='stylesheet' href="{% static 'css/mycss.css'%}">  # 第一种方式
    <link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">  # 第二种方式
    
  • 相关阅读:
    es5核心技术
    es6 迭代器 和 生成器 学习笔记
    nodejs 基础学习笔记
    node 基本原理
    mac php7 连接数据库遇到的问题
    express ,koa1, koa2学习笔记
    mac mysql的安装
    webpack 给css添加前缀
    利用git将本地的代码同步到github上
    vuex 学习总结及demo
  • 原文地址:https://www.cnblogs.com/fuwei8086/p/11006139.html
Copyright © 2011-2022 走看看