Flask 入门教程:Jinja2模板用法

2023-05-16

Jinja2模板引擎简介

模板

在前面的示例中,视图函数的主要作用是生成请求的响应,这是最简单的请求。实际上,视图函数有两个作用:处理业务逻辑和返回响应内容。在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本。本节学到的模板,它的作用即是承担视图函数的另一个作用,即返回响应内容。

  • 模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取
  • 使用真实值替换变量,再返回最终得到的字符串,这个过程称为“渲染”
  • Flask是使用 Jinja2 这个模板引擎来渲染模板

使用模板的好处:

  • 视图函数只负责业务逻辑和数据处理(业务逻辑方面)
  • 而模板则取到视图函数的数据结果进行展示(视图展示方面)
  • 代码结构清晰,耦合度低

渲染模版函数

  • Flask提供的 render_template 函数封装了该模板引擎
  • render_template 函数的第一个参数是模板的文件名,后面的参数都是键值对,表示模板中变量对应的真实值。

模版使用

{{}} 来表示变量名,这种 {{}} 语法叫做变量代码块

<h1>{{ post.title }}</h1>

代码中传入字符串,列表,字典到模板中

@app.route('/')
def index():
    name = '长弓'
    data = {
        'key':'python讲师',
        'array':[1,2,3,4,5],

        'dicts':{
            'name':'老王',
            'age':12
        },

        "info": [{
            'name': '王昭君',
            'age': 18
        }, {
            'name': '小鲁班',
            'age': 8
        }]
    }
    user = '貂蝉'

    return render_template('index.html',name=name,data=data,user=user)

模板中代码

<!-- 普通取值 -->
<h1>{{ name }}</h1>
<!-- 列表取值 -->
<p>{{ data.array }}</p>
<p>{{ data.array.0 }}</p>
<p>{{ data.array[1] }}</p>
<!-- 字典取值 -->
<p>{{ data.dicts }}</p>
<p>{{ data.dicts['name'] }}</p>
<!-- 列表套字典取值 -->
<p>{{ data.info }}</p>
<p>{{ data.info.0 }}</p>
<p>{{ data.info[1] }}</p>

访问:http://127.0.0.1:5000/ 运行测试

Flask过滤器

过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用 Python 中的某些方法,那么这就用到了过滤器。

使用方式:

  • 过滤器的使用方式为:变量名 | 过滤器。
{{variable | filter(*args)}}
  • 如果没有任何参数传给过滤器,则可以把括号省略掉
{{variable | filter}}
  • 如:``,这个过滤器的作用:把变量variable 的值的首字母转换为大写,其他字母转换为小写

常见内置过滤器

<!-- 字符串转大写 -->
<p>{{ "hello" | upper }}</p>

<!-- 首字母大写 -->
<p>{{ "hello"| capitalize }}</p>

<!-- 字符串反转 -->
<p>{{ "hello" | reverse }}</p>

<p>{{ [1,2,3,4,5,6] | sum }}</p>

<p>{{ [1,2,3,4,5,6] | length }}</p>

<p>{{ [1,2,3,4,5,6] | last }}</p>

<p>{{ [6,2,3,1,5,4] | sort }}</p>

链式调用

在 jinja2 中,过滤器是可以支持链式调用的,示例如下:

{{ "hello world" | reverse | upper }}
自定义过滤器

过滤器的本质是函数。当模板内置的过滤器不能满足需求,可以自定义过滤器。自定义过滤器有两种实现方式:

  • 一种是通过Flask应用对象的 add_template_filter 方法
  • 通过装饰器来实现自定义过滤器

重要:自定义的过滤器名称如果和内置的过滤器重名,会覆盖内置的过滤器。

用装饰器来实现自定义过滤器。装饰器传入的参数是自定义的过滤器名称。

@app.template_filter('lireverse')
def do_listreverse(li):
    # 通过原列表创建一个新列表
    temp_li = list(li)
    # 将新列表进行返转
    temp_li.reverse()
    return temp_li
  • 在 html 中使用该自定义过滤器

    <!-- 自定义过滤器 -->
    <p>{{ [6,2,3,1,5,4] | lireverse }}</p>
    

控制流程

控制代码块主要包含两个:

- if/else if /else / endif
- for / endfor

条件控制

