Python Flask 教程：构建你的第一个 Web 应用 – wiki基地

作者： /

Python Flask 教程：构建你的第一个 Web 应用

欢迎来到本 Flask 教程！Flask 是一个轻量级的 Python Web 框架，以其简洁、灵活的特性而闻名。它被称为“微框架”，因为它不包含 ORM（对象关系映射器）或特定的表单验证库等开箱即用的功能，但它允许你轻松集成第三方库。这使得 Flask 非常适合构建小型应用程序、API 以及作为学习 Web 开发的起点。

在本教程中，你将学习如何从零开始构建你的第一个 Flask Web 应用程序，包括：

  • 设置开发环境
  • 创建一个基本的 Flask 应用
  • 使用 HTML 模板渲染动态内容
  • 处理 URL 参数
  • 处理表单提交

1. 准备工作：环境设置

在开始之前，请确保你的系统上安装了 Python 和 pip（Python 的包管理器）。

1.1 创建虚拟环境

强烈建议为每个项目使用虚拟环境。这有助于隔离项目依赖，避免不同项目之间的版本冲突。

打开终端或命令提示符，导航到你的项目目录（例如 my_flask_app），然后运行以下命令：

bash
mkdir my_flask_app
cd my_flask_app
python -m venv venv

1.2 激活虚拟环境

根据你的操作系统，激活虚拟环境的命令有所不同：

  • macOS/Linux:
    bash
    source venv/bin/activate
  • Windows:
    bash
    venv\Scripts\activate

激活后，你的终端提示符前会显示 (venv)，表明你已在虚拟环境中。

1.3 安装 Flask

现在，在激活的虚拟环境中安装 Flask：

bash
pip install Flask

2. 构建你的第一个 Flask 应用

我们将从一个最简单的 Flask 应用程序开始。

2.1 创建 app.py 文件

在你的项目根目录 (my_flask_app/) 下创建一个名为 app.py 的文件，并添加以下代码：

“`python

my_flask_app/app.py

from flask import Flask

创建 Flask 应用程序实例

app = Flask(name)

定义一个路由（URL 路径）

当用户访问根 URL (/) 时，执行 index 函数

@app.route(‘/’)
def index():
return ‘Hello, Flask! 这是我的第一个 Web 应用。’

如果作为主程序运行，启动 Flask 开发服务器

if name == ‘main‘:
app.run(debug=True)
“`

代码解释：

  • from flask import Flask: 导入 Flask 类。
  • app = Flask(__name__): 创建一个 Flask 应用程序实例。__name__ 是一个特殊的 Python 变量，用于确定应用的根目录，以便 Flask 可以找到相关的资源（如模板和静态文件）。
  • @app.route('/'): 这是一个装饰器，它将 index 函数与 URL 路径 / 关联起来。当用户在浏览器中访问你的应用的根 URL 时，index 函数将被调用。
  • def index():: 定义一个 Python 函数，当对应的 URL 被访问时，它会返回一个字符串作为 HTTP 响应。
  • if __name__ == '__main__':: 这确保了 app.run() 仅在 app.py 文件直接运行时才会被调用，而不是在被导入为模块时。
  • app.run(debug=True): 启动 Flask 开发服务器。debug=True 开启了调试模式，这意味着当代码发生改变时服务器会自动重载，并且在出现错误时会提供详细的调试信息。请勿在生产环境中使用调试模式！

2.2 运行应用程序

在终端中，确保你仍然在项目目录中且虚拟环境已激活，然后运行：

bash
python app.py

你应该会看到类似这样的输出：

* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: XXX-XXX-XXX

现在，在你的浏览器中打开 http://127.0.0.1:5000 (或 http://localhost:5000)。你应该会看到文本 Hello, Flask! 这是我的第一个 Web 应用。。

恭喜你！你已经成功运行了你的第一个 Flask 应用程序。

3. 渲染 HTML 模板

直接在 Python 代码中返回 HTML 字符串是不实际的。Flask 使用 Jinja2 模板引擎来渲染 HTML 文件。

3.1 创建 templates 文件夹

在 my_flask_app/ 目录下创建一个名为 templates 的新文件夹。所有你的 HTML 模板文件都将存放在这里。

my_flask_app/
├── venv/
├── app.py
└── templates/

3.2 创建 index.html

在 templates/ 文件夹内创建一个 index.html 文件：

“`html






我的 Flask 应用

欢迎来到我的 Flask 网站！

当前用户是：{{ user_name }}

这是一个由 Jinja2 模板渲染的页面。


“`

注意 {{ user_name }}。这是 Jinja2 的语法，用于在模板中显示从 Flask 视图函数传递过来的变量。

3.3 修改 app.py 使用模板

现在，修改 app.py 来使用 render_template 函数：

“`python

my_flask_app/app.py

from flask import Flask, render_template

app = Flask(name)

@app.route(‘/’)
def index():
# 渲染 index.html 模板，并传递一个名为 ‘user_name’ 的变量
return render_template(‘index.html’, user_name=’游客’)

if name == ‘main‘:
app.run(debug=True)
“`

代码解释：

  • from flask import Flask, render_template: 我们现在导入了 render_template 函数。
  • render_template('index.html', user_name='游客'): 这个函数会自动在 templates 文件夹中查找 index.html 文件，并将其内容作为响应返回。我们还通过 user_name='游客' 传递了一个变量，它将在模板中替换 {{ user_name }}。

保存文件，如果你的服务器还在运行（因为 debug=True），它会自动重载。刷新浏览器，你现在应该会看到渲染的 HTML 页面，其中包含“当前用户是：游客”。

