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模板用法 的相关文章

  • 用Python爬取淘宝网商品信息

    用Python爬取淘宝网商品信息 转载请注明出处 网购时经常会用到淘宝网 点我去淘宝但淘宝网上的商品琳琅满目 xff0c 于是我参照中国大学 MOOC的代码写了一个爬取淘宝网商品信息的程序 代码如下 xff1a span class tok
  • 在Ubuntu中,使用minicom抓串口log

    xff08 1 xff09 先插上串口线 xff0c 连上设备 xff08 2 xff09 确定连的是哪个串口 ls dev tty 如果是串口转USB xff0c 然后连到主机上 xff0c 则为 dev ttyUSB 如果是直接串口连到
  • 【问题解决】Ubuntu中双击文件夹没有反应

    我的情况是 xff0c 在Windows下安装的虚拟机 xff0c 虚拟机上跑的Ubuntu16 04 某天突然出现这个bug xff0c 而且开其他的Ubuntu也是这种情况 百度一下 xff0c 我就知道了 xff0c 是在Window
  • 在Chrome中加载未打包的扩展

    Load the extension Extensions that you download from the Chrome Web Store are packaged up as crx files which is great fo
  • 在VMware下创建ubuntu虚拟机,以及与win建立ssh远程连接,全网最全

    一 下载VMware Workstation 官方下载最新版本 xff0c 正常下载即可 二 下载Ubuntu ios镜像文件 下载地址 xff1a https ubuntu com download desktop 三 Ubuntu 配置
  • log4j2.xml 配置文件详解

    一 log4j2介绍 log4j 2 x版本不再支持像1 x中的 properties后缀的文件配置方式 xff0c 2 x版本配置文件后缀名只能为 34 xml 34 json 34 或者 jsn 34 配置文件的格式 xff1a log
  • 个性化设置shell命令提示符

    实际显示效果如下 xff1a 对应的命令如下 xff0c 可以根据自己喜欢的颜色做修改 xff1a PS1 61 39 debian chroot 43 debian chroot 033 01 32m u 64 h 033 00m 033
  • Python安装时import matplotlib.pyplot as plt报错

    xfeff xfeff from six import advance iterator integer types ImportError No module named six 解决办法是 xff1a 把路径如 xff1a C Pyth
  • easyExcel Content-Type: application/vnd.ms-excel 异常

    自测ok xff0c 部署到服务器就报错 一开始以为消息转换器问题 没看cause by导致定位的方向错误 报错一看 缺少so库导致的 本地是m1pro的arm jdk11 再看看线上的dockerfile 用的是FROM openjdk
  • Xfce,KDE和Gome之间的自由切换。

    今天尝试了一下ubuntu 43 xfce 但是发现xfce虽然轻小 xff0c 但是反映和表现并不好 在兼容性上存在很大的问题 于是决定卸掉xfce 鉴于之前使用gnome和uity比较长久的历史 xff0c 今天决定尝试下kde 首先需
  • SimuLink示波器设置多路输入

    PS xff1a matlab版本 xff1a Matlab2019a step1 xff1a 打开 Simulink Library Browser xff0c 搜索 scope xff08 示波器 xff09 xff0c 拖拽入仿真面板
  • Ubuntu22.04上安装Xilinix Vivado 2018.3

    OpenWiFi的默认编译仿真工具是Xilinx Vivado 218 3 在Ubuntu22 04 LTS上安装Xilinx Vivado 2018 3之前 xff0c 首先要安装如下的库 sudo apt get install lib
  • 将应用加到Ubuntu的Favorites

    Ubuntu可以将从它的repo安装的应用程序加到Favorites xff0c 从而方便使用 但有很多应用程序并不是这样安装的 xff0c 就不能直接加到Favorites 下面的方法可以将任何应用加到Favorites 首先生成一个de
  • Build OpenAirInterface

    OpenAirInterface is a famous open source LTE NR implementation Its buidling guide doc BUILD md says that it can be build
  • Android技巧:学习使用GridLayout

    GridLayout是一个非常强大的网格类布局 xff0c 它不但能像TableLayout那样 xff0c 实现网格类布局 xff0c 但它更为强大的地方在于每个Cell的大小可以横向或者纵向拉伸 xff0c 每个Cell的对齐方式也有很
  • 说说Android的MVP模式

    更多精彩博客 安卓应用开发是一个看似容易 xff0c 实则很难的一门苦活儿 上手容易 xff0c 看几天Java xff0c 看看四大组件咋用 xff0c 就能整出个不太难看的页面来 但是想要做好 xff0c 却是很难 系统框架和系统组件封
  • Android实战技巧:如何在ScrollView中嵌套ListView

    前几天因为项目的需要 xff0c 要在一个ListView中放入另一个ListView xff0c 也即在一个ListView的每个ListItem中放入另外一个ListView 但刚开始的时候 xff0c 会发现放入的小ListView会
  • Android实战技巧:ViewStub的应用

    在开发应用程序的时候 xff0c 经常会遇到这样的情况 xff0c 会在运行时动态根据条件来决定显示哪个View或某个布局 那么最通常的想法就是把可能用到的View都写在上面 xff0c 先把它们的可见性都设为View GONE xff0c
  • 深入浅出Windows BATCH

    1 什么是Windows BATCH BATCH也就是批处理文件 xff0c 有时简称为BAT xff0c 是Windows平台上的一种可执行脚本 xff0c 与 nix Linux和Unix 上的Shell脚本和其他的脚本 xff08 P
  • Android实战技巧:深入解析AsyncTask

    AsyncTask的介绍及基本使用方法 关于AsyncTask的介绍和基本使用方法可以参考官方文档和Android实战技巧 xff1a 多线程AsyncTask 这里就不重复 AsyncTask引发的一个问题 上周遇到了一个极其诡异的问题