Jinja2 语法中的if语句跟 Python 中的 if 语句相似,后面的布尔值或返回布尔值的表达式将决定代码中的哪个流程会被执行:

<!-- 控制代码块 -->
{% if user == '貂蝉a' %}
<p> 吕布 </p>
{% else %}
<p> 董卓 </p>
{% endif %}

循环控制

{% for post in data.info %}
    <div>
        <h1>{{ post.name}}</h1>
        <h1>{{ post.age}}</h1>
    </div>
{% endfor %}
  • 在一个 for 循环块中你可以访问这些特殊的变量:

    变量描述
    loop.index当前循环迭代的次数(从 1 开始)
    loop.index0当前循环迭代的次数(从 0 开始)
    loop.revindex到循环结束需要迭代的次数(从 1 开始)
    loop.revindex0到循环结束需要迭代的次数(从 0 开始)
    loop.first如果是第一次迭代,为 True 。
    loop.last如果是最后一次迭代,为 True 。
    loop.length序列中的项目数。
    loop.cycle在一串序列间期取值的辅助函数。见下面示例程序。

在循环内部,你可以使用一个叫做loop的特殊变量来获得关于for循环的一些信息

  • 比如:要是我们想知道当前被迭代的元素序号,并模拟Python中的enumerate函数做的事情,则可以使用loop变量的index属性,例如:
{% for post in data.info %}
    <div>
        <h1>{{ loop.index }}</h1>
        <h1>{{ post.name}}</h1>
        <h1>{{ post.age}}</h1>
    </div>
{% endfor %}

模版变量域

set语句:

在模版中,可以使用set语句来定义变量。示例如下:

{% set username='路慢慢其修远兮' %}
<p>座右铭:{{ username }}</p>

<span>座右铭:{{ username }}</span>

一旦定义了这个变量,那么在后面的代码中,都可以使用这个变量,就类似于Python的变量定义是一样的。

with语句:

with语句定义的变量,只能在with语句块中使用,超过了这个代码块,就不能再使用了。示例代码如下:

{% with sex = '女' %}
<p>性别:{{ sex }}</p>
{% endwith %}

<!-- 失效 -->
<p>性别:{{ sex }}</p>  

模板复用

在模板中,可能会遇到以下情况:

  • 多个模板具有完全相同的顶部和底部内容
  • 多个模板中具有相同的模板代码内容,但是内容中部分值不一样
  • 多个模板中具有完全相同的 html 代码块内容

像遇到这种情况,可以使用 JinJa2 模板中的 宏、继承、包含来进行实现

  • 把它看作 Jinja2 中的一个函数,它会返回一个模板或者 HTML 字符串
  • 为了避免反复地编写同样的模板代码,出现代码冗余,可以把他们写成函数以进行重用
  • 需要在多处重复使用的模板代码片段可以写入单独的文件,再包含在所有模板中,以避免重复

定义宏

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

使用宏

{{ input ('长弓' , value='cg') }}

{{ input ('username' , value='貂蝉') }}

输出效果

<input type="text" name="长弓"
    value="cg" class="form-control">
  
<input type="text" name="username"
    value="貂蝉" class="form-control">

案例:

使用宏之前的代码

<form>
    <label>用户名:</label><input type="text" name="username"><br/>
    <label>密码:</label><input type="password" name="password"><br/>
    <label>确认密码:</label><input type="password" name="password2"><br/>
    <label>手机号:</label><input type="text" name="phone"><br/>
    <input type="submit" value="注册">
</form>

定义宏

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

使用宏

<form>
    {{ input("用户名:", name="username") }}<br/>
    {{ input("密码:", type="password", name="password") }}<br/>
    {{ input("确认密码:", type="password", name="password2") }}<br/>
     {{ input("手机号:", name="phone") }}<br/>
    {{ input(type="submit", value="注册") }}
</form>
继承

模板继承是为了重用模板中的公共内容。一般Web开发中,继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写。

  • 标签定义的内容
{% block top %} {% endblock %}

相当于在父模板中挖个坑,当子模板继承父模板时,可以进行填充。

子模板使用 extends 指令声明这个模板继承自哪个模板

父模板中定义的块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()

父模板

定义 base.html

{% block top %}
  顶部菜单
{% endblock top %}

{% block content %}
{% endblock content %}

{% block bottom %}
  底部
{% endblock bottom %}

子模板

extends指令声明这个模板继承自哪