4. 动态 URL：处理 URL 参数

Web 应用程序通常需要根据 URL 中的信息来显示不同的内容。Flask 允许你在路由中定义变量。

4.1 添加一个动态路由

修改 app.py，添加一个新的路由：

“`python

my_flask_app/app.py (只显示修改和新增部分)

from flask import Flask, render_template

app = Flask(name)

@app.route(‘/’)
def index():
return render_template(‘index.html’, user_name=’游客’)

新增路由：/hello/

@app.route(‘/hello/‘)
def hello_user(name):
return render_template(‘hello.html’, name=name)

if name == ‘main‘:
app.run(debug=True)
“`

代码解释：

  • @app.route('/hello/<name>'): 这里 <name> 是一个 URL 变量。当用户访问 /hello/Alice 或 /hello/Bob 时，Alice 或 Bob 将作为 name 参数传递给 hello_user 函数。

4.2 创建 hello.html 模板

在 templates/ 文件夹中创建一个 hello.html 文件：

“`html






你好，{{ name }}

你好，{{ name }}！

欢迎来到你的个性化页面。

返回首页


“`

保存文件。现在，在浏览器中访问 http://127.0.0.1:5000/hello/张三，你会看到一个欢迎张三的页面。访问 http://127.0.0.1:5000/hello/李四，则会欢迎李四。

5. 处理表单：POST 请求

大多数 Web 应用程序都需要与用户进行交互，例如通过表单提交数据。

5.1 修改 index.html 添加表单

更新 templates/index.html，添加一个简单的表单：

“`html






我的 Flask 应用

欢迎来到我的 Flask 网站！

当前用户是：{{ user_name }}

这是一个由 Jinja2 模板渲染的页面。

用户登录




{% if message %}

{{ message }}

{% endif %}

“`

我们添加了一个简单的登录表单，其 action 指向 /login URL，method 设置为 post。还添加了一个条件语句 {% if message %} 来显示登录失败时的消息。

5.2 修改 app.py 处理表单提交

现在，修改 app.py 来处理 /login 路由的 POST 请求：

“`python

my_flask_app/app.py (只显示修改和新增部分)

from flask import Flask, render_template, request, redirect, url_for

app = Flask(name)

@app.route(‘/’)
def index():
return render_template(‘index.html’, user_name=’游客’)

@app.route(‘/hello/‘)
def hello_user(name):
return render_template(‘hello.html’, name=name)

新增路由：处理登录表单

@app.route(‘/login’, methods=[‘GET’, ‘POST’])
def login():
if request.method == ‘POST’:
username = request.form[‘username’]
password = request.form[‘password’]

    # 简单的验证逻辑
    if username == 'admin' and password == 'password123':
        # 登录成功，重定向到个性化欢迎页面
        return redirect(url_for('hello_user', name=username))
    else:
        # 登录失败，重新渲染首页并显示错误消息
        return render_template('index.html', user_name='游客', message='用户名或密码错误！')

# 如果是 GET 请求，通常是直接访问 /login，我们重定向回首页
return redirect(url_for('index'))

if name == ‘main‘:
app.run(debug=True)
“`

代码解释：

  • from flask import Flask, render_template, request, redirect, url_for: 我们导入了 request 对象来访问传入的请求数据，redirect 用于重定向，url_for 用于根据函数名生成 URL（这比硬编码 URL 更健壮）。
  • @app.route('/login', methods=['GET', 'POST']): 这个路由现在可以响应 GET 和 POST 请求。
  • if request.method == 'POST':: 检查请求方法是否为 POST。
  • username = request.form['username']: request.form 是一个字典状对象，包含了表单提交的所有数据。我们通过 name 属性（在 HTML 输入字段中定义）来获取值。
  • redirect(url_for('hello_user', name=username)): 如果登录成功，我们使用 redirect 将用户重定向到 hello_user 函数对应的 URL，并传递用户名。url_for 是一个非常有用的函数，它接收视图函数的名称作为第一个参数，并可以接收关键字参数来填充 URL 变量。
  • return render_template('index.html', user_name='游客', message='用户名或密码错误！'): 如果登录失败，我们重新渲染 index.html 并传递一个错误消息。

保存文件并刷新浏览器。现在你可以尝试使用表单：
* 输入 admin 作为用户名，password123 作为密码，然后点击登录。你应该会被重定向到 http://127.0.0.1:5000/hello/admin。
* 输入其他用户名或密码，然后点击登录。你应该会回到首页，并看到“用户名或密码错误！”的消息。

总结与下一步

恭喜你！你已经成功地构建了一个包含以下功能的 Flask Web 应用程序：

  • 基本应用程序设置
  • 使用 Jinja2 模板渲染 HTML
  • 处理动态 URL
  • 处理表单提交

这只是 Flask 世界的冰山一角。你可以进一步探索以下主题：

  • 静态文件: 如何提供 CSS、JavaScript 和图片文件。
  • 数据库集成: 使用 SQLAlchemy 或其他 ORM 连接数据库。
  • 蓝图 (Blueprints): 组织大型应用程序的方式。
  • 会话 (Sessions): 存储用户会话数据。
  • 消息闪现 (Flash Messages): 显示一次性通知。
  • 表单验证: 使用 Flask-WTF 等扩展进行更强大的表单处理。
  • 部署: 如何将你的 Flask 应用部署到生产服务器上。

Flask 社区非常活跃，拥有丰富的文档和许多有用的扩展。继续学习，你将能够构建各种强大而高效的 Web 应用程序！

滚动至顶部