Python Flask 入门：手把手教你搭建Web应用 – wiki词典

作者： /

“`markdown

Python Flask 入门：手把手教你搭建Web应用

1. 引言

在当今的Web开发领域，有众多框架可供选择。对于Python开发者而言，Flask是一个轻量级、灵活且功能强大的Web框架。与Django这类“大而全”的框架不同，Flask被称为“微框架”，它只提供Web应用开发最核心的功能，允许开发者根据项目需求自由选择扩展和工具。

本教程将手把手引导你从零开始，搭建一个基本的Flask Web应用，涵盖环境设置、基本路由、模板使用、静态文件服务以及表单处理等核心概念。无论你是Web开发新手，还是希望用Python快速构建小型应用的开发者，这篇教程都将为你提供清晰的指引。

让我们一起踏上Flask的学习之旅吧！

2. 前置条件 (Prerequisites)

在开始之前，请确保你的系统满足以下条件：

  • Python 3.6+: Flask 推荐使用 Python 3.6 或更高版本。你可以从 Python官网 下载并安装最新版本。
    • 安装时，请务必勾选“Add Python to PATH”选项，这样你就可以在命令行中直接使用 python 和 pip 命令了。
  • pip: Python的包管理工具。通常情况下，安装Python时会自带pip。你可以在命令行中运行 pip --version 来验证是否安装成功。如果未安装，可以参考pip的官方文档进行安装。

验证Python和pip是否安装成功的命令：

bash
python --version
pip --version

3. 设置开发环境

为了避免项目之间的依赖冲突，强烈建议为每个Python项目使用独立的虚拟环境 (Virtual Environment)。虚拟环境允许你为每个项目安装特定的包，而不会影响到全局Python环境或其他项目的包。

  1. 创建项目文件夹:
    首先，创建一个用于存放你的Flask项目的文件夹。例如，命名为 my_flask_app。

    bash
    mkdir my_flask_app
    cd my_flask_app

  2. 创建虚拟环境:
    在项目文件夹内，运行以下命令创建一个名为 venv 的虚拟环境。

    bash
    python -m venv venv

  3. 激活虚拟环境:
    创建虚拟环境后，你需要激活它。激活虚拟环境后，所有通过 pip 安装的包都将只存在于这个环境中。

    • Windows:
      bash
      venv\Scripts\activate
    • macOS/Linux:
      bash
      source venv/bin/activate
      激活成功后，你的命令行提示符前会显示 (venv)，表示你已进入虚拟环境。

  4. 安装Flask:
    在虚拟环境激活状态下，安装Flask。

    bash
    pip install Flask

  5. 验证Flask安装:
    你可以尝试在Python解释器中导入Flask来验证是否安装成功。

    bash
    python -c "import flask; print(flask.__version__)"
    如果显示了Flask的版本号，则表示安装成功。

现在，你的开发环境已经准备就绪！

4. 你的第一个 Flask 应用：”Hello, World!”

让我们来编写你的第一个Flask应用，一个经典的“Hello, World!”。

  1. 创建应用文件:
    在你的 my_flask_app 项目文件夹中，创建一个名为 app.py 的文件。

    “`python

    app.py

    from flask import Flask

    创建一个Flask应用实例

    name 是Python内置变量，代表当前模块的名称。

    Flask用它来确定应用根目录，以便找到资源文件。

    app = Flask(name)

    定义一个路由，当用户访问应用的根URL (‘/’) 时，会执行这个函数

    @app.route(‘/’)
    def hello_world():
    return ‘Hello, World! This is my first Flask app!’

    运行应用

    if name == ‘main‘: 确保只有在直接运行此文件时才启动服务器

    if name == ‘main‘:
    app.run(debug=True) # debug=True 会在代码更改时自动重载，并提供调试信息
    “`

  2. 运行应用:
    确保你仍然在 my_flask_app 目录下并且虚拟环境已激活。然后在命令行中运行：

    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
    * Caller action will be executed in 2 seconds
    * Debugger is active!
    * Debugger PIN: XXX-XXX-XXX

  3. 访问应用:
    打开你的Web浏览器，访问 http://127.0.0.1:5000。
    你将会看到页面上显示 Hello, World! This is my first Flask app!。

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

5. 理解基本的 Flask 应用结构

你刚刚编写的 app.py 文件虽然简单，但它包含了Flask应用的核心要素。让我们来剖析一下：

  • from flask import Flask: 从 flask 模块中导入 Flask 类。这是创建所有Flask应用的基础。
  • app = Flask(__name__): 创建一个 Flask 类的实例，这将是你的Web应用对象。__name__ 是Python的内置变量，用于指定模块的名称。Flask使用它来确定应用根目录，以便找到模板和静态文件等资源。
  • @app.route('/'): 这是一个装饰器 (Decorator)。它告诉Flask，当用户访问应用的根URL (/) 时，应该调用其下方的 hello_world() 函数。这就是所谓的路由 (Routing)。
  • def hello_world(): return 'Hello, World!...': 这是一个视图函数 (View Function)。当对应的路由被触发时，这个函数就会被执行。它返回的字符串会作为HTTP响应发送给用户的浏览器。
  • if __name__ == '__main__': app.run(debug=True): 这段代码确保只有在直接运行 app.py 文件时（而不是作为模块被导入时），才会启动开发服务器。app.run() 启动了Flask的内置开发服务器。
    • debug=True：开启调试模式。在开发阶段这非常有用，因为它会在你的代码发生更改时自动重载应用，并且在出现错误时提供一个交互式的调试器。请注意，在生产环境中永远不要开启 debug=True，因为它会暴露敏感信息。

这个简单的结构展示了Flask如何通过路由将URL请求映射到Python函数，并将函数的返回值作为HTTP响应。

6. 路由 (Routing)

路由是Web应用中非常核心的概念，它负责将用户请求的URL映射到服务器上特定的处理函数（视图函数）。Flask通过 @app.route() 装饰器来定义路由。

  1. 简单路由:
    这是我们已经看到的例子。当用户访问 / 时，index() 函数会被执行。

    python
    @app.route('/')
    def index():
    return '这是首页!'

  2. 带参数的路由:
    你可以在URL中定义变量，Flask会将这些变量作为参数传递给视图函数。

    “`python
    @app.route(‘/user/‘)
    def show_user_profile(username):
    # show the user profile for that user
    return f’用户: {username}’

    @app.route(‘/post/‘)
    def show_post(post_id):
    # show the post with the given id, the id is an integer
    return f’文章ID: {post_id}’
    ``
    在上面的例子中：
    *    : 定义了一个名为username的字符串参数。
    *    : 定义了一个名为post_id的整数参数。Flask支持多种变量类型，如string(默认),int,float,path,uuid`。

  3. HTTP 方法限制:
    默认情况下，Flask路由会响应 GET 请求。你可以通过 methods 参数指定视图函数只响应特定的HTTP方法（如 GET, POST, PUT, DELETE 等）。

    “`python
    from flask import request

    @app.route(‘/login’, methods=[‘GET’, ‘POST’])
    def login():
    if request.method == ‘POST’:
    return ‘处理登录逻辑…’
    else:
    return ‘显示登录表单…’
    ``
    这里，我们导入了    request对象，它包含了当前请求的所有信息。当请求方法为POST时，我们假设会处理表单提交；否则（通常是GET` 请求），会显示登录表单。

完整的 app.py 示例（包含新路由）:

“`python

