当前位置: 首页 > news >正文

模板层

模板层

后端朝前端传递数据

传递方式一:
    return render(request,'index.html',{'n':n})
传递方式二:
    return render(request,'index.html',locals())
    
    后端传函数名到前端,会自动加括号调用,但是不支持传参,所以在前端得到的是一个函数的返回值
    后端传对象到前端,就相当于打印了这个对象。
    前端获取后端传递过来的容器类型的内部元素,统一采用句点符(.)
    例如:(都在{{}}中进行取值,因为是有关变量)
    列表          a.0    a.2.1支持索引取值 
    元组         同上
    字典         a.key(支持key取值,value也可以是容器类型,再使用.取值)
    集合         无序,不支持索引取值
    对象         obj.方法或属性(注意的是,这里的方法可以是不含参数的静态方法,也可以是除了不含其它参数的类方法或对象方法)总而言之,在前端不支持传参
    
   前端能够调用python后端数据类型的一些不需要传参的内置方法
   
注释:
    1.原生的html注释会展示到前端<!--我是注释-->
    2.模板语法的注释不会展示到前端(#我是注释)

过滤器

1.统计字符串的长度   {{s|length}}
2.前端获取数据如果为空返回默认值,有则返回数据的值{{s|default:'没有值'}}
3.相同的类型(int或字符串)加 {{'haha'|add:'hehe'}}
4.将数字格式化成表示文件大小的单位 {{file_size|filesizeformat}}
5.格式化时间 {{time|date:'Y-m-d'}}
6.字符串的切片操作{{res|slice:'0:8:2'}} #索引0到8,步长为2,不写默认1
7.截取固定长度的字符串
    7.1 {{s|truncatechars:10}}  #截取10位包括省略号(3点),实际其实只有7位
    7.2 {{s|truncatewords:4}}  #取四段,默认空格为界,不包括省略号(3点)
8.前后端取消转义 
    8.1,在前端使用{{ht|safe}},(ht='<h1>hello<h1>') 加上safe就会将ht当做前端语言执行,否则会将其整体转义当做字符串文本
    8.2 在后端导入from django.utils.safestring import mark_safe
        ht=mark_safe(''<h1>hello<h1>'')
    上面两种都可以达到取消转义的目的,(因为自动取消转义会有被脚本攻击的风险)

标签

1.for循环 
    {% for foo in l %}
        <p>{{ foo }}</p>
        <p>{{ forloop }}</p>
        #forloop值为下方的字典  
        {'revcounter':反向序号, 'last'(是否是最后一位,True或者False), 'revcounter0':反向索引, 'counter0':(索引), 'parentloop':引用的父级循环对象没有为{}, 'first': (是否是最后一位,True或者False), 'counter':(序号,从1开始)}
    {% endfor %}
    
2.if判断
    {% if flag %}
        <p>flag不为空<p>
        {% else %}
        <p>flag为空<p>
    {% endif %}
    
3.if和for的嵌套使用
    {% for foo in l %}
        {% if forloop.first %}
        <p>这是我的第一次</p>
        {% elif forloop.last %}
        <p>这是最后一次了啊</p>
        {% else %}
        <p>嗨起来!!!</p>
        {% endif %}
         {% empty %}    #当for循环对象为空的时候就会走empty代码块的内容,empty要放在循环中
            <p>你给我的容器类型是个空啊,没法for循环</p>
    {% endfor %}

自定义过滤器

必须做的三件事
    1.在应用名下新建一个名Wietemplatetags文件夹(必须是这个名字)
    2.在该新建的文件夹内新建一个任意名称的py文件
    3.在该py文件下需要固定写两句代码
        from django import template
        register=template.Library()   #名字规定,不能更改
        
1.自定义过滤器
    @register.filter(name='XBB')   
    def index(a,b):     #最多支持两个参数
        return a+b
        #前端调用{% 1|XX:2 %} 把add换成XBB
        
2.自定义标签
    @register.simple_tag
    def puls(a+b+c):
        return a+b+c 
        #前端调用 {% plus 1 2 3 %}
        
3.自定义inclusion_tag
    @register.inclusion_tag('login.html')
    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 %} 
过程:
    1.调用的时候把参数传入my_tag(定义的py文件)中
    2.执行login函数,将函数的返回值传入装饰器的login.html中
    3.就可以加载这个库中的代码

模板的继承和导入

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

    {% endblock %}
通常情况下一个模块至少有三块
    {% block css %}
    页面css代码块
    {% endblock %}

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

    {% block content %}
    页面主体内容
    {% endblock %}
    
子板继承模板
    先继承模板所有的内容
    {% extends 'home.html' %}
    
    然后根据block块的名字修改指定区域的内容
    {% block content %}
        1.添加内容,就会把继承模板中的{% block content %}内的内容替换
        2.还可以通过{{ block.super }}继续使用主页面某一个块里面的内容
        3.也支持模板的导入:将一段html当做模块的方式导入到另一个html展示
        {% include '想导入的html文件名' %}
    {% endblock %}

静态文件配置

{% load static %}   #先导入
    方法一:
        <link rel='stylesheet' href="{% static 'css/mycss.css'%}">
     方法二:
        <link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">

转载于:https://www.cnblogs.com/Mr-bear/articles/11011972.html

相关文章:

  • 千里足下篇之——基础框架我写完了
  • hadoop-hdfs-伪分布式环境搭建-使用
  • 【题解】分特产(组合数+容斥)
  • rabbitma客户端
  • CloudSim
  • 新入职感觉
  • 迭代(二):迭代法求方程的根
  • MySQL数据库可以用任意ip连接访问的方法
  • 网络编程实战之FTP的文件断点续传
  • C语言核心技术第一章
  • PHP Curl 请求同域的问题
  • 实验十
  • Python内置函数
  • CSS3属性—— line-clamp控制文本行数
  • 浏览器常用快捷键
  • Angular6错误 Service: No provider for Renderer2
  • Angularjs之国际化
  • docker python 配置
  • ES6核心特性
  • ES6之路之模块详解
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • java小心机(3)| 浅析finalize()
  • magento 货币换算
  • Vue2.0 实现互斥
  • 初探 Vue 生命周期和钩子函数
  • 缓存与缓冲
  • 聊聊directory traversal attack
  • 如何将自己的网站分享到QQ空间,微信,微博等等
  • 少走弯路,给Java 1~5 年程序员的建议
  • 手机端车牌号码键盘的vue组件
  • 一道闭包题引发的思考
  • 一个完整Java Web项目背后的密码
  • 译米田引理
  • 用jquery写贪吃蛇
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 运行时添加log4j2的appender
  • 字符串匹配基础上
  • 06-01 点餐小程序前台界面搭建
  • Prometheus VS InfluxDB
  • Redis4.x新特性 -- 萌萌的MEMORY DOCTOR
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • ​Linux Ubuntu环境下使用docker构建spark运行环境(超级详细)
  • ​VRRP 虚拟路由冗余协议(华为)
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • (1)常见O(n^2)排序算法解析
  • (C语言)fgets与fputs函数详解
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (南京观海微电子)——I3C协议介绍
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • (转)AS3正则:元子符,元序列,标志,数量表达符
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • *Django中的Ajax 纯js的书写样式1
  • .bat批处理(五):遍历指定目录下资源文件并更新
  • .NET HttpWebRequest、WebClient、HttpClient
  • .net 程序 换成 java,NET程序员如何转行为J2EE之java基础上(9)