5 Django模板

0 寻找html模板

模板引擎是一种可以让开发者把服务端数据填充到html网页中完成渲染效果的技术。它实现了把前端代码和服务端代码分离的作用，让项目中的业务逻辑代码和数据表现代码分离，让前端开发者和服务端开发者可以更好的完成协同开发。

静态网页：页面上的数据都是写死的，万年不变

动态网页：页面上的数据是从后端动态获取的（比如后端获取当前时间；后端获取数据库数据然后传递给前端页面）

Django框架中内置了web开发领域非常出名的一个DjangoTemplate模板引擎（DTL）。DTL官方文档

要在django框架中使用模板引擎把视图中的数据更好的展示给客户端，需要完成3个步骤：

在项目配置文件中指定保存模板文件的模板目录。一般模板目录都是设置在项目根目录或者主应用目录下。

在视图中基于django提供的渲染函数绑定模板文件和需要展示的数据变量

在模板目录下创建对应的模板文件，并根据模板引擎内置的模板语法，填写输出视图传递过来的数据。

配置模板目录：在当前项目根目录下创建了模板目录templates. 然后在settings.py, 模板相关配置，找到TEMPLATES配置项，填写DIRS设置模板目录。

# 模板引擎配置
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / "templates",  # 路径拼接
        ],
        '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',
            ],
        },
    },
]

也可以是这样（推荐）：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        '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',
            ],
        },
    },
]

优先去项目根目录找templates ---> 在到每个已注册的app的templates目录找。

如何选择：

简单的项目，模板都放在根目录。
复杂的项目，模板放在各自的app中，公共部分放在templates目录。

扩展：修改内置app的模板也是同样的套路。

1 简单案例

为了方便接下里的演示内容，我这里创建创建一个新的子应用tem

python manage.py startapp tem

settings.py，注册子应用，代码：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tem',   # 开发者创建的子应用，这填写就是子应用的导包路径
]

总路由加载子应用路由,urls.py，代码：

from django.contrib import admin
from django.urls import path,include
urlpatterns = [
    path('admin/', admin.site.urls),
    # path("路由前缀/", include("子应用目录名.路由模块"))
    path("users/", include("users.urls")),
    path("tem/", include("tem.urls")),
]

在子应用目录下创建urls.py子路由文件，代码如下：

"""子应用路由"""
from django.urls import path, re_path
from . import views

urlpatterns = [
    path("index", views.index),
]

tem.views.index，代码：

from django.shortcuts import render
def index(request):
    # 要显示到客户端的数据
	name = "hello DTL!"
    # return render(request, "模板文件路径",context={字典格式：要在客户端中展示的数据})
	return render(request, "index.html",context={"name":name})

templates.index.html，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>来自模板的内容</h1>
    <p>输出变量name的值：{{ name }}</p>
</body>
</html>

2 render函数内部本质

from django.shortcuts import render
from django.template.loader import get_template  # 相当于render
from django.http.response import HttpResponse
def index(request):
	name = "hello world!"
	# 1. 初始化模板,读取模板内容,实例化模板对象
    # get_template会从项目配置中找到模板目录，我们需要填写的参数就是补全模板文件的路径
	template = get_template("index.html")
	# 2. 识别context内容, 和模板内容里面的标记[标签]替换,针对复杂的内容,进行正则的替换
	context = {"name": name}
	html = template.render(context, request) # render中完成了变量替换成变量值的过程，这个过程使用了正则。
	print(html)
	# 3. 通过response响应对象,把替换了数据的模板内容返回给客户端
	return HttpResponse(html)
    """
	上面代码的简写,直接使用 django.shortcuts.render
	return render(request, "index.html",context={"name":name})
    return render(request,"index3.html", locals())
    data = {}
    data["name"] = "xiaoming"
    data["message"] = "你好！"
    return render(request,"index3.html", data)
    """

DTL模板文件与普通html文件的区别在哪里？

DTL模板文件是一种带有特殊语法的HTML文件，这个HTML文件可以被Django编译，可以传递参数进去，实现数据动态化。在编译完成后，生成一个普通的HTML文件，然后发送给客户端。

