Web应用框架-Django应用基础（3）-Jinja2

1.创建姓名模板

username里的数据发生改变，页面中渲染的数据发生改变，该效果称为动态数据

python 复制代码

#hello/views:

def hello_user(request):
    username='000'
    html= '''
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <h1 style='color:#f00;'>hello{{username}}</h1>
        </body>
    </html>
    '''.replace('{{username}}',username)
    return HttpResponse(html)

# hello/urls:

    path('hello_user/', hello_user, name='hello_user'),

2.Django模板相关配置

2.1 安装 Jinja2：

pip3 install jinja2 -i https://pypi.tuna.tsinghua.edu.cn/simple

2.2 渲染机制:

步骤一:从磁盘读取模板文件(get_template)

步骤二:选择合适的模板引擎(select_template)

步骤三:将制定内容对模板进行渲染(render)

步骤四:发送给浏览器显示

3.启用Jinja2的双种模板引擎测试

3.1配置settings:

BACKEND:模板引擎配置，配置哪一种模板，默认配置Django自带模板DTL。

DIRS:存放模板的目录地址，模板引擎按列表顺序搜索这些目录以查找模板源文件。

APP DIRS: 模板应用范围，True 表示它会在全局工程目录中查找模板文件。

OPTIONS: 其他选项配置。

多个页面模板引擎，加载顺序由上至下，DTL中能匹配则使用DTL，否则使用jinja2：

python 复制代码

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',
            ],
        },
    },
]

3.2 添加模板

新建jinja2文件夹：jinja2_home.html

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>jinja2首页</h1>
</body>
</html>

3.3新建并配置Jinja2环境：

python 复制代码

TEMPLATES = [{
        'BACKEND': 'django.template.backends.jinja2.Jinja2',
        'DIRS': [os.path.join(BASE_DIR / 'jinja2')],#模板所在位置
    }]

3.4 访问Jinja2模板的首页

javascript 复制代码

#hello/views:

def go_jinja2(request):
    return render(request,'jinja2_home.html')

#hello/urls:

    path('go_jinja2/', go_jinja2, name='go_jinja2'),

3.5 网页显示

4.模板变量

4.1 模板引擎变量应用

python 复制代码

def index_variable(request):
    username = '000'
    age = 2
    img_url = "/media/5.jpg"
    list_users = [{'username':'adela','age':20},
                  {'username':'Duruo','age':30}]
    return render(request,'index.html',{
        'username':username,
        'age':age,
        'img_url':img_url,
        'list_users':list_users,
    })

path('index_variable/', index_variable, name='index_variable'),

4.2 简单数据类型的渲染

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我的HTML标签</h1>
    <p>用户名：{{ username }}</p>
    <p>年龄：{{ age }}</p>
    <p><img src="{{ img_url }}" alt=""></p>
    <p>用户列表</p>
    {% for user in list_users %}
        <p>用户名：{{ user.username }}</p>
        <p>年龄：{{ user.age }}</p>
        <img width="300" src="{{ img_url }}" alt="">
    {% endfor %}
</body>
</html>

5.DTL与Jinja2的使用区别

5.1 字典（Dictionary）输出

DTL变量名称中不能有空格或标点符合

下面的语法在DTL中不被支持：

5.2 类（Class）对象输出

类中的成员方法调用不需要(),也不支持参数传递。

5.3 小结

字典是通过键值对存储数据的集合，而类实例是对象，其数据和行为封装在类定义中。

字典的值可以通过键直接访问，而类实例的值通常需要通过方法或属性来访问。

在模板中，字典的键可以直接用变量标签 {{ }} 访问，而类实例的方法需要用相同的方式调用。

#hello/Views(变量)

python 复制代码

#模板引擎变量应用
def index_variable(request):
    username = '000'
    age = 2
    img_url = "/media/5.jpg"
    list_users = [{'username':'adela','age':20},
                  {'username':'Duruo','age':30}]
    user_obj = {
        'username':'Hella'
    }
    rat = Rat()
    return render(request,'index.html',{
        'username':username,
        'age':age,
        'img_url':img_url,
        'list_users':list_users,
        'user_obj':user_obj,
        'rat':rat
    })

