Flask是一个用于Web应用程序的轻量级Python框架，它提供了URL路由和页面呈现的基础知识。

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

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

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

先决条件

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

1. 安装Python扩展。

2. 安装Python 3的一个版本（编写本教程）。选项包括：

   • （所有操作系统）从python.org下载; 通常使用页面上首先出现的Download Python 3.6.5按钮（或任何最新版本）。
   • （Linux）内置的Python 3安装效果很好，但要安装其他Python包，必须sudo apt install python3-pip在终端中运行。
   • （MacOS）使用macOS上的Homebrewbrew install python3安装（不支持在macOS上安装Python系统）。
   • （所有操作系统）从Anaconda下载（用于数据科学目的）。

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

为Flask创建项目环境

在本节中，您将创建一个安装Flask的虚拟环境。使用虚拟环境可以避免将Flask安装到全局Python环境中，并且可以精确控制应用程序中使用的库。虚拟环境还可以轻松地为环境创建requirements.txt文件。

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

2. 在该文件夹中，使用以下命令（根据您的计算机）创建env基于当前解释器命名的虚拟环境：

   # Mac/Linux
   
   # You may need to run sudo apt-get install python3-venv first
   
   python3 -m venv env
   
   # Windows
   
   py -3 -m venv env
   

   注意：运行上述命令时，请使用库存Python安装。如果您使用python.exeAnaconda安装，则会看到错误，因为ensurepip模块不可用，并且环境处于未完成状态。

3. 通过运行code .或运行VS Code并使用“ 文件” >“ 打开文件夹”命令打开 VS Code中的项目文件夹。

4. 在VS Code中，打开命令选项板（视图 > 命令选项板或（⇧⌘P））。然后选择Python：Select Interpreter命令：

   

5. 该命令提供了VS代码可以自动定位的可用解释器列表（您的列表将有所不同;如果您没有看到所需的解释器，请参阅配置Python环境）。从列表中选择您的虚拟环境：

   

6. 运行Python：从命令选项板创建终端，它创建一个终端并通过运行其激活脚本自动激活虚拟环境。

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

7. 所选环境显示在VS Code状态栏的左侧，并注意到“（venv）”指示符，该指示符告诉您正在使用虚拟环境：

   

8. 通过运行以下命令之一在虚拟环境中安装Flask：

   # Mac/Linux
   
   pip3 install flask
   
   # Windows
   
   pip install flask
   

您现在可以使用自包含的环境来编写Flask代码。

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

1. 在VS Code中，在项目文件夹中创建一个新文件，app.py使用菜单中的File > New命名，按Ctrl + N，或使用Explorer视图中的新文件图标（如下所示）。

   

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）。

5. 在终端中，通过输入运行Flask开发服务器的python3 -m flask run（MacOS / Linux）或python -m flask run（Windows）来运行应用程序。开发服务器app.py默认查找。运行Flask时，您应该看到类似于以下内容的输出：

   (env) 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模块的错误，请确保您已在虚拟环境中运行pip3 install flask（MacOS / Linux）或pip install flask（Windows），如上一节末尾所述。

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

6. 要打开呈现页面的默认浏览器，请按住Ctrl并单击http://127.0.0.1:5000/终端中的URL。

   

7. 请注意，当您访问类似/的URL时，调试终端中会显示一条消息，显示HTTP请求：

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

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

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

在调试器中运行应用程序

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

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

1. 用app.py以下代码替换内容，这将添加第二个路径和功能，您可以在调试器中单步执行：

   from flask import Flask
   
   from datetime import datetime
   
   import re
   
   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>。如果您希望使用相同的函数来处理两者，请为每个变体使用装饰器。

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

2. 通过执行以下任一操作，在hello_there函数（now = datetime.now()）的第一行代码中设置断点：

   • 将光标放在该行上，按F9，或者，
   • 将光标放在该行上，选择Debug > Toggle Breakpoint菜单命令，或者，
   • 直接点击行号左侧的边距（悬停在那里时会出现一个褪色的红点）。

   断点在左边距中显示为红点：

   

