现已推出！阅读 10 月份发布的新功能和修复。

Visual Studio Code 中的 Flask 教程

Flask 是一个轻量级的 Python Web 应用程序框架，它提供了 URL 路由和页面渲染的基本功能。

Flask 被称为“微”框架，因为它不直接提供表单验证、数据库抽象、身份验证等功能。这些功能由称为 Flask 扩展的特殊 Python 包提供。扩展与 Flask 无缝集成，因此它们看起来就像 Flask 本身的一部分一样。例如，Flask 不提供页面模板引擎，但默认情况下，安装 Flask 会包含 Jinja 模板引擎。为了方便起见，我们通常将这些默认值视为 Flask 的一部分。

在本 Flask 教程中，您将创建一个简单的 Flask 应用程序，其中包含三个页面，这些页面使用一个公共的基本模板。在此过程中，您将体验 Visual Studio Code 的许多功能，包括使用终端、编辑器、调试器、代码段等等。

本 Flask 教程的完整代码项目可以在 GitHub 上找到：python-sample-vscode-flask-tutorial。

如果您遇到任何问题，可以在 Python 扩展讨论问答 中搜索答案或提问。

先决条件

要成功完成本 Flask 教程，您必须执行以下操作（与 常规 Python 教程 中的步骤相同）

  1. 安装 Python 扩展。

  2. 安装 Python 3 版本（本教程为此编写）。选项包括

    • （所有操作系统）从 python.org 下载；通常使用页面上最先出现的“下载”按钮。
    • （Linux）内置的 Python 3 安装效果很好，但要安装其他 Python 包，您必须在终端中运行 sudo apt install python3-pip。
    • （macOS）通过 Homebrew 在 macOS 上安装，使用 brew install python3。
    • （所有操作系统）从 Anaconda 下载（用于数据科学目的）。

  3. 在 Windows 上，确保您的 Python 解释器的位置包含在 PATH 环境变量中。您可以通过在命令提示符中运行 path 来检查位置。如果 Python 解释器的文件夹未包含在内，请打开 Windows 设置，搜索“环境”，选择“编辑您的帐户的环境变量”，然后编辑“路径”变量以包含该文件夹。

为 Flask 教程创建项目环境

在本节中，您将在其中安装 Flask 的虚拟环境中创建虚拟环境。使用虚拟环境可避免将 Flask 安装到全局 Python 环境中，并让您精确控制应用程序中使用的库。

  1. 在您的文件系统上，为本教程创建一个文件夹，例如 hello_flask。

  2. 通过在终端中导航到该文件夹并运行 code . 或通过运行 VS Code 并使用“文件”>“打开文件夹”命令，在 VS Code 中打开此文件夹。

  3. 在 VS Code 中，打开命令面板（“查看”>“命令面板”或 (⇧⌘P (Windows、Linux Ctrl+Shift+P)))。然后选择“Python: 创建环境”命令，以在您的工作区中创建虚拟环境。选择 venv，然后选择要用于创建它的 Python 环境。

    注意：如果您想手动创建环境，或在环境创建过程中遇到错误，请访问 环境 页面。

    Flask tutorial: opening the Command Palette in VS Code

  4. 虚拟环境创建完成后，运行 终端: 创建新的终端 (⌃⇧` (Windows、Linux Ctrl+Shift+`)))（从命令面板），它将创建一个终端，并通过运行其激活脚本自动激活虚拟环境。

    注意：在 Windows 上，如果您的默认终端类型为 PowerShell，您可能会看到一个错误，提示它无法运行 activate.ps1，因为系统上禁用了运行脚本。该错误提供了有关如何允许脚本的信息的链接。否则，请使用“终端: 选择默认配置文件”将“命令提示符”或“Git Bash”设置为您的默认终端。

  5. 通过在 VS Code 终端中运行以下命令，在虚拟环境中安装 Flask

    python -m pip install flask