class Rat(object):
    def display(self):
        return "辛迪加文明大使"

#templates/index.html (模版标签)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我的HTML标签</h1>
    <p>用户名：{{ username }}</p>
    <p>年龄：{{ age }}</p>
    <p><img src="{{ img_url }}" alt=""></p>
    <p>用户列表</p>
    {% for user in list_users %}
        <p>用户名：{{ user.username }}</p>
        <p>年龄：{{ user.age }}</p>
        <img width="300" src="{{ img_url }}" alt="">
    {% endfor %}
    <p>{{ user_obj.username }}</p>
    <p>{{ rat.display }}</p>
    {# 调用对象函数时，不需要写括号，不能传参数 #}
</body>
</html>

6.循环控制

6.1循环语法结构：

循环：

{% for user in list_users %} ~巴拉巴拉巴拉~ {% endfor %}

字典循环：

{% for key,values in data.items %} ~巴拉巴拉巴拉~ {% endfor %}

重复循环（循环嵌套）：

{% cycle "row1" "row2" %}

6.2 循环中的变量：

变量	描述
forloop.first	如果是第一次迭代，为True
forloop.last	如果是最后一次迭代，为True
forloop.counter0	计数器，从0开始
forloop.counter	计数器，从1开始

6.3 模拟引擎for循环

python 复制代码

def tag(request):
    list_user = [
        {'name':'Zoya','age':20},
        {'name':'Eirene','age':31,'sex':'female'},
    ]
    return render(request,'tag.html',{
        'list_users':list_user
    })

path('tag/', tag, name='tag'),

6.4 URL解析

新建template/tag.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .row1 {
            color: #f00;
        }

        .row2 {
            color: #0f0;
        }
    </style>
</head>
<body>
    <h1>用户列表</h1>
    {% for user in list_users %}
        <p class="{% cycle 'row1' 'row2' %}">第{{ forloop.counter }}个用户信息</p>
        {% for key,value in user.items %}
            {{ key }} - {{ value }}
        {% endfor %}
    {% empty %}
        <p>暂无用户信息</p>
    {% endfor %}
</body>
</html>

6.5 网页效果

7.注释

Dart 复制代码

<!--html注释，在页面源代码中可以查看注释内容--> 

{# 标签注释，该注释在编译时排除该部分注释内容，因此在源码中无法显示 #} 

{% comment "注释" %} 
<p>HTML内容{{ create_date }}</p> 
{% endcomment %}

8.静态资源URL解析

8.1 新建static文件

用于储存静态资源

8.2 解析静态文件

8.2.1 setting中设置好资源目录和链接.

python 复制代码

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]#存放静态资源文件

8.2.2 获取静态文件的绝对路径:

方便后续使用 {% static %} 标签来生成静态文件（6.jpg）的完整 URL。

python 复制代码

<body>
{#....#}
{% load static %}
<img WIDTH="500" src="{% static '6.jpg' %}" alt="dilraba">
{#....#}
</body>

9.时间状态显示

python 复制代码

{% now 'j S F Y H:i' %}

10.自定义过滤器

10.1 自定义过滤器步骤

步骤一:在app模块目录下新建包templatetags

步骤二：实现过滤器poll_extras.py

步骤三：注册过滤器

方式一：注册过滤器 register.filter(' warning ',warning)
方式二：注册过滤器 register.filter(name=' warning ')

步骤四：在模板中使用过滤器

10.2 新建文件-编写过滤器逻辑

python 复制代码

from django import template

register = template.Library()
#注册过滤器
@register.filter(name='fmt_name')
def fmt_uname(value):
    return '{}***'.format(value[0])

10.3 使用过滤器

python 复制代码

#hello/views：

#跳转模板使用过滤器
def mine_filter(request):
    username = '吴亦凡'
    return render(request,'mine_filter.html',{
        'username':username
    })

path('mine/filter/', mine_filter, name='mine_filter'),

10.4 创建mine_filter

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>{{ username }}</p>
    {% load format_name %}
    <p>{{ username|fmt_name }}</p>
</body>
</html>

10.5 settings配置模块

添加'hello'，确保 Django 项目能够识别和使用 hello 应用中定义的过滤功能。

python 复制代码

# Application definition installed_apps

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello'
]