一 模版简介
当我们通过路径访问的时候,浏览器发送请求,经过url的控制映射到对应的视图函数进行逻辑操作,需要进行响应返回数据给浏览器。
我们之前是直接将HTML代码写在后端的Python代码里的。
def current_datetime(request): now = datetime.datetime.now() html = "<html><body>It is now %s.</body></html>" % now return HttpResponse(html)
尽管这种技术便于解释视图是如何工作的,但直接将HTML硬编码到你的视图里却并不是一个好主意。 让我们来看一下为什么:
-
对页面设计进行的任何改变都必须对 Python 代码进行相应的修改。 站点设计的修改往往比底层 Python 代码的修改要频繁得多,因此如果可以在不进行 Python 代码修改的情况下变更设计,那将会方便得多。
-
Python 代码编写和 HTML 设计是两项不同的工作,大多数专业的网站开发环境都将他们分配给不同的人员(甚至不同部门)来完成。 设计者和HTML/CSS的编码人员不应该被要求去编辑Python的代码来完成他们的工作。
-
程序员编写 Python代码和设计人员制作模板两项工作同时进行的效率是最高的,远胜于让一个人等待另一个人完成对某个既包含 Python又包含 HTML 的文件的编辑工作。
基于这些原因,将页面的设计和Python的代码分离开会更干净简洁更容易维护。 我们可以使用 Django的 模板系统 (Template System)来实现这种模式,这就是我们要具体讨论的问题。
目的是将变量(数据库的内容)如何巧妙的嵌入到html页面中(就不用之前我们用的字符串拼接了)
python的模板:HTML代码+模板语法
urls.py:
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^cur_time/', views.cur_time), ]
views.py:这里面的render对象就是把cur_time.html这个html和数据对象cur_time进行一个杂糅渲染。把{'time':cur_time}这里面的内容替换到cur_time.html里面的{{ time }}这个里面去。替换到之后就是一个完全的html文件了。再把cur_time.html这个html文件传给前端去渲染。所以这些渲染都是在后端完成的。
from django.shortcuts import render # Create your views here. import datetime def cur_time(request): # 获取当前时间 cur_time = datetime.datetime.now() # 将数据交给前端渲染返回给浏览器 return render(request,'cur_time.html',{'time':cur_time}) 其中'cur_time.html'叫模板,template。这个{'time':cur_time}叫上下文,context。
templates里的html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <p>当前时间{{ time }}</p> 这种html+逻辑控制语句就是模板语言! </body> </html>
二 模版语法之变量
1、语法:{{ 变量名 }}
2、万能的局点号 .
视图函数逻辑里将列表对象传到模板里,然后前端只取第3个值得写法:.索引
views.py
def index1(request): name_l = ['zrg','yj','yzz','xwj','fxc','yf'] return render(request,'index1.html',{'names':name_l})
templates
<p> {{ names.2 }} </p>
如果是字典的话传到模板,前去取值就用.键
也可以拿属性
三 模版之标签
标签看起来像是这样的: {% tag %}
。标签比变量更加复杂:一些在输出中创建文本,一些通过循环或逻辑来控制流程,一些加载其后的变量将使用到的额外信息到模版中。一些标签需要开始和结束标签 (例如{% tag %} ...
标签 内容 ... {% endtag %})。
if 标签必须跟一个endif
{% if %} if里面只能加一个bool值为True或者Flase的值。
{% endif %}
{% if %}会对一个变量求值,如果它的值是“True”(存在、不为空、且不是boolean类型的false值),对应的内容块会输出。
{% if num > 100 or num < 0 %}
<p>无效</p>
{% elif num > 80 and num < 100 %}
<p>优秀</p>
{% else %}
<p>凑活吧</p>
{% endif %}
if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断。
for标签也必须写个endfor。
遍历列表里每一个元素:
{% for name in names %} <p>{{ name }}</p> {% endfor %}
拿对应的索引与值:{{ forloop.counter }}代表索引,counter从1开始记。如果想重0开始就这么写:{{ forloop.counter0 }}
{% for name in names %} <p>{{ forloop.counter }}{{ name }}</p> {% endfor %}
遍历一个字典:
{% for key,val in dic.items %} <p>{{ key }}:{{ val }}</p> {% endfor %}
{%csfr_token%}
在自己的页面有form表单里会发生跨站请求攻击。
<form action="/login/" method="post"> <input type="text" name="name"> <input type="password" name="pwd"> <input type="submit" name="submit"> {% csrf_token %} </form>
第一次了来{%csfr_token%}会被翻译成input标签,name属性是中间件,它的值时一堆字符串。下次form提交数据的时候把这个标签带着我就认识你了。
<input type="hidden" name="csrfmiddlewaretoken" value="5j7Nm8CjqdMNWGdx2n48lMaBZ7hr6BXVdrk2ktEeuqeNn16M5Waqdgsq504hqig6">
自定义标签
固定的写法:
1、在app下面创建一个文件夹或者包名字必须叫:templatetags
2、写一个py文件在里面写功能,在功能的函数上方必须写一个装饰器@register.simple_tag
from django import template from django.utils.safestring import mark_safe register = template.Library() @register.simple_tag def my_add100(v1): return v1 + 100
3、在操作的html文件里面第一行去引入我们写的这个py文件
{% load 写的py文件名 %}
4、在html的body体里就可以用了,不需要管道符
{{% 功能名 %}}
注意:
不能用于if语句
自定义过滤器
与自定义标签很相似@register.simple_filter
调用方式:{{% num|过滤器名: %}}
注意:
最好跟一个参数,最多只能跟两个参数!
模板的继承
准备些两个页面:购买商品与购物车页面。
原先两个路由,两个视图函数,两个html文件。
公共的页面写一个母版base.html
然后不同的地方写,相当于放了一个盒子,放什么内容取决于谁来调用这个模板,它自己去填充。
{% block content %}
{% endblock %}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .page-header{ height: 90px; background-color: rebeccapurple; } .page-body .menu{ height: 600px; background-color: antiquewhite; float: left; width: 20%; } .page-body .content{ height: 600px; background-color: cornflowerblue; float: left; width: 80%; } .page-bottom{ height: 90px; background-color: darkcyan; clear: both; } </style> </head> <body> <div> <div class="page-header"></div> <div class="page-body"> <div class="menu"> <a href="/ordered/">订单</a><br> <a href="/shoppingCar/">购物车</a> </div> {% block content %} {% endblock %} </div> <div class="page-bottom"></div> </div> </body> </html>
调用的话第一步引入母版:先加载它。必须卸载第一行
{% extends 'base.html' %}
第二步重新写个盒子:
{% block content %}
{% endblock %}
第三步把自己的内容放到这个盒子里面。
{% extends 'base.html' %} {% block content %} <div class="content"> 订单 </div> {% endblock %}
如果有多个盒子怎么办呢?
只要在block后面定义不同名字即可。