开发中，我们一般把开发中的文件分2种，分别是静态文件和动态文件。
* 静态文件，数据保存在当前文件，不需要经过任何处理就可以展示出去。普通html文件，图片，视频，音频等这一类文件叫静态文件。
* 动态文件，数据并不在当前文件，而是要经过服务端或其他程序进行编译转换才可以展示出去。 编译转换的过程往往就是使用正则或其他技术把文件内部具有特殊格式的变量转换成真实数据。 动态文件，一般数据会保存在第三方存储设备，如数据库中。django的模板文件，就属于动态文件。

3 模板语法

变量渲染（深度查询、过滤器）
{{val}}
{{val|filter_name:参数}}
标签
{% tag_name %}
嵌套和继承

3-1 深度查询

class Book():
    def __init__(self, title, price):
        self.title = title
        self.price = price

    def __str__(self):
        return self.title
    
def index(request):
    name = "root"
    age = 13
    sex = True
    lve = ["swimming", "shopping", "coding", "game"]
    bookinfo = {"id": 1, "price": 9.90, "name": "python3天入门到挣扎", }
    book_list = [
        {"id": 10, "price": 9.90, "name": "python3天入门到挣扎", },
        {"id": 11, "price": 19.90, "name": "python7天入门到垂死挣扎", },
    ]
    book1 = Book('三体', 199)
    book2 = Book('飘', 299)
    book3 = Book('百步', 399)
    books = [book1, book2, book3]
    
    return render(request, 'index.html', locals())  # locals() 将所有变量传入模板之中

模板代码，templates/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>name={{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ sex }}</p>
    
    <p>列表成员</p>
    <p>{{ lve }}</p>
    <p>{{ lve.0 }}</p>  <!--通过句点符号深度查询-->
    <p>{{ lve | last }}</p>

    <p>字典成员</p>
    <p>id={{ bookinfo.id }}</p>  <!--通过句点符号深度查询-->
    <p>price={{ bookinfo.price }}</p>
    <p>name={{ bookinfo.name }}</p>

    <p>复杂列表</p>
    <p>{{ book_list.0.name }}</p>
    <p>{{ book_list.1.name }}</p>
	
    <p>class类</p>
    <p>书籍名称：{{ book.title }}</p>  <!--通过句点符号深度查询-->
    <p>书籍价格：{{ book.price }}</p>

    <p>class类对象列表</p>
    <p>books的第2本书的价格：{{ books.2.price }}</p>
</body>
</html>

通过句点符号深度查询

3-2 过滤器

语法：

{{ obj|过滤器名称:过滤器参数 }}

内置过滤器

