教程：在 Visual Studio 中开始使用 Flask Web 框架教程：在 Visual Studio 中开始使用 Flask Web 框架

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

Jinja、Jade 等扩展提供模板化，如本教程所示。

在本教程中，你将了解：

使用“空白 Flask Web 项目”模板在 Git 存储库中创建一个基本 Flask 项目（步骤 1）
使用模板创建一个单页 Flask 应用，并呈现该页面（步骤 2）
为静态文件提供服务、添加页面和使用模板继承（步骤 3）
使用 Flask Web 项目模板创建包含多个页面和响应式设计的应用（步骤 4）
使用“投票 Flask Web 项目”模板创建使用多种存储选项（Azure 存储、MongoDB 或内存）的投票应用。

通过将项目保留在同一解决方案中，可以轻松地在不同文件之间来回切换以进行比较。

备注

例如，创建项目时，项目模板自动安装 Flask 包，而无需按快速入门所示手动安装包。

系统必备

Windows 上的 Visual Studio 2017 有以下选项：
- 在 Visual Studio 中安装 Python 支持。
- “代码工具”下“单个组件”选项卡上的“适用于 Windows 的 Git”和“适用于 Visual Studio 的 GitHub 扩展”。

针对 Visual Studio 的 Python 工具的所有早期版本都附带 Flask 项目模板，虽然详细信息可能与本教程提供的信息有所出入。

Visual Studio Code 中的 Python 扩展。

步骤 1-1：创建 Visual Studio 项目和解决方案

（还可以在左侧列表的“Python” > “Web”中找到模板。）
在对话框底部的字段中，输入以下信息（如上图所示），然后选择“确定”：
- 此名称还用于 Flask 项目。
- 位置：指定要在其中创建 Visual Studio 解决方案和项目的位置。
- 解决方案名称：设置为“LearningFlask”，适用于本教程中作为多个项目的容器的解决方案。
- 创建解决方案的目录：保留设置（默认值）。
- 如果未看到此选项，请运行 Visual Studio 2017 安装程序并在“代码工具”下的“单个组件”选项卡上添加“适用于 Windows 的 Git”和“适用于 Visual Studio 的 GitHub 扩展”。
（选择“显示所需包”查看确切的依赖项。）
（始终可从 requirements.txt 创建该环境。）

步骤 1-2：检查 Git 控件并发布到远程存储库

在此步骤中，你将熟悉 Visual Studio 的 Git 控件和在其中使用源代码管理的“团队资源管理器”窗口。

这些控件从左到右依次显示未推送的提交、未提交的更改、存储库的名称以及当前分支：

备注

如果未选择“新建项目”对话框中的”创建新 Git 存储库“，Git 控件将仅显示用于创建本地存储库的”添加到源代码管理“命令。
由于新创建的项目已经自动提交给源代码管理，因此，看不到任何挂起的更改。
由于你只有一个本地存储库，页面将提供简单的选项将存储库发布到不同的远程存储库。

Microsoft/python-sample-vs-learning-flask 存储库中。
例如，在发布本教程的示例时，必须首先创建存储库本身，在这种情况下，“推送到远程存储库”选项将与存储库的 URL 结合使用。

如果没有现有存储库，可通过“发布到 GitHub”和“推送到 Azure DevOps”选项直接从 Visual Studio 创建一个存储库。
本教程会在适当时机提醒你。

提示

要在团队资源管理器中快速导航，请选择标头（上图中显示为“更改”或“推送”）来查看可用页面的弹出菜单。

问：从项目一开始就使用源代码管理有什么好处？

这实际上是将 DevOps 用于项目的第一步，而且由于入门门槛非常低，因此没有理由不从一开始就使用源代码管理。

真相的来源：DevOps 中存储库的作用，这是 MSDN 杂志中为移动应用编写的一篇文章，也适用于 Web 应用。

问：我能否阻止 Visual Studio 自动提交新项目？

若要禁用自动提交，请转到“团队资源管理器”中的“设置”页，选择“Git” > “全局设置”，清除标记为“合并后默认提交更改”的选项，然后选择“更新”。

步骤 1-3：创建虚拟环境并从源代码管理中将其排除

然后，可以使用“团队资源管理器”从源代码管理中排除环境文件夹。

