使用 Flask 返回前端 HTML 的详细指南
在使用 Flask 进行 Web 开发时，返回 HTML 文件是常见的需求之一。对于刚入行的小白来说，了解这个过程的每一步至关重要。本文将详细介绍如何使用 Python 的 Flask 框架返回前端 HTML，并提供完整的代码示例和注释。
整体流程
我们可以将实现 Flask 返回前端 HTML 的过程分为以下几个步骤：
| 步骤 | 说明 |
|---|---|
| 1. 安装 Flask | 安装 Flask 如果还没有安装的话 |
| 2. 创建 Flask 应用 | 创建一个 Flask 应用程序对象 |
| 3. 编写 HTML 模板 | 编写 HTML 文件，作为前端展示 |
| 4. 视图函数返回 HTML | 在视图函数中返回 HTML 文件 |
| 5. 运行应用程序 | 启动 Flask 应用并在浏览器中查看结果 |
下面我们将详细介绍每一步的具体操作。
步骤详解
1. 安装 Flask
在开始之前，确保你已经安装了 Flask。如果还没有安装，可以使用以下命令在终端中安装：
pip install Flask
这条命令会通过 pip 包管理器安装 Flask 框架。
2. 创建 Flask 应用
接下来，创建一个新的 Python 文件，比如 app.py，并在其中编写以下代码以创建 Flask 应用程序对象：
from flask import Flask # 从 flask 模块导入 Flask 类
app = Flask(__name__) # 创建 Flask 应用程序实例，__name__ 代表当前模块
这段代码导入 Flask 类并创建一个名为 app 的实例，这是你后续操作的基础。
3. 编写 HTML 模板
为了让 Flask 返回 HTML，你需要在你的项目目录中创建一个名为 templates 的文件夹，并在其中创建一个 HTML 文件，例如 index.html。以下是这个 HTML 文件的简单示例：
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Flask</title>
</head>
<body>
欢迎使用 Flask!
<p>这是一个简单的 Flask 应用程序。</p>
</body>
</html>
这个 HTML 文件表示一简单页面，包含一个标题和一个段落，你可以根据需要修改内容。
4. 视图函数返回 HTML
现在，我们需要创建一个视图函数，这个函数将处理浏览器对根 URL 的请求，并返回 index.html。在 app.py 文件中添加以下代码：
from flask import render_template # 从 flask 导入 render_template 函数
@app.route("/") # 设置路由，根 URL (/) 对应这个视图函数
def home(): # 定义视图函数 home
return render_template("index.html") # 返回 index.html 文件的内容
@app.route("/")表示当用户访问根 URL 时将调用home视图函数。render_template("index.html")函数用于渲染templates文件夹中的index.html文件，并将其作为响应返回给客户端。
5. 运行应用程序
最后，使用以下代码启动 Flask 应用程序：
if __name__ == "__main__": # 确保模块是主程序时才执行
app.run(debug=True) # 启动 Flask 开发服务器，启用调试模式
这里的 app.run(debug=True) 启动了开发服务器，并且启用调试模式，这样可以在代码发生变化或错误时自动重启，并显示错误信息。
完整的代码示例
将上述所有代码包含在 app.py 中，最终的代码如下：
from flask import Flask, render_template # 导入 Flask 类及 render_template 函数
app = Flask(__name__) # 创建 Flask 应用程序实例
@app.route("/") # 设置路由
def home(): # 定义视图函数
return render_template("index.html") # 返回 index.html
if __name__ == "__main__": # 确保是主程序
app.run(debug=True) # 启动应用程序
运行与测试
确保你的项目结构如下：
your_project/
│
├── app.py
└── templates/
└── index.html
在终端中运行 app.py：
python app.py
打开浏览器并访问 ` HTML 页面。
结语
通过以上步骤，你了解了如何使用 Flask 返回前端 HTML。在这个过程中，我们完成了从安装 Flask 到创建一个简单的应用程序的所有步骤。掌握这些基础知识后，你可以继续深入学习 Flask 的更多功能，例如处理表单、连接数据库等。希望这篇文章能够帮助你在 Flask 的学习过程中打下坚实的基础！
