Django 框架(模板)

Django 的模板系统(Template System)是用于将业务逻辑(Python)与展示层(HTML)分离的核心组件，它允许开发者通过简单的标签和变量动态生成HTML页面。

功能	语法/示例	适用场景
变量渲染	{{ varible }}	动态显示数据
逻辑控制	{% if %},{% for %}	条件/循环渲染
模板继承	{% extends %},{%block %}	避免重复HTML结构
静态文件	{%static 'path' %}	加载CSS/JS/图片
自定义过滤器	@register.filter	扩展模板功能

模板应用实例

在项目底下创建templates目录并建立test.html文件，整个目录结构如下：

test.html文件代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <h1>{{ hello }}</h1>

</body>
</html>

views.py文件代码如下:

python 复制代码

from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def hello(request):
    return HttpResponse("Hello World!!!")

def test(request):
    context = {}
    context['hello'] = 'Hello World!'
    return render(request,'test.html',context)

urls.py文件代码如下：

python 复制代码

from django.contrib import admin
from django.urls import path
from book import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path("",views.hello,name="hello"),
    path('test/',views.test),

]

运行后的结果如下

Django 模板标签

语法：

python 复制代码

{{% tag %}}

控制模板逻辑，常用标签：

标签	用途
{% for %}	循环遍历列表/字典
{% if %}	条件判断
{% extends %}	继承基模板
{% block %}	定义可被子模板覆盖的内容快
{% include %}	嵌入其他模板片段
{% url %}	反向解析URL
{%csrf_token%}	生成CSRF令牌

变量

模板语法：

python 复制代码

view:{"HTML变量名":"views变量名"}
HTML:{{变量名}}

test.html文件代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <h1>{{ hello }}</h1>
 <h2>{{ name }}</h2>

</body>
</html>

views.py文件代码如下：

python 复制代码

def test(request):
    views_name ='Hello World'
    return render(request,'test.html',{"name":views_name})

列表

templates中的runoob.html中，可以用 . 索引下标取出对应的元素。

test.html文件代码如下：

python 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <h1>{{ hello }}</h1>
 <h2>{{ name }}</h2>
 <h3>{{ views_list }}</h3>
 <h4>{{ views_list.1 }}</h4> 

</body>
</html>

views.py文件代码如下：

python 复制代码

from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def hello(request):
    return HttpResponse("Hello World!!!")

def test(request):
    views_list = [1,2,3,'你好']
    return render(request,'test.html',{"views_list":views_list})

字典

templates中的test.html中，可以用 . 键 取出对应的值。

test.html文件代码如下:

html 复制代码

 <p>{{ views_dict }}</p>
 <p>{{ views_dict.name }}</p>

views.py文件代码如下：

python 复制代码

def test(request):
    views_dict = {"name":"zulnger"}

    return render(request,'test.html',{"views_dict":views_dict})

过滤器

模板语法：

复制代码

  {{变量名|过滤器:可选参数}}

模板过滤器可以在变量被显示当前修改它，过滤器使用管道字符，如下所示：

复制代码

  {{name|lower}}

{{name}}变量被过滤器lower处理后，文档大写转换文本为小写。

过滤器管道可以被"套接"，一个过滤器管道的输出又可以作为下一个管道的输入。

复制代码

  {{my_list|first|upper}}

有些过滤器有参数。过滤器的参数跟随冒号之后并且总是以双引号包含。

这个将显示变量bio的前30个词。

length

返回对象的长度，适用于字符串和列表。

字典返回的是键值对的数量，集合返回的是去重后的长度。

test.html 文件代码如下:

复制代码

  {{name|length}}

views.py文件代码如下：

python 复制代码

def test(request):
    name = 'hello'
    return render(request,'test.html',{"name":name})

filesizeformat

以更易读的方式显示文件的大小(即'13KB','4.1MB','102 bytes等')。

date

根据给定格式对一个日期变量进行格式化。

格式 Y-m-d H:i:s返回年-月-日小时:分钟:秒的格式时间。

test.html

html 复制代码

 <h2>{{ time|date:"Y-m-d" }}</h2>

views.py

python 复制代码

def test(request):
    now=datetime.datetime.now()
    return render(request,'test.html',{"time":now})

truncatechars

如果字符串包括的字符总个数多于指定的字符数量，那么会被截断掉后面的部分。

截断的字符串将以**...**结尾。

safe

将字符串标记为安全，不需要转义。

test.html

html 复制代码

<h3>{{ views_str|safe }}</h3>

views.py

python 复制代码

def test(request):
    views_str = "<a href='https://www.baidu.com'>点击跳转</a>"
    return render (request,"test.html",{"views_str":views_str})

if/else标签

基本语法格式如下：

python 复制代码

{{% if condition %}}
....display
{{% endif %}}

或者

python 复制代码

