一、后端与前端的数据交互
1.后端向前端传输数据的方式
# 第一种 return render(request,'index.html',{'n':n}) # 第二种 # locals()会将当前所在的名称空间中的名字全部传递给前端页面 return render(request,'index.html',locals())
2.后端向前端传输数据的类型
def index(request): n = 6969 s = '我于死亡之中绽放,亦如黎明中的花朵' #前端获取后端传过来的容器类型的内部元素 统一采用句点符(.) #('关某某','谢某某','陈某某','容嬷嬷')>>>:{{ t }},{{ t.1 }} 数字对应的就是数据的索引 l = ['a','b','c','d','e','f','g'] d = {'name':'Tom','password':'222','hobby':['抽烟','喝酒','烫头']} t = ('关某某','谢某某','陈某某','容嬷嬷') st = {'python','java','php','golang'} #注意集合是无序的 #后端传函数名到前端,会自动加括号调用,但是不支持传参 def func(): return '你调用了我?' class Demo(object): def __init__(self,name): self.name = name def func(self): return self.name @classmethod def index(cls): return 'cls' @staticmethod def bar(name,age): return 'bar' def __str__(self): return '大帅比' #后端传对象到前端,就相当于打印这个对象 #对象.属性/方法,能获取对应值{{ obj.name }} obj = Demo('Tom') return render(request,'index.html',locals())
1.前端调用后端数据类型(不需要传参)的内置方法
2.模板语法的注释不会展示到前端页面
3.原生的html注释会展示到前端:<!--我是原生的html注释-->
二、过滤器
在Django的模板语言中,通过使用 过滤器 来改变变量的显示。
过滤器的语法: {{ value|filter_name:参数 }},使用管道符"|"来应用过滤器。
例如:{{ name|lower }}会将name变量应用lower过滤器之后再显示它的值。lower在这里的作用是将文本全都变成小写。
前端统计字符串的长度: <p>{{ s|length }}</p> 前端获取数据如果是空就返回default后面默认的参数值: <p>{{ flag|default:'你这个东西是个空'}}</p> 将数字格式化成表示文件大小的单位: <p>{{ file_size|filesizeformat }}</p> <p>{{ ctime }}</p> {#June 11,2019,10:36 a.m.#} 格式化时间(不要加百分号) <p>{{ ctime|date:'Y-m-d' }}</p> {# 2019-06-11 #} 字符串的切片操作: <p>{{ res|slice:'0:8' }}</p> <p>{{ res|slice:'0:8:2' }}</p> 截取固定的长度的字符串 三个点也算: <p>{{ s|truncatechars:10 }}</p> 按照空格截取文本内容: <p>{{ res|truncatewords:4 }}</p> 字符串和数字不能混用(返回空): <p>{{ 'haha'|add:'hehe' }}</p> {# hahahehe #} <p>{{ 249|add:1 }}</p> {# 250 #} ht = <h1>我是h1标签</h1> sr = <script>alter(123)</script> <p>{{ ht }}</p> {# <h1>我是h1标签</h1> #} 不识别h1标签 <p>{{ sr }}</p> {# <script>alter(123)</script> #} 不识别script标签 前端取消转义 <p>{{ ht|safe }}</p> 加 |safe 后能识别标签 <p>{{ sr|safe }}</p> 后端取消转义 from django.utils.safestring import mark_safe res = mark_safe('<h1>我是h1标签</h1>')
三、标签
for循环 {% for foo in l %} <p>{{ foo }}</p> <p>{{ forloop }}</p> {% endfor %} if判断 {% if flag %} <p>flag不为空</p> {% else %} <p>flag是空</p> {% endif %} 嵌套使用 {% for foo in l %} {% if forloop.first %} <p>这是我的第一次</p> {% elif forloop.last %} <p>这是最后一次了啊</p> {% else %} <p>嗨起来!!!</p> {% endif %} {% endfor %}
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 %}
四、自定义标签、过滤器、inclusion_tag
1.自定义三步:
应用名下新建(必须)名为 templatetages 文件夹
在新建的文件夹中新建任意名称的 py 文件
该 py 文件中需要固定写下面两句代码:
from django import template register = template.Library()
2.自定义标签、过滤器
注意:使用自定义的过滤器 标签 inclusion_tag 必须先在需要使用的html页面加载该py文件
#后端 @register.filter(name='XBB') #自定义过滤器 def index(a,b): return a+b @register.simple_tag #自定义标签 def plus(a,b,c): return a+b+c #前端 {% load my_tag %} #导入自定义标签、过滤器所在的文件 {{ 666|XBB:8 }} #自定义过滤器使用 {% plus 1 2 3 %} #自定义标签使用
3.自定义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} #将l传给login.html页面 # login.html <ul> #在login.html页面进行渲染 {% for foo in l %} <li>{{ foo }}</li> {% endfor %} </ul> # 前端调用 {% login 5 %} #在另一个页面调用渲染的结果
1.模板继承
首先需要在被继承的模板中划分区域
语法:{% block 给区域起的名字 %}
{% endblock %}
{% block content %} <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> <nav aria-label="Page navigation" class="text-center"> <ul class="pagination "> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> {% endblock %}
{% extends 'homepage.html' %} {% block content %} <div class="col-md-8 col-md-offset-2"> <h1>添加书籍</h1> <form action="" method="post"> <p>书籍名称:<input type="text" name="book_name" class="form-control"></p> <p>价格:<input type="text" name="book_price" class="form-control"></p> <p>作者:<input type="text" name="book_author" class="form-control"></p> <p>出版社:<input type="text" name="book_publish" class="form-control"></p> <input type="submit" class="btn btn-success"> </form> </div> {% endblock %}
将一段html当做模块的方式导入到另一个html展示
{% include '想导入的html文件名' %}