tempalte模板层：
功能：为了更有逻辑的将数据库中的数据渲染到模板中；
模拟数据源：
DB = [
{"hostname":"c1.com","port":80},
{"hostname":"c2.com","port":81},
{"hostname":"c3.com","port":82},
{"hostname":"c4.com","port":83},
{"hostname":"c5.com","port":84},
]
userinfo = {"name":"zhangsan","age":22}
age=18
hobby = ["nv","qian","che","fang",]
date = datetime.datetime.now()
ele_f = '<a href="http://www.baidu.com">点击</a>'
# 字节大小 1kb
size = 1024
strt = "zhe shi yi duan zifu chuan"
han = "话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉 分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分 为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即 位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不 密，反为所害，中涓自此愈横。"
# 将所有数据返回到 index.html 模板中
return render(request,"index.html",locals()}模板格式：
1.渲染变量：
{{ data }}
使用句点符“.” 即可获得深度查询值
{{ userinfo.name }} 即可取出其的名字信息 "zhangsan"
{{ hobby.0 }} 即可取出其的爱好第一个信息 "nv"2.渲染标签：
渲染标签：{% url %}常用的 渲染标签 { % % }
1.通过render渲染时 将urls.py定义的别名 name="LOGIN" 转换为实际的 请求路径地址,解决硬编码问题；url为关键字
{% url 'LOGIN' %}带命名空间的URL名字，需要传第三个值：
{% url 'EDIT' Book_obj.id %}详解：http://python.usyiyi.cn/documents/django_182/intro/tutorial03.html#namespacing-url-names
2. 在form表单提交时，csrf安全机制的设置,用于跨站请求伪造保护,会生成一组键值对--csrf_token
{% csrf_token %}3.for 循环标签,有结束标记
{% for i in obj %}
<p>循环体内容</p>
{% endfor %}例：通过循环生成多级列表
<div class="col-md-8">
<a href="/add/"><button class="btn btn-primary">添加</button></a>
<table class="table table-hover">
<tr>
<th>编号</th>
<th>书名</th>
<th>出版日期</th>
<th>价格</th>
<th>出版社</th>
<th>操作</th>
</tr>
{% for book_obj in bookList %}
<tr>
{# 循环次数索引 #}
<td>{{ forloop.counter }}</td>
<td>{{ book_obj.title }}</td>
{# 设置时间格式的样式 #}
<td>{{ book_obj.pubDate|date:"Y-m-d" }}</td>
<td>{{ book_obj.price }}</td>
<td>{{ book_obj.publish }}</td>
<td>
<a href="/edit/{{ book_obj.id }}"><button class="btn btn-info">编辑</button></a>
<a href="/del/{{ book_obj.id }}"><button class="btn btn-danger">删除</button></a>
</td>
</tr>
{% empty %}
<p>没有相应书籍</p>
{% endfor %}
</table>
</div>4.if标签判断传入的值,有结束标记
{% if age > 100 or age < 0 %}
<p>无效年龄</p>
{% elif age > 80 and age < 100 %}
<p>高龄人群</p>
{% else %}
<p>奋斗吧</p>
{% endif %}5.with标签,给复杂的变量，做个别名引用时更方便：
{% with book_obj.publish.name="name" %}
<p>{{ name.title }}</p>
{% endwith %}6.for ... empty标签,当获取值为空时给用户一个友好提示：
{% for book_obj in bookList %}
<p>{{ book_obj.title }}</p>
{% empty %}
<p>sorry,no book name!!</p>
{% endfor %}常用的 渲染变量 {{ }}
1.渲染变量可通过.的方式进行取值
{{ data }}
使用句点符“.” 即可获得深度查询值
{{ userinfo.name }} 即可取出其的名字信息 "zhangsan"
{{ hobby.0 }} 即可取出其的爱好第一个信息 "nv"模板变量之过滤器
1.过滤器相加,在前端通过过滤器把age加10--add 过滤器
<p>{{ age|add:10 }}</p>2.把时间按照指定格式格式化--data 过滤器
# 第一个date是调用后端的值
<p>{{ date|date:"Y-m-d" }}</p>输出：
<p>2017-11-11</p>3.当一个值为空时，友好提示该值，应该存放的内容类型--default
# 第一个date是调用后端的值
<p>{{ age|default:"这里应该是个年龄" }}</p>4.求出传入的元素的个数--length
# 查看hobby列表里有几个值
<p>{{ hobby|length }}</p>5.将字节数大小转换为易读个大小展示--filesizeformat
<p>{{ size|filesizeformat }}</p>输出：
1.0KB6.字符串截取--truncatechars 和 truncatewords
# 将字符串保留20个字符串显示--truncatechars
<p>{{ han |truncatechars:20 }}</p>
# 将字符串按照单词截取--truncatewords
<p>{{ strt |truncatewords:4 }}</p>
输出：
#truncatechars
话说天下大势，分久必合，合久必分。...
#truncatewords
zhe shi yi duan ...7.将字节数大小转换为易读个大小展示--filesizeformat
<p>{{ size|filesizeformat }}</p>输出：
1.0KB8.Django处于安全考虑会将 模板中HTML标签和JS等语法标签进行自动转义，当不需要转义时通过safe标注--safe
<p>{{ ele_f |safe }}</p>输出：
点击
自定义标签和过滤器
自定义标签和自定义过滤器步骤基本一样，差异在于引用的装饰器不同；
自定义过滤器，用在管道符之后 "|"(缺点只能接收两个参数)
1、在settings中的INSTALLED_APPS配置当前app，不然django无法找到自定义的simple_tag.
2、在app中创建templatetags包(模块名只能是templatetags)
3、创建任意 .py 文件，如：my_tags.py
from django import template
from django.utils.safestring import mark_safe
register = template.Library() #register的名字是固定的,不可改变
# 定义一个乘法的 过滤器
@register.filter # 使用装饰器 register.filter 即可定义一个过滤器
def take(x,y):
return x*y4、在使用自定义过滤器的html文件中导入之前创建的 my_tags.py
{% load my_tags %} 5、在引入自定义过滤器的html文件中使用方法：
<p>{{ age|take:10 }}</p>
{# 可以结合 if 语句使用 #}
{% if age|take:10 > 100 %}
<p>大于100</p>
{% else %}
<p>小于等于100</p>
{% endif %}
输出：
180
大于100自定义标签{% %} 自定义标签不能再 {% if %} 语句中使用
1、在settings中的INSTALLED_APPS配置当前app，不然django无法找到自定义的simple_tag.
2、在app中创建templatetags包(模块名只能是templatetags)
3、创建任意 .py 文件，如：my_tags.py
from django import template
from django.utils.safestring import mark_safe
register = template.Library() #register的名字是固定的,不可改变
@register.simple_tag # 使用装饰器 register.simple_tag 即可自定义一个 标签
def take_tag(x,y,z):
return x*y*z4、在使用自定义标签的html文件中导入之前创建的 my_tags.py
{% load my_tags %} 5、在引入自定义标签的html文件中使用方法：
<p>{% take_tag age 10 10 %}</p>输出：
1800模板语言之继承
Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的 blocks。
创建一个基模板base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="/static/dist/js/bootstrap.js"></script>
<style>
.container{
margin-top: 100px;
}
</style>
</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">
<div class="row">
{# 模板leftMenu===============开始 #}
{% block leftMenu %}
{#左侧菜单部分=========开始#}
<div class="col-md-2">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
菜单1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
菜单2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>222</p>
<p>222</p>
<p>222</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
菜单3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>333</p>
<p>333</p>
<p>333</p>
</div>
</div>
</div>
</div>
</div>
{#左侧菜单部分=========结束#}
{% endblock %}
{# 模板leftMenu===============开始 #}
{# 内容区域=============开始#}
<div class="col-md-8">
{% block content %}
{# 当模板内部有内容时，在不覆盖时，显示模板内容，如果模板本引用时修改将覆盖模板内容 #}
<p>hello</p>
{% endblock %}
</div>
{# 内容区域=============结束#}
</div>
</div>
</body>
</html>子模版引用base模板，可以覆盖掉模版中的block块；不覆盖base模板就会继承该模板；
{# 引入基础模板文件 #}
{% extends "base.html" %}
{# 在需要修改的地方，覆盖基础模板的块即可 #}
{% block content %}
<a href="/add/"><button class="btn btn-primary">添加</button></a>
<table class="table table-hover">
<tr>
<th>编号</th>
<th>书名</th>
<th>出版日期</th>
<th>价格</th>
<th>出版社</th>
<th>操作</th>
</tr>
{% for book_obj in bookList %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book_obj.title }}</td>
<td>{{ book_obj.pubDate|date:"Y-m-d" }}</td>
<td>{{ book_obj.price }}</td>
<td>{{ book_obj.publish }}</td>
<td>
<a href="/edit/{{ book_obj.id }}"><button class="btn btn-info">编辑</button></a>
<a href="/del/{{ book_obj.id }}"><button class="btn btn-danger">删除</button></a>
</td>
</tr>
{% empty %}
<p>没有相应书籍</p>
{% endfor %}
</table>
{% endblock %}子模版引用base模板，即想使用原来的模块，又想在该模块下追加内容；可以使用super
{# 引入基础模板文件 #}
{% extends "base.html" %}
{# 在需要追加模块内容的地方添加 block.super 即可不覆盖原有的内容 #}
{% block content %}
{{ block.super }}
<a href="/add/"><button class="btn btn-primary">添加</button></a>
<table class="table table-hover">
<tr>
<th>编号</th>
<th>书名</th>
<th>出版日期</th>
<th>价格</th>
<th>出版社</th>
<th>操作</th>
</tr>
{% for book_obj in bookList %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book_obj.title }}</td>
<td>{{ book_obj.pubDate|date:"Y-m-d" }}</td>
<td>{{ book_obj.price }}</td>
<td>{{ book_obj.publish }}</td>
<td>
<a href="/edit/{{ book_obj.id }}"><button class="btn btn-info">编辑</button></a>
<a href="/del/{{ book_obj.id }}"><button class="btn btn-danger">删除</button></a>
</td>
</tr>
{% empty %}
<p>没有相应书籍</p>
{% endfor %}
</table>
{% endblock %}
扫一扫
3727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
