一 模版简介

当我们通过路径访问的时候,浏览器发送请求,经过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>

base.html

调用的话第一步引入母版:先加载它。必须卸载第一行

{% extends 'base.html' %}

第二步重新写个盒子:

        {% block content %}

        {% endblock %}

第三步把自己的内容放到这个盒子里面。

{% extends 'base.html' %}

{% block content %}
<div class="content">
订单
</div> {% endblock %}

如果有多个盒子怎么办呢?

  只要在block后面定义不同名字即可。

 

Django的模板层的更多相关文章

  1. python 全栈开发,Day69(Django的视图层,Django的模板层)

    昨日内容回顾 相关命令: 1 创建项目 django-admin startproject 项目名称 2 创建应用 python manage.py startapp app名称 3 启动项目 pyt ...

  2. Django的模板层简介

    Django的模板层 如果我们想要利用视图函数返回一个页面,一种比较简单的方式是利用HttpResponse()方法返回一个含有html内容的字符串: def current_datetime(req ...

  3. 04-01 Django之模板层

    Django之模板层 一 模板简介 在刚刚介绍完的视图层中我们提到,浏览器发送的请求信息会转发给视图函数进行处理,而视图函数在经过一系列处理后必须要有返回信息给浏览器.如果我们要返回html标签.cs ...

  4. Django框架-模板层

    Django框架-模板层 一.模板语法传值 1.验证是否python所有的数据类型都可以传递到前端 locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费 结论:整型.浮点型.字符串 ...

  5. Django之模板层细说

    django的模板层,基于我们前面学习的内容,也知道主要语法是{{变量相关}}{%逻辑相关%},那么具体还有哪些内容呢?且听我娓娓道来. 模板层(模板语法) 标签 过滤器 自定义标签,过滤器,incl ...

  6. Django基础模板层(75-76)

    Django框架之模板层(d75)一 模版语法之变量: ** locals() 会把*该*视图函数内的变量,传到模板    ** return render(request, 'index.html' ...

  7. Django基础——模板层(template) (Day67)

    阅读目录 变量 标签 自定义过滤器和标签 模板层(template) 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. 1 2 3 4 ...

  8. 5、Django之模板层

    一 模板简介 在刚刚介绍完的视图层中我们提到,浏览器发送的请求信息会转发给视图函数进行处理,而视图函数在经过一系列处理后必须要有返回信息给浏览器.如果我们要返回html标签.css等数据给浏览器进行渲 ...

  9. 053.Python前端Django框架模板层

    模板层 一 模板语法之变量 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法: {{ var_name }} [root@node10 mysite]# cat app01/urls. ...

随机推荐

  1. localhost和127.0.0.1及ip区别

    1.127.0.0.1是回送地址,指本地机,一般用来测试使用.回送地址是本机回送地址(Loopback Address),即主机IP堆栈内部的IP地址,主要用于网络软件测试以及本地机进程间通信,无论什 ...

  2. 当web应用包含了websocket长连接,如何在web应用前加一层nginx转发

    1 通过在web应用的前面加一层nginx ,可以实现一台主机部署多个应用,每个应用都可以用不同的域名去访问,并且端口都是80 2 nignx 转发websocket长连接 1 每个web应用,他们运 ...

  3. ansible的playbook进行yum批量安装nginx最新版本

    环境:centos7 版本:nginx最新版本 软件: ansible 作用: 进行批量执行不同机器上,进行安装nginx版本 检查脚本是否正确: [root@ansible-test ansible ...

  4. 【vue】vue中引入jquery

    简洁版: 第一步:首先在package.json中输入"jquery":"^3.2.1",其中“3.2.1”为jquery版本号,按需修改 注:package. ...

  5. Android APP性能测试笔记(一)

    Android APP性能测试笔记(一) (1)工具使用   Android Studio  GT, root的真机 (2)记录apk大小(对比竞品)   使用Android Studio导入需要测试 ...

  6. Ubuntu16.04环境安装jenkins

    前提:系统必须安装jdk 如果没有安装可通过如下命令安装: sudo add-apt-repository ppa:openjdk-r/ppa sudo apt update sudo apt ins ...

  7. Java 中常见的数据结构

    1.数据结构有什么作用? 当使用 Java 里面的容器类时,你有没有想过,怎么 ArrayList 就像一个无限扩充的数组,也好像链表之类的.很好使用,这就是数据结构的用处,只不过你在不知不觉中使用了 ...

  8. C# - Span 全面介绍:探索 .NET 新增的重要组成部分

    假设要公开特殊化排序例程,以就地对内存数据执行操作.可能要公开需要使用数组的方法,并提供对相应 T[] 执行操作的实现.如果方法的调用方有数组,且希望对整个数组进行排序,这样做就非常合适.但如果调用方 ...

  9. Vue-computed的set和get

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 面试(一)-HashMap

    一.前言       其实这一面来的挺突然,也是意想不到的,这个要起源于BOSS直聘,很巧,其实也算是一种缘分吧,谢谢BOSS那个哥们,还是那句话来滨江我请你吃饭,身怀感激你总会遇到帮助你的人,只是这 ...