app.py

from flask import Flask, request

app = Flask(name)

@app.route(‘/’)
def index():
return ‘这是首页!’

@app.route(‘/user/‘)
def show_user_profile(username):
return f’用户: {username}’

@app.route(‘/post/‘)
def show_post(post_id):
return f’文章ID: {post_id}’

@app.route(‘/login’, methods=[‘GET’, ‘POST’])
def login():
if request.method == ‘POST’:
# 假设这里获取表单数据并处理
return ‘处理登录逻辑…’
else:
return ‘这是登录页面 (这里将来会渲染一个登录表单模板)’

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

重启应用后，你可以尝试访问 http://127.0.0.1:5000/user/Alice 或 http://127.0.0.1:5000/post/123，看看效果。

7. 模板 (Jinja2)

目前，我们的应用直接返回字符串作为响应，这对于简单的“Hello, World!”还可以，但对于复杂的HTML页面来说，这样做既不方便也不灵活。在Web开发中，我们通常使用模板引擎来生成动态HTML。Flask默认集成了强大的Jinja2模板引擎。

  1. 创建 templates 文件夹:
    Flask会自动在应用根目录下的 templates 文件夹中寻找模板文件。所以，在 my_flask_app 目录下创建一个名为 templates 的新文件夹。

    my_flask_app/
    ├── venv/
    ├── app.py
    └── templates/
    └── index.html
    └── welcome.html

  2. 创建 index.html 模板:
    在 templates 文件夹中创建 index.html：

    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">
    <title>我的Flask应用 - 首页</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    </head>
    <body>
    <h1>欢迎来到我的Flask应用！</h1>
    <p>这是一个使用Jinja2模板渲染的首页。</p>
    <p>当前用户是：{{ user }}</p>
    <p><a href="{{ url_for('welcome', name='Guest') }}">访问欢迎页</a></p>
    <footer class="footer">
    <p>&copy; 2025 我的Flask应用</p>
    </footer>
    </body>
    </html>
    注意 {{ user }}，这是Jinja2模板的语法，用于显示从Flask视图函数传递过来的变量。

  3. 创建 welcome.html 模板:
    在 templates 文件夹中创建 welcome.html：

    html
    <!-- templates/welcome.html -->
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎页面</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    </head>
    <body>
    <h1>你好, {{ name }}!</h1>
    <p>很高兴见到你。</p>
    <p><a href="{{ url_for('index') }}">返回首页</a></p>
    <footer class="footer">
    <p>&copy; 2025 我的Flask应用</p>
    </footer>
    </body>
    </html>

  4. 修改 app.py 使用模板:
    我们需要从 flask 导入 render_template 函数，并修改视图函数来渲染这些模板。

    “`python

    app.py

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

    app = Flask(name)

    @app.route(‘/’)
    def index():
    return render_template(‘index.html’, user=’访客’) # 传递变量到模板

    @app.route(‘/welcome/‘)
    def welcome(name):
    return render_template(‘welcome.html’, name=name) # 传递URL参数到模板

    保持原来的login路由，但可以简化返回内容以专注于模板

    @app.route(‘/login’, methods=[‘GET’, ‘POST’])
    def login():
    if request.method == ‘POST’:
    # 假设这里获取表单数据并处理
    return ‘登录成功 (这里将来会重定向或渲染一个成功页面)’
    else:
    return ‘这是登录页面 (这里将来会渲染一个登录表单模板)’

    @app.route(‘/post/‘)
    def show_post(post_id):
    # 稍后我们将使用模板来显示文章详情
    return f’文章ID: {post_id}’

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

  5. 运行并测试:
    重启 app.py。

    • 访问 http://127.0.0.1:5000/，你将看到渲染的 index.html 页面，其中“访客”会显示在 {{ user }} 的位置。
    • 点击链接或访问 http://127.0.0.1:5000/welcome/World，你将看到 welcome.html 页面，其中 World 会显示在 {{ name }} 的位置。

这展示了如何使用Jinja2模板将动态数据注入到HTML结构中。

8. 静态文件 (Static Files)

Web应用不仅仅包含动态生成的HTML页面，还需要CSS文件来美化页面，JavaScript文件来实现交互，以及图片等资源。这些文件被称为静态文件 (Static Files)。Flask会自动在应用根目录下的 static 文件夹中寻找这些文件。

  1. 创建 static 文件夹:
    在 my_flask_app 目录下创建一个名为 static 的新文件夹。
    在 static 文件夹内，再创建一个 css 文件夹，并在其中创建 style.css 文件。
    如果需要，还可以在 static 文件夹中放置图片等其他资源。

    my_flask_app/
    ├── venv/
    ├── app.py
    ├── templates/
    │ ├── index.html
    │ └── welcome.html
    └── static/
    └── css/
    └── style.css
    └── images/
    └── flask_logo.png (可选，如果你有图片)

  2. 创建 style.css 文件:
    在 static/css/ 文件夹中创建 style.css，并添加一些简单的样式：

    css
    /* static/css/style.css */
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 20px;
    }
    h1 {
    color: #0056b3;
    }
    p {
    line-height: 1.6;
    }
    .footer {
    margin-top: 30px;
    font-size: 0.8em;
    color: #666;
    }

  3. 修改模板以引入静态文件:
    现在，我们需要修改 index.html 和 welcome.html 来引入 style.css。在Jinja2模板中，可以使用 url_for() 函数来生成静态文件的URL。

    修改 templates/index.html:

    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">
    <title>我的Flask应用 - 首页</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    </head>
    <body>
    <h1>欢迎来到我的Flask应用！</h1>
    <p>这是一个使用Jinja2模板渲染的首页。</p>
    <p>当前用户是：{{ user }}</p>
    <p><a href="{{ url_for('welcome', name='Guest') }}">访问欢迎页</a></p>
    <footer class="footer">
    <p>&copy; 2025 我的Flask应用</p>
    </footer>
    </body>
    </html>
    这里，url_for('static', filename='css/style.css') 会生成 /static/css/style.css 这样的URL。

    修改 templates/welcome.html:

    html
    <!-- templates/welcome.html -->
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎页面</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    </head>
    <body>
    <h1>你好, {{ name }}!</h1>
    <p>很高兴见到你。</p>
    <p><a href="{{ url_for('index') }}">返回首页</a></p>
    <footer class="footer">
    <p>&copy; 2025 我的Flask应用</p>
    </footer>
    </body>
    </html>
    同时，我们也使用了 url_for('welcome', name='Guest') 和 url_for('index') 来动态生成URL，这样做的好处是，如果你的路由规则改变了，你不需要手动修改所有模板中的URL，Flask会自动处理。

  4. 运行并测试:
    重启 app.py。
    再次访问 http://127.0.0.1:5000/，你会发现页面的样式已经生效了。

9. 表单 (Basic)

Web应用通常需要与用户进行交互，最常见的方式就是通过表单。用户在表单中输入数据，然后提交给服务器进行处理。Flask通过 request 对象来访问表单数据。

我们将创建一个简单的登录表单来演示如何处理用户输入。

  1. 创建 login.html 模板:
    在 templates 文件夹中创建 login.html 文件：

    html
    <!-- templates/login.html -->
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    </head>
    <body>
    <h1>用户登录</h1>
    {% if error %}
    <p style="color: red;"><strong>错误:</strong> {{ error }}</p>
    {% endif %}
    <form action="{{ url_for('login') }}" method="post">
    <p>用户名: <input type="text" name="username"></p>
    <p>密码: <input type="password" name="password"></p>
    <p><input type="submit" value="登录"></p>
    </form>
    <p><a href="{{ url_for('index') }}">返回首页</a></p>
    <footer class="footer">
    <p>&copy; 2025 我的Flask应用</p>
    </footer>
    </body>
    </html>
    * action="{{ url_for('login') }}": 表单提交到 login 路由。
    * method="post": 指定表单使用POST方法提交数据。
    * name="username" 和 name="password": 这些 name 属性是服务器端获取表单数据时使用的键。
    * {% if error %}: Jinja2的条件语句，用于显示错误信息。

  2. 修改 app.py 来处理表单:
    我们将更新 login 视图函数，使其能够渲染 login.html 模板，并在接收到POST请求时处理表单数据。我们还需要导入 redirect 和 url_for 来在成功登录后重定向用户。

    “`python

    app.py

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

    app = Flask(name)

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

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

    @app.route(‘/login’, methods=[‘GET’, ‘POST’])
    def login():
    error = None
    if request.method == ‘POST’:
    if request.form[‘username’] != ‘admin’ or request.form[‘password’] != ‘password’:
    error = ‘无效的用户名或密码’
    else:
    # 模拟登录成功，重定向到欢迎页
    return redirect(url_for(‘welcome’, name=request.form[‘username’]))
    # 对于GET请求或登录失败，渲染登录表单
    return render_template(‘login.html’, error=error)

    @app.route(‘/post/‘)
    def show_post(post_id):
    return f’文章ID: {post_id}’

    if name == ‘main‘:
    app.run(debug=True)
    ``
    *    request.form: 这是一个字典，包含了所有通过POST方法提交的表单数据。
    *    redirect(url_for(‘welcome’, name=request.form[‘username’])): 登录成功后，我们使用redirect函数将用户重定向到welcome` 页面，并传递用户名作为参数。

  3. 运行并测试:
    重启 app.py。

    • 访问 http://127.0.0.1:5000/login。
    • 尝试输入错误的用户名/密码，观察错误信息的显示。
    • 输入 admin 作为用户名，password 作为密码，然后点击登录。你将被重定向到欢迎页面。

通过这个例子，你学会了如何创建表单、使用 request.form 获取数据以及如何进行页面重定向。

10. 运行你的 Flask 应用

在整个教程中，我们多次提到了如何运行Flask应用。这里我们再次总结一下。

  1. 确保虚拟环境已激活:
    在你的项目根目录下（例如 my_flask_app），激活你之前创建的虚拟环境：

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

  2. 设置 Flask 环境变量 (可选，但推荐):
    在更复杂的Flask项目中，或者当你希望使用 flask run 命令时，设置一些环境变量会更方便。

    • 设置应用文件:
      告诉Flask你的应用实例在哪里。如果你的应用文件是 app.py 并且应用实例名为 app (如 app = Flask(__name__))，则可以这样设置：

      • Windows (Command Prompt):
        bash
        set FLASK_APP=app.py
      • Windows (PowerShell):
        bash
        $env:FLASK_APP = "app.py"
      • macOS/Linux:
        bash
        export FLASK_APP=app.py

    • 设置调试模式 (仅开发环境):
      如果你想使用 flask run 并开启调试模式：

      • Windows (Command Prompt):
        bash
        set FLASK_ENV=development
      • Windows (PowerShell):
        bash
        $env:FLASK_ENV = "development"
      • macOS/Linux:
        bash
        export FLASK_ENV=development

  3. 运行应用:

    • 使用 python app.py (我们教程中使用的方法):
      这是最直接的方法，如果你的 app.py 文件中包含了 if __name__ == '__main__': app.run(debug=True) 这段代码，直接运行即可。
      bash
      python app.py
      默认情况下，它会在 http://127.0.0.1:5000/ 运行。

    • 使用 flask run 命令 (推荐):
      这是Flask官方推荐的开发服务器启动方式。它需要你先设置 FLASK_APP 环境变量。如果 FLASK_ENV 设置为 development，它会自动启用调试模式。
      bash
      flask run
      同样，它会在 http://127.0.0.1:5000/ 运行。

  4. 停止应用:
    在命令行窗口中按下 Ctrl+C 即可停止正在运行的Flask开发服务器。

重要提示: 无论是 python app.py 还是 flask run，都使用的是Flask自带的开发服务器，它不适合生产环境。在生产环境中部署Flask应用时，你需要使用Gunicorn、uWSGI等WSGI服务器配合Nginx或Apache等反向代理。

11. 总结

恭喜你！通过本教程，你已经手把手地完成了Flask Web应用的基本搭建，并学习了以下核心概念：

  • 环境设置: 掌握了如何创建和激活Python虚拟环境，以及安装Flask。
  • 应用结构: 理解了Flask应用的基本构成，包括应用实例和视图函数。
  • 路由: 学习了如何使用 @app.route() 装饰器定义URL路由，包括带参数的路由和限制HTTP方法。
  • 模板: 掌握了如何使用Jinja2模板引擎渲染动态HTML页面，以及如何在模板中传递数据和生成URL。
  • 静态文件: 了解了如何组织和引用CSS、JavaScript和图片等静态资源。
  • 表单处理: 初步学会了如何通过 request.form 获取用户提交的表单数据，并进行简单的逻辑处理和页面重定向。
  • 应用运行: 熟悉了两种启动Flask开发服务器的方法。

这只是Flask世界的冰山一角。作为一个“微框架”，Flask通过其简洁的设计和强大的扩展生态系统，为你提供了极大的灵活性。

下一步学习建议:

  • 数据库集成: 学习如何将数据库（如SQLite、PostgreSQL、MySQL）集成到Flask应用中，通常会使用ORM (Object-Relational Mapper) 库如 SQLAlchemy。
  • 用户认证与授权: 实现用户注册、登录、会话管理以及权限控制。Flask-Login 是一个常用的扩展。
  • 表单验证: 使用 WTForms 等库来更优雅地创建和验证表单。
  • 蓝图 (Blueprints): 当应用变得复杂时，使用蓝图来组织你的应用结构，使其模块化。
  • RESTful API: 学习如何构建RESTful API来为前端应用或移动应用提供数据服务。
  • 部署: 了解如何将你的Flask应用部署到生产服务器上，例如使用Gunicorn和Nginx。

希望本教程能为你打开Flask Web开发的大门。祝你在未来的开发旅程中一切顺利！
“`

滚动至顶部