您现在拥有一个自包含的环境，可以用来编写 Flask 代码。当您使用“终端: 创建新的终端”时，VS Code 会自动激活此环境。如果您打开单独的命令提示符或终端，请通过运行 source .venv/bin/activate（Linux/macOS）或 .venv\Scripts\Activate.ps1（Windows）激活环境。当命令提示符开头显示 (.venv) 时，您就知道环境已激活。

创建并运行一个最小的 Flask 应用程序

  1. 在 VS Code 中，使用“文件”>“新建”菜单，按 Ctrl+N 或使用资源管理器视图中的新建文件图标（如下所示），在项目文件夹中创建一个名为 app.py 的新文件。

    Flask tutorial: new file icon in Explorer View

  2. 在 app.py 中，添加代码以导入 Flask 并创建 Flask 对象的实例。如果您键入以下代码（而不是使用复制粘贴），您可以观察到 VS Code 的 IntelliSense 和自动补全

    from flask import Flask
app = Flask(__name__)

  3. 在app.py中，添加一个返回内容的函数，在本例中是一个简单的字符串，并使用Flask的app.route装饰器将URL路由/映射到该函数。

    @app.route("/")
def home():
    return "Hello, Flask!"

    提示：您可以在同一个函数上使用多个装饰器，每个装饰器占一行，具体取决于您要映射到同一个函数的不同路由的数量。

  4. 保存app.py文件（⌘S (Windows, Linux Ctrl+S)）。

  5. 在集成终端中，通过输入python -m flask run运行应用程序，该命令运行Flask开发服务器。开发服务器默认情况下会查找app.py。当您运行Flask时，您应该看到类似于以下内容的输出。

    (.venv) D:\py\\hello_flask>python -m flask run
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

    如果您看到Flask模块找不到的错误，请确保您已在虚拟环境中运行了python -m pip install flask，如上一节末尾所述。

    此外，如果您想在不同的IP地址或端口上运行开发服务器，请使用主机和端口命令行参数，例如--host=0.0.0.0 --port=80。

  6. 要打开您的默认浏览器以查看渲染的页面，请在终端中Ctrl+click http://127.0.0.1:5000/ URL。

    Flask tutorial: the running app in a browser

  7. 观察到，当您访问类似于/的URL时，调试终端中会显示一条消息，显示HTTP请求。

    127.0.0.1 - - [11/Jul/2018 08:40:15] "GET / HTTP/1.1" 200 -

  8. 使用终端中的Ctrl+C停止应用程序。

提示：当使用与app.py不同的文件名时，例如webapp.py，您需要定义一个名为FLASK_APP的环境变量，并将其值设置为您选择的文件。然后，Flask的开发服务器使用FLASK_APP的值，而不是默认文件app.py。有关更多信息，请参阅Flask 命令行界面。

在调试器中运行应用程序

调试使您有机会在代码的特定行上暂停正在运行的程序。当程序暂停时，您可以检查变量，在调试控制台面板中运行代码，并以其他方式利用调试中描述的功能。运行调试器还会在调试会话开始之前自动保存所有修改过的文件。

在您开始之前：请确保您已在上一节末尾使用终端中的Ctrl+C停止运行的应用程序。如果您在一个终端中让应用程序继续运行，它将继续占用该端口。因此，当您在调试器中使用相同的端口运行应用程序时，原始运行的应用程序将处理所有请求，您将不会在被调试的应用程序中看到任何活动，并且程序不会停止在断点处。换句话说，如果调试器似乎无法正常工作，请确保没有其他应用程序实例仍在运行。

  1. 用以下代码替换app.py的内容，该代码添加了第二个路由和函数，您可以在调试器中逐步执行。

    import re
from datetime import datetime

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return "Hello, Flask!"


