Flask 中的Jinja2模板引擎

2023-10-26

Flask 中的Jinja2模板引擎

在 Web 项目中,前端的显示效果是通过 HTML 语言来实现的,后端的视图函数将数据或模板文件返回给前端。

前端接收到后端返回的结果后,需要通过模板引擎来渲染页面,控制显示的效果。

在 Flask 框架中,使用的模板引擎是 Jinja2 。

一、模板简介

在后端,视图函数的主要作用是根据请求返回响应。

返回的响应内容可以是数据,前端获取数据后自行处理前端的展示效果。返回结果也可以是一个 HTML 模板文件,前端获取模板文件之后直接进行渲染。

模板是一个包含响应文本的 HTML 文件,可以在模板中用变量表示动态部分,视图函数将具体的值传给模板,模板引擎会根据变量的值进行渲染。

写好模板文件后,视图函数可以直接返回一个模板文件。在视图函数中实现业务逻辑和数据处理(业务逻辑方面),模板获取视图函数传入的数据进行展示(视图展示方面)。

这样,后端的代码和前端的代码可以分开,后端代码是 Python 代码,前端代码是 HTML 代码,两种代码分别写在视图函数和模板文件中。代码结构更加清晰,耦合度低,对于程序员来说,可读性更高。

二、Jinja2简介

Jinja2 是 Flask 框架的两大核心(Jinja2 模板引擎和 Werkzeug WSGI 工具集)之一,在使用 Flask 开发时,可以直接使用 Jinja2 模板引擎 。

Flask 是 Python 实现的 Web 框架中应用最广泛的框架之一,Jinja2 是 Flask 框架内置的模板语言,所以使用也很广泛。

在安装 Flask 框架时,就会默认安装上 Jinja2 模板引擎。

实际使用时,可以先编写好 Jinja2 的模板文件,在模板中定义好接收数据的变量,定义好数据展示的效果。视图函数中处理完业务逻辑之后,将处理好的数据传给模板文件,然后将模板文件返回。这样 Jinja2 模板引擎会将最后的页面渲染成前端展示的页面。

三、Jinja2 模板的使用

接下来,使用 Jinja2 模板引擎来实现一个最简单的页面。

我之前创建了一个叫 FlaskProject 的虚拟环境,项目文件夹也叫 FlaskProject ,使用 PyCharm 打开这个文件夹,进入到这个虚拟环境和项目文件夹中。

虚拟环境安装参考: https://blog.csdn.net/weixin_43790276/article/details/101390737

1. 创建模板文件目录

在 FlaskProject 文件夹下,创建一个 templates 目录,后面编写的模板文件都放在 templates 中。

在 PyCharm 中右键点击 templates 文件夹,然后选择 Mark Directory as ,再点击 Template Folder ,将 templates 文件夹标记成一个模板文件夹。

标记之后会自动进入下面的界面,选择 Python Template Languages ,在右边下拉框里选择 Jinja2 ,设置模板语言为 Jinja2 。

这样设置之后,Flask APP 会默认 templates 目录为模板文件的根目录。也就是说,在 Flask 的视图函数中返回模板文件时,会默认从 templates 开始,根据视图函数中返回的文件路径和模板文件名来找到对应的模板文件,返回给前端。

2. 编写 Jinja2 模板

在 templates 目录下创建一个模板文件 route_one.html ,创建之后,route_one.html 中默认就会有 HTML 语言的标题等代码(如下所示)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

这是一个空的 HTML 页面,现在开始写一个简单的模板文件,改一下 title 内容,写一个 p 标签(如下所示),关于前端的代码,HTML 的标签等,这里就不介绍了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Route</title>
</head>
<body>
<p style="color: blue"> Hello Jinja2 ! </p>
</body>
</html>

这个页面可以直接用浏览器打开,显示一个前端的界面,界面里只有 Hello Jinja2 ! 一行字母。

3. 编写视图函数

在项目文件夹 FlaskProject 下创建一个 flask_route.py 文件,用于编写视图函数,在视图函数中返回刚才编写的模板文件 route_one.html 。

from flask import Flask, render_template


app = Flask(__name__)


@app.route('/')
def index():
    return render_template('route_one.html')


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

Flask提供的 render_template 函数封装了 Jinja2 模板引擎,在视图函数中可以使用 render_template 来返回模板文件。

render_template 函数的第一个参数是模板的文件名,这个参数是必传参数。后面的参数都是键值对,用于给模板中的变量传值,刚才写的模板中没有参数,所以不需要传值。

Flask 实现视图函数参考:https://blog.csdn.net/weixin_43790276/article/details/101855110

4. 启动服务,展示效果

现在写好了模板文件,也写好了返回模板文件的视图函数,可以启动后端服务,发送请求来获取响应页面。

运行 flask_route.py 开启 Flask 后端服务,Flask 默认监听 localhost 的 5000 端口。

在浏览器中访问 http://127.0.0.1:5000/ 或 http://localhost:5000/ ,就会访问 Flask APP 的后端服务器,对应的路由是 / 。在上面定义的视图函数中,/ 路由对应的视图函数是 index() ,在 index() 中返回了模板文件 route_one.html 。

响应结果如下:

经过以上步骤,就已经实现了在 Flask APP 中返回 Jinja2 模板。

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flask 中的Jinja2模板引擎 的相关文章

