使用 Flask 渲染 HTML 模板的详细指南

Flask 是一个轻量级的 Python Web 框架，因其开发简单、功能强大而广受欢迎。本篇文章将探讨如何使用 Flask 渲染 HTML 模板，帮助你快速创建动态网页。我们将通过示例代码和一些实践场景来详细解析这一过程。

什么是 Flask？

Flask 是一个使用 Python 编写的框架，帮助开发者更加高效地构建 Web 应用。它遵循 WSGI（Web Server Gateway Interface）标准，具有多种功能，比如 URL 路由、表单处理和模板渲染等。

设置 Flask 环境

在开始之前，请确保你已经安装了 Flask。可以使用以下命令通过 pip 安装：

pip install Flask

接下来，我们可以创建一个简单的 Flask 应用来演示模板渲染的基本原理。

创建 Flask 应用

1. 目录结构

首先，我们来建立一个简单的项目目录结构：

my_flask_app/
│
├── app.py
├── templates/
│   └── index.html
└── static/
    └── styles.css
  • app.py：Flask 应用主文件。
  • templates/：存放 HTML 模板的文件夹。
  • static/：存放静态文件（如 CSS、JavaScript）的文件夹。

2. 创建 HTML 模板

在 templates/ 目录下创建一个名为 index.html 的文件，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <title>{{ title }}</title>
</head>
<body>
    欢迎来到 {{ title }}
    <p>这是一个使用 Flask 渲染的 HTML 模板。</p>
</body>
</html>

在这个模板中，我们使用了 Flask 提供的 url_for 和模板变量 title。

3. 编写 Flask 应用代码

接下来在 app.py 中编写 Flask 应用的逻辑：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', title='我的 Flask 应用')

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

在 app.py 中，定义了一个根路由 /，当访问该路由时返回 index.html 模板，并传递一个模板变量 title。

4. 启动 Flask 应用

在终端中运行以下命令启动 Flask 应用：

python app.py

之后访问 ` HTML 页面。

模板的进一步使用

Flask 的模板系统基于 Jinja2，支持条件语句和循环。我们可以在 index.html 中添加表格和更多信息。

1. 添加动态数据

修改 index.html，添加一个简单的数据表格：

<table border="1">
    <thead>
        <tr>
            <th>名称</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        {% for name, age in users.items() %}
        <tr>
            <td>{{ name }}</td>
            <td>{{ age }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

2. 更新 Flask 视图函数

在 app.py 中创建一些示例数据并传递给模板：

@app.route('/')
def index():
    users = {
        '李雷': 28,
        '韩梅梅': 22,
        '张三': 32
    }
    return render_template('index.html', title='我的 Flask 应用', users=users)

3. 结果展示

刷新页面，你将看到一个动态生成的表格，显示了用户的名称和年龄。

使用序列图展示渲染流程

接下来，我们使用 Mermaid 库提供的序列图来展示 Flask 渲染 HTML 模板的基本流程。

sequenceDiagram
    participant User
    participant Flask
    participant Template

    User->>Flask: 请求首页（GET /）
    Flask->>Template: 渲染 index.html
    Template-->>Flask: 返回 HTML 内容
    Flask-->>User: 返回完整的网页

以上序列图展示了用户通过 HTTP 请求 Flaks 应用，Flask 渲染 HTML 模板后，返回给用户完整的网页的过程。

结尾

通过本文，你已经学习了如何在 Flask 中渲染 HTML 模板，并使用动态数据生成网页内容。Flask 的灵活性和易用性使其成为构建 Web 应用的理想选择。希望你能在此基础上继续探索 Flask 的更多功能，构建出更为复杂和强大的 Web 应用！