一、模板概述
1、在view中硬编h码HTML
from django.shortcuts import render,HttpResponse
from datetime import datetime
def index(request):
now = datetime.now()
html = "<h1>It is now %s.</h1>" % now
return HttpResponse(html)
概述
该编码方式不符合开发代码的高内聚、低耦合特点,且对于代码的维护造成了很大的难度,又对于编写代码的效率不高
解决
基于这些原因,我们可以把页面设计和python代码分离,会使代码更干净和容易维护,使用Django的模板系统(template system)来实现这种模式
模板是一个文本,用于分离文档的表现形式和内容。模板也就是HTMl
2、MTV模式
模型(Models):一个抽象层,用来构建和操作你的web应用中的数据,模型是你的数据的唯一的、权威的信息源。它包含你所储存数据的必要字段和行为。通常,每个模型对应数据库中唯一的一张表。
作用:提供数据
模板(Templates):模板层提供了设计友好的语法来展示信息给用户。使用模板方法可以动态地生成HTML。模板包含所需HTML 输出的静态部分,以及一些特殊的语法,描述如何将动态内容插入。
作用:逻辑处理
视图( Views):用于封装负责处理用户请求及返回响应的逻辑。视图可以看作是前端与数据库的中间人,他会将前端想要的数据从数据库中读出来给前端。他也会将用户要想保存的数据写到数据库。
作用:显示内容到HTML
3、模板查找路径
- 默认搜索路径,Project下的templates目录和已安装app下的templates
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')] # project下的templates目录
,
'APP_DIRS': True, # App下的temlates目录
...
},
]
模板文件管理方式:
-
每个App自己持有,且有自己的独立目录防止多个App中的模板命名冲突。
- 具体操作:在app目录下创建templates目录,在templates目录下创建与app名相同的目录,再创建html文件。
- 使用:
render(request,"app名/xxx.html")
-
统一放在Projects根目录下的templates目录中,且有自己的独立目录防止多个App中的模板命名冲突 。
- 具体操作:在项目目录下的templates目录,创建与app名相同的目录,再创建html文件。
- 使用:
render(request,"app名/xxx.html")
二、模板语言DTL
1、简介
模板语言:Django自己内置的模板语言,第三方语言jinja
DTL(Django template languate)
模板文件中,包含的动态渲染代码,使用的就是DTL
<body>
登录成功,欢迎{{ user }} <!-- 动态内容 -->
</body>
2、模板传值
是从view视图函数,传入到template模板中
值:view从model层得到的数据
传递:view传递给template
目标:将html渲染成一块静态内容,定制动态页面
传值方法
render(request,'html',dict) dict就是要传入的内容
如:
render(request,"index.html",{"user":'huo'})
<-- index.html ->
<html>
...
hello,{{user}} <!-- 使用View传递来的数据 --> hello , huo
...
</html>
通过view获取数据,传递给html
3、传值类型
万物皆可传
注意列表的取值是list.idnex
四、模板标签
1、 if/else
{% if condition %}
... display ...
{% else %}
...
{% endif %}
或
{% if condition1 %}
... display 1
{% elif condiiton2 %}
... display 2
{% else %}
... display 3
{% endif %}
比较运算
{% if list.1 > 3 %}
{{ list.1 }}
{% endif %}
逻辑运算
{% if 1 or 2 %} {# and or not 与或非 拼接多个条件 #}
...
{% elif id > 100 and not name %}
....
{% elif not id > 100 and not name %}
....
{% endif %}
# in / not in 包含于/不包含于 用于字符串 和 序列 和 dict 和 QuerySet
{% if user.name not in "aazhjzzzaaa" and users.0 in users%}
name in zhjasdf
{% endif %}
for 标签
{% for foo in list %}
{{ foo }},
{% endfor %}
遍历list of list
content = {'list':[[1,2,3],[4,5,6]]}
{% for f1,f2,f3 in list %}
{{ f1 }},{{ f2 }},{{ f3 }}
{% endfor %}
遍历索引
{% for ... %}
...
{{ forloop.counter0 }} 遍历索引,从0开始
{{ forloop.counter }} 遍历索引,从1开始
{{ forloop.revcounter }} 倒序索引
{{ forloop.revcounter0 }}
{{ forloop.first }} 是否为第一次遍历
{{ forloop.last }}
...
{% endfor %}
{% for ... %}
...
{% if forloop.first %}
第一次遍历
{% else %}
...
{% endfor %}
五、过滤器
对值处理,可以用过滤器
{{ xx }} 正常取值
{{ xx|过滤器 }}
length 长度
length_is:'4' 判断长度是不是4
lower 小写
upper 大写
default:'a' 默认值为a
add:'1' +1
divisibleby:'2' 对2取余
width a b c a*c/b,注意没有除和乘,都是根据这个写出来的
六、模板继承
为了节省html代码,减少维护成本
<!-- base.html 包含的是子模板中共有的内容 -->
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
{% block mainbody %}
{% endblock %}
</body>
</html>
<!-- sub1.html -->
{% extends "base.html" %}
{% block mainbody %}
<p>继承了 base.html 文件</p>
{% endblock %}
注意:
继承只能继承block里面的,在子页面中可以重写block里面的,父页面里可以写多个block块
七、静态资源
描述
除了HTML文件外,WEB应用一般需要提供一些其它的必要文件,比如图片文件、JavaScript脚本和CSS样式表等等,用来为用户呈现出一个完整的网页。
在Django中,我们将这些文件统称为“静态文件”,因为这些文件的内容基本是固定不变的,不需要动态生成。
使用
首先在你的app目录中创建一个static
目录。Django将在那里查找静态文件,这与Django在/templates/中寻找对应的模板文件的方式是一致的。
APP
-- static
-- (aaa.css,bbb.jpg,ccc.js)
settings.py中
STATIC_URL = '/static/' #ip:port/static/
访问
# Django在查找静态资源时,是查找 "已安装"的APP中的static目录
<link rel="stylesheet" href="/static/aaa.css"> # 访问aaa.css文件
<img src="/static/bbb.jpg" width="200px"/> # 访问bbb.jpg文件
<script src="/static/ccc.js"></script> # 访问ccc.js文件
当多个app静态文件重名的时候,可以在静态资源下建立自己app的名字
除默认的静态文件根目录外,增加几个静态文件的根目录:
settings.py
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'),
"E:\\static"]
Django查找静态资源的目录:
(1)默认在每个app的static目录下去查找
(2)可以再额外添加一些静态资源的查找目录 在setting.py文件中 加STATICFILES_DIRS = []
访问时: 加static_url指定的访问前缀 /static/img/a.jpg
修改html
{% load static %} HTML文件最上面
<img src="{% static "/img/a.jpg" %}">