Visual Studio Code 中的 Flask 教程

Flask 是一个轻量级的 Python 框架，用于网页应用，提供 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）通过 macOS 上的 Homebrew 安装brew 安装 python3.
   • （所有作系统）这是从Anaconda下载的（用于数据科学目的）。

3. 在Windows上，确保你的Python解释器的位置包含在你的PATH环境变量中。你可以通过跑步来查看该位置路径在命令提示符上。如果 Python 解释器的文件夹没有包含，打开 Windows 设置，搜索“environment”，选择为你的账户编辑环境变量，然后编辑 Path 变量加入该文件夹。

为Flask教程创建一个项目环境

在本节中，你创建一个安装 Flask 的虚拟环境。使用虚拟环境可以避免将Flask安装到全局Python环境中，并且能让你对应用中使用的库进行精确控制。

Python 环境扩展支持多种环境类型，包括 venv、conda、poetry 等。这个教程用venv，因为它内置在Python里，不需要额外工具。其他环境类型的步骤类似——详见“创建环境”。

1. 在你的文件系统上，为这个教程创建一个文件夹，比如hello_flask.

2. 通过在 VS Code 中打开该文件夹，通过终端导航到该文件夹并运行代码。或者通过运行 VS Code 并使用 File > Open Folder 命令。

3. 通过使用 Python： Create Environment 命令创建虚拟环境：

   1. 打开命令面板（⇧⌘P（Windows，Linux Ctrl+Shift+P）)
   2. 搜索并选择 Python：创建环境
   3. 选择 Venv 以创建 venv 环境
   4. 选择一个用于环境的Python解释器

   VS Code 创建了.venv在你的工作区里的文件夹，并自动选择新的环境。

   提示

   你也可以用Python侧边栏创建环境。展开环境管理器，选择+键进行快速创建，该按钮使用合理的默认设置。

   

4. 在虚拟环境中使用以下方法之一安装Flask：

   使用包管理界面：

   1. 在 Python 侧边栏，展开环境管理器
   2. 右键点击你的.venv环境并选择管理包
   3. 搜索烧瓶并选择安装

   使用终端：

   运行终端：从命令面板创建新终端（⌃⇧'（Windows，Linux Ctrl+Shift+'）），创建终端并自动激活虚拟环境。然后运行：

   python -m pip install flask
   

你现在拥有了一个自给自足的环境，可以编写 Flask 代码。VS Code 在你打开新终端时会自动激活环境。如果你在VS Code之外打开了单独的命令提示符或终端，通过运行来激活环境来源 .venv/bin/activate（Linux/macOS）或.venv\Scripts\Activate.ps1（Windows）。当命令提示符开头显示（.venv）时，你就知道环境已经激活。

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

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

   

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

   from flask import Flask
   app = Flask(__name__)
   

3. 还有app.py添加返回内容的函数，这里指的是简单的字符串，并使用 Flask 的应用路线decorator 将 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+点击http://127.0.0.1:5000/终端里的网址。

   

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/，可以接受任意额外值。路由内和路径中的标识符定义了一个变量，该变量传递给函数，可以用于你的代码。<>

   URL 路由是区分大小写的。例如，路线/你好/<名字>与 不同于/你好，<名字>.如果你想用同一个功能同时处理两者，就为每个变体使用装饰器。

   如代码注释所述，务必过滤任意用户提供的信息，以避免对应用的各种攻击。在这种情况下，代码会将名称参数过滤为仅包含字母，从而避免了控制字符、HTML 等的注入。（当你在下一节使用模板时，Flask 会自动过滤，你不需要这些代码。）

2. 在代码的第一行设置断点hello_there函数（现在 = DateTime。now（））通过以下任一作：

   • 当光标停留在该行时，按F9，或者，
   • 当光标停留在该行时，选择“运行>切换断点菜单”命令，或者，
   • 直接点击行号左侧的边缘（悬停时会出现一个渐变的红点）。

   断点以红点形式出现在左边缘：

   

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

   

4. 选择链接后，VS Code 会提示调试配置。从下拉菜单选择Flask，VS代码会生成新的launch.json文件中带有Flask运行配置。该launch.json文件包含多个调试配置，每个配置都是配置阵列。

5. 向下滚动查看该配置，名为“Python： Flask”。该配置包含“模块”：“瓶子”，，它告诉 VS Code 运行 Python——我酒壶调试器启动时。它还定义了 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
   },
   

   注意：如果环境你的配置中的条目包含“FLASK_APP”：“${workspaceFolder}/app.py”，改为“FLASK_APP”：“app.py”如上所示。否则你可能会遇到诸如“无法导入模块C”的错误提示，而C是你项目文件夹所在的驱动器代号。

   注：曾经launch.json创建时，编辑器中会出现添加配置按钮。该按钮显示了一列额外的配置，需要添加到配置列表的开头。（运行>添加配置菜单命令执行同样的作。）