在“解决方案资源管理器”中，右键单击“Python 环境”节点并选择“添加虚拟环境”。
此消息表示 Visual Studio 使用该文件来配置虚拟环境。
（如果你愿意，可以更改虚拟环境名称，这只会更改其子文件夹的名称，但 env 是标准约定。）
Flask 安装页 (flask.pcocoo.org) 上查看 Flask 依赖项的描述。
在 Visual Studio Git 控件（位于状态栏上）上，选择更改指示器（显示“99*”），这将打开团队资源管理器中的“更改”页。

创建虚拟环境带来了数百项更改，但不需要在源代码管理中包含其中任何一项，因为你（或克隆项目的任何人员）始终可从 requirements.txt 重新创建环境。

要排除虚拟环境，请右键单击 env 文件夹，然后选择“忽略这些本地项”。
可以双击文件查看差异。
输入提交消息，然后选择“全部提交”按钮，根据需要将提交推送到远程存储库。

问：为什么需要创建虚拟环境？

使用虚拟环境。

问：如何删除已经提交给源代码管理的虚拟环境？

也可以从团队资源管理器打开文件：在“设置”页上，选择“存储库设置”，转到“忽略和属性文件”部分，然后选择 .gitignore 旁的“编辑”链接。）

然后从命令行 (git commit -m 'Remove venv') 提交这些更改，或从“团队资源管理器”的“更改”页进行提交。

步骤 1-4：检查样本代码

项目创建完成后，在解决方案资源管理器中查看解决方案和项目，其中项目仅包含两个文件 app.py 和 requirements.txt：
该文件旨在邀请你在第一次创建项目时创建虚拟环境。
第一部分是 Flask import 语句，其作用是创建 Flask 类实例（分配给变量 app），然后分配 wsgi_app 变量（部署到 Web 主机时非常有用，但是现阶段暂不使用）：

复制
```
from flask import Flask
app = Flask(__name__)

# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app
```

第二部分（文件末尾）是一些可选代码，其作用是使用从环境变量中提取的特定主机和端口值（默认为 localhost:5555）启动 Flask 开发服务器：

复制

if __name__ == '__main__':
    import os
    HOST = os.environ.get('SERVER_HOST', 'localhost')
    try:
        PORT = int(os.environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555
    app.run(HOST, PORT)

在后面的步骤中，使用 HTML 呈现更丰富的页面。

复制

@app.route('/')
def hello():
    """Renders a sample page."""
    return "Hello World!"

问：name 参数对 Flask 类的作用是什么？

Flask 类文档 (flask.pocoo.org)。

问：一个函数能否有多个路由修饰器？

例如，若要为“/”和“/hello”使用 hello 函数，请使用以下代码：

复制

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

问：Flask 如何使用变量 URL 路由和查询参数？

例如，'/hello/<name> 形式的路由将名为 name 的字符串参数生成到函数，在路由中使用 ?message=<msg> 分析为“message=”查询参数提供的值并将其传递到 msg 等函数：

复制

@app.route('/hello/<name>?message=<msg>')
def hello(name, msg):
    return "Hello " + name + "! Message is " + msg + "."

变量规则。

请求对象。

问：在我安装其他包后，Visual Studio 能否从虚拟环境生成 requirements.txt 文件？

如果在生成服务器上设置持续集成，应该在修改环境时生成文件并提交更改。

步骤 1-5：运行该项目

在 Visual Studio 中，选择“调试” > “启动调试”(F5) 或使用工具栏上的“Web 服务器”按钮（所看到的浏览器可能会有所不同）：
如果 Visual Studio 显示“启动调试器失败”并显示无启动文件的相关消息，右键单击解决方案资源管理器中的 app.py 并选择“设为启动文件”。
然后，Visual Studio 自动将浏览器打开到 http://localhost:<port>，其中应该看到 hello 函数呈现的消息：
完成后，通过关闭控制台窗口，或使用 Visual Studio 中的“调试” > “停止调试”命令来停止服务器。

问：在项目 Python 子菜单中使用“调试”菜单命令和服务器命令有何区别？

如果需要，稍后可以使用“调试” > “附加到进程”命令，将调试器附加到正在运行的进程。

后续步骤

最好将这两个关注点分开，并且最好使用模板分离 HTML 和数据。

使用视图和页面模板创建 Flask 应用

深入了解

Flask 快速入门 (flask.pocoo.org)
Microsoft/python-sample-vs-learning-flask

教程：在 Visual Studio 中开始使用 Flask Web 框架 教程：在 Visual Studio 中开始使用 Flask Web 框架