目录
模板层之标签
{% if 条件1(可以自己写也可以用传递过来的数据) %}
<p>今天是周三了</p>
{% elif 条件2(可以自己写也可以用传递过来的数据) %}
<p>百日冲刺</p>
{% else %}
<p>没多少时间了!</p>
{% endif %}
{% for k in t1 %} #t1是个空元组,会执行empty标签的数据
{% if forloop.first %}
<p>这是第一次循环{{ k }}</p>
{% elif forloop.last %}
<p>这是最后一次循环{{ k }}</p>
{% else %}
<p>这是中间循环{{ k }}</p>
{% endif %}
{% empty %}
<p>你给我传的数据是空的无法循环取值(空字符串、空列表、空字典)</p>
{% endfor %}
django模板语法取值操作:只支持句点符
django模板支持键也支持索引取值
d1 = {'name':'jason','age':18,'hobby':['read','music',{'a1':'haha','a2':'heihei'}]}
{{ d1.hobby.2.a1 }} #前端页面取值到haha,通过句点符
冷门了解:
{% with d1.hobby.2.a1 as h %} 复杂数据获取之后需要反复使用可以起别名
<a href="">{{ h }}</a>
{% endwith %}
代码验证:
urls.py:
from app01 import views
path('index/',views.index_func),
views.py:
def index_func(request):
i = 666
l1 = [11,22,33,44,55]
d1 = {'name':'jason','age':18,'hobby':['read','music',{'a1':'haha','a2':'heihei'}]}
s = False
m = True
t1 = ()
return render(request,'indexPage.html',locals())
indexPage.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% if s %}
<p>今天是周三了</p>
{% elif m %}
<p>百日冲刺</p>
{% else %}
<p>没多少时间了!</p>
{% endif %}
{% for k in t1 %}
{% if forloop.first %}
<p>这是第一次循环{{ k }}</p>
{% elif forloop.last %}
<p>这是最后一次循环{{ k }}</p>
{% else %}
<p>这是中间循环{{ k }}</p>
{% endif %}
{% empty %}
<p>你给我传的数据是空的无法循环取值(空字符串、空列表、空字典)</p>
{% endfor %}
{{ d1.hobby.2.a1 }}
<p>
{% with d1.hobby.2.a1 as h %}
<a href="">{{ h }}</a>
{% endwith %}
</p>
</body>
</html>
自定义过滤器、标签及inclusion_tag(了解)
"""
如果想要自定义一些模板语法 需要先完成下列的三步走战略
1.在应用下创建一个名字必须叫templatetags的目录
2.在上述目录下创建任意名称的py文件
3.在上述py文件内先编写两行固定的代码
from django import template
register = template.Library()
ps:报错需要重启django项目
"""
# 自定义过滤器(最大只能接收两个参数)
@register.filter(name='myadd')
def func1(a, b):
return a + b
{% load mytags %}
<p>{{ i|myadd:1 }}</p>
# 自定义标签(参数没有限制)
@register.simple_tag(name='mytag')
def func2(a, b, c, d, e):
return f'{a}-{b}-{c}-{d}-{e}'
{% load mytags %}
{% mytag 'jason' 'kevin' 'oscar' 'tony' 'lili' %}
# 自定义inclusion_tag(局部的html代码)
@register.inclusion_tag('menu.html',name='mymenu')
def func3(n):
html = []
for i in range(n):
html.append('<li>第%s页</li>'%i)
return locals()
{% load mytags %}
{% mymenu 20 %}
代码验证:
mytags.py:
from django import template
register = template.Library()
# 自定义过滤器(最大只能接收两个参数)
@register.filter(name='myadd')
def func1(a,b):
return a + b
views.py:
def index_func(request):
i = 666
l1 = [11,22,33,44,55]
d1 = {'name':'jason','age':18,'hobby':['read','music',{'a1':'haha','a2':'heihei'}]}
s = False
m = True
t1 = ()
return render(request,'indexPage.html',locals())
indexPage.html:
<p>{{ i|myadd:1 }}</p>
mytags.py:
# 自定义标签(参数没有限制)
@register.simple_tag(name='mytag')
def func2(a,b,c,d,e):
return f'{a}-{b}-{c}-{d}-{e}'
indexPage.html:
{% mytag 'jason' 'kevin' 'oscar' 'jery' 'tony' %}
mytags.py:
#自定义inclusion_tag(局部的html代码)
@register.inclusion_tag('menu.html',name='mymenu')
def func3(n):
html = []
for i in range(n):
html.append('<li>第%s页</li>'%i)
return locals()
menu.html:
<ul>
{% for liStr in html %}
{{ liStr|safe }}
{% endfor %}
</ul>
indexPage.html:
{% mymenu 10 %}
模板的继承与导入(重要)
多个页面有很多相似的地方 我们可以采取下列方式
方式1:传统的复制粘贴
方式2:模板的继承
1.在模板中使用block划定子板以后可以修改的区域
{% block 区域名称 %}
{% endblock %}
2.子板继承模板
{% extends 'home.html' %}
{% block 区域名称 %}
子板自己的内容
{% endblock %}
ps:模板中至少应该有三个区域
页面内容区、css样式区、js代码区
补充:子板也可以继续使用模板的内容{{ block.super}}
代码验证:
urls.py:
# 模板的继承
path('home/',views.home_func),
path('login/',views.login_func),
path('register/',views.register_func),
views.py:
def home_func(request):
return render(request,'home.html')
def login_func(request):
return render(request,'loginPage.html')
def register_func(request):
return render(request,'registerPage.html')
home.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{% block css %}
{% endblock %}
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.css' %}">
</head>
<body>
<nav class="navbar navbar-inverse">
<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-fluid">
<div class="row">
<div class="col-md-2">
<div class="list-group">
<a href="/home/" class="list-group-item active">
首页资源
</a>
<a href="/login/" class="list-group-item">登录资源</a>
<a href="/register/" class="list-group-item">注册资源</a>
<a href="#" class="list-group-item">更多资源</a>
<a href="#" class="list-group-item">其它资源</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
首页资源
</a>
<a href="#" class="list-group-item">登录资源</a>
<a href="#" class="list-group-item">注册资源</a>
<a href="#" class="list-group-item">更多资源</a>
<a href="#" class="list-group-item">其它资源</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
首页资源
</a>
<a href="#" class="list-group-item">登录资源</a>
<a href="#" class="list-group-item">注册资源</a>
<a href="#" class="list-group-item">更多资源</a>
<a href="#" class="list-group-item">其它资源</a>
</div>
</div>
<div class="col-md-10">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
{% block content %}
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
<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>
</div>
</div>
{% block js %}
{% endblock %}
</body>
</html>
loginPage.html:
{% extends 'home.html' %}
{% block css %}
<style>
#d1 {
color:red;
}
</style>
{% endblock %}
{% block content %}
<h1 class="text-center" id="d1">登录页面</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 %}
{% block js %}
<script>alert('登录页面')</script>
{% endblock %}
registerPage.html:
{% extends 'home.html' %}
{% block css %}
<style>
#d2 {
color: greenyellow;
}
</style>
{% endblock %}
{% block content %}
<h1 class="text-center" id="d2">注册页面</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-warning">
</form>
{% endblock %}
{% block js %}
<script>alert('注册页面')</script>
{% endblock %}
模板的导入(了解)
将某个html的部分提前写好 之后很多html页面都想使用就可以导入
{% include 'myform.html'%}
myform.html:
<h1 style="color: yellow">这是一个非常好看的form表单</h1>
registerPage.html:
{% include 'myform.html' %}
模型层之前期准备
ORM常用关键字(重要)
标签:return,def,html,django,ORM,模板,endblock,block
From: https://www.cnblogs.com/winter-yu1989/p/16982720.html