3. 切换到VS Code中的Debug视图（使用左侧活动栏）。在Debug视图的顶部，您可能会在齿轮图标上看到“No Configurations”和一个警告点。这两个指标都意味着您还没有launch.json包含调试配置的文件：

   

4. 选择齿轮图标，然后从显示的列表中选择Python。VS Code创建并打开launch.json文件。此JSON文件包含许多调试配置，每个配置都是configuration阵列中的单独JSON对象。

5. 向下滚动并查看名称为“Python：Flask（0.11.x或更高版本）”的配置。此配置包含"module": "flask",，它告诉VS Code python -m flask在启动调试器时运行。它还在env属性中定义FLASK_APP环境变量以标识启动文件app.py（默认情况下），但允许您轻松指定其他文件。如果要更改主机和/或端口，可以使用该args阵列。

   {
   
       "name": "Python: Flask (0.11.x or later)",
   
       "type": "python",
   
       "request": "launch",
   
       "module": "flask",
   
       "env": {
   
           "FLASK_APP": "app.py"
   
       },
   
       "args": [
   
           "run",
   
           "--no-debugger",
   
           "--no-reload"
   
       ]
   
   },
   

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

6. 保存launch.json（⌘S）。在调试配置下拉列表（读取Python：当前文件）中，选择Python：Flask（0.11.x或更高版本）配置。

   

7. 通过选择Debug > Start Debugging菜单命令或选择列表旁边的绿色Start Debugging箭头（F5）来启动调试器：

   

   观察状态栏是否改变颜色以指示调试：

   

   调试工具栏（如下所示）也出现在包含以下命令的命令的VS代码中：暂停（或继续，F5），跳过（F10），步入（F11），跳出（⇧F11），重新启动（⇧⌘） F5）和停止（⇧F5）。有关每个命令的说明，请参阅VS代码调试。

   

8. 输出显示在“Python Debug Console”终端中。按住Ctrl并单击该http://127.0.0.1:5000/终端中的链接以打开该URL的浏览器。在浏览器的地址栏中，导航至http://127.0.0.1:5000/hello/VSCode。在页面呈现之前，VS Code会在您设置的断点处暂停程序。断点上的小黄色箭头表示它是下一行代码。

   

9. 使用Step Over运行now = datetime.now()语句。

10. 在VS Code窗口的左侧，您会看到一个Variables窗格，其中显示了局部变量，例如now，以及参数等name。下面是Watch，Call Stack和Breakpoints的窗格（有关详细信息，请参阅VS Code调试）。在“ 本地”部分中，尝试展开不同的值。您也可以双击值（或使用Enter）来修改它们。now但是，更改变量可能会破坏程序。当代码没有产生正确的值时，开发人员通常会更正正确的值。

    

11. 当程序暂停时，Debug Console面板（与“终端”面板中的“Python Debug Console”不同）允许您试验表达式并使用程序的当前状态尝试一些代码。例如，一旦您跨过该行now = datetime.now()，您可以尝试不同的日期/时间格式。在编辑器中，选择读取的代码now.strftime("%A, %d %B, %Y at %X")，然后右键单击并选择Debug：Evaluate将该代码发送到运行它的调试控制台：

    now.strftime("%A, %d %B, %Y at %X")
    
    'Thursday, 24 May, 2018 at 14:35:27'
    

    提示：调试控制台还会显示应用程序中可能未显示在终端中的异常。例如，如果在Debug View 的Call Stack区域中看到“Paused on exception”消息，请切换到Debug Console以查看异常消息。

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

    now.strftime("%a, %d %B, %Y at %X")
    
    'Thu, 24 May, 2018 at 14:35:27'
    
    now.strftime("%a, %d %b, %Y at %X")
    
    'Thu, 24 May, 2018 at 14:35:27'
    
    now.strftime("%a, %d %b, %y at %X")
    
    'Thu, 24 May, 18 at 14:35:27'
    

    注意：如果您看到自己喜欢的更改，则可以在调试会话期间将其复制并粘贴到编辑器中。但是，在重新启动调试器之前，不会应用这些更改。

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

    

