Django全栈开发学习笔记(九)——Jinja2模板引擎

Jinja2模板引擎设计思路源于Django的模板引擎,并扩展了语法和一些列强大的功能,其中最重要的是增加了沙箱执行功能和可选的自动转义功能,这对应用的安全来说非常重要,此外还有一些特性:

  • 沙箱执行模式:模板的每个部分都在引擎的监督之下执行,模板将会被明确地标记在白名单或黑名单内,这样对于不信任的模板也可以执行
  • 强大的自动HTML转义系统,可以有效地阻止跨站脚本攻击
  • 模板继承机制,此机制可以使得所有模板具有相似一致的布局,也方便开发人员对模板进行修改和管理
  • 高效的执行效率,Jinja2引擎在第一次加载时就把源码转换成python字节码,加快模板执行时间
  • 调试系统融合了标准的python的TrackBack功能,使得模板编译和运行期间的错误能及时地被发现和调试
  • 语法设置,可以重新配置Jinja2,使得他更好的适应LaTeX或JS的输出
  • 有官方指导手册

安装与配置

安装可以使用pip安装,也可以在网站下载
完成后在项文件夹下(与settings.py一个文件夹)创建jinja2.py文件(该文件名没有固定要求),在这个文件中定义函数environment,并进行实例化,代码如下

from django.contrib.staticfiles.storage import staticfiles_storage
from django.urls import reverse
from jinja2 import Environment

# 将jinja2模版设置到项目环境
def environment(**options):
    env = Environment(**options)
    env.globals.update({
        'static': staticfiles_storage.url,
        'url': reverse,
    })
    return env

下一步在settings.py对应位置加入:

TEMPLATES = [
    # 使用Jinja2模版引擎
    {
        'BACKEND': 'django.template.backends.jinja2.Jinja2',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'environment': 'MyDjango.jinja2.environment'
        },
    },
    # 使用Django的模版引擎
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
        ], },
    },
]

即可完成模板引擎配置。

模板语法

Jinja2是基于Django模板引擎设计的,并提供了官方的文档用于查看https://www.w3cschool.cn/yshfid/也有中文文档用于查询。
示例代码如下:
base.html

<!DOCTYPE html>
<html>
<head>
{% block title %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>

index.html

{#模版继承#}
{% extends "base.html" %}
{% block title %}
    {#static标签#}
    {#Django的用法:{% static 'favicon.ico' %}#}
    <link rel="icon" href="{{ static('favicon.ico') }}">
    <title>Jinja2</title>
{% endblock %}
{% block body %}
    {#使用上下文#}
    {#Django的用法:{{ value.name }}#}
    {#Jinja2除了支持Django的用法,还支持以下用法#}
    <div>{{ value['name'] }}</div>
    {#使用过滤器#}
    <div>{{ value['name'] | replace('Jinja2','Django') }}</div>
    {#for循环#}
    {#Django的用法:{% for k,v in value.items %}#}
    {% for k,v in value.items() %}
        <div>key is {{ k }}</div>
        <div>value is {{ v }}</div>
    {% endfor %}
    {#if判断#}
    {% if value %}
        <div>This is if</div>
    {% else %}
        <div>This is else</div>
    {% endif %}
    {#url标签#}
    {#Django的用法:{% url 'index:index' %}#}
    <a href="{{ url('index:index') }}">首页</a>
{% endblock %}

同样Jinja2也可以自定过滤器:代码示例如下:
项目的jinja2.py

from django.contrib.staticfiles.storage import staticfiles_storage
from django.urls import reverse
from jinja2 import Environment


def myReplace(value, old='Jinja2', new='Django'):
    return str(value).replace(old, new)

# 将jinja2模版设置到项目环境
def environment(**options):
    env = Environment(**options)
    env.globals.update({
        'static': staticfiles_storage.url,
        'url': reverse,
    })
    env.filters['myReplace'] = myReplace
    return env

HTML文件:

<!DOCTYPE html>
<html>
<body>
    <div>
        {{ value.name | myReplace }}
    </div>
    <div>
        {{ value.name | myReplace('This', 'That') }}
    </div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Django和Vue.js是两个非常流行的开发框架,它们结合使用可以实现全栈开发。下面给出一个关于Django Vue3全栈开发学习文档的简要说明。 首先,学习文档应该从基础开始,介绍Django和Vue.js的基本概念和用法。对于初学者来说,可以先学习Django的核心概念,比如模型、视图和模板。然后,学习如何使用Django建立数据模型、创建RESTful API,并且如何将数据渲染到模板中。 接下来,学习文档应该逐步介绍Vue.js的基础知识,包括Vue的实例、组件和指令等。学习者可以通过编写简单的Vue组件来加深对Vue.js的理解,并学习如何使用Vue.js来处理前端的交互逻辑。 然后,学习文档可以介绍如何将Django和Vue.js结合起来进行全栈开发。这包括如何在Django中配置前后端分离的开发环境,如何使用Django提供的API来处理数据的增删改查操作,以及如何使用Vue.js来渲染和处理前端界面。 除了基础知识外,学习文档还应该提供一些实践项目来帮助学习者巩固所学知识。这些项目可以是基于Django和Vue.js的实际应用,比如一个简单的博客系统或一个任务管理应用。通过实际项目的实践,学习者可以更好地理解和运用所学知识。 最后,学习文档应该补充一些额外的资源和参考资料,比如官方文档、书籍和在线教程等,以帮助学习者进一步扩展自己的知识。 总而言之,一本Django Vue3全栈开发学习文档应该从基础概念开始,逐步引导学习者掌握Django和Vue.js的用法,并通过实践项目和额外资源提供进一步的学习支持。希望以上的回答对您有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烧麦Sn0wSt@r

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值