{% extends 'base.html' %}
{% block content %}
 需要填充的内容
{% endblock content %}

模板继承使用时注意点:

  • 不支持多继承
  • 为了便于阅读,在子模板中使用extends时,尽量写在模板的第一行。
  • 不能在一个模板文件中定义多个相同名字的block标签。
  • 当在页面中使用多个block标签时,建议给结束标签起个名字,当多个block嵌套时,阅读性更好。
包含

Jinja2模板中,除了宏和继承,还支持一种代码重用的功能,叫包含(Include)。它的功能是将另一个模板整个加载到当前模板中,并直接渲染。

  • include的使用
{% include 'common.html' %}

包含在使用时,如果包含的模板文件不存在时,程序会抛出TemplateNotFound异常,可以加上 ignore missing 关键字。如果包含的模板文件不存在,会忽略这条include语句。

  • include 的使用加上关键字ignore missing
{% include 'common.html' ignore missing %}

小结

  • 宏(Macro)、继承(Block)、包含(include)均能实现代码的复用。
  • 继承(Block)的本质是代码替换,一般用来实现多个页面中重复不变的区域。
  • 宏(Macro)的功能类似函数,可以传入参数,需要定义、调用。
  • 包含(include)是直接将目标模板文件整个渲染出来。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flask 入门教程:Jinja2模板用法 的相关文章

  • 学习笔记——atoi函数的用法及用C语言实现atoi

    学习笔记 atoi函数的用法及用C语言实现atoi from csdn 库函数原型 xff1a inclue lt stdlib h gt int atoi const char nptr 用法 xff1a 将字符串里的数字字符转化为整形数
  • 互斥信号量和二进制信号量的区别

    互斥信号量和二进制信号量的区别 互斥型信号量必须是同一个任务申请 xff0c 同一个任务释放 xff0c 其他任务释放无效 同一个任务可以递归申请 二进制信号量 xff0c 一个任务申请成功后 xff0c 可以由另一个任务释放 二进制信号量
  • 堆栈区别

    堆和栈的区别 一 预备知识 程序的内存分配 一个由c C 43 43 编译的程序占用的内存分为以下几个部分 1 栈区 xff08 stack xff09 由编译器自动分配释放 xff0c 存放函数的参数值 xff0c 局部变量的值等 其操作
  • 用四个砝码称出1—40克所有重量,四个砝码分别为多少? 梅氏砝码问题

    这个在数学上叫做梅氏砝码问题 xff0c 其叙述如下 xff1a 若有n个砝码 xff0c 重量分别为M1 M2 xff0c Mn 且能称出从1到 xff08 M1 43 M2 43 43 Mn 的所有重量 xff0c 则再加一个砝码 xf
  • Linux 文件夹 压缩 命令

    from http hi baidu com no fear no hope blog item 8182155aec16a7c59d82046d html Linux 文件夹 压缩 命令 2011年08月28日 星期日 22 02 Lin
  • mysql 分库分表

    分表是分散数据库压力的好方法 分表 xff0c 最直白的意思 xff0c 就是将一个表结构分为多个表 xff0c 然后 xff0c 可以再同一个库里 xff0c 也可以放到不同的库 当然 xff0c 首先要知道什么情况下 xff0c 才需要
  • MySQL的数据库引擎的类型

    你能用的数据库引擎取决于mysql在安装的时候是如何被编译的 要添加一个新的引擎 xff0c 就必须重新编译MYSQL 在缺省情况下 xff0c MYSQL支持三个引擎 xff1a ISAM MYISAM和HEAP 另外两种类型INNODB
  • Fast-Planner安装、环境配置以及问题解决

    Fast Planner是香港科技大学沈劭劼老师团队开源的项目 旨在复杂的未知环境中实现四旋翼快速飞行 Fast Planner的github网址为 https github com HKUST Aerial Robotics Fast P
  • 安装双系统出现的一些问题(显卡和无法连接WIFI)

    显卡 问题1 xff1a 安装双系统之后开机黑屏 xff0c 由于显卡引起 xff0c 显卡不支持 解决办法 xff1a 禁用独立显卡或者更改显卡设置 xff0c 进入文件 boot grub grub cfg xff0c 按下图加入标亮字
  • ros没装全,gazebo模型加载不出来

    ros没装全 xff0c gazebo模型加载不出来 安装ros 关于rosdep update 首先换热点试一下 xff0c 在来回切换wifi 按照https blog csdn net yufeng1108 article detai
  • catkin_make遇到 gazebo_ros_controlConfig.cmake相关的问题

    现象 xff1a Could not find a package configuration file provided by gazebo ros control with any of the following names 解决方法
  • 一些vscode自动提示报错

    Pointer to incomplete class type is not allowed 通常是由于类声明了但是没有定义造成的 xff0c 需要做的是在错误文件里面引用下这个类 xff1a class Test xff1b a poi
  • bazel一些用法

    1 编译东西 要在根目录下 xff0c 和WORKSPACE在同一级 例如 xff0c 对于bazelbuild examples 而BUILD文件一般与源文件并列 examples cpp tutorial stage1 main BUI
  • 第十一节std::atomic原子操作

    一 原子操作 1 1原子操作概念例子 互斥量 xff1a 多线程编程中保护共享数据 xff1a 锁 xff0c 操作共享数据 xff0c 开锁 有两个线程 xff0c 对一个变量进行操作 xff0c 这个线程读 xff0c 另一个线程往变量
  • 用Ceres实现PnP

    在ceres中实现PnP优化 xff08 仅优化位姿 xff09 视觉SLAM十四讲 课后习题 ch7 xff08 更新中 xff09
  • deque insert()函数几种用法

    C 43 43 deque insert 用法及代码示例
  • Matplotlib error: No such file or directory: ‘latex‘: ‘latex‘

    Matplotlib error No such file or directory latex latex span class token function sudo span apt span class token function
  • 在ROS下Intel RealSense D435i 驱动的安装,避免踩坑,避免缺少imu话题等各种问题(适用于D400系列、SR300和T265跟踪模块等)

    版权声明 本文为博主原创文章 未经博主允许不得转载 https blog csdn net AnChenliang 1002 article details 109454465 目录 背景 方法1 使用apt安装 不建议使用此方法 了解一下
  • wsl作为开发主机与开发板联调

    linux开发经历记录 wsl作为开发主机与开发板联调 uboot使用nfs网络挂载时使用hanewin搭建win10的nfs servers 背景介绍 小白学习linux开学 xff0c 不想用VM虚拟机作为开发平台 xff0c 恰好了解
  • weka中文乱码解决办法

    由于weka的默认字符集编码是Cp1252 xff0c 所以如果你导入的数据中有中文字符 xff0c 就会出现乱码的情况 xff0c 所以需要weka的RunWeka ini文件 将cp1252替换成你的数据对应的字符集编码 xff0c 比