过滤器	用法	代码
last	获取列表/元组的最后一个成员	{{liast \| last}}
first	获取列表/元组的第一个成员	{{list\|first}}
length	获取数据的长度	{{list \| length}}
`defualt`	当变量没有值的情况下, 系统输出默认值,	{{str\|default="默认值"}}
safe	让系统不要对内容中的html代码进行实体转义，识别html标签	{{htmlcontent\| safe}}
upper	字母转换成大写	{{str \| upper}}
lower	字母转换成小写	{{str \| lower}}
title	每个单词首字母转换成大写	{{str \| title}}
date	日期时间格式转换	`{{ value
cut	从内容中截取掉同样字符的内容	{{content \| cut:"hello"}}
list	把内容转换成列表格式	{{content \| list}}
add	加法	{{num\| add:10}}
`filesizeformat`	把文件大小的数值转换成单位表示	{{filesize \| filesizeformat}}
`join`	按指定字符拼接内容	{{list\| join("-")}}
`random`	随机提取某个成员	{list \| random}}
`slice`	按切片提取成员	{{list \| slice:":-2"}}
`truncatechars`	按字符长度截取内容	{{content \| truncatechars:30}}
`truncatewords`	按单词长度截取内容	同上

过滤器的使用

视图代码 home.views.py;

def index(request):
	"""过滤器 filters"""
	content = "<a href='http://www.luffycity.com'>路飞学城</a>"
	# content1 = '<script>alert(1);</script>'
	from datetime import datetime
	now = datetime.now()
	content2= "hello wrold!"
	return render(request,"index.html",locals())

# 模板代码,templates/index.html:
 
    {{ content | safe }}
    {{ content1 | safe }}

    {# 过滤器本质就是函数,但是模板语法不支持小括号调用,所以需要使用:号分割参数 #}
    <p>{{ now | date:"Y-m-d H:i:s" }}</p>
    <p>{{ conten1 | default:"默认值" }}</p>
    {# 一个数据可以连续调用多个过滤器 #}
    <p>{{ content2 | truncatechars:6 | upper }}</p>

3-3 自定义过滤器

虽然官方已经提供了许多内置的过滤器给开发者,但是很明显,还是会有存在不足的时候。例如:希望输出用户的手机号码时, 13912345678 ---->> 139*****678，这时我们就需要自定义过滤器。要声明自定义过滤器并且能在模板中正常使用,需要完成2个前置的工作:

# 1. 当前使用和声明过滤器的子应用必须在setting.py配置文件中的INSTALLED_APPS中注册了!!!
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home',
]


# 2. 自定义过滤器函数必须被 template.register进行装饰使用.
#    而且过滤器函数所在的模块必须在templatetags包里面保存
   
# 在home子应用下创建templatetags包[必须包含__init__.py], 在包目录下创建任意py文件
# home.templatetags.my_filters.py代码:

from django import template
register = template.Library()

# 自定义过滤器
@register.filter("mobile")
def mobile(content):
	return content[:3]+"*****"+content[-3:]

# 3. 在需要使用的模板文件中顶部使用load标签加载过滤器文件my_filters.py并调用自定义过滤器
# home.views.py,代码:

def index(request):
    """自定义过滤器 filters"""
    
    moblie_number = "13312345678"
    return render(request,"index2.html",locals())

# templates/index2.html,代码:

{% load my_filters %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ moblie_number| mobile }}
</body>
</html>

4 标签

4-1 if 标签

视图代码,tem.views.py:

def index(request):
    name = "xiaoming"
    age = 19
    sex = True
    lve = ["swimming", "shopping", "coding", "game"]
    user_lve = "sleep"
    bookinfo = {"id": 1, "price": 9.90, "name": "python3天入门到挣扎", }
    book_list = [
        {"id": 10, "price": 9.90, "name": "python3天入门到挣扎", },
        {"id": 11, "price": 19.90, "name": "python7天入门到垂死挣扎", },
    ]
    return render(request, 'index.html', locals())

模板代码,templates/index.html，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{# 来自django模板引擎的注释~~~~ #}
{% comment %}
多行注释，comment中的所有内容全部都不会被显示出去
{% endcomment %}

{#    {% if age < 18 %}#}
{#        <p>你还没成年，不能访问我的网站！</p>#}
{#    {% endif %}#}
{##}
{#    {% if name == "root" %}#}
{#        <p>超级用户，欢迎回家！</p>#}
{#    {% else %}#}
{#        <p>{{ name }},你好，欢迎来到xx网站！</p>#}
{#    {% endif %}#}


    {% if user_lve == lve.0 %}
        <p>那么巧，你喜欢游泳，海里也能见到你~</p>
    {% elif user_lve == lve.1 %}
        <p>那么巧，你也来收快递呀？~</p>
    {% elif user_lve == lve.2 %}
        <p>那么巧，你也在老男孩？</p>
    {% else %}
        <p>看来我们没有缘分~</p>
    {% endif %}
</body>
</html>

路由代码：

"""子应用路由"""
from django.urls import path, re_path
from . import views

urlpatterns = [
	# ....
    path("index", views.index),
]

4-2 for标签

视图代码, home.views.py:

class Book():
    def __init__(self, title, price, publish):
        self.title = title
        self.price = price
        self.publish = publish

    def __str__(self):
        return self.title
      
def index7(request):
    book_list1 = [
        {"id": 11, "name": "python基础入门", "price": 130.00},
        {"id": 17, "name": "Go基础入门", "price": 230.00},
        {"id": 23, "name": "PHP基础入门", "price": 330.00},
        {"id": 44, "name": "Java基础入门", "price": 730.00},
        {"id": 51, "name": "C++基础入门", "price": 300.00},
        {"id": 56, "name": "C#基础入门", "price": 100.00},
        {"id": 57, "name": "前端基础入门", "price": 380.00},
    ]
    
    book_list = ['三国演义', '水浒城', '西游记']

    book1 = Book('三体', 199, "苹果出版社")
    book2 = Book('飘', 299, "西瓜出版社")
    book3 = Book('百步', 399, "苹果出版社")

    books = [book1, book2, book3]
    return render(request, 'index.html', locals())

template/index.html，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <h3>for循环</h3>
  <ul>
      {% for bookStr in book_list %}
          <li>{{ bookStr }}</li>
      {% endfor %}
  </ul>

  <table width="800" border="1" align="center">
      <tr>
          <th>序号：</th>
          <th>书籍名称：</th>
          <th>书籍价格：</th>
          <th>书籍出版社：</th>
      </tr>
      {% for bookject in books %}
          {% if bookject.price > 200 %}
              <tr class="active">
                  <td>{{ forloop.counter }},{{ forloop.first }},{{ forloop.last }}</td>
                  <td>{{ bookject.title }}</td>
                  <td>{{ bookject.price }}</td>
                  <td>{{ bookject.publish }}</td>
              </tr>
          {% else %}
              <tr>
                  <td>{{ forloop.counter }},{{ forloop.first }},{{ forloop.last }}</td>
                  <td>{{ bookject.title }}</td>
                  <td>{{ bookject.price }}</td>
                  <td>{{ bookject.publish }}</td>
              </tr>
          {% endif %}
      {% endfor %}

  </table>

  --------------------------------------------------------
  
    <table width="800" align="center" border="1">
        <tr>
            <td>序号</td>
            <td>id</td>
            <td>标题</td>
            <td>价格</td>
        </tr>
        {# 多行编辑，alt+鼠标键，alt不要松开，左键点击要编辑的每一行 #}
{#        {% for book in book_list1 %}#}
{#            <tr>#}
{#                <td>{{ book.id }}</td>#}
{#                <td>{{ book.name }}</td>#}
{#                <td>{{ book.price }}</td>#}
{#            </tr>#}
{#        {% endfor %}#}

{# 建议不要直接使用for循环一维字典，此处使用仅仅展示for嵌套for而已 #}
{#        {% for book in book_list1 %}#}
{#            <tr>#}
{#                {% for field,value in book.items %}#}
{#                <td>{{ field }} == {{ value }}</td>#}
{#                {% endfor %}#}
{#            </tr>#}
{#        {% endfor %}#}

{#        {% for book in book_list1 %}#}
{#            <tr>#}
{#                <td>{{ book.id }}</td>#}
{#                <td>{{ book.name }}</td>#}
{#                {% if book.price > 200 %}#}
{#                    <td bgcolor="#ff7f50">{{ book.price }}</td>#}
{#                {% else %}#}
{#                    <td>{{ book.price }}</td>#}
{#                {% endif %}#}
{#            </tr>#}
{#        {% endfor %}#}

        {# 逆向循环数据 #}
{#        {% for book in book_list1 reversed %}#}
{#            <tr>#}
{#                <td>{{ book.id }}</td>#}
{#                <td>{{ book.name }}</td>#}
{#                {% if book.price > 200 %}#}
{#                    <td bgcolor="#ff7f50">{{ book.price }}</td>#}
{#                {% else %}#}
{#                    <td>{{ book.price }}</td>#}
{#                {% endif %}#}
{#            </tr>#}
{#        {% endfor %}#}

        {% for book in book_list1 %}
            <tr>
{#                <td>{{ forloop.counter }}</td>#}
{#                <td>{{ forloop.counter0 }}</td>#}
{#                <td>{{ forloop.revcounter }}</td>#}
{#                <td>{{ forloop.revcounter0 }}</td>#}
{#                <td>{{ forloop.first }}</td>#}
                <td>{{ forloop.last }}</td>
                <td>{{ book.id }}</td>
                <td>{{ book.name }}</td>
                {% if book.price > 200 %}
                    <td bgcolor="#ff7f50">{{ book.price }}</td>
                {% else %}
                    <td>{{ book.price }}</td>
                {% endif %}
            </tr>
        {% endfor %}

    </table>
</body>
</html>

路由代码：

"""子应用路由"""
from django.urls import path, re_path
from . import views

urlpatterns = [
	# ....
    path("index", views.index),
]

循环中, 模板引擎提供的forloop对象,用于给开发者获取循环次数或者判断循环过程的.

属性	描述
forloop.counter	显示循环的次数,从1开始
forloop.counter0	显示循环的次数,从0开始
forloop.revcounter0	倒数显示循环的次数,从0开始
forloop.revcounter	倒数显示循环的次数,从1开始
forloop.first	判断如果本次是循环的第一次,则结果为True
forloop.last	判断如果本次是循环的最后一次,则结果为True
forloop.parentloop	在嵌套循环中，指向当前循环的上级循环

5 模板嵌套继承

传统的模板分离技术,依靠{% include "模板文件名"%}实现,这种方式,虽然达到了页面代码复用的效果,但是由此也会带来大量的碎片化模板,导致维护模板的成本上升.因此, Django框架中除了提供这种模板分离技术以外,还并行的提供了模板继承给开发者.

{% include "模板文件名"%}  # 模板嵌入
{% extends "base.html" %} # 模板继承

模板嵌入技术

在 templates/ad.html：广告模板

<style>
    .adv {
        width: 200px;
        height: 150px;
        background-color: lavender;
        position: fixed;
        bottom: 10px;
        right: 10px;
    }
</style>
<div class="adv">广告</div>

在 templates/order.html：广告模板嵌入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>我的订单</h3>
{% include 'ad.html' %}
</body>
</html>

继承父模板的公共内容

视图, home.views.py代码:

def index(request):
	"""模板继承"""
	return render(request,"index.html",locals())

子模板, templates/index.html

{% extends "base.html" %}

父模板, templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>base.html的头部</h1>
    <h1>base.html的内容</h1>
    <h1>base.html的脚部</h1>
</body>
</html>

个性展示不同于父模板的内容

{%block %} 独立内容 {%endblock%}

{{block.super}}

视图home.views.py, 代码:

def index(request):
	"""模板继承"""
	return render(request,"index.html",locals())

def home(request):
	"""模板继承"""
	return render(request,"home.html",locals())

路由 home.urls.py,代码:

from django.urls import path
from . import views
urlpatterns = [
	path("", views.index),
	path("home/", views.home),
]

子模板index.html,代码:

{% extends "base.html" %}
{% block title %}index3的标题{% endblock  %}
{% block content %}
    {{ block.super }} {# 父级模板同名block标签的内容 #}
    <h1>index3.html的独立内容</h1>
    {{ block.super }}
{% endblock %}

子模板home.html,代码:

{% extends "base.html" %}
{% block title %}home的标题{% endblock %}

父模板base.html,代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock  %}</title>
</head>
<body>
    <h1>base.html的头部</h1>
    {% block content %}
    <h1>base.html的内容</h1>
    {% endblock %}
    <h1>base.html的脚部</h1>
</body>
</html>

如果你在模版中使用 {% extends %} 标签，它必须是模版中的第一个标签。其他的任何情况下，模版继承都将无法工作。

在base模版中设置越多的 {% block %} 标签越好。请记住，子模版不必定义全部父模版中的blocks，所以，你可以在大多数blocks中填充合理的默认内容，然后，只定义你需要的那一个。多一点钩子总比少一点好。

为了更好的可读性，你也可以给你的 {% endblock %} 标签一个名字。例如：{``% block content``%``}``...``{``% endblock content``%``},在大型模版中，这个方法帮你清楚的看到哪一个　 {% block %} 标签被关闭了。

不能在一个模版中定义多个相同名字的 block 标签。

补充：

模板中可以使用a标签来进行跳转页面

<!--可以使用相对路径和绝对路径-->
<a href='/home/index/'>首页</a>
<a href='/home/order/'>我的订单</a>

posted @ 2022-08-10 16:06 角角边 Views(110) Comments(0) 收藏举报

刷新页面返回顶部

角角边