Python Flask 模板传值给前端页面

当使用 Python Flask 框架作为后端开发时，经常会遇到需要将数据从后端模板传递到前端页面的情况。这通常可以通过在模板中使用变量来实现。下面，我们将详细介绍如何使用 Python Flask 模板传值给前端页面，并提供一个简单的示例来说明。

1. 在模板中使用变量

   在 Python Flask 模板中，可以使用变量来存储数据。变量的定义方式与 Python 中的变量定义方式相同，即使用 {{ }} 来表示变量。例如，以下代码在模板中定义了一个名为 name 的变量，并将其值设置为 "John Doe"：

   {{ name = "John Doe" }}
   

2. 在 HTML 中使用变量

   在 HTML 页面中，可以使用变量来显示模板中定义的数据。变量的显示方式与 Python 中的变量显示方式相同，即使用 {{ }} 来表示变量。例如，以下代码在 HTML 页面中显示了模板中定义的 name 变量：

   <p>Name: {{ name }}</p>
   

3. 传递字典或列表

   如果需要传递字典或列表给前端页面，可以在模板中使用 jsonify() 函数将字典或列表转换为 JSON 字符串。然后在 HTML 页面中使用 JavaScript 的 JSON.parse() 函数将 JSON 字符串解析为字典或列表。例如，以下代码在模板中使用 jsonify() 函数将一个字典转换为 JSON 字符串：

   {{ data = jsonify({"name": "John Doe", "age": 30}) }}
   

   然后在 HTML 页面中使用 JavaScript 的 JSON.parse() 函数将 JSON 字符串解析为字典：

   <script>
   var data = JSON.parse('{{ data }}');
   </script>
   

4. 传递对象

   如果需要传递对象给前端页面，可以在模板中使用 tojson() 函数将对象转换为 JSON 字符串。然后在 HTML 页面中使用 JavaScript 的 JSON.parse() 函数将 JSON 字符串解析为对象。例如，以下代码在模板中使用 tojson() 函数将一个对象转换为 JSON 字符串：

   {{ data = tojson(MyObject()) }}
   

   然后在 HTML 页面中使用 JavaScript 的 JSON.parse() 函数将 JSON 字符串解析为对象：

   <script>
   var data = JSON.parse('{{ data }}');
   </script>
   

示例

以下是一个简单的示例，演示如何使用 Python Flask 模板传值给前端页面：

# app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    name = "John Doe"
    return render_template('index.html', name=name)

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

<!-- index.html -->

<p>Name: {{ name }}</p>

当访问 http://127.0.0.1:5000/ 时，浏览器将显示 "Name: John Doe"。

结语

通过本文的介绍，我们了解了如何在 Python Flask 模板中传递数据到前端页面。这为我们提供了在后端和前端之间进行数据交互的便捷方式。希望本文对您有所帮助。