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.0KB

6.字符串截取--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.0KB

8.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*y

4、在使用自定义过滤器的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*z

4、在使用自定义标签的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 %}

tempalte模板的更多相关文章

  1. STL模板_概念

    模板和STL一.模板的背景知识1.针对不同的类型定义不同函数版本.2.借助参数宏摆脱类型的限制,同时也因为失去的类型检查而引 入风险.3.借助于编译预处理器根据函数宏框架,扩展为针对不同类型的 具体函 ...

  2. springboot 发送邮件+模板+附件

    package com.example.demo; import org.junit.Test;import org.junit.runner.RunWith;import org.springfra ...

  3. Django web框架

    urls的配置 views视图函数 tempalte模板 settings的配置 Django目录结构分析 Django主线 Django-model基础 Django-model聚合查询与分组查询 ...

  4. openstack horizon开发第一天

    horizon插件构造 创建一个dashboardmkdir opesntack_dashboard/dashboards/mydashboardpython manage.py startdash ...

  5. Django UrL 解析

    Django的路由系统 URLconf 本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于客户端发来的某个URL调用哪一段逻辑代码对应执行. 1.1 djan ...

  6. Django框架简介,wsgiref 与 jinja2 模块

    目录 框架简介 wsgiref模块 jinja2 模块 框架简介 Django是一个web开发框架,用来开发web应用,本质就是, web框架+socket服务端 MVC框架和MTV框架 MVC,全名 ...

  7. rebar工具使用备忘录

    http://cryolite.iteye.com/blog/1159448 rebar是一个开源的erlang应用自动构建工具.basho的tuncer开发.它实际上是一个erlang脚本(escr ...

  8. Django基本知识

    一.安装及使用 下载安装 命令行:pip3 install django==1.11.21 pycharm 创建项目 命令行: 找一个文件夹存放项目文件,打开终端: django-admin star ...

  9. vue-learning:6-template-v-bind

    绑定元素特性的指令v-bind 回顾下,从HTML元素的结构看,在VUE框架中,内容由插值{{ }}和v-html绑定:v-if和v-show可以控制元素的可见性:v-for可以用于批量生成列表元素. ...

随机推荐

  1. CountDownLatch 闭锁、FutureTask、Semaphore信号量、Barrier栅栏

    同步工具类可以是任何一个对象.阻塞队列可以作为同步工具类,其他类型的同步工具类还包括信号量(Semaphore).栅栏(Barrier).以及闭锁(Latch). 所有的同步工具类都包含一些特定的结构 ...

  2. python numpy 三行代码打乱训练数据

    今天发现一个用 numpy 随机化数组的技巧. 需求 我有两个数组( ndarray ):train_datasets 和 train_labels.其中,train_datasets 的每一行和 t ...

  3. 使用@Valid和BindingResult验证请求参数的合法性并处理校验结果

    /** * 添加用户,使用@RequestBody将请求体映射到Action方法参数中 * 使用@Valid注解验证请求参数的合法性 * 使用BindingResult处理校验结果 * @param ...

  4. Scrapy快速上手

    超详细官方教程解析 https://blog.csdn.net/fly_yr/article/details/51540269 实战过程: 创建一个Scrapy项目 定义提取的Item 编写爬取网站的 ...

  5. shell中的dd命令使用详解

    一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...

  6. java 批量插入 Oracle

    sql = "INSERT INTO LOG_FILENAME(ID,FILENAME,CREATETIME) VALUES(2,?,sysdate)"; public void  ...

  7. python beautifulsoup爬虫学习

    BeautifulSoup(page_html, "lxml").select(),这里可以通过浏览器开发者模式选择copy selector,并且并不需要完整路径. github ...

  8. vue2.x + vux采坑总结(一)

    1.<tab-bar> 切换时,iocn高亮跟着切换问题 vux的Tabbar组件是用来实现底部tab栏,详情见官网文档 , 实现实例截图: 代码如下,控制高亮的是代码凸显部分:selec ...

  9. zabbix3.0.4使用percona-monitoring-plugins插件来监控mysql5.6的详细实现过程

    zabbix3.0.4使用percona-monitoring-plugins插件来监控mysql5.6的详细实现过程 因为Zabbix自带的MySQL监控没有提供可以直接使用的Key,所以一般不采用 ...

  10. freeswitch反注册记录

    应用情景: 使用阿里服务器,落地使用本地的模拟线路(O口网关). 1.FreeSWITCH 服务器开一个账号,比如 5000 internal , O口 SIP设置页面按照网关注册 5000 的账号信 ...