14. 关闭浏览器并在完成后停止调试器。要停止调试器，请使用“停止”工具栏按钮（红色方块）或“ 调试”>“ 停止调试”命令（⇧F5）。

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

转到“定义”和“窥视定义”命令

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

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

• Peek Definition（⌥F12，也在右键单击上下文菜单中）类似，但直接在编辑器中显示类定义（在编辑器窗口中创建空间以避免模糊任何代码）。按Escape键关闭Peek窗口。

  

使用模板呈现页面

到目前为止，您在本教程中创建的应用程序仅在Python代码中直接生成纯文本网页。虽然可以直接在代码中生成HTML，但开发人员通常会避免这种做法，因为它容易受到跨站点脚本（XSS）攻击。相反，开发人员将HTML标记与插入到该标记中的代码生成数据分开。模板是实现这种分离的常用方法。

• 模板是一个HTML文件，其中包含代码在运行时提供的值的占位符。模板引擎负责在呈现页面时进行替换。因此，代码仅关注数据值，模板仅关注标记。
• Flask的默认模板引擎是Jinja，它在安装Flask时自动安装。该引擎提供灵活的选项，包括模板继承。通过继承，您可以定义具有公共标记的基页，然后使用特定于页面的添加在该基础上构建。

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

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

2. 在该templates文件夹中，创建一个hello_there.html使用以下内容命名的文件。此模板包含两个名为“title”和“content”的占位符，这些占位符由大括号括起来，{{和}}。

   <!DOCTYPE html>
   
   <html>
   
       <head>
   
           <meta charset="utf-8" />
   
           <title>{{ title }}</title>
   
       </head>
   
       <body>
   
           {{ content }}
   
       </body>
   
   </html>
   

3. 在app.py，导入render_template文件顶部附近的Flask 功能：

   from flask import render_template
   

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

   @app.route("/hello/<name>")
   
   def hello_there(name):
   
       now = datetime.now()
   
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       # BAD CODE! Avoid inline HTML for security reason, plus templates automatically escape HTML content.
   
       content = "<strong>Hello there, " + name + "!</strong> It's " + formatted_now
   
       return render_template(
   
           "hello_there.html",
   
           title='Hello, Flask',
   
           content=content
   
       )
   

5. 启动程序（在调试器内部或外部，使用F5或^ F5），导航到/ hello / name URL，并观察结果。请注意，如果您碰巧编写这样的错误代码，内联HTML不会呈现为HTML，因为模板引擎会自动转义占位符中使用的值。自动转义可防止注入攻击的意外漏洞：开发人员通常从一个页面或URL收集输入，并通过模板占位符将其用作另一个页面中的值。转义也可以提醒您，将HTML完全保留在代码之外也是最好的。

   因此，请按照以下方式修改模板和视图功能，以使每个内容更具体。当您处于此状态时，还会将更多文本（包括标题）和格式问题移到模板中：

   在templates/hello_there.html：

   <!DOCTYPE html>
   
   <html>
   
       <head>
   
           <meta charset="utf-8" />
   
           <title>Hello, Flask</title>
   
       </head>
   
       <body>
   
           <strong>Hello there, {{ name }}!</strong> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
   
       </body>
   
   </html>
   

   在app.py：

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

   提示：Flask开发人员经常使用flask-babel扩展来进行日期格式化，而不是strftime因为flask-babel考虑了区域设置和时区。

6. 再次运行应用程序并导航到/ hello / name URL以观察预期结果，然后在完成后停止应用程序。

提供静态文件

