结构：
模板层（模板语法）
标签
过滤器
自定义标签，过滤器，inclusion_tag(可以传参)
模板的继承
模板的导入
传参
后端向前端页面传递数据的方式render
第一种：
return render(request,"xx.html",{"num":num }})
第二种：
return render(request,"yy.html",locals())
后端传函数到前端，会自动加括号调用，但是不支持传参
后端传对象到前端，就相当于打印对象
前端获取后端传来的容器类型的内部元素 统一用点（.）取值
示例代码
# 传给后端的不支持传参
from django.views import View
class Mycls(View):
def __init__(self,name):
self.name=name
def get(self):
return self.name
def __str__(self):
return self.name
my = Mycls("wy")
l1 = [2,1,3,4]
dic = {"name":'wy',"password":"123"}
def publishadd(request):
# pub = reverse("publish")
x=100
return render(request, "index.html",{"x":x,"func":func,"my":my,"l1":l1,"dic":dic})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a href="{% url "publish" %}">点我</a>
<h1>{{ func }}</h1>
<h1>x的值为 {{ x }}</h1>
<h1>函数的值为{{ func }}</h1>
<h3>类的名字 {{my}}</h3>
<h4>列表为:{{ l1 }}</h4>
<h5>l1的第二个元素为{{ l1.2 }}</h5>
<h6>字典为{{ dic }}</h6>
<h6>字典为{{ dic.keys }}</h6>
<h6>字典为{{ dic.values }}</h6>
<h6>字典为{{ dic.items }}</h6>
</body>
</html>
打印如下：
'''
# 123
# x的值为 100
# 函数的值为123
### 类的名字 wy
#### 列表为:[2, 1, 3, 4]
##### l1的第二个元素为3
###### 字典为{'name': 'wy', 'password': '123'}
###### 字典为dict_keys(['name', 'password'])
###### 字典为dict_values(['wy', '123'])
###### 字典为dict_items([('name', 'wy'), ('password', '123')])
''''
过滤器
<p>length 统计字符串的长度:{{s|length}}</p>
default 前端获取数据如果是空就返回default后面默认的参数值：{{ flag|default :"你这个东东为空"}}
将数字格式化成表示文件大小的单位:{{ file_size|filesizeformat }}
{{ ctime }}
格式化时间(不要加百分号){{ ctime|date:'Y-m-d' }}
字符串的切片操作:{{ res|slice:'0:8' }}
{{ res|slice:'0:8:2' }}
截取固定的长度的字符串 三个点也算:{{ s|truncatechars:10 }}
按照空格截取文本内容:{{ res|truncatewords:4 }}
{{ s|truncatewords:4 }}
{{ 'hahah'|add:'heheheh' }}
前端取消转义：
前端：
h | safe h为后端传入的数据，给浏览器前端渲染说是安全的，就能按照原内容显示
后端：
from django.utils.safestring import mark_safe
mark_safe('<h1>我是h1标签</h1>')
标签逻辑判断与循环：
<ul>
{% for foo in dic %}
<li>{{ foo }}</li>
{% endfor %}
</ul>
for循环
{% for foo in s %}
{% if forloop.first %}
<p>这是第一个{{ foo }}</p>
{% elif forloop.last %}
<p>这是最后一个{{foo}}</p>
{% else %}
<p>{{ forloop.counter0 }}***{{ foo }}</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 %}
自定义过滤器：
必须做的三件事：
1.在应用名下新建一个templatetags文件夹（必须是这个名字）
2.在新建的文件夹内新建一个任意名称的py文件
3.在该py文件中需要固定写下面两句代码
from django import template
register = template.Library()
#自定义过滤器：
@register.filter(name="filt")
def index(a,b):
return a+b
from django.utils.safestring import mark_safe
from django import template
register = template.Library()
# 自定义标签{% plus %}
@register.simple_tag
def plus(a,b,c):
return a*b*c
#自定义过滤器{{ | }}
@register.filter(name="XXX")
def index(x ,y):
return x+y
#inclusion_tag
@register.inclusion_tag("login.html")
def login(n):
l = ["第%s项"%i for i in range(n)]
return {"l":l}
#将数据传到login.html页面，将渲染好的login.html给另一个页面使用
login.html
{% for foo in l %}
<li>{{ foo }}</li>
{{ l }}
{% endfor %}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
{% login 5 %}
<!--将数据传到login.html页面，将渲染好的login.html给另一个页面使用-->
</body>
</html>
调用方式
{% load filtertest %}
<h1> {{ 2000|XXX:200 }}
过滤器是{{ 666|XXX 777}}调用
标签
{% plus 1 2 3%}
inclusion_tag
{% login 5 %}
## 模板的继承与导入
模板的继承：
就是一个新的html文件继承一个以有的html文件：
继承操作：{% extends "home.html"% }
在继承的基础上重写原来区域：{ % block content %}{% endblock %}框住的区域，要想还继承父类的所有东西用 {{ block.super }}继承的是原来区域的。
导入操作：
{% include ‘upload_file.html’ %}
login1.html
{% extends "home.html" %}
{% block content %}
<h1>登录</h1>
{# block.super 继承父类的东西被划分的区域 #}
{# {% block content %} 是将父html的划分的区域重写#}
{{ block.super }}
<form action="">
<p>username <input type="text" class="form-control"> </p>
<p>password <input type="text" class="form-control"> </p>
<p><input type="submit" class="btn btn-success"></p>
</form>
{% endblock %}
home.html 被那个login1.html使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{# <script src="/static/jquery-3.4.1.min.js"></script>#}
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
{% block css %}
{% endblock %}
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="list-group ">
<a href="/login1/" class="list-group-item">login</a>
<a href="/reg/" class="list-group-item">reg</a>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="col-md-9">
{% 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>
</div>
{% endblock %}
</div>
</div>
</div>
{% include 'upload_file.html' %}
{% block js %}
{% endblock %}
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
