首页 > 其他分享 >【Flask系列】Jinja2模板引擎:Flask中的动态HTML渲染

【Flask系列】Jinja2模板引擎:Flask中的动态HTML渲染

时间:2024-08-24 13:27:02浏览次数:7  
标签:title Flask HTML Jinja2 user 模板

原创 代码工匠坊007

在 Flask 中,Jinja2 是默认的模板引擎,它用于渲染 HTML 页面。
你可以使用 Jinja2 来传递变量、执行循环和条件判断等操作。
以下是一个简单的 Flask 应用示例,展示了如何在 Flask 中设置和使用 Jinja2 模板。

首先,确保你已经安装了 Flask。如果没有安装,可以通过 pip 安装:

pip install Flask

然后,创建一个 Flask 应用并设置一个简单的路由,该路由渲染一个 Jinja2 模板:


from flask importFlask, render_template

app =Flask(__name__)

@app.route('/')
defhome():
# 定义一个字典,包含要传递给模板的数据
    data ={
'title':'我的 Flask 应用',
'users':['Alice','Bob','Charlie']
}
# 渲染模板,并传递数据
return render_template('index.html',**data)

if __name__ =='__main__':
    app.run(debug=True)

接下来,创建一个名为 templates 的文件夹,并在其中创建一个名为 index.html 的文件。这是 Jinja2 模板文件,你将在这里使用从 Flask 应用传递过来的数据。

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<ul>
        {% for user in users %}
<li>{{ user }}</li>
        {% endfor %}
</ul>
</body>
</html>

在这个模板中,{{ title }}{{ user }} 是变量,它们将被替换为从 Flask 应用传递过来的实际值。{% for user in users %} 是一个循环,用于遍历 users 列表。

以下是一些使用 Jinja2 高级功能的示例:

条件判断

你可以在模板中使用 {% if %} 标签来进行条件判断。例如:

{% if users %}
  <ul>
    {% for user in users %}
      <li>{{ user }}</li>
    {% endfor %}
  </ul>
{% else %}
  <p>No users found!</p>
{% endif %}

宏(Macros)

宏允许你定义可重用的模板片段。例如:

{% macro input(name, value='', type='text') %}
  <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

{{ input('username') }}
{{ input('password', type='password') }}

过滤器(Filters)

过滤器可以用于修改变量的输出。例如,你可以使用内置的 upper 过滤器将文本转换为大写:

{{ 'hello world' | upper }}

你也可以定义自己的过滤器,并在 Flask 应用中注册它们。

继承

Jinja2 支持模板继承,这使得你可以创建一个基本的“骨架”模板,并定义可在多个页面中重用的块。例如:

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} - My Flask App</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

<!-- index.html -->
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<h1>Welcome to My Flask App!</h1>
{% endblock %}

在这个例子中,index.html 继承自 base.html,并覆盖了 title 和 content 块。这样,你就可以在多个页面之间共享通用的 HTML 结构,同时只在需要的地方插入特定的内容。

以下是一些额外的点,你可能会发现它们在你的 Flask 应用中很有用:

包含(Includes)

你可以使用 {% include %} 标签来包含其他模板的内容。这在你想要在多个模板之间共享某些 HTML 片段时非常有用。例如:

<!-- header.html -->
<header>
  <h1>My Flask App</h1>
</header>

<!-- index.html -->
{% include 'header.html' %}
<main>
  <p>Welcome to the home page!</p>
</main>

全局变量

你可以在 Flask 应用中定义全局变量,并在所有模板中使用它们。例如:

@app.before_request
def before_request():
    g.user = current_user  # 假设你有一个获取当前用户的方法

# 在模板中使用
{{ g.user.username }}

模板中的 URL 构建

Jinja2 提供了一个 url_for() 函数,允许你在模板中构建 URL。这对于创建指向其他路由的链接非常有用。例如:

<a href="{{ url_for('user_profile', username='alice') }}">Alice's Profile</a>

静态文件

你可以使用 url_for() 函数与 static 端点来引用静态文件(如 CSS、JavaScript 和图像)。例如:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

国际化与本地化