6. 保存launch.json (⌘S（Windows，Linux Ctrl+S））。在调试配置下拉菜单中选择 Python： Flask 配置。

   

7. 通过选择“运行>开始调试”菜单命令，或点击列表中的绿色“开始调试”箭头（F5）来启动调试器：

   

   注意状态栏颜色变化以表示正在调试：

   

   VS Code 中还会出现一个调试工具栏（如下图），命令顺序如下：暂停（或继续，F5）、Step Over（F10）、Step In（F11）、Step Out（Windows，Linux Shift+F11））、Restart（⇧⌘F5（Windows，Linux Ctrl+Shift+F5））和停止（⇧F5，Windows，Linux Shift+F5））。关于每个命令的描述，请参见 VS Code 调试。

   

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

   

9. 使用 Step Over 来运行现在 = DateTime。now（）陈述。

10. 在 VS Code 窗口的左侧，你会看到一个变量面板，显示本地变量，例如现在，以及诸如名称.其下方是观察、调用栈和断点的窗格（详情请参见 VS Code 调试）。在本地部分，尝试扩展不同的数值。你也可以双击数值（或者用回车（Windows，Linux F2））来修改。变化变量，如现在然而，可能会破坏程序。开发者通常只在代码本身没有产生正确值时才会做出正确的修改。

    

11. 当程序暂停时，调试控制台面板（与终端面板中的“Python 调试控制台”不同）允许你尝试表达式，并利用当前程序状态尝试代码片段。比如，一旦你越过了界限现在 = 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）让程序运行。浏览器窗口显示结果：

    

14. 例如，将代码中的行更改为不同的datetime格式Now.strftime（“%a， %d %b， %y at %X”）然后保存文件。Flask 服务器会自动重新加载，这意味着更改可以应用，无需重启调试器。在浏览器中刷新页面以查看更新。

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

提示：为了方便反复访问某个特定网址，比如http://127.0.0.1:5000/hello/VSCode，使用印刷陈述。URL会出现在终端里，你可以用Ctrl+点击在浏览器中打开它。

前往定义并查看定义命令

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

• 去定义，从你的代码跳转到定义对象的代码。例如，在app.py右键点击烧瓶阶级（在该线中）app = Flask（__name__）选择“进入定义”（或使用F12），该按钮可导航到Flask库中的类定义。

• 窥视定义（⌥F12（Windows Alt+F12，Linux Ctrl+Shift+F10，也在右键菜单中）类似，但直接在编辑器中显示类定义（在编辑器窗口留出空间以避免代码模糊）。按Esc键关闭窥视窗口，或使用右上角的X键。

  

用模板渲染页面

你在教程中创建的应用只用Python代码生成纯文本网页。虽然可以直接在代码中生成 HTML，但开发者避免这样做，因为这会让应用面临跨站脚本攻击（XSS）。在hello_there例如，这个教程的功能，有人可能会想到用类似的代码格式化输出内容 = “<h1>你好，” + clean_name + “！</h1>”，其中结果为内容直接提供给浏览器。这种开口允许攻击者在最终clean_name因此最终会在浏览器中运行。

更好的做法是完全不包含HTML代码，使用模板，让代码只关注数据值，而不涉及渲染。

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

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

1. 在hello_flask文件夹，创建一个名为模板，Flask 默认就是在这时查找模板。

2. 在模板文件夹，创建一个名为的文件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 扩展来格式化日期，而不是时间，因为Flask-Babel考虑了地点和时区。

3. 在app.py，导入Flask'srender_template文件顶部附近的函数：

   from flask import render_template
   

4. 还有app.py，修改hello_there用于函数render_template加载模板并应用命名值（并添加路由识别无名案例）。render_template假设第一个参数相对于模板文件夹。通常，开发者会给模板命名和使用它们的函数一样，但不需要匹配的名称，因为你在代码中总是引用准确的文件名。

   @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. 另外，试着用类似这样的名字导航到 /hello/name URL<a%20value%20that%20cold%20be%20HTML>看到弗拉斯克在工作时自动逃脱。“name”值在浏览器中以纯文本形式显示，而不是实际渲染的元素。

提供静态文件

静态文件分为两种类型。第一种是像样式表这样的文件，页面模板可以直接引用。这类文件可以存放在应用内的任何文件夹中，但通常会放在静态文件夹。

第二类是你想在代码中处理的，比如你想实现一个返回静态文件的 API 端点。为此，Flask对象内置了一种方法，send_static_file生成包含静态文件的响应，存储在应用的静态文件夹。

以下章节将演示这两种静态文件。

在模板中引用静态文件

1. 在hello_flask文件夹，创建一个名为静态.

2. 在静态文件夹，创建一个名为的文件site.css内容如下。输入代码后，还要注意VS Code为CSS文件提供的语法高亮，包括彩色预览：

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

3. 在templates/hello_there.html，在</头>标签，创建了对样式表的引用。

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

   这里使用的Flask的url_for标签会为文件创建相应的路径。因为它可以接受变量作为参数，url_for如果你愿意，可以编程控制生成的路径。

4. 还有templates/hello_there.html替换内容<身体>元素具有以下标记，使用了信息风格代替<强壮>标签（如果你只用一个没有名字的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. 在静态folder，创建一个名为data.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 端点，查看静态文件是否返回。完成后关闭应用。

创建多个模板来扩展基础模板

由于大多数网页应用有多页，且这些页面通常共享许多共同元素，开发者将这些共同元素拆分为基础页面模板，其他页面模板可以扩展（这也称为模板继承）。

另外，因为你很可能会创建多个扩展同一个模板的页面，所以在 VS Code 里创建一个代码片段，这样你就能快速初始化新的页面模板。片段帮助你避免繁琐且易出错的复制粘贴作。

以下章节将介绍这一过程的不同环节。

创建基础页面模板和样式

Flask 中的基础页面模板包含一组页面的所有共享部分，包括对 CSS 文件、脚本文件等的引用。基底模板还定义了一个或多个块标签，其他扩展基底的模板预期会覆盖这些Tab。块标签的定义为{% 街区<姓名> %}以及{% 端块 %}无论是基础模板还是扩展模板。

以下步骤演示创建基础模板。

1. 在模板文件夹，创建一个名为的文件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. 将以下样式添加到静电/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 中，选择“文件>偏好设置”>配置摘要“。

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. 现在，每当你开始输入该摘要的前缀时，比如flextVS Code 提供该摘要作为自动补全选项，如下节所示。你也可以使用“插入片段”命令从菜单中选择片段。

关于代码片段的更多信息，请参见“创建代码片段”。

使用代码片段添加页面

有了代码片段后，你可以快速创建首页、关于页面和联系方式的模板。

1. 在模板文件夹，创建一个名为home.html， 然后开始输入flext要查看该摘要以完备形式出现：

   

   当你选择完成时，片段的代码会与光标一起出现在片段插入点上：

   

2. 在“标题”块插入点，写道首页，在“内容”块中，写成<p>Visual Studio Code Flask 教程主页。</p>然后保存文件。这些行是扩展页面模板中唯一独特的部分：

3. 在模板文件夹，创建about.html，使用该摘要插入样板标记，插入关于我们以及<p>关于Visual Studio Code Flask教程页面.</p>.分别在“标题”和“内容”块中保存文件。

4. 重复前一步来创建templates/contact.html使用联系我们以及<p>Contact Visual Studio Code Flask 教程页面。</p>在两个内容区块中。

5. 在app.py添加指向各自页面模板的/about/和/contact/路由函数。还要修改首页函数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冻结命令以生成文件，基于激活环境中安装的具体库：

1. 通过 Python 的 Select Interpreter 命令选择了你所选环境，然后运行 Terminal： Create New Terminal 命令（⌃⇧'（Windows，Linux Ctrl+Shift+'）））），打开激活该环境的终端。

2. 在终端里，跑PIP冻结> requirements.txt以创建requirements.txt文件放在你的项目文件夹里。

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

注：PIP冻结列出你当前环境中安装的所有 Python 包，包括你目前没有使用的包。命令还列出了带有精确版本号的包，你可能想把它们转换成范围，以便未来更有灵活性。欲了解更多信息，请参见 pip 命令文档中的需求文件。

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

在整个 Flask 教程中，所有应用代码都包含在一个app.py档案。为了进一步发展并区分关切，重构这些部分是有帮助的app.py分成独立文件。

1. 在你的项目文件夹里，创建一个应用文件夹，比如hello_app，以将其文件与其他项目级文件区分开，如requirements.txt以及.vscodeVS Code 存储设置和调试配置文件的文件夹。

2. 移动静态以及模板文件夹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": {
       "FLASK_APP": "hello_app.webapp"
   },
   

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

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

   

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

   1. 设置一个环境变量FLASK_APP.在Linux和macOS上，使用export set FLASK_APP=webapp;关于Windows的使用$env：FLASK_APP=webapp如果你用的是PowerShell，或者set FLASK_APP=webapp如果你用的是命令提示符。
   2. 导航进入hello_app文件夹，然后用以下方式启动程序Python -m flask run.

使用 Container Tools 扩展为 Flask 应用创建一个容器

容器工具扩展使得从Visual Studio Code轻松构建、管理和部署容器化应用变得简单。如果你有兴趣学习如何为本教程开发的Flask应用创建Python容器，可以看看Python in a container教程，它会带你一步步：

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

如果你有任何问题，可以在Python扩展的讨论问答中搜索答案或提问。

下一步

恭喜你完成了这次在Visual Studio Code中使用Flask的作教程！

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

由于本教程仅触及页面模板的表面，请参阅 Jinja2 文档了解更多模板信息。模板设计器文档包含了模板语言的所有细节。你也可以查看官方的Flask教程以及Flask扩展的文档。

想在生产网站上试用你的应用，可以看看教程《使用Docker Container将Python应用部署到Azure App Service》。Azure 还提供了一个标准容器，即 Linux 上的 App Service，你可以在 VS Code 内部署 Web 应用。

你也可以参考VS Code文档中与Python相关的以下文章：

• 编辑 Python 代码
• 绒毛
• 管理 Python 环境
• 调试 Python
• 测试