@app.route("/hello/<name>")
def hello_there(name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return content

    用于新URL路由/hello/<name>的装饰器定义了一个端点/hello/，它可以接受任何附加值。路由中<和>之间的标识符定义一个传递给函数的变量，可以在您的代码中使用。

    URL路由区分大小写。例如，路由/hello/<name>与/Hello/<name>不同。如果您希望同一个函数处理两者，请为每个变体使用装饰器。

    如代码注释中所述，始终过滤任意用户提供的的信息，以避免对您的应用程序进行各种攻击。在本例中，代码将名称参数过滤为仅包含字母，从而避免注入控制字符、HTML等。（当您在下一节中使用模板时，Flask 会自动进行过滤，您将不需要此代码。）

  2. 通过以下任何一种方式在hello_there函数的第一行代码（now = datetime.now()）设置断点。

    • 将光标放在该行上，按下F9，或者，
    • 将光标放在该行上，选择运行 > 切换断点菜单命令，或者，
    • 直接点击行号左侧的边距（将鼠标悬停在该处时会显示一个淡红色的圆点）。

    断点显示为左侧边距中的一个红色圆点。

    Flask tutorial: a breakpoint set on the first line of the hello_there function

  3. 切换到VS Code中的运行和调试视图（使用左侧的活动栏或⇧⌘D (Windows, Linux Ctrl+Shift+D)）。您可能会看到消息“要自定义运行和调试，请创建一个launch.json文件”。这意味着您还没有包含调试配置的launch.json文件。如果您点击创建一个launch.json文件链接，VS Code可以为您创建它。

    Flask tutorial: initial view of the debug panel

  4. 选择该链接，VS Code将提示您选择一个调试配置。从下拉列表中选择Flask，VS Code将使用Flask运行配置填充一个新的launch.json文件。launch.json文件包含许多调试配置，每个配置都是configuration数组中的一个单独的JSON对象。

  5. 向下滚动并检查配置，该配置名为“Python: Flask”。此配置包含"module": "flask",，它告诉VS Code在启动调试器时使用-m flask运行Python。它还在env属性中定义了FLASK_APP环境变量，以标识启动文件，默认情况下为app.py，但允许您轻松地指定不同的文件。如果您想更改主机和/或端口，可以使用args数组。

    {
    "name": "Python Debugger: Flask",
    "type": "debugpy",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
        "FLASK_DEBUG": "1"
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload"
    ],
    "jinja": true,
    "justMyCode": true
},

    注意：如果您的配置中的env条目包含"FLASK_APP": "${workspaceFolder}/app.py"，请将其更改为"FLASK_APP": "app.py"，如上所示。否则，您可能会遇到诸如“无法导入模块C”之类的错误消息，其中C是您的项目文件夹所在的驱动器盘符。

    注意：一旦创建了launch.json，编辑器中就会出现一个添加配置按钮。该按钮显示要添加到配置列表开头的其他配置的列表。（运行 > 添加配置菜单命令执行相同的操作）。

  6. 保存launch.json（⌘S (Windows, Linux Ctrl+S)）。在调试配置下拉列表中，选择Python: Flask配置。

    Flask tutorial: selecting the Flask debugging configuration

  7. 通过选择运行 > 启动调试菜单命令，或选择列表旁边的绿色启动调试箭头（F5）来启动调试器。

    Flask tutorial: start debugging/continue arrow on the debug toolbar

    观察状态栏的颜色变化，以指示正在进行调试。

    Flask tutorial: appearance of the debugging status bar

    VS Code中还会出现一个调试工具栏（如下所示），其中包含以下顺序的命令：暂停（或继续，F5），单步执行（F10），步入（F11），步出（⇧F11 (Windows, Linux Shift+F11)），重新启动（⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)），和停止（⇧F5 (Windows, Linux Shift+F5)）。有关每个命令的描述，请参阅VS Code 调试。

    Flask tutorial: the VS Code debug toolbar

  8. 输出显示在“Python 调试控制台”终端中。在该终端中Ctrl+click http://127.0.0.1:5000/ 链接以在浏览器中打开该URL。在浏览器的地址栏中，导航到http://127.0.0.1:5000/hello/VSCode。在页面渲染之前，VS Code 会在您设置的断点处暂停程序。断点上的黄色小箭头表示它是下一行要执行的代码。

    Flask tutorial: VS Code paused at a breakpoint

  9. 使用单步执行来执行now = datetime.now() 语句。

  10. 在 VS Code 窗口的左侧，您会看到一个变量窗格，它显示本地变量（例如now）以及参数（例如name）。在下方是监视、调用堆栈和断点窗格（有关详细信息，请参阅VS Code 调试）。在局部变量部分，尝试展开不同的值。您也可以双击值（或使用Enter (Windows, Linux F2)）来修改它们。但是，更改诸如now之类的变量可能会导致程序崩溃。开发人员通常只会在代码没有产生正确值时才修改值，以更正它们。

    Flask tutorial: local variables and arguments in VS Code during debugging

  11. 当程序暂停时，调试控制台面板（与终端面板中的“Python 调试控制台”不同）允许您使用程序的当前状态来试验表达式和尝试代码片段。例如，在您单步执行完now = datetime.now() 行之后，您可能想尝试不同的日期/时间格式。在编辑器中，选择读取now.strftime("%A, %d %B, %Y at %X") 的代码，然后右键单击并选择在调试控制台中求值，将该代码发送到调试控制台，并在那里执行它。

    now.strftime("%A, %d %B, %Y at %X")