随机推荐

  • 算法入门之基本数据结构:队列和栈

    大家都知道 算法和数据结构是息息相关 学习数据结构能帮助我们更好的理解算法 理解编程 这是一种编程思想的培养 今天我们要介绍的数据结构是 队列 可以把队列想象成一个双向管道 一边进另一边出 代码示例 public class QueueDe
  • vscode 初始设置、基本操作及html的基本了解

    关于html的基本学习 文章目录 关于html的基本学习 常用插件 1 新建文件夹或者直接将文件夹拖入 2 基本讲解 2 1常用快捷键和html基本讲解 2 2注释 3 基本标签使用 h p和div 3 1演示结果 4 img的使用 5 锚
  • C#图解教程 第二十三章 预处理指令

    预处理指令 什么是预处理指令 基本规则 define和 undef指令 条件编译 条件编译结构 诊断指令 行号指令 区域指令 pragma warning 指令 预处理指令 什么是预处理指令 源代码指定了程序的定义 预处理指令 prepro
  • 【华为OD机试】欢乐的周末【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 小华和小为是很要好的朋友 他们约定周末一起吃饭 通过手机交流 他们在地图上选择了多个聚餐地点 由于自然地形等原因 部分聚餐地点不可达 求小华和小为都能到达的聚餐地点有
  • monkey实战--测试步骤、常用参数、常规monkey命令

    简要步骤 adb devices 了解包名 adb shell monkey p 包名 v 运行次数 多个参数的组合形成不同的用例以求最大的覆盖 当崩溃或无响应时分析monkey日志 常规monkey命令 可直接在项目里使用 adb she
  • 用于文本去重(相似度计算)的Simhash算法学习及python实现(持续学习中)

    Simhash算法学习及python实现 1 Simhash算法是什么 2 Simhash算法思想 3 Simhash算法流程 3 1 分词 3 1 1 短文本的处理 3 1 2 长文本的处理 基于TF IDF的文本关键词抽取方法 3 1
  • 关键帧动画html例子,关键帧

    关键帧 keyframes 在CSS中 keyframes根据你定义的样式规则来更有效的控制动画队列中的每一个中间步骤 或者每一个路径点 用 keyframes来制定动画规则会比使用transition 过渡 来获得更细腻更全面的动画效果
  • 数字化时代-28:入住CSDN一周年

    入住时间 1年 总排名 lt 5000 周排名 1000 粉丝数 gt 1000 积分数 gt 10000 获得赞 gt 1000 访问量 gt 70万 文章数 gt 500 等级 7级
  • 电脑注册表怎么打开?

    电脑想要使用注册表恢复或者查看一些数据 却发现不知道如何打开 不必惊慌 本期解答 电脑注册表怎么打开 两个方法任选一个即可解决 方法一 通过运行打开方式 1 在键盘上使用组合快捷键win R打开 运行 2 在 打开 右侧框内输入 reged
  • ai人工智能的数据服务_建立AI系统的规则-来自数据科学家

    ai人工智能的数据服务 Over the decades start up companies and individuals taking on personal projects have adopted the habit of in
  • qt中int,string,qstring,uint32_t,quuid相互转换

    int和stirng int x string str x atoi str c str str to string x qstring和string相互转换 QString x string xx xx QString x toLocal
  • android recyclerview item间距,自定义RecyclerView.ItemDecoration,实现Item的等间距分割以及分割线效果...

    1 背景 RecyclerView 是谷歌 V7 包下新增的控件 用来替代 ListView 和 GridView 使用的一个控件 在使用的过程中 往往需要使用到 divider 的效果 item 之间的分割线 而 RecyclerView
  • springboot整合多数据源以及多数据源中的事务处理

    前言 本篇文章主要介绍的是springboot整合多数据源以及多数据源事务处理 多数据源就是在同一个项目中连接多个数据库 使用多个数据库可能是由于业务量扩大进行数据库拆分 也可能是根据项目实际情况需要连接多个数据库 比如我之前有个项目 需要
  • 数据预处理的几个方法:白化、去均值、归一化、PCA

    以上转载自 http ufldl stanford edu wiki index php E7 99 BD E5 8C 96 假定数据表示成矩阵为X 其中我们假定X是 N D 维矩阵 N是样本数据量 D为单张图片的数据向量长度 去均值 这是
  • 【Python-Anaconda】如何更改jupyter notebook的代码存储位置

    一 修改默认配置文件 1 在开始菜单找到anaconda prompt 点击进入 输入如下 jupyter notebook generate config 此时显示出默认配置文件的地址 2 根据显示出来的地址找到相应的配置文件jupyte
  • 使用Caffe进行手写数字识别执行流程解析

    之前在 http blog csdn net fengbingchun article details 50987185 中仿照Caffe中的examples实现对手写数字进行识别 这里详细介绍下其执行流程并精简了实现代码 使用Caffe对
  • 位运算与逻辑运算

    位运算是将数据先转化为二进制数补码形式 再逐位 bit 按规则计算 按位与 运算符 规则 全1则1 否则为0 按位或 运算符 规则 全0则0 否则为1 按位非 运算符 规则 遇1则0 遇0则1 按位异或 运算符 规则 相同为0 不同为1 注
  • vue中import引用css和scss的区别 The difference between importing css and scss

    安装scss相关文档 To install scss SCSS 安装 Installation 有时scss不好用不是安装的锅 是import姿势不对 Sometimes the scss bug is not about installa
  • LED 点阵实验~点亮一个点、数字、汉字、图

    LED 点阵简介 LED 点阵是由发光二极管排列组成的显示器件 如下所示为8 8LED 点阵 以 16 16LED 点阵为例 其内部结构图如下所示 16 16 点阵共由 256 个发光二极管组成 且每个发光二极管是放置在行线和列线的交叉点上
  • Flask 中的Jinja2模板引擎

    Flask 中的Jinja2模板引擎 在 Web 项目中 前端的显示效果是通过 HTML 语言来实现的 后端的视图函数将数据或模板文件返回给前端 前端接收到后端返回的结果后 需要通过模板引擎来渲染页面 控制显示的效果 在 Flask 框架中