Python Flask 编程 | 连载 07 - Jinja2 语法

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: Python Flask 编程 | 连载 07 - Jinja2 语法

一、Jinja2 语法

模板标签

for循环表达式

在页面中展示列表或者字典数据时常常会用到 for循环,将列表中的每个数据迭代并进行展示,模板中 for 循环 的写法如下:

{% for key, value in data.items() %}
    {{ key }}: {{ value }}
{% else %}
    {# 展示字典为空的提示
{% endfor %}
复制代码

修改 tag 视图函数,增加一个含有字典数据的变量。

@app.route('/tag')
def tag():
    name='stark'
    heros = [
        {'name': 'stark', 'address': 'New York'},
        {'name': 'thor', 'address': 'Asgard'},
        {'name': 'strange', 'address': 'New York'},
        {'name': 'peter', 'address': 'New York Queens'},
    ]
    return render_template('tag.html', name=name, heros=heros)
复制代码

在 tag.html 的 body 标签中增加 for循环 表达式

<h2>for循环的使用</h2>
<ul>
    {% for hero in heros %}
        <li>{{ hero.name }}: {{ hero.address }}</li>
    {% else %}
        <li>NO Data</li>
    {% endfor %}
</ul>
复制代码

在浏览器中访问 /tag

image.png

for 循环 中包含了一个 loop 对象,即指代这次迭代,loop 对象中包含了一些属性如下:

变量 说明
loop.index 当前循环迭代次数从1开始
loop.index0 当前循环迭代次数从0开始
loop.revindex 循环从1开始到结束需要迭代的次数
loop.revindex0 循环从0开始到结束需要迭代的次数
loop.first 如果是第一次迭代,该变量的值为True,否则为False
loop.last 如果是最后一次迭代,该变量的值为True,否则为False
loop.length 迭代序列的长度
loop.cycle 在一串序列间取值的辅助函数

修改 tag.html,在 head 标签中增加样式并在 body 标签中使用 loop 对象的属性。

<head>
    <style>
        .yankee {
            background: yellow;
        }
        .zulu {
            background: red;
        }
    </style>
</head>
<body>
    <h2>for循环中loop对象的使用</h2>
    {% for hero in heros %}
        <p class="{{ loop.cycle('yankee', 'zulu')}}">
            当前是第{{ loop.index }}个元素,索引为{{ loop.index0 }},共{{ loop.length }}个元素
            {% for key, value in hero.items() %}
                {{ key }}: {{ value }}
            {% endfor %}
        </p>
    {% endfor %}
<body>
复制代码

再次访问 /tag

image.png

在 Python 代码中进行 for 循环 时可以通过 continue 或者 break 关键字来跳过当前循环或者停止循环,但是在模板中是没有 continuebreak 关键字的。

在 tag.html 中增加的 for循环,增加条件判断,当符合条件时使用 break 关键字结束循环。

<h2>for循环中使用break关键字</h2>
{% for hero in heros %}
    <p class="{{ loop.cycle('yankee', 'zulu')}}">
        当前是第{{ loop.index }}个元素,索引为{{ loop.index0 }},共{{ loop.length }}个元素
        {% for key, value in hero.items() %}
            {# 符合条件时退出循环,这里的loop.index是循环字典时的loop,注意与上面循环列表的loop进行区分 #}
            {% if loop.index == 2 %}
                {% break %}
            {% endif %}
            {{ key }}: {{ value }}
        {% endfor %}
    </p>
{% endfor %}
复制代码

image.png

此时页面报错出现未知的标签 break,说明在模板中是无法通过 break 来结束循环的。应在模板中添加扩展之后才可以 breakcontinue关键字。

在 app.py 中添加使用扩展的代码

app = Flask(__name__)
# 为模板引擎添加扩展,支持break/continue关键字
app.jinja_env.add_extension('jinja2.ext.loopcontrols')
复制代码

再次访问 /tag

image.png

这一次添加扩展之后,模板中 break 关键字生效。

使用标签渲染出来的 html 代码多了很多空行,这是会占用带宽的,去除这些空行有利于提升性能。

image.png

% 前后添加 - 可以删除空行。

<h2>for循环中使用break关键字</h2>
{% for hero in heros -%}
    <p class="{{ loop.cycle('yankee', 'zulu')}}">
        当前是第{{ loop.index }}个元素,索引为{{ loop.index0 }},共{{ loop.length }}个元素
        {%- for key, value in hero.items() -%}
            {%- if loop.index == 2 -%}
                {% break %}
            {%- endif -%}
            {{ key }}: {{ value }}
        {%- endfor -%}
    </p>
{% endfor %}
复制代码

再次查看页面的源代码,空格已被删除。

image.png

模板中的赋值

在模板中可以通过 set 关键字在 {%%} 中定义一个变量并进行赋值操作,set 关键字常与 with 关键字搭配使用,通过 with 关键字定义代码块,使得 set 关键字定义的变量只能在 with 指定的代码块使用。

{% with %}
{% set classname='zulu' %}
{{ classname }}
{% endwith %}
复制代码

在 tag.html 中增加如下内容:

<h2>set,with关键字的使用</h2>
{% with %}
    {% set classname='zulu' %}
    {# 在with代码块中定义了classname的值为zulu,背景色会变成红色 #}
    <p class="{{ classname }}">使用classname变量的p标签</p>
{% endwith %}
{# 在with代码块外,classname没有值 #}
<p class="{{ classname }}">使用classname变量的p标签</p>
复制代码

在浏览器中访问 /tag

image.png

模板标签特殊字符的转义

模板中的 {{}}{%%} 来进行渲染操作,那么如何在模板中显示这些特殊字符呢?

第一种方式是将这些特殊字符普通字符串处理;

<h2>模板语法中的特殊字符显示</h2>
<p>第一种方式:{{ '{{ value }}, {% if value=="stark" %}' }}</p>
复制代码

image.png

当代码比较多的时候,这种方式处理起来就比较繁琐。

第二种方式是使用 raw 标签;

<h2>模板语法中的特殊字符显示</h2>
<p>第一种方式:{{ '{{ value }}, {% if value=="stark" %}' }}</p>
<p>第二种方式:
    {% raw %}
    {{ value }}, {% if value=="stark" %}
    {% endraw %}
</p>
复制代码

image.png

推荐使用第二种方式。

模板的全局函数

全局函数可以在模板中直接使用,常用的全局函数有:

  • range(),返回一系列连续增加的整数
  • dict(),创建字典
  • cycler(),用于 CSS 类名循环
  • joiner(),字符串拼接
  • url_for(),URL 解析,用于静态文件地址解析、链接跳转地址解析
  • get_flashed_message():会话消息,如登录成功或者更新成功的提示

在 templates 目录下新建一个 global_funcs.html,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>全局函数的使用</title>
</head>
<body>
    <h2>全局函数range()函数的使用</h2>
    {% for i in range(7) %}
        <p>{{ i }}</p>
    {% endfor %}
</body>
</html>
复制代码

在 app.py 中新建一个视图函数 global_funcs,返回 global_funcs.html 页面。

@app.route('/global_funcs')
def gloab_funcs():
    return render_template('global_funcs.html')
复制代码

image.png

模板中的 range 函数返回了从 0~6 之间的整数。

在 global_funcs.html 中新增 cycler 函数;

<head>
    <meta charset="UTF-8"/>
    <title>全局函数的使用</title>
    <style>
        .zulu {
            color: red;
        }
        .yankee {
            color: aqua;
        }
    </style>
</head>
<body>
    <h2>全局函数cycle()函数的使用</h2>
    {% set class_name = cycler('zulu', 'yankee') %}
    {% for i in range(7) %}
        <p class={{ class_name.next() }}>{{ i }}</p>
    {% endfor %}
</body>
复制代码

image.png

cycle 函数轮询 zulu 和 yankee 两个 CSS 属性,给 range 函数生成的 7 个 p 标签填了这两个 CSS 属性。

在模板中使用 url_for 进行解析静态文件地址,新建一个 static 文件夹,并在该文件夹下新增一个 CSS 文件。

body {
    background-color: cadetblue;
}
h2 {
    color: white;
}
复制代码

在 global_funcs.html 页面中的 head 增加引用。

<head>
    <!--其余代码不变-->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
复制代码

image.png

样式发生改变,url_for 函数可以正确解析出 CSS 的路径。如果没有生效,清除缓存即可。

url_for 还可以根据 url name 解析出 url 映射地址。

使用 url_for 首先要给 url 设置一个 url name,在 app.py 中增加代码:

@app.route('/index')
def show_html():
    # 其余代码保持不变
# 给url设置一个name
app.add_url_rule('/index', 'index')
复制代码

修改 global_funcs.html 页面内容如下:

<body>
    <h2>全局函数url_for的使用</h2>
    <a href="{{ url_for('index') }}">INDEX</a>
</body>
复制代码

访问 /global_funcs

image.png

点击INDEX,即可跳转到 /index 页面。

image.png


相关文章
|
23天前
|
存储 缓存 Java
Python高性能编程:五种核心优化技术的原理与Python代码
Python在高性能应用场景中常因执行速度不及C、C++等编译型语言而受质疑,但通过合理利用标准库的优化特性,如`__slots__`机制、列表推导式、`@lru_cache`装饰器和生成器等,可以显著提升代码效率。本文详细介绍了这些实用的性能优化技术,帮助开发者在不牺牲代码质量的前提下提高程序性能。实验数据表明,这些优化方法能在内存使用和计算效率方面带来显著改进,适用于大规模数据处理、递归计算等场景。
58 5
Python高性能编程:五种核心优化技术的原理与Python代码
|
1月前
|
安全 前端开发 数据库
Python 语言结合 Flask 框架来实现一个基础的代购商品管理、用户下单等功能的简易系统
这是一个使用 Python 和 Flask 框架实现的简易代购系统示例,涵盖商品管理、用户注册登录、订单创建及查看等功能。通过 SQLAlchemy 进行数据库操作,支持添加商品、展示详情、库存管理等。用户可注册登录并下单,系统会检查库存并记录订单。此代码仅为参考,实际应用需进一步完善,如增强安全性、集成支付接口、优化界面等。
|
2月前
|
Python
[oeasy]python055_python编程_容易出现的问题_函数名的重新赋值_print_int
本文介绍了Python编程中容易出现的问题,特别是函数名、类名和模块名的重新赋值。通过具体示例展示了将内建函数(如`print`、`int`、`max`)或模块名(如`os`)重新赋值为其他类型后,会导致原有功能失效。例如,将`print`赋值为整数后,无法再用其输出内容;将`int`赋值为整数后,无法再进行类型转换。重新赋值后,这些名称失去了原有的功能,可能导致程序错误。总结指出,已有的函数名、类名和模块名不适合覆盖赋新值,否则会失去原有功能。如果需要使用类似的变量名,建议采用其他命名方式以避免冲突。
52 14
|
2月前
|
分布式计算 大数据 数据处理
技术评测:MaxCompute MaxFrame——阿里云自研分布式计算框架的Python编程接口
随着大数据和人工智能技术的发展,数据处理的需求日益增长。阿里云推出的MaxCompute MaxFrame(简称“MaxFrame”)是一个专为Python开发者设计的分布式计算框架,它不仅支持Python编程接口,还能直接利用MaxCompute的云原生大数据计算资源和服务。本文将通过一系列最佳实践测评,探讨MaxFrame在分布式Pandas处理以及大语言模型数据处理场景中的表现,并分析其在实际工作中的应用潜力。
116 2
|
2月前
|
Unix Linux 程序员
[oeasy]python053_学编程为什么从hello_world_开始
视频介绍了“Hello World”程序的由来及其在编程中的重要性。从贝尔实验室诞生的Unix系统和C语言说起,讲述了“Hello World”作为经典示例的起源和流传过程。文章还探讨了C语言对其他编程语言的影响,以及它在系统编程中的地位。最后总结了“Hello World”、print、小括号和双引号等编程概念的来源。
126 80
|
2月前
|
存储 数据采集 人工智能
Python编程入门:从零基础到实战应用
本文是一篇面向初学者的Python编程教程,旨在帮助读者从零开始学习Python编程语言。文章首先介绍了Python的基本概念和特点,然后通过一个简单的例子展示了如何编写Python代码。接下来,文章详细介绍了Python的数据类型、变量、运算符、控制结构、函数等基本语法知识。最后,文章通过一个实战项目——制作一个简单的计算器程序,帮助读者巩固所学知识并提高编程技能。
|
2月前
|
人工智能 数据挖掘 开发者
探索Python编程之美:从基础到进阶
本文是一篇深入浅出的Python编程指南,旨在帮助初学者理解Python编程的核心概念,并引导他们逐步掌握更高级的技术。文章不仅涵盖了Python的基础语法,还深入探讨了面向对象编程、函数式编程等高级主题。通过丰富的代码示例和实践项目,读者将能够巩固所学知识,提升编程技能。无论你是编程新手还是有一定经验的开发者,这篇文章都将为你提供有价值的参考和启示。让我们一起踏上Python编程的美妙旅程吧!
|
3月前
|
JSON 前端开发 API
使用Python和Flask构建简易Web API
使用Python和Flask构建简易Web API
175 3
|
3月前
|
JSON API 数据格式
使用Python和Flask构建简单的Web API
使用Python和Flask构建简单的Web API
|
3月前
|
开发框架 前端开发 JavaScript
利用Python和Flask构建轻量级Web应用的实战指南
利用Python和Flask构建轻量级Web应用的实战指南
191 2

热门文章

最新文章

推荐镜像

更多