一、模板的配置、绑定与渲染

1.模板的简介

模板可以动态生成html网页，它包括部分html代码和一些特殊的语法

2.template配置方法

  • 一般存放在templates目录中
  • 通过在项目settings的templates的DIRS列表中添加对应的路径即可，如os.path.join(BASE_DIR,’templates’)

3.template与视图的绑定

  • 通过 from django.shortcuts import render 模块
  • return render(request,template_path,{k:v}) 字典中的key和value就是要向前端渲染出来的数据

4.template展示渲染的数据

在html中以{{}}为标识，在双大括号中传入视图中传入的数据

5.实战举例

  1. 创建一个django项目：django-admin startproject template
  2. 进入项目目录：cd template/后，创建一个应用app：python3 manage.py startapp app
  3. 打开项目后，在该项目下创建一个文件夹templates，如下：

截屏2022-05-21 下午4.18.20.png
4.在项目根目录下的settings.py文件下，设置templates的DIRS：
截屏2022-05-21 下午4.21.28.png
5.在应用app中创建一个url.py文件，定义url：

  1. from django.urls import path
  2. from .views import Index
  4. urlpatterns=[
  5.     path('',Index.as_view())
  7. ]

6.在应用中创建一个视图函数：

  1. from django.shortcuts import render
  2. from django.views.generic import View
  4. # Create your views here.
  5. class Index(View):
  6.     TEMPLATE='index.html'
  8.     def get(self,request,name):
  9.         return render(request,self.TEMPLATE)

7.在根目录下的路由urls.py注册app的url：

  1. from django.contrib import admin
  2. from django.urls import path,include
  3. from app import urls as app_urls
  5. urlpatterns = [
  6.     path('admin/', admin.site.urls),
  7.     path('',include(app_urls))
  8. ]

8.app应用下的url绑定视图：

  1. from django.urls import path
  2. from .views import Index
  4. urlpatterns=[
  5.     path('',Index.as_view())
  7. ]

9.在新创建的模板文件下创建一个简单的html文件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. hello {{name}}
  9. </body>
  10. </html>

10.启动本地服务，在浏览器中输入对应地址查看对应模板数据：python3 manage.py runserver
输入：http://127.0.0.1:8000/后查看到：
截屏2022-05-21 下午4.10.35.png
【拓展】在模板中展示渲染数据：

  1. from django.shortcuts import render
  2. from django.views.generic import View
  4. # Create your views here.
  5. class Index(View):
  6.     TEMPLATE='index.html'
  8.     def get(self,request,name):
  9.         return render(request,self.TEMPLATE,{'name':name})
  1. from django.urls import path
  2. from .views import Index
  4. urlpatterns=[
  5.     path('<str:name>',Index.as_view())
  7. ]
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. hello {{name}}//双大括号表示
  9. </body>
  10. </html>

结果为：
截屏2022-05-21 下午4.34.28.png

二、template的内置标签与静态配置

1.变量与标签

  • 变量用{{}}双大括号包裹，比如后端渲染过来的数据
  • 内置标签类型，用{%%}大括号左右各一个百分号包裹

截屏2022-05-21 下午4.39.34.png

截屏2022-05-21 下午4.42.01.png

2.静态文件配置

  • 项目根目录创建‘static’与‘template’文件夹同级
  • STATICFILES_DIRS=(os.path.join(BASE_DIR,’static’),)

静态文件包括：

  • css样式文件
  • JavaScript文件
  • image图片文件等

3.静态文件配置与内置标签代码演示

3.1 内置标签代码演示
编写一个视图函数：
image.png
编写一个index.html的前端页面：（包含了上述几种内置标签）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>hello {{name}}</h1>
  9. <ul>
  10.     {% for item in array %}
  11.     <li>{{ item }}---{{ forloop.counter0 }}---{{ forloop.counter }}----{{ forloop.revcounter }}----{{ forloop.revcounter0 }}
  12.     {% if forloop.first %}
  13.     is first
  14.     {% elif forloop.last %}
  15.     is last
  16.     {% endif %}
  17.     </li>
  18.     {% empty %}
  19.         <li>is empty</li>
  20.     {% endfor %}
  21. </ul>
  22. <a href="{% url 'index' 'conan' %}">return</a>
  23. </body>
  25. </html>

结果如下图：
image.png
点击return后结果：
截屏2022-05-23 下午11.25.26.png

3.2 静态文件配置代码演示
在static文件夹中新建一个css文件：

  1. *{
  2.     margin:0;
  3.     padding: 0;
  4. }

在模板文件夹中新建一个base html文件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. {% block head %}
  5.     <meta charset="UTF-8">
  6.     <title>{% block title %}{% endblock %}</title>
  7.     {% block css_style %}
  8.     {% endblock %}
  9. {% endblock %}
  10. </head>
  11. <body>
  12. {% block content %}
  13. {% endblock %}
  14. {% block js_script %}
  15. {% endblock %}
  16. </body>
  17. </html>