静态文件有两种类型。首先是那些文件，比如页面模板可以直接引用的样式表。此类文件可以存在于应用程序的任何文件夹中，但通常位于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样式而不是标记的标记替换contents 元素<strong>：

   <span class="message">{{ message }}</span>. It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
   

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

从代码中提供静态文件

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

   {
   
       "01": {
   
           "note" : "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”的块。如您所见，标记定义了一个简单的导航栏结构，其中包含指向Home，About和Contact页面的链接，您可以在后面的部分中创建这些页面。每个链接再次使用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现有“消息”样式下方，然后保存文件。（本演练不会尝试演示响应式设计;这些样式只会产生一个相当有趣的结果。）

   .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中，选择File（Windows / Linux）或Code（Mac），菜单，然后选择Preferences > User snippets。

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

3. 在VS代码打开后html.json，修改它，使其如下所示（解释性注释，此处未显示）描述详细信息，例如$0行如何指示VS代码在插入代码段后放置光标的位置）：

   {
   
       "Flask App: 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）。

5. 现在，无论何时开始输入代码段的前缀，例如flext，VS Code都会将代码段作为自动填充选项提供，如下一节所示。您还可以使用“ 插入代码段”命令从菜单中选择代码段。

有关一般代码段的详细信息，请参阅创建代码段。

使用代码段添加页面

使用代码段，您可以快速为Home，About和Contact页面创建模板。

1. 在该templates文件夹中，创建一个名为的新文件home.html，然后开始键入flext以查看该片段显示为完成：

   

   当您选择完成时，代码段的代码会出现，光标位于代码段的插入点上：

   

2. 在“标题”块的插入点处，写入Home，并在“内容”块中写入<p>Home page for the Visual Studio Code Flask tutorial.</p>，然后保存文件。这些行是扩展页面模板的唯一唯一部分：

3. 在templates文件夹中创建about.html，使用片断插入样板标记，插入About us并<p>About page for the Visual Studio Code Flask tutorial.</p>在“标题”和“内容”块，分别然后保存文件。

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

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并运行应用程序以查看结果。在页面之间导航以验证页面模板是否正确扩展基本模板。

可选活动

以下部分介绍了在使用Python和Visual Studio Code时可能会有帮助的其他步骤。

为环境创建requirements.txt文件

当您通过源代码控制或其他方式与他人共享应用程序代码时，复制虚拟环境中的所有文件是没有意义的，因为收件人可以自己安装软件包。

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

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

1. 使用Python选择所选环境：选择解释器命令，调用Python：创建终端命令以打开激活了该环境的终端。

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

接收项目副本的任何人（或任何构建服务器）只需要运行pip install -r requirements.txt命令来重新创建环境。

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

在本教程中，所有应用程序代码都包含在一个app.py文件中。为了允许进一步开发和分离关注点，将这些片段重构app.py为单独的文件是有帮助的。

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

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/<name>")
   
   def hello_there(name):
   
       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. 可选：在编辑器中单击鼠标右键，然后选择“ 排序导入”命令，该命令合并来自相同模块的导入，删除未使用的导入，并对导入语句进行排序。使用上面代码中的命令views.py更改导入如下（当然，您可以删除多余的行）：

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

5. 在该hello_app文件夹中，创建一个__init__.py包含以下内容的文件：

   import flask
   
   app = flask.Flask(__name__)
   

6. 在该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.
   

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

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

8. 删除app.py项目根目录中的原始文件，因为其内容已移至其他应用程序文件中。

9. 您的项目结构现在应该类似于以下内容：

   

10. 再次运行应用程序以确保一切正常，如果您有任何问题，请随时在VS Code docs repo中为此教程提交问题。

下一步

恭喜您完成了在Visual Studio代码中使用Flask的演练！

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

由于本教程仅涉及页面模板的表面，因此请参阅Jinja2文档以获取有关模板的更多信息。该模板设计文档包含模板语言的所有细节。

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

• 编辑Python代码
• 掉毛
• 管理Python环境
• 调试Python
• 单元测试