Flask 中的Jinja2模板引擎_flask jinja2

作者：小丑西瓜9 | 2024-03-05 13:18:22

踩

flask jinja2

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 模板。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/191353