Flask 如何使用Flask将数据传递到HTML页面

在本文中，我们将介绍如何使用Flask框架将数据传递到HTML页面。Flask是一个轻量级的Python Web框架，它提供了用于构建Web应用程序的简单而灵活的工具。

Flask框架允许我们使用模板引擎将动态数据渲染到HTML页面中。传递数据到HTML页面的主要方法有两种：使用上下文变量和使用模板继承。

阅读更多：Flask 教程

1. 使用上下文变量

Flask框架允许我们在视图函数中定义变量，并将这些变量传递给渲染模板的函数。以下是一个示例：

from flask import Flask, render_template

app = Flask(__name__)

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

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

在上述代码中，我们在视图函数index中定义了一个变量username，然后在render_template函数中将其传递给index.html模板。在HTML模板中，我们可以使用{{ name }}来获取传递的变量值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flask传递数据到HTML页面</title>
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
</body>
</html>

在上面的HTML代码中，我们使用{{ name }}来显示传递的变量值。当用户访问该路由时，Flask将渲染这个模板，并将name变量替换为实际的值。

2. 使用模板继承

除了通过上下文变量传递数据，Flask还提供了模板继承的机制。在这种情况下，我们可以创建一个基本模板，然后扩展它来创建其他页面，同时传递特定的数据。

下面是一个示例：

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

在上述代码中，我们定义了两个路由函数index和about，它们分别渲染index.html和about.html模板。

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flask模板继承</title>
</head>
<body>

{% block content %}
{% endblock %}

</body>
</html>

<!-- index.html -->
{% extends 'base.html' %}

{% block content %}
    <h1>Welcome to the index page!</h1>
{% endblock %}

<!-- about.html -->
{% extends 'base.html' %}

{% block content %}
    <h1>About Us</h1>
    <p>This is the about page.</p>
{% endblock %}

在上面的代码中，base.html是基本模板，{% block content %}{% endblock %}定义了一个占位符，其他页面可以在这个位置填充自己的内容。在index.html和about.html中，我们使用{% extends 'base.html' %}来扩展基本模板，并在{% block content %}{% endblock %}块中填充内容。

总结

通过上述示例，我们了解了如何使用Flask框架将数据传递到HTML页面的两种方法：使用上下文变量和使用模板继承。上下文变量方法适用于需要在视图函数中动态生成数据的情况，而模板继承方法适用于需要在不同的页面之间共享相同的布局和结构的情况。根据你的实际需求，选择适合的方法来传递数据到HTML页面。Flask框架的灵活性和优雅的设计使得Web开发变得更加简单和便捷。