1、原始渲染
在django_lesson文件夹下新建一个django工程lesson2
(新建工程的详情请见Django-01、初识Django和搭建Django helloworld)
views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from django.views import View
from django.http import HttpResponse
# Create your views here.
class CommonRenderHtml(View):
def get(self, request):
meg = "<B> 这是一个原始的模版渲染方式 </B>"
return HttpResponse(meg)
urls.py
from django.conf.urls import url
from django.contrib import admin
from hello import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^common/$', views.CommonRenderHtml.as_view()),
]
效果如图所示
2、render渲染
我们还可以直接将html文件输出到浏览器
在template下新建html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<span style="color:red"><b>hello</b></span>
<span style="color:blue"><b>world</b></span>
</body>
</html>
在urls.py中加入以下路由
url(r'^hellopage/$', views.HelloPageHtml.as_view()),
在views.py中加入以下视图类
class HelloPageHtml(View):
def get(self, request):
return render(request, 'hello_page.html') # 从template文件夹开始
效果如下
3.get_template渲染
views.py
#导入模块
from django.template.loader import get_template
#添加视图
class LoginHtml(View):
def get(self, request):
t = get_template("login.html")
return HttpResponse(t.render()) # 其中t.render()返回的是字符串
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="">
帐号:<input type="text" name="user" value="hujing"><br/>
密码:<input type="password" name="psd" placeholder="请输入你的密码" required><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
urls.py
# 添加路由
url(r'^login/$', views.LoginHtml.as_view())
浏览器地址栏输入http://ip:8000/login/
ip表示ip地址
4.动态渲染参数
views.py
class RenderParam(View):
def get(self, request):
message = '尊敬的用户您好!'
return render(request, 'hello.html', context={"msg": message}) # 这里如果字典内容太多 我们可以用 context=locals()将当前能访问的所有局部变量转换成字典并赋给context context也可以不写
urls.py
url(r'^renderparam/$', views.RenderParam.as_view())
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
{{ msg }}
</body>
</html>
5.模板标签
标签语法:{% 标签名称 %}{% 结束标签名称 %}例: {%tag%}{%endtag%}
if/elif/else:可以使用and/or/in/not/==/!=/<=/>=,来进行判断。
{% if message %}
{{ message }}
{% endif %}
{% if now %}
当前时间: {{ now|date:"Y-m-d H:i:s" }}
{% endif %}
for…in…:跟python中的for…in…是一样的用法
{% for m in modules %}
{{ m }}
{% end %}
{% for day in days %}
今天是{{ day }}<br/>
{% endfor %}
------for 循环 字典 带items-------
{% for day, thing in days_thing.items %}
今天是{{ day }}, 我们{{ thing }}<br/>
{% endfor %}
forloop.counter:当前迭代的次数,下标从1开始。
forloop.counter0:当前迭代的次数,下标从0开始。
forloop.first:返回bool类型,如果是第一次迭代,返回true,否则返回false。
forloop.last:返回bool类型,如果是最后一次迭代,返回True,否则返回False。
{% for day in days %}
{% if forloop.first %}
这是这一个循环的第一个<br/>
{% endif %}
{{ forloop.counter }}今天是{{ day }}<br/>
{% if forloop.last %}
这是一个循环的最后一个<br/>
{% endif %}
{% endfor %}
6.过滤器
作用:对变量进行过滤。在真正渲染出来之前,过滤器会根据功能处理好变量,然后得出结果后再替换掉原来的变量展示出来。
语法:{{greeting|lower}}
变量和过滤器中间使用管道符号”|”进行使用。
可以通过管道符号进行链式调用,比如实现一个功能,先把所有字符变成小写,把第一个字符转换成大写,代码如下:
{{message|lower|capfirst}}
过滤器可以使用参数,在过滤器名称后面使用冒号”:”再加上参数,比如要把一个字符串中所有的空格去掉,则可以使用cut过滤器,代码如下
{{message|cut:" "}}
ps: 使用参数的时候,冒号和参数之间不能有任何空格,一定要紧挨着。
<br/>
{{ hello|upper }}
{{ hello|lower }}
{{ hello|capfirst }}
------ 使用过滤器的参数时,你不能有空格 -------
{{ hello|cut:" " }}
R和time过滤器格式
获取当前时间
import datetime
time_now = datetime.datetime.now()
<br/>
------- date过滤器--------
<br/>
{{ time_now|date:"Y-m-d H:i:s" }}
示例:
template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
</head>
<body>
{% if day1 == 'saturday' %}
<b>今天星期六 出去浪</b>
{% endif %}
<br>
{% if day2 == 'saturday' %}
<b>今天星期六 出去浪哦</b>
{% elif day2 == 'sunday' %}
<b>今天星期天 继续出去浪</b>
{% else %}
<b>工作日 努力工作 一切为了周末浪</b>
{% endif %}
<br>
{% for i, j in week.items %}
{% if forloop.first %}
<br><b>假装我是每周的第一天</b>
{% endif %}
<br><b>{{ forloop.counter }}.今天是{{ j }}({{ i }})</b>
{% if forloop.last %}
<br><b>假装我是每周的最后一天</b>
{% endif %}
{% endfor %}
<br><br>
<b>{{ greet|upper }}</b><br>
<b>{{ greet|lower }}</b><br>
<b>{{ greet|capfirst }}</b><br>
<b>{{ greet|cut:" "}}</b><br>
<br>
<b>{{ time_now }}</b><br>
<b>{{ time_now|date:"Y-m-d H:i:s" }}</b><br>
</body>
</html>
views.py添加以下视图类
class TemplateTag(View):
def get(self, request):
day1 = 'saturday'
day2 = 'monday'
week = {
'monday': '星期一',
'tuesday': '星期二',
'wednesday': '星期三',
'thursday': '星期四',
'friday': '星期五',
'saturday': '星期六',
'sunday': '星期天'
}
greet = 'good morning everybody, today is a nice day!'
import datetime
time_now = datetime.datetime.now()
return render(request, 'template.html', locals())
urls.py添加路由
url(r'^template/$', views.TemplateTag.as_view())
7.模板继承
模板继承使用extends标签实现。通过使用block来给子模板开放接口。
extends必须是模板中的第一个出现的标签。
子模板中的所有内容,必须出现在父模板定义好的block中,否则django将不会渲染。
如果出现重复代码,就应该考虑使用模板。尽可能多的定义block,方便子模板实现更细的需求。
include另一个模板
{% include "menu.html" %}
修改hello_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<span style="color:red"><b>hello</b></span>
<span style="color:blue"><b>world</b></span>
{% block content %}
{% endblock content %}
{% block text %}
{% endblock text %}
{% include 'login.html' %}
</body>
<script>
{% block js %}
{% endblock js %}
</script>
</html>
在template文件夹下添加一个extends.html文件
{% extends "hello_page.html" %}
{% block js %}
document.write('<br>hello')
{% endblock js %}
{% block content %}
<br>这是个继承了hello_page.html的页面 <br>
{% endblock %}
8.模版include
在hello_page.html的body末尾加上以下代码
{% include 'login.html' %}
在浏览器输入路由 /hellopage
注释标签
{#被注释的内容#}:将中间的内容注释掉。只能单行注释。
{% comment %}被注释的内容{% endcomment %}:可以多行注释。
9.附录:
html链接的相对路径与绝对路径
绝对路径
完整的一个路径就是绝对路径,即包含schema://host[:port#]/path/.../?query-string
例:http://news.sina.com.cn/world/
相对路径
第一个字符为斜杠/,
例:“/hello”, 这种会自动帮你添加你的协议名+域名+端口, 假设你的前一节为http://www.baidu.com:8000, 系统会自动匹配为"http://www.baidu.com:8000/hello"
我们实际情况中一般使用这种
第一个字符不带斜杠
例:“hello”, 这种会在当前url中path段往后添加,假设你当前路径http://www.baidu.com:8000/hello, 系统会自动匹配为“http://www.baidu.com:8000/hello/hello, ”
关于settings.py 文件中template的解释
TEMPLATES = [
{
# 引擎,就是django自带的模版渲染模版
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# 这个配置就是代表html文件存在目录
# 该路径是一个绝对路径
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
# app内部的template是否启用
# 这个是为了兼容老版本所用,我们默认为True就可以了。
'APP_DIRS': True,
'OPTIONS': {
# 模版中间件,后面会详细学习
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
本文章代码
urls.py
from django.conf.urls import url
from django.contrib import admin
from hello import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^common/$', views.CommonRenderHtml.as_view()),
url(r'^hellopage/$', views.HelloPageHtml.as_view()),
url(r'^login/$', views.LoginHtml.as_view()),
url(r'^renderparam/$', views.RenderParam.as_view()),
url(r'^template/$', views.TemplateTag.as_view()),
url(r'^extends/$', views.ExtendHtml.as_view())
]
views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from django.views import View
from django.http import HttpResponse
from django.template.loader import get_template
# Create your views here.
class CommonRenderHtml(View):
def get(self, request):
meg = "<B> 这是一个原始的模版渲染方式 </B>"
return HttpResponse(meg)
class HelloPageHtml(View):
def get(self, request):
return render(request, 'hello_page.html')
class LoginHtml(View):
def get(self, request):
t = get_template("login.html")
return HttpResponse(t.render())
class RenderParam(View):
def get(self, request):
message = '尊敬的用户您好!'
return render(request, 'hello.html', context={"msg": message})
class TemplateTag(View):
def get(self, request):
day1 = 'saturday'
day2 = 'monday'
week = {
'monday': '星期一',
'tuesday': '星期二',
'wednesday': '星期三',
'thursday': '星期四',
'friday': '星期五',
'saturday': '星期六',
'sunday': '星期天'
}
greet = 'good morning everybody, today is a nice day!'
import datetime
time_now = datetime.datetime.now()
return render(request, 'template.html', locals())
class ExtendHtml(View):
def get(self, request):
return render(request, 'extends.html')
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="">
帐号:<input type="text" name="user" value="hujing"><br/>
密码:<input type="password" name="psd" placeholder="请输入你的密码" required><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
</head>
<body>
{% if day1 == 'saturday' %}
<b>今天星期六 出去浪</b>
{% endif %}
<br>
{% if day2 == 'saturday' %}
<b>今天星期六 出去浪哦</b>
{% elif day2 == 'sunday' %}
<b>今天星期天 继续出去浪</b>
{% else %}
<b>工作日 努力工作 一切为了周末浪</b>
{% endif %}
<br>
{% for i, j in week.items %}
{% if forloop.first %}
<br><b>假装我是每周的第一天</b>
{% endif %}
<br><b>{{ forloop.counter }}.今天是{{ j }}({{ i }})</b>
{% if forloop.last %}
<br><b>假装我是每周的最后一天</b>
{% endif %}
{% endfor %}
<br><br>
<b>{{ greet|upper }}</b><br>
<b>{{ greet|lower }}</b><br>
<b>{{ greet|capfirst }}</b><br>
<b>{{ greet|cut:" "}}</b><br>
<br>
<b>{{ time_now }}</b><br>
<b>{{ time_now|date:"Y-m-d H:i:s" }}</b><br>
</body>
</html>
extend.html
{% extends "hello_page.html" %}
{% block js %}
document.write('<br>hello')
{% endblock js %}
{% block content %}
<br>这是个继承了hello_page.html的页面 <br>
{% endblock %}
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
{{ msg }}
</body>
</html>
hello_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<span style="color:red"><b>hello</b></span>
<span style="color:blue"><b>world</b></span>
{% block content %}
{% endblock content %}
{% block text %}
{% endblock text %}
{% include 'login.html' %}
</body>
<script>
{% block js %}
{% endblock js %}
</script>
</html>