随机推荐

  • 动态库和静态库的区别

    静态库 xff1a 这类库的名字一般是libxxx a xff1b 1 利用静态函数库编译成的文件比较大 xff0c 因为整个函数库的所有数据都会被整合进目标代码中 xff0c 他的优点就显而易见了 xff0c 2 即编译后的执行程序不需要
  • 重复数据删除技术(Data Deduplication)

    我相信所有人都会同意 xff0c 数据存储正在以飞快地 xff0c 甚至是令人震惊的速度在增长 这意味着为了不影响普通用户的正常使用 xff0c 存储管理员们不得不加班加点地在幕后 工作着 他们的鲜为人知的工作包括 xff1a 配额管理 x
  • TCP/IP协议

    TCP IP 协议栈是一系列网络协议的总和 xff0c 是构成网络通信的核心骨架 xff0c 它定义了电子设备如何连入因特网 xff0c 以及数据如何在它们之间进行传输 TCP IP 协议采用4层结构 xff0c 即应用层 传输层 网络层和
  • 趣谈网络协议-云计算中的协议

  • ros里Catkin的CMakelists/package.xml

    Catkin是基于CMake的编译构建系统 xff0c 具有以下特点 xff1a Catkin沿用了包管理的传统像 find package 基础结构 pkg config扩展了CMake xff0c 例如 软件包编译后无需安装就可使用 自
  • js根据坐标进行图片截图,获取图片上指定位置的截图

    根据坐标截取图片上指定的区域 xff0c 坐标可以是规则的图片截取 xff0c 也可以是不规则的图片截取 实现思路 xff1a 规则裁剪自然不用多说 xff0c 我们使用画布的getImageData x y width height 方法
  • 浅谈APM系列-----update_flight_mode(ModeAltHold)

    update flight mode xff08 ModeAltHold xff09 这里只看ModeAltHold 位置 xff1a X ardupilot ArduCopter mode cpp update flight mode c
  • 多态的总结

    对于多态 xff0c 可以总结以下几点 xff1a 一 使用父类类型的引用指向子类的对象 xff1b 二 该引用只能调用父类中定义的方法和变量 xff1b 三 如果子类中重写了父类中的一个方法 xff0c 那么在调用这个方法的时候 xff0
  • android 深度图

    在 Android开发中自定义控件是一个范围很广的话题 xff0c 讲起自定义控件 xff0c 从广度上来划分的话 xff0c 大体上可以划分为 xff1a View ViewGroup的绘制事件分发各种动画效果滚动嵌套机制还有涉及到相关的
  • 在配置Intel realsense (D435i)时遇到的问题

    1 第一次配置相机时 配置完成后 运行相机报以下错误 02 11 20 50 18 674 WARNING 140196725126912 messenger libusb cpp 42 control transfer returned
  • Robosense M1/速腾半固态激光雷达M1 保姆级教程1-如何连接雷达?

    引言 当我们拿到M1雷达时 xff0c 可能会因为激光雷达是一个新的设备 xff0c 没有用过 xff0c 而感到紧张和局促 没有关系 xff0c 通过阅读文本 xff0c 可以让你轻而易举的上手使用激光雷达 1认识M1接口 图中较粗的接口
  • PMP(一):知识要点汇总

    开篇 首先恭喜自己成为 项目管理专业人士 的一员 xff0c 本专题旨在帮助自己重新梳理整个的知识体系以及后续对于项目管理的理解与尝试 系列一 xff1a 知识要点汇总 以下内容是我在备考和考完后对于部分知识要点的一个汇总和总结 xff0c
  • git在vscode中的使用

    git在vscode中的使用 vscode 作为前端使用较多的软件 xff0c 平时的git操作不可避免 xff0c 但是利用vscode自带的功能和插件 xff0c 可以让我们的工作效率提高不少 项目准备 直接clone span cla
  • 获利空间看刘嘉玲理论来看;乐扣乐扣尽量靠近k

    i tiboo cn 1768805 i tiboo cn 1768806 i tiboo cn 1768807 i tiboo cn 1768810 i tiboo cn 1768813
  • 我见过最清晰的--理解梯度,散度,旋度

    作者 xff1a FRANK WANG 链接 xff1a https www zhihu com question 24074028 answer 26657334 来源 xff1a 知乎 梯度 运算的对像是纯量 运算出来的结果会是向量在一
  • 视觉应用工程师-环境安装教学视频-Mac系统其他操作

    立即学习 https edu csdn net course play 29993 432706 utm source 61 blogtoedu Mac系统安装miniconda搭建深度学习环境 安装 Conda是一个开源的包 环境管理器
  • Windows 环境下安装Redis 5.0.x 服务图文教程

    Windows 环境下安装Redis 5 0 x 服务图文教程 Redis官网并没有提供windows的安装包 xff0c github有第三方制作的windows安装包 下载地址 xff1a https github com tporad
  • Python 爬虫+可视化,手把手教你使用 Python 爬取 JD 网站并且可视化展示

    当你看到别人使用 Python 网络爬虫做出一些高大上的项目你是否也有那么一点点的心动 xff1f 羡慕别人用几行简单的代码就能获取到自己想要的数据 xff1f 羡慕别人用几行代码就能做出优美的可视化图案 xff1f 我将使用最新 Pyth
  • 推荐系统实践:基于数据集MovieLens构造简单推荐系统

    摘要 本文基于 MovieLens 数据集构造了用户 电影项目评价矩阵 xff0c 并基于评价矩阵计算两用户间的相似度 xff0c 取出相似度最高的 N 个用户作为候选用户序列 接着筛选出这 N 个候选用户的高分电影项目且当前用户尚未观看
  • Flask 入门教程:Jinja2模板用法

    Jinja2模板引擎简介 模板 在前面的示例中 xff0c 视图函数的主要作用是生成请求的响应 xff0c 这是最简单的请求 实际上 xff0c 视图函数有两个作用 xff1a 处理业务逻辑和返回响应内容 在大型应用中 xff0c 把业务逻