{% if condition1 %}
   ... display 1
{% elif condition2 %}
   ... display 2
{% else %}
   ... display 3
{% endif %}

根据条件判断是否输出。if/else支持嵌套。

{% if %}标签接受and,or或者not关键字来对多个变量做判断，或者对变量取反(not)

test.html

html 复制代码

{%if num > 90 and num <= 100 %}
优秀
{% elif num > 60 and num <= 90 %}
合格
{% else %}
一边玩去～
{% endif %}

views.py

python 复制代码

from django.shortcuts import render

def runoob(request):
    views_num = 88
    return render(request, "runoob.html", {"num": views_num})

for 标签

{% for %}允许我们在一个序列上迭代。

每一次循环中，模板系统会渲染在{% for %}和{% endfor %}之间的所有内容。

test.html

html 复制代码

{% for i in views_list %}
{{ i }}
{% endfor %}

views.py

python 复制代码

from django.shortcuts import render

def runoob(request):
    views_list = ["hh","yy","zz","sss",]
    return render(request, "runoob.html", {"views_list": views_list})

遍历字典

可以直接用字典.items方法，用变量的解包分别获取键和值。

test.html

html 复制代码

{% for i,j in views_dict.items %}
{{ i }}---{{ j }}
{% endfor %}

views.py

python 复制代码

from django.shortcuts import render

def runoob(request):
    views_dict = {"name":"zulnger","age":24}
    return render(request, "runoob.html", {"views_dict": views_dict})

在{% for %}标签可以通过{{forloop}}变量获取循环序号。

forloop.counter:顺序获取循环序号，从1开始计算。
forloop.counter0:顺序获取循环序号，从0开始计算。
forloop.revcounter:倒序获取循环序号，结尾序号为1
forloop.revcount0:倒序获取循环序号，结尾序号为0.
forloop.first(一般配合if标签使用)：第一条数据返回True,其他数据返回False。
forloop.last(一般配合if标签使用)：最后一条数据返回True,其他数据返回False。

{% empty %}

可选{% empty % }从句：在循环为空的时候执行
*

注释标签

Django 注释使用{# #}。

python 复制代码

{# 第一个注释 #}

include 标签

{% include %}标签允许在模板中包含其它的模板的内容。

html 复制代码

{% include "test.html" %}

csrf_token

csrf_token 用于form表单中，作用是跨站请求伪造保护。

如果不用 {% csrf_token %} 标签，在用 form 表单时，要再次跳转页面会报 403 权限错误。

用了**{% csrf_token %}** 标签，在 form 表单提交数据时，才会成功。
*

配置静态文件

1.在项目根目录下创建statics目录。

2.在settings文件的最下方配置添加以下配置。

复制代码

  STATIC_URL = '/static/' # 别名 
  STATICFILES_DIRS = [ 
      os.path.join(BASE_DIR, "statics"), 
  ]

3.在statics目录下创建css目录，js目录，images目录，plugins目录，分别放css文件，js文件，图片，插件。

4.把bootstrap框架放入插件目录plugins。

5.HTML文件的head标签中引入bootstrap。

注意： 此时引用路径中的要用配置文件中的别名 static，而不是目录 statics。

html 复制代码

<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7/dist/css/bootstrap.css">

在模板中使用需要加入{%load static %}代码，从静态目录中引入图片。

html 复制代码

{% load static %}
{{name}}<img src="{% static 'images/runoob-logo.png' %}" alt="runoob-logo">

模板继承

模板可以用继承的方式来实现复用，减少冗余内容。

网页的头部和尾部内容一般都是一致的，我们就可以通过模板继承来实现复用。

父模板用于放置可重复利用的内容，子模板继承父模板的内容，并放置自己的内容。

父模板

**标签block ... endblock:**父模板中的预留区域，该区域留给子模版填充差异性的内容，不同预留区域名字不能相同。
子模版

子模版使用标签extends继承父模板：
html 复制代码
```
{%extends "父模板路径"%}
```
子模板设置父模板预留区域的内容。
复制代码
```
{ % block 名称 % }
内容 
{% endblock 名称 %}
```

% static 'images/runoob-logo.png' %}" alt="runoob-logo">

复制代码

- ###### 模板继承

模板可以用继承的方式来实现复用，减少冗余内容。

网页的头部和尾部内容一般都是一致的，我们就可以通过模板继承来实现复用。

父模板用于放置可重复利用的内容，子模板继承父模板的内容，并放置自己的内容。

- **父模板**

  **标签block ... endblock:**父模板中的预留区域，该区域留给子模版填充差异性的内容，不同预留区域名字不能相同。

- **子模版**

  子模版使用标签extends继承父模板：

  ```html
  {%extends "父模板路径"%}
  ```

  子模板设置父模板预留区域的内容。

  ```
  { % block 名称 % }
  内容 
  {% endblock 名称 %}
  
  ```