编写index的html文件：

  1. {% extends 'base.html' %}
  2. {% load static %}
  3. {% block css_style %}
  4. <link rel="stylesheet" href="{% static 'index.css' %}">
  5. {% endblock %}
  6. {% block title %}
  7.     test
  8. {% endblock %}
  9. {% block content %}
  10.     <h1>hello {{ name }}</h1>
  11.     <ul>
  12.     {% for item in array %}
  13.     <li>{{ item}}</li>
  14.     {% endfor %}
  15.     </ul>
  17. {% endblock %}

结果：
截屏2022-05-24 上午12.15.22.png
setting文件中配置静态文件：

  1. STATIC_URL = '/static/'
  2. STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)

三、模板内置过滤器

1.过滤器的用处

  • 用于在html模板中，对于渲染过来的数据进行二次操作使用
  • 用来处理这些数据的模板引擎中使用的函数

2.常用过滤器介绍
image.png

image.png
image.png

常用过滤器实践说明：

  1. from django.shortcuts import render
  2. from django.views.generic import View
  3. import datetime
  5. # Create your views here.
  6. class Index(View):
  7.     TEMPLATE='index.html'
  9.     def get(self,request,name):
  10.         data={}
  11.         data['name']=name
  12.         data['array']=range(10)
  13.         data['count']=20
  14.         data['time']=datetime.datetime.now()
  15.         data['cut_str']='hello-girl!'
  16.         data['first_big']='hello django!'
  17.         data['result']=False
  18.         data['dict_list']=[{'name':'test1','age':28},{'name':'test2','age':18}]
  19.         data['float_num']=3.1415926
  20.         data['html_str']='<div style="background-color:red;width:50px;height:50px"></div>'
  21.         data['a_str']='请看 www.baidu.com'
  22.         data['feature']=data['time']+datetime.timedelta(days=5)
  23.         #data['array']=[]
  25.         return render(request,self.TEMPLATE,data)
  1. {% extends 'base.html' %}
  2. {% load static %}
  3. {% block css_style %}
  4. <link rel="stylesheet" href="{% static 'index.css' %}">
  5. {% endblock %}
  6. {% block title %}
  7.     test
  8. {% endblock %}
  9. {% block content %}
  10.     <h1>hello {{ name }}</h1>
  11.     <ul>
  12.     {% for item in array %}
  13.     <li>{{ item}}</li>
  14.     {% endfor %}
  15.     </ul>
  16. <br/>
  17.     <label>add:</label>{{ count|add:10 }}<br/>
  18.     <label>date:</label>{{ time|date:"Y-m-d H:i:s" }}<br/>
  19.     <label>cut:</label>{{ cut_str|cut:'-' }}<br/>
  20.     <label>first_big:</label>{{ first_big|capfirst }}<br/>
  21.     <label>default:</label>{{ result|default:"空列表" }}<br/>
  22.     <label>default_if_none:</label>{{ result|default_if_none:"none为空" }}<br />
  23.     <label>dictsort:</label>{{ dic_list|dictsort:'age' }}<br />
  24.     <label>dictsortreversed:</label>{{ dict_list|dictsortreversed:'age' }}<br />
  25.     <label>first:</label>{{ dict_list|first }}<br />
  26.     <label>last:</label>{{ dict_list|last }}<br />
  27.     <label>floatformat:</label>{{ float_num|floatformat:4 }}<br />
  28.     <label>join:</label>{{ array|join:"-" }}<br />
  29.     <label>length:</label>{{ dict_list|length }}<br />
  30.     <label>divisibleby:</label>{{ count|divisibleby:3 }}<br />
  31.     <label>length_is:</label>{{ dict_list|length_is:2 }}<br />
  32.     <label>safe:</label>{{ html_str|safe }}<br />
  33.     <label>random:</label>{{ dict_list|random }}<br />
  34.     <label>slice:</label>{{ html_str|slice:":10" }}<br />
  35.     <label>slugify:</label>{{ html_str|slugify }}<br />
  36.     <label>upper:</label>{{ html_str|upper }}<br />
  37.     <label>urlize:</label>{{ a_str|urlize }}<br />
  38.     <label>wordcount:</label>{{ first_big|wordcount }}<br />
  39.     <label>timeuntil:</label>{{ feature|timeuntil }}
  41. {% endblock %}

运行结果如下：
截屏2022-06-12 下午3.48.34.png

3.自定义过滤器
定义自定义函数规则：

  • 在应用下创建templatetags文件夹
  • 在文件夹下创建myfilter.py

举例：

  1. from django import template
  2. register=template.Library()#定义过滤器
  3. @register.filter
  4. def test_filter(value,args):
  5.     return value+args
  1. {%load myfilter%}
  2. {{data |test_filter:3}}

四、其他模板介绍

1.jinja2简介

  • 一套模仿Django模板的模板引擎，使用场景和Django模板相似
  • 由flask开发者开发
  • 速度快，被广泛使用
  • 提倡让html设计者和后端Python开发工作分离

2.jinja2常用过滤器
image.png
3.mako简介

  • 有比jinja更快的解析速度已经更多的语法支持
  • 最大的特点在于允许你在html中随笔书写python代码