Jinja2 支持国际化和本地化,允许你创建多语言应用。你可以使用 Flask-Babel 扩展来帮助实现这一点。

自动转义

为了安全起见,Jinja2 默认会自动转义所有变量。这意味着,如果变量包含 HTML,它将被转义以防止 XSS 攻击。
如果你需要插入原始 HTML,可以使用 {{ variable|safe }}

自定义上下文处理器

你可以创建自定义上下文处理器,以便在每次渲染模板时自动提供某些变量。例如:

@app.context_processor
def inject_user():
    return dict(current_user=current_user)  # 假设你有一个获取当前用户的方法

现在,current_user 将在所有模板中可用,而无需显式传递它。

通过利用 Jinja2 的这些功能和技巧,你可以创建更加动态、可维护和安全的 Flask 应用。

标签:title,Flask,HTML,Jinja2,user,模板
From: https://www.cnblogs.com/o-O-oO/p/18377668

相关文章

  • python-flask计算机毕业设计中小学精品课程网络资源系统(程序+开题+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,教育领域正经历着前所未有的变革。互联网技术的普及,使得优质教育资源的共享成为可能,为教育公平与质量提升提供了强......
  • python-flask计算机毕业设计校园疫情检测信息管理系统(程序+开题+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着全球疫情的持续影响,校园作为人员密集、流动性大的特殊场所,其疫情防控工作显得尤为重要。传统的手工记录、纸质申报等管理方式已难以满......
  • Flask开发实战-初识flask
    Flask开发实战-初识FlaskFlask是一个轻量级的可定制框架,使用Python语言编写,较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发,开发人员分工合作,小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。另外,Flask还有很强的定制性,用......
  • 阿里巴巴中间件canal的搭建和使用以及linux命令下使用mail发送html格式的邮件
    一、阿里巴巴中间件canal的搭建和使用    canal可以用来监控数据库数据的变化(binlog日志),从而获得指定数据的变化。canal是应阿里巴巴存在杭州和美国的双机房部署,存在跨机房同步的业务需求时开始逐步的尝试基于数据库的日志解析,获取增量变更进行同步,由此衍生出了增量订阅......
  • 从零开始的HTML之旅
    认识HTMLHTML元素的结构HTML的语言形式为标签(如<p>)包围的HTML元素,如:HTML标签就是一个典型的HTML标签。HTML标签有以下特点:由尖括号包围关键词组成,比如:<p>、<h1>、<div>、<span>等;通常成对出现,比如<div>和</div>,第一个就是开始标签,第二个就是结束标签,要注......
  • html之input标签
    input标签在html中是非常重要的一种标签主要应用场景:‌1.登录表单‌:使用文本框和密码框收集用户名和密码。2‌.注册表单‌:收集用户的个人信息,如姓名、邮箱、地址等。3‌.调查问卷‌:使用单选框和复选框收集用户的选项。‌4.文件上传‌:使用文件上传控件允许用户上传文件。‌学......
  • 基于Python flask的图书借阅管理系统的设计与实现
    基于PythonFlask的图书借阅管理系统旨在为图书馆或类似机构提供一个高效、便捷的管理平台,覆盖图书借阅的各个环节,帮助管理员和读者更好地管理和使用图书资源。该系统采用Python编程语言和Flask框架进行开发,结合了数据库管理、用户认证、数据可视化等技术,确保系统的功能完备和......
  • STHTMLTestRunner
    #-*-coding:utf-8-*-"""ATestRunnerforusewiththePythonunittestingframework.ItgeneratesaHTMLreporttoshowtheresultataglance.Thesimplestwaytousethisistoinvokeitsmainmethod.E.g.importunittestimportHTML......
  • HtmlUnit:自动化操作web页面的java工具
    java有httpclient等工具,可以模拟进行一些web操作,但一些逻辑是在前端js中执行的,此时httpclient就比较困难了。此时可以考虑使用HtmlUnit,模拟出一个浏览器,全程在浏览器中操作。 本文以在百度中输入搜索关键字->点击“百度一下”按钮->打印搜索结果这一过程为例,演示HtmlUnit的......
  • diff.js+diff2html-ui.js 使用实例
    <!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文件差异对比</title>&......