'Wednesday, 31 October, 2018 at 18:13:39'

    提示：调试控制台还会显示来自应用程序内部的异常，这些异常可能不会出现在终端中。例如，如果您在运行和调试视图的调用堆栈区域中看到一条“暂停在异常处”的消息，请切换到调试控制台以查看异常消息。

  12. 将该行复制到调试控制台底部的 > 提示符中，然后尝试更改格式

    now.strftime("%a, %d %B, %Y at %X")
'Wed, 31 October, 2018 at 18:13:39'
now.strftime("%a, %d %b, %Y at %X")
'Wed, 31 Oct, 2018 at 18:13:39'
now.strftime("%a, %d %b, %y at %X")
'Wed, 31 Oct, 18 at 18:13:39'

  13. 如果您愿意，可以继续执行几行代码，然后选择继续 (F5) 以让程序运行。浏览器窗口会显示结果

    Flask tutorial: result of the modified program

  14. 更改代码中的行以使用不同的日期时间格式，例如 now.strftime("%a, %d %b, %y at %X")，然后保存文件。Flask 服务器将自动重新加载，这意味着更改将在无需重新启动调试器的情况下应用。刷新浏览器上的页面以查看更新。

  15. 完成后，关闭浏览器并停止调试器。要停止调试器，请使用“停止”工具栏按钮（红色方块）或 运行 > 停止调试 命令 (⇧F5 (Windows、Linux Shift+F5)）。

提示：为了更轻松地重复导航到特定 URL（如 http://127.0.0.1:5000/hello/VSCode），请使用 print 语句输出该 URL。该 URL 将出现在终端中，您可以在其中使用 Ctrl+单击 在浏览器中打开它。

转到定义和预览定义命令

在使用 Flask 或任何其他库时，您可能希望检查这些库本身的代码。VS Code 提供了两个方便的命令，可以直接导航到任何代码中类和其他对象的定义

  • 转到定义 从您的代码跳转到定义对象的代码。例如，在 app.py 中，右键单击 Flask 类（在行 app = Flask(__name__) 中），然后选择 转到定义（或使用 F12），这将导航到 Flask 库中的类定义。

  • 窥视定义 (⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10)，也在右键单击上下文菜单中）类似，但直接在编辑器中显示类定义（在编辑器窗口中腾出空间以避免遮挡任何代码）。按 Esc 关闭窥视窗口或使用右上角的 x。

    Flask tutorial: peek definition showing the Flask class inline

使用模板渲染页面

您在本教程中到目前为止创建的应用程序仅从 Python 代码生成纯文本网页。虽然可以在代码中直接生成 HTML，但开发人员避免这种做法，因为它会使应用程序容易受到 跨站点脚本 (XSS) 攻击。例如，在本教程的 hello_there 函数中，有人可能会想到使用类似 content = "<h1>Hello there, " + clean_name + "!</h1>" 的内容在代码中格式化输出，其中 content 中的结果直接提供给浏览器。此开放允许攻击者将恶意 HTML（包括 JavaScript 代码）放置在最终出现在 clean_name 中的 URL 中，因此最终在浏览器中运行。

一种更好的做法是完全将 HTML 放在代码之外，使用 模板，以便您的代码只关注数据值，而不关注渲染。

  • 模板是一个 HTML 文件，其中包含代码在运行时提供的值的占位符。模板引擎在渲染页面时负责进行替换。因此，代码只关注数据值，模板只关注标记。
  • Flask 的默认模板引擎是 Jinja，它在安装 Flask 时会自动安装。该引擎提供了灵活的选项，包括自动转义（以防止 XSS 攻击）和模板继承。使用继承，您可以定义一个包含公共标记的基本页面，然后在其基础上构建页面特定的添加内容。

在本节中，您将使用模板创建一个页面。在接下来的部分中，您将配置应用程序以提供静态文件，然后为应用程序创建多个页面，每个页面都包含来自基本模板的导航栏。

  1. 在 hello_flask 文件夹中，创建一个名为 templates 的文件夹，这是 Flask 默认情况下查找模板的位置。

  2. 在 templates 文件夹中，创建一个名为 hello_there.html 的文件，其内容如下。此模板包含两个名为“name”和“date”的占位符，它们由一对花括号 {{ 和 }} 分隔。如您所见，您也可以直接在模板中包含格式化代码

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Flask</title>
    </head>
    <body>
        {%if name %}
            <strong>Hello there, {{ name }}!</strong> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
        {% else %}
            What's your name? Provide it after /hello/ in the URL.
        {% endif %}
    </body>
</html>

    提示：Flask 开发人员通常使用 flask-babel 扩展进行日期格式化，而不是 strftime，因为 flask-babel 会考虑语言环境和时区。

  3. 在 app.py 中，在文件顶部附近导入 Flask 的 render_template 函数

    from flask import render_template

  4. 同样在 app.py 中，修改 hello_there 函数以使用 render_template 加载模板并应用命名值（并添加一条路由以识别没有名称的情况）。render_template 假设第一个参数相对于 templates 文件夹。通常，开发人员将模板命名为与使用它们的函数相同的名称，但匹配的名称不是必需的，因为您始终在代码中引用确切的文件名。

    @app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

    您可以看到，代码现在简单得多，并且只关注数据值，因为标记和格式化都包含在模板中。

  5. 启动程序（在调试器内或外部，使用 ⌃F5 (Windows、Linux Ctrl+F5)），导航到 /hello/name URL，并观察结果。

  6. 还可以尝试使用类似 <a%20value%20that%20could%20be%20HTML> 的名称导航到 /hello/name URL，以查看 Flask 的自动转义功能。浏览器中显示的“name”值是纯文本，而不是渲染实际元素。

提供静态文件

静态文件有两种类型。首先是页面模板可以直接引用的文件，例如样式表。这些文件可以位于应用程序中的任何文件夹中，但通常放置在 static 文件夹中。

第二种类型是您想要在代码中寻址的文件，例如，当您想要实现返回静态文件的 API 端点时。为此，Flask 对象包含一个内置方法 send_static_file，该方法生成包含在应用程序的 static 文件夹中的静态文件的响应。

以下部分演示了两种类型的静态文件。

在模板中引用静态文件

  1. 在 hello_flask 文件夹中，创建一个名为 static 的文件夹。

  2. 在 static 文件夹中，创建一个名为 site.css 的文件，其内容如下。输入此代码后，还要观察 VS Code 为 CSS 文件提供的语法突出显示，包括颜色预览

    .message {
    font-weight: 600;
    color: blue;
}

  3. 在 templates/hello_there.html 中，在 </head> 标签之前添加以下行，这会创建对样式表的引用。

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />

    Flask 的 url_for 标签在这里使用，会创建指向文件的适当路径。因为它可以接受变量作为参数，因此 url_for 允许您在需要时以编程方式控制生成的路径。

  4. 同样在 templates/hello_there.html 中，将 <body> 元素的内容替换为以下标记，该标记使用 message 样式而不是 <strong> 标签（如果只使用没有名称的 hello/ URL，还会显示消息）

    {%if name %}
    <span class="message">Hello there, {{ name }}!</span> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
{% else %}
    <span class="message">What's your name? Provide it after /hello/ in the URL.</span>
{% endif %}

  5. 运行应用程序，导航到 /hello/name URL，并观察消息以蓝色渲染。完成后停止应用程序。

从代码提供静态文件

  1. 在 static 文件夹中，创建一个名为 data.json 的 JSON 数据文件，其内容如下（这些是毫无意义的示例数据）

    {
  "01": {
    "note": "This data is very simple because we're demonstrating only the mechanism."
  }
}

  2. 在 app.py 中，添加一个具有 /api/data 路由的函数，该函数使用 send_static_file 方法返回静态数据文件

    @app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

  3. 运行应用程序并导航到 /api/data 端点以查看返回的静态文件。完成后停止应用程序。

创建多个扩展了基本模板的模板

由于大多数 Web 应用程序都具有多个页面，并且这些页面通常共享许多公共元素，因此开发人员将这些公共元素分离到一个基本页面模板中，然后其他页面模板可以扩展它（这也被称为模板继承。）

此外，由于您可能会创建许多扩展相同模板的页面，因此在 VS Code 中创建一个代码片段来快速初始化新的页面模板会很有帮助。代码片段可以从单个来源提供一致的代码，这避免了在使用来自现有代码的复制和粘贴操作时可能出现的错误。

以下部分将逐步介绍此过程的不同部分。

创建一个基本页面模板和样式

Flask 中的基本页面模板包含一组页面的所有共享部分，包括对 CSS 文件、脚本文件的引用等等。基本模板还定义了一个或多个 块 标签，扩展基本模板的其他模板应该覆盖这些标签。块标签由 {% block <name> %} 和 {% endblock %} 在基本模板和扩展模板中分隔。

以下步骤演示了如何创建基本模板。

  1. 在 templates 文件夹中，创建一个名为 layout.html 的文件，其内容如下，其中包含名为“title”和“content”的块。如您所见，标记定义了一个简单的导航栏结构，其中包含指向主页、关于页和联系页的链接，您将在后面的部分中创建这些链接。每个链接再次使用 Flask 的 url_for 标签在运行时为匹配的路由生成链接。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
    </head>

    <body>
        <div class="navbar">
            <a href="{{ url_for('home') }}" class="navbar-brand">Home</a>
            <a href="{{ url_for('about') }}" class="navbar-item">About</a>
            <a href="{{ url_for('contact') }}" class="navbar-item">Contact</a>
        </div>

        <div class="body-content">
            {% block content %}
            {% endblock %}
            <hr/>
            <footer>
                <p>&copy; 2018</p>
            </footer>
        </div>
    </body>
</html>

  2. 将以下样式添加到 static/site.css 中，位于现有的“message”样式下方，并保存文件。请注意，本演练不会尝试演示响应式设计；这些样式只会生成一个相当有趣的成果。

    .navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

您现在可以运行应用程序，但由于您尚未在任何地方使用基本模板，也尚未更改任何代码文件，因此结果与上一步相同。完成其余部分以查看最终效果。

创建一个代码片段

由于您将在下一部分中创建的三个页面扩展了 layout.html，因此创建一个 代码片段 来使用对基本模板的适当引用初始化新的模板文件可以节省时间。代码片段可以从单个来源提供一致的代码，这避免了在使用来自现有代码的复制和粘贴操作时可能出现的错误。

  1. 在 VS Code 中，选择 文件 > 首选项 > 配置用户代码片段。

  2. 在出现的列表中，选择 html。如果您之前创建过代码片段，则该选项可能在列表的 现有代码片段 部分中显示为“html.json”。

  3. 在 VS Code 打开 html.json 后，在现有的花括号（此处未显示的解释性注释描述了细节，例如 $0 行指示 VS Code 在插入代码片段后将光标放置的位置）中添加以下条目

    "Flask Tutorial: template extending layout.html": {
    "prefix": "flextlayout",
    "body": [
        "{% extends \"layout.html\" %}",
        "{% block title %}",
        "$0",
        "{% endblock %}",
        "{% block content %}",
        "{% endblock %}"
    ],

    "description": "Boilerplate template that extends layout.html"
},

  4. 保存 html.json 文件（⌘S（Windows、Linux Ctrl+S））。

  5. 现在，每当你开始输入代码段的前缀（例如 flext），VS Code 会将代码段作为自动完成选项提供，如下一节所示。你也可以使用 **插入代码段** 命令从菜单中选择代码段。

有关代码段的更多信息，请参阅 创建代码段。

使用代码段添加页面

有了代码段，你可以快速创建 Home、About 和 Contact 页面的模板。

  1. 在 templates 文件夹中，创建一个名为 home.html 的新文件，然后开始键入 flext 以查看代码段作为完成选项出现。

    Flask tutorial: autocompletion for the flextlayout code snippet

    选择完成选项后，代码段的代码将显示出来，光标位于代码段的插入点。

    Flask tutorial: insertion of the flextlayout code snippet

  2. 在 "title" 块的插入点处，输入 Home，在 "content" 块中，输入 <p>Home page for the Visual Studio Code Flask tutorial.</p>，然后保存文件。这些行是扩展页面模板中唯一的部分。

  3. 在 templates 文件夹中，创建 about.html，使用代码段插入模板标记，在 "title" 和 "content" 块中分别插入 About us 和 <p>About page for the Visual Studio Code Flask tutorial.</p>，然后保存文件。

  4. 重复上一步，使用 Contact us 和 <p>Contact page for the Visual Studio Code Flask tutorial.</p> 在两个内容块中创建 templates/contact.html。

  5. 在 app.py 中，添加用于 /about/ 和 /contact/ 路由的函数，这些函数引用它们各自的页面模板。还修改 home 函数以使用 home.html 模板。

    # Replace the existing home function with the one below
@app.route("/")
def home():
    return render_template("home.html")

# New functions
@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

运行应用

所有页面模板到位后，保存 app.py，运行应用，并在浏览器中打开以查看结果。在页面之间导航以验证页面模板是否正确扩展了基本模板。

Flask tutorial: app rendering a common nav bar from the base template

注意：如果你没有看到最新的更改，可能需要在页面上进行硬刷新以避免看到缓存文件。

可选活动

以下部分描述了在使用 Python 和 Visual Studio Code 时可能对你有所帮助的额外步骤。

为环境创建 requirements.txt 文件

当你通过源代码管理或其他方式共享你的应用代码时，复制虚拟环境中的所有文件没有意义，因为接收者始终可以自己重新创建环境。

因此，开发人员通常会从源代码管理中省略虚拟环境文件夹，而是使用 requirements.txt 文件描述应用的依赖项。

虽然你可以手动创建该文件，但也可以使用 pip freeze 命令根据激活的环境中安装的确切库来生成该文件。

  1. 使用 **Python: 选择解释器** 命令选择你的环境后，运行 **终端: 创建新的终端** 命令（⌃⇧`（Windows、Linux Ctrl+Shift+`））以打开一个激活了该环境的终端。

  2. 在终端中，运行 pip freeze > requirements.txt 以在你的项目文件夹中创建 requirements.txt 文件。

收到项目副本的任何人（或任何构建服务器）只需要运行 pip install -r requirements.txt 命令即可在原始环境中重新安装软件包。（但是，接收者仍然需要创建自己的虚拟环境。）

注意：pip freeze 列出了你在当前环境中安装的所有 Python 软件包，包括你当前没有使用的软件包。该命令还列出了具有确切版本号的软件包，你可能希望将其转换为范围以在将来获得更大的灵活性。有关更多信息，请参阅 pip 命令文档中的 需求文件。

重构项目以支持进一步的开发

在本 Flask 教程中，所有应用代码都包含在一个 app.py 文件中。为了便于进一步开发和分离关注点，将 app.py 的部分重构到单独的文件中非常有用。

  1. 在你的项目文件夹中，为应用创建一个文件夹，例如 hello_app，以将它的文件与其他项目级文件（如 requirements.txt 和 .vscode 文件夹）区分开来，VS Code 在其中存储设置和调试配置文件。

  2. 将 static 和 templates 文件夹移到 hello_app 中，因为这些文件夹肯定包含应用代码。

  3. 在 hello_app 文件夹中，创建一个名为 views.py 的文件，其中包含路由和视图函数。

    from flask import Flask
from flask import render_template
from datetime import datetime
from . import app

@app.route("/")
def home():
    return render_template("home.html")

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

@app.route("/contact/")
def contact():
    return render_template("contact.html")

@app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

@app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

  4. 在 hello_app 文件夹中，创建一个名为 __init__.py 的文件，其中包含以下内容

    import flask
app = flask.Flask(__name__)

  5. 在 hello_app 文件夹中，创建一个名为 webapp.py 的文件，其中包含以下内容

    # Entry point for the application.
from . import app    # For application discovery by the 'flask' command.
from . import views  # For import side-effects of setting up routes.

  6. 打开调试配置文件 launch.json，并将 env 属性更新为如下所示，以指向启动对象

    "env": {
    "FLASK_APP": "hello_app.webapp"
},

  7. 删除项目根目录中原始的 app.py 文件，因为它的内容已移到其他应用文件中。

  8. 你的项目的结构现在应该类似于以下结构

    Flask tutorial: modified project structure with separate files and folders for parts of the app

  9. 再次在调试器中运行应用，以确保一切正常。要在 VS Code 调试器之外运行应用，请从终端使用以下步骤

    1. 为 FLASK_APP 设置环境变量。在 Linux 和 macOS 上，使用 export set FLASK_APP=webapp；在 Windows 上，如果你使用的是 PowerShell，则使用 $env:FLASK_APP=webapp，如果你使用的是命令提示符，则使用 set FLASK_APP=webapp。
    2. 导航到 hello_app 文件夹，然后使用 python -m flask run 启动程序。

使用 Docker 扩展创建 Flask 应用的容器

Docker 扩展 使得从 Visual Studio Code 构建、管理和部署容器化应用程序变得容易。如果你有兴趣学习如何为本教程中开发的 Flask 应用创建 Python 容器，请查看 Python 在容器中 教程，该教程将引导你完成以下步骤

  • 创建一个 Dockerfile 文件，描述一个简单的 Python 容器。
  • 构建、运行和验证 Flask 应用的功能。
  • 调试在容器中运行的应用。

如果您遇到任何问题，可以在 Python 扩展讨论问答 中搜索答案或提问。

后续步骤

恭喜你完成本 Flask 在 Visual Studio Code 中的演练！

本教程中完成的代码项目可以在 GitHub 上找到：python-sample-vscode-flask-tutorial。

由于本教程只触及了页面模板的表面，因此请参阅 Jinja2 文档 以了解更多关于模板的信息。 模板设计者文档 包含有关模板语言的所有详细信息。你可能还想查看 官方 Flask 教程 以及 Flask 扩展 的文档。

要在生产网站上试用你的应用，请查看教程 使用 Docker 容器将 Python 应用部署到 Azure 应用服务。 Azure 还提供一个标准容器，Linux 上的应用服务，你可以从 VS Code 中将 Web 应用部署到该容器。

你可能还想查看 VS Code 文档中与 Python 相关的以下文章

10/29/2024