随机推荐

  • 学习Kotlin,看这一篇就够了

    人生苦短 xff0c 要用Kotlin 这是一种对程序猿更为友好的语言 xff0c 可以减少开发者的工作量 xff0c 原本由开发者干的事情 xff0c 其实很多都可以由编译器实现了 xff0c 这是一种更为高级的语言 Java虽然严谨 x
  • Ubuntu 超给力终端 Terminator(包含超全快捷键列表)

    Terminator是Ubuntu上的一款拥有强大能力的终端app 文章目录 1 Terminator 特性2 Terminator 安装3 Terminator 快捷键一览 1 Terminator 特性 Terminator 与xter
  • Sed与AWK入门教程之Sed篇

    Sed和AWK是 nix命令行里面文本处理的神器 相当的强大 它们都是面向行的 或者说它们处理文本的方式都是一行接着一行的处理 从标准输入或者文件中读取内容 一行一行的执行脚本命令 然后打印输出到标准输出 直到文件结尾 EOF Sed Se
  • 老鸟的Python入门教程

    重要说明 这不是给编程新手准备的教程 如果您入行编程不久 或者还没有使用过1到2门编程语言 请移步 这是有一定编程经验的人准备的 最好是熟知Java或C 懂得命令行 Shell等 总之 这是面向老鸟的 让老鸟快速上手Python教程 为什么
  • MATLAB自编自适应中值滤波算法

    代码原理 xff1a 在噪声密度不是很大的情况下 xff08 根据经验 xff0c 噪声的出现的概率小于0 2 xff09 xff0c 使用中值滤波的效果不错 但是当噪声出现的概率比较高时 xff0c 原来的中值滤波算法就不是很有效了 只有
  • 利用Github免费搭建个人主页(个人博客)

    之前闲着 利用Github搭了个免费的个人主页 colin1994 xyz 这里是我的一个简单主页 xff0c 有兴趣的朋友可以访问看看 先不公开了 今天到家了 趁着闲着 写一篇相关教程记录自己搭建的过程 涉及 Github注册 Githu
  • SpringMVC的配置

    SpringMVC的配置 一 拦截器 1 拦截器的配置 SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor xff0c 拦截器需要重写三个方法 xff0c 注意pr
  • Shell 命令基础

    Shell 命令基础 1 命令格式 常见的 Linux 命令的格式如下 xff1a 命令名称 span class token punctuation span 选项 span class token punctuation span 参数
  • android 深度图

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

    有些表由于过大 xff0c 需要拆分为分区表 xff0c 由于联机转化可能导致一些问题 xff0c 所以可以采用停机rename的方法 xff0c 可大致按照如下步骤操作 xff1a xff08 假设要删除表 xff0c 名称叫做Table
  • Ngnix反向代理内外网访问

    1 Web应用使用Nginx进行代理 xff0c 内网访问则直接是访问的Nginx 80代理服务器 xff0c 在外网则访问不了 xff0c 所以就有一个问题需要映射网络 2 通过路由器配置将Nginx 80代理服务器80端口映射到Web主
  • 解决windows10睡眠期间自动唤醒的问题

    背景 自己在台式机上安装好windows10后启动睡眠功能 xff0c 发现期间会出现自动唤醒的情况 第一步 在 控制面板 中找到 电源选项 xff0c 在所选的选项里 更改计划设置 xff0c 点击 更改高级电源设置 xff0c 点击 睡
  • “ImportError: No module named carla” 问题的解决方案

    参考 https carla readthedocs io en latest ros installation run the ros bridge 问题描述 安装了ROS bridge 后运行时出错 roslaunch carla ro
  • springboot整合websocket(详解、教程、代码)

    springboot整合websocket 教程及代码 大家好 xff0c 我是酷酷的韩 1 websocket定义 WebSocket协议是基于TCP的一种新的网络协议 它实现了浏览器与服务器全双工 full duplex 通信 允许服务
  • JAVA经典面试题附答案(持续更新版)

    文章目录 前言1 JAVA基础2 JVM 知识3 开源框架知识4 操作系统5 多线程6 数据库知识7 最后附一遍持续整理的博客 前言 前言 少年易老学难成 xff0c 一寸光阴不可轻 未觉池塘春草梦 xff0c 阶前梧叶已秋声 朱熹 劝学诗
  • 视觉应用工程师-环境安装教学视频-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 把业务逻