当前位置： 首页 > article >正文

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

article 2024/10/28 5:39:49

 1.创建姓名模板

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

#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：

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

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

3.3新建并配置Jinja2环境：

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

3.4 访问Jinja2模板的首页

#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 模板引擎变量应用

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  简单数据类型的渲染

<!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中不被支持：

{{ object[" a.b "] }}   {{ object[" a b "] }}

5.2 类（Class）对象输出

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

 5.3 小结

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

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

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

#hello/Views(变量)

#模板引擎变量应用
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 (模版标签)

<!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循环

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

<!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.注释

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

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

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

8.静态资源URL解析

8.1 新建static文件

用于储存静态资源

8.2 解析静态文件

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

# 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。

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

9.时间状态显示

{% 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 新建文件-编写过滤器逻辑

from django import template

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

10.3 使用过滤器

#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

<!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 应用中定义的过滤功能。

# 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'
]


http://www.kler.cn/news/368282.html

相关文章：

  • 第一周训练
  • Android Activity SingleTop启动模式使用场景
  • 基于去哪儿旅游出行服务平台旅游推荐网站【源码+安装+讲解+售后+文档】
  • Elasticsearch 与 Lucene 的区别和联系
  • C++线程池手写实现
  • JAVA-----线程池
  • HTML 基础：构建网页结构的基石
  • Java中的反射（3）——反射的应用场景
  • 微信小程序的日期区间选择组件的封装和使用
  • 重学SpringBoot3-Spring WebFlux之SSE服务器发送事件
  • 【jellyfin】解决Edge 浏览器播放 jellyfin 的 hevc/h265 视频“该客户端与媒体不兼容，服务器未发送兼容的媒体格式”错误
  • Vue.js 把字典类型的数据转化为键值对数据，符合echart格式,key-value键值对
  • 微信小程序瀑布流实现，瀑布流长度不均等解决方法
  • 【AI辅助】AWS Toolkit+AmazonQ
  • Python条形图 | 指标（特征）重要性图的绘制
  • 提示工程（Prompt Engineering）指南（入门篇）
  • django中的类属性和类方法
  • A股未来的发展方向在哪里？
  • Web3应用场景大揭秘：区块链技术的创新与突破
  • 云原生Istio基础
  • 检索增强型生成模型RichRAG：为多面查询提供丰富回应
  • XQT_UI 组件｜02｜ 按钮 XPushButton
  • 软硬件开发面试问题大汇总篇——针对非常规八股问题的提问与应答
  • 浏览器无法访问非80端口网页
  • 当我们在微服务中使用API网关时，它是否会成为系统的瓶颈？这种潜在的瓶颈如何评估和解决？如何在微服务架构中保证高效请求流量？｜API网关｜微服务｜异步处理
  • Git修改本地分支并同步至远程