在Visual Studio代码中使用Flask

 

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
• 单元测试