使用VSCode开发Flask指南

一 概述

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

Flask 被称为"微"框架，因为它不直接提供表单验证、数据库抽象、身份验证等功能，这些功能由称为 Flask 扩展的 Python 包提供。这些扩展与 Flask 无缝集成，看起来就像是 Flask 的一部分。例如，Flask 不提供页面模板引擎，但默认情况下安装 Flask 会包括 Jinja 模板引擎，通常将这些默认扩展称为 Flask 的组成部分。

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

要使用以下内容，需要在机器上安装完成Python3、pip，可选安装anaconda。

本文是关于在VSCode中开发Flask的简要指南，若需要阅读详细内容，请访问https://download.csdn.net/download/mx9818/90952607

二 创建项目开发环境

在本节中，我们将创建一个安装 Flask 的虚拟环境。使用虚拟环境可以避免将 Flask 安装到全局 Python 环境中，并能够精确控制应用程序中使用的库。

1、先在文件系统上创建一个文件夹，例如 hello_flask。

2、在 VS Code 中打开此文件夹，可以在此文件夹的命令行终端中运行"code ."，或者运行 VS Code 并使用 File > Open Folder 命令。

3、在 VS Code 中，打开命令面板（View > Command Palette或 （Ctrl+Shift+P））。然后选择 Python：Create Environment 命令，在工作区中创建虚拟环境，选择venv创建虚拟环境。

4、虚拟环境创建完成后，运行Terminal: Create New Terminal （Ctrl+Shift+'），这将创建一个终端，并通过运行其激活脚本自动激活虚拟环境。

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

python -m pip install flask

三 创建并运行"Hello, Flask!"

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

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文件 （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 和 port 命令行参数：--host=0.0.0.0 --port=80（或其他指定端口）。

6、要打开默认浏览器并显示呈现的页面，请按 Ctrl并单击终端中的URL: 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 停止应用程序。

四 在调试器中运行应用程序

使用调试器，你可以在特定代码行上暂停正在运行的程序。当程序暂停时，你可以检查变量，在 Debug Console 面板中运行代码，以及利用 Debugging 中描述的功能。运行调试器还会在调试会话开始之前自动保存任何修改的文件。

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

请注意，状态栏会更改颜色以指示正在调试：

调试工具栏（如下所示）也会显示在 VS Code 中，其中包含按以下顺序排列的命令：暂停（或继续，F5）、单步跳过 （F10）、单步执行 （F11）、单步跳出 （Shift+F11）、重新启动 （Ctrl+Shift+F5） 和停止 （Shift+F5）。有关每个命令的说明，请参阅 VS Code 调试。

注意：上述快捷键在不同系统中可能不一样，具体可以在Run菜单中查看。

五 使用模板呈现页面

到目前为止，你在本教程中创建的应用程序仅从 Python 代码生成纯文本网页。尽管可以直接在代码中生成 HTML，但开发人员要避免这种做法，因为它会使应用程序面临跨站点脚本 （XSS） 攻击。例如，在本教程的函数hello_there中，人们可能会考虑在代码中格式化输出，例如

content = "<h1>Hello there, " + clean_name + "!</h1>"，

其中content结果直接提供给浏览器。此种代码允许攻击者将恶意 HTML（包括 JavaScript 代码）放置在 以clean_name结尾的URL中，该 URL 最终会在浏览器中运行。

更好的做法是使用模板将 HTML 完全排除在代码之外，这样你的代码就只关心数据，而不关心呈现。

模板是一个 HTML 文件，其中包含代码在运行时提供的值的占位符。模板引擎负责在渲染页面时进行替换。因此，代码只关心数据值，而模板只关心标记。

Flask 的默认模板引擎是 Jinja，它会在安装 Flask 时自动安装。该引擎提供了灵活的选项，包括自动转义（以防止 XSS 攻击）和模板继承。通过继承，你可以定义具有通用标记的基本页面，然后在该基础上添加特定于页面的内容。

六 提供静态文件

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

第二种类型是你希望在代码中解决的问题，例如，当你要实现返回静态文件的 API 终端节点时返回静态文件。为此，Flask 对象包含一个内置方法send_static_file，该方法使用static文件夹中包含的静态文件生成响应。

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

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

此外，由于你可能会创建许多扩展同一模板的页面，因此在 VS Code 中创建一个代码片段会很有帮助，你可以使用该代码片段快速初始化新的页面模板。代码段可帮助你避免繁琐且容易出错的复制粘贴操作。

7.1创建基本页面模板和样式

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

7.2创建代码片段

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

7.3使用代码片段添加页面

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

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

当你选择完成时，代码段的代码将与光标一起显示在代码段的插入点上：

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")

7.4运行应用

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

若需要阅读关于在VSCode中开发Flask的详细内容，请访问https://download.csdn.net/download/mx9818/90952607