在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教程中的步骤相同):
安装Python扩展。
安装Python 3的一个版本(编写本教程)。选项包括:
- (所有操作系统)从python.org下载; 通常使用页面上首先出现的Download Python 3.6.5按钮(或任何最新版本)。
- (Linux)内置的Python 3安装效果很好,但要安装其他Python包,必须
sudo apt install python3-pip
在终端中运行。 - (MacOS)使用macOS上的Homebrew
brew install python3
安装(不支持在macOS上安装Python系统)。 - (所有操作系统)从Anaconda下载(用于数据科学目的)。
在Windows上,确保Python解释器的位置包含在PATH环境变量中。您可以通过
path
在命令提示符下运行来检查这一点。如果未包含Python解释器的文件夹,请打开Windows设置,搜索“环境”,选择编辑帐户的环境变量,然后编辑Path变量以包含该文件夹。
为Flask创建项目环境
在本节中,您将创建一个安装Flask的虚拟环境。使用虚拟环境可以避免将Flask安装到全局Python环境中,并且可以精确控制应用程序中使用的库。虚拟环境还可以轻松地为环境创建requirements.txt文件。
在您的文件系统上,为本教程创建一个项目文件夹,例如
hello_flask
。在该文件夹中,使用以下命令(根据您的计算机)创建
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.exe
Anaconda安装,则会看到错误,因为ensurepip模块不可用,并且环境处于未完成状态。通过运行
code .
或运行VS Code并使用“ 文件” >“ 打开文件夹”命令打开 VS Code中的项目文件夹。在VS Code中,打开命令选项板(视图 > 命令选项板或(⇧⌘P))。然后选择Python:Select Interpreter命令:
该命令提供了VS代码可以自动定位的可用解释器列表(您的列表将有所不同;如果您没有看到所需的解释器,请参阅配置Python环境)。从列表中选择您的虚拟环境:
运行Python:从命令选项板创建终端,它创建一个终端并通过运行其激活脚本自动激活虚拟环境。
注意:在Windows上,如果您的默认终端类型是PowerShell,您可能会看到无法运行activate.ps1的错误,因为系统上已禁用运行脚本。该错误提供了有关如何允许脚本的信息的链接。否则,请使用“ 终端:选择默认外壳 ”将“命令提示符”或“Git Bash”设置为默认值。
所选环境显示在VS Code状态栏的左侧,并注意到“(venv)”指示符,该指示符告诉您正在使用虚拟环境:
通过运行以下命令之一在虚拟环境中安装Flask:
# Mac/Linux
pip3 install flask # Windows
pip install flask
您现在可以使用自包含的环境来编写Flask代码。
创建并运行最小的Flask应用程序
在VS Code中,在项目文件夹中创建一个新文件,
app.py
使用菜单中的File > New命名,按Ctrl + N,或使用Explorer视图中的新文件图标(如下所示)。在
app.py
,添加代码以导入Flask并创建Flask对象的实例。如果您键入以下代码(而不是使用复制粘贴),您可以观察VS Code的IntelliSense和自动完成:from flask import Flask
app = Flask(__name__)
同样在
app.py
,添加一个返回内容的函数,在本例中是一个简单的字符串,并使用Flask的app.route
装饰器将URL路由映射/
到该函数:@app.route("/")
def home():
return 'Hello, Flask!'
提示:您可以在同一个函数上使用多个装饰器,每行一个,具体取决于您要映射到同一个函数的路径数量。
保存
app.py
文件(⌘S)。在终端中,通过输入运行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
。要打开呈现页面的默认浏览器,请按住Ctrl并单击
http://127.0.0.1:5000/
终端中的URL。请注意,当您访问类似/的URL时,调试终端中会显示一条消息,显示HTTP请求:
127.0.0.1 - - [11/Jul/2018 08:40:15] "GET / HTTP/1.1" 200 -
在终端中使用Ctrl + C停止应用程序。
提示:如果要使用不同的文件名
app.py
,例如program.py
,定义名为FLASK_APP的环境变量并将其值设置为所选文件。然后,Flask的开发服务器使用FLASK_APP的值而不是默认文件app.py
。有关更多信息,请参阅Flask命令行界面。
在调试器中运行应用程序
调试使您有机会在特定代码行上暂停正在运行的程序。暂停程序时,可以检查变量,在“调试控制台”面板中运行代码,以及利用调试中描述的功能。运行调试器还会在调试会话开始之前自动保存所有已修改的文件。
开始之前:确保在终端中使用Ctrl + C停止了最后一节末尾的正在运行的应用程序。如果您让应用程序在一个终端中运行,它将继续拥有该端口。因此,当您使用相同的端口在调试器中运行应用程序时,原始运行的应用程序将处理所有请求,您将看不到正在调试的应用程序中的任何活动,并且程序不会在断点处停止。换句话说,如果调试器似乎不起作用,请确保该应用程序的其他任何实例仍未运行。
用
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会自动过滤,您将不需要此代码。)
通过执行以下任一操作,在
hello_there
函数(now = datetime.now()
)的第一行代码中设置断点:- 将光标放在该行上,按F9,或者,
- 将光标放在该行上,选择Debug > Toggle Breakpoint菜单命令,或者,
- 直接点击行号左侧的边距(悬停在那里时会出现一个褪色的红点)。
断点在左边距中显示为红点:
切换到VS Code中的Debug视图(使用左侧活动栏)。在Debug视图的顶部,您可能会在齿轮图标上看到“No Configurations”和一个警告点。这两个指标都意味着您还没有
launch.json
包含调试配置的文件:选择齿轮图标,然后从显示的列表中选择Python。VS Code创建并打开
launch.json
文件。此JSON文件包含许多调试配置,每个配置都是configuration
阵列中的单独JSON对象。向下滚动并查看名称为“Python:Flask(0.11.x或更高版本)”的配置。此配置包含
"module": "flask",
,它告诉VS Codepython -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是项目文件夹所在的驱动器号。保存
launch.json
(⌘S)。在调试配置下拉列表(读取Python:当前文件)中,选择Python:Flask(0.11.x或更高版本)配置。通过选择Debug > Start Debugging菜单命令或选择列表旁边的绿色Start Debugging箭头(F5)来启动调试器:
观察状态栏是否改变颜色以指示调试:
调试工具栏(如下所示)也出现在包含以下命令的命令的VS代码中:暂停(或继续,F5),跳过(F10),步入(F11),跳出(⇧F11),重新启动(⇧⌘) F5)和停止(⇧F5)。有关每个命令的说明,请参阅VS代码调试。
输出显示在“Python Debug Console”终端中。按住Ctrl并单击该
http://127.0.0.1:5000/
终端中的链接以打开该URL的浏览器。在浏览器的地址栏中,导航至http://127.0.0.1:5000/hello/VSCode
。在页面呈现之前,VS Code会在您设置的断点处暂停程序。断点上的小黄色箭头表示它是下一行代码。使用Step Over运行
now = datetime.now()
语句。在VS Code窗口的左侧,您会看到一个Variables窗格,其中显示了局部变量,例如
now
,以及参数等name
。下面是Watch,Call Stack和Breakpoints的窗格(有关详细信息,请参阅VS Code调试)。在“ 本地”部分中,尝试展开不同的值。您也可以双击值(或使用Enter)来修改它们。now
但是,更改变量可能会破坏程序。当代码没有产生正确的值时,开发人员通常会更正正确的值。当程序暂停时,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以查看异常消息。
将该行复制到调试控制台底部的>提示符中,然后尝试更改格式:
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'
注意:如果您看到自己喜欢的更改,则可以在调试会话期间将其复制并粘贴到编辑器中。但是,在重新启动调试器之前,不会应用这些更改。
如果您愿意,可以逐步执行几行代码,然后选择继续(F5)让程序运行。浏览器窗口显示结果:
关闭浏览器并在完成后停止调试器。要停止调试器,请使用“停止”工具栏按钮(红色方块)或“ 调试”>“ 停止调试”命令(⇧F5)。
提示:为了更轻松地重复导航到特定的URL,比如
http://127.0.0.1:5000/hello/VSCode
使用
转到“定义”和“窥视定义”命令
在使用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时自动安装。该引擎提供灵活的选项,包括模板继承。通过继承,您可以定义具有公共标记的基页,然后使用特定于页面的添加在该基础上构建。
在本节中,您将使用模板创建单个页面。在接下来的部分中,您将应用程序配置为提供静态文件,然后为应用程序创建多个页面,每个页面都包含基础模板中的导航栏。
在
hello_flask
文件夹中,创建一个名为的文件夹templates
,这是Flask默认查找模板的位置。在该
templates
文件夹中,创建一个hello_there.html
使用以下内容命名的文件。此模板包含两个名为“title”和“content”的占位符,这些占位符由大括号括起来,{{
和}}
。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
在
app.py
,导入render_template
文件顶部附近的Flask 功能:from flask import render_template
同样在
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
)
启动程序(在调试器内部或外部,使用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考虑了区域设置和时区。再次运行应用程序并导航到/ hello / name URL以观察预期结果,然后在完成后停止应用程序。
提供静态文件
静态文件有两种类型。首先是那些文件,比如页面模板可以直接引用的样式表。此类文件可以存在于应用程序的任何文件夹中,但通常位于static
文件夹中。
第二种类型是您希望在代码中解决的类型,例如当您要实现返回静态文件的API端点时。为此,Flask对象包含一个内置方法send_static_file
,该方法使用应用程序static
文件夹中包含的静态文件生成响应。
以下部分演示了两种类型的静态文件。
请参阅模板中的静态文件
在该
hello_flask
文件夹中,创建一个名为的文件夹static
。在该
static
文件夹中,创建一个site.css
使用以下内容命名的文件。输入此代码后,还要观察VS Code为CSS文件提供的语法高亮显示,包括颜色预览:.message {
font-weight: 600;
color: blue;
}
在
templates/hello_there.html
,在</head>
标记之前添加以下行,这将创建对样式表的引用。<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
这里使用的Flask
url_for
标签创建了文件的适当路径。因为它可以接受变量作为参数,所以url_for
允许您以编程方式控制生成的路径(如果需要)。同样在
templates/hello_there.html
,<body>
使用以下使用message
样式而不是标记的标记替换contents 元素<strong>
:<span class="message">{{ message }}</span>. It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
运行应用程序,导航到/ hello / name URL,并观察消息呈现为蓝色。完成后停止应用程序。
从代码中提供静态文件
在该
static
文件夹中,创建一个名为data.json
以下内容命名的JSON数据文件(这些文件只是无意义的示例数据):{
"01": {
"note" : "Data is very simple because we're demonstrating only the mechanism."
}
}
在
app.py
,使用路径/ api / data添加一个函数,该函数使用以下send_static_file
方法返回静态数据文件:@app.route("/api/data")
def get_data():
return app.send_static_file("data.json")
运行应用程序并导航到/ api / data端点以查看是否返回了静态文件。完成后停止应用程序。
创建扩展基本模板的多个模板
由于大多数Web应用程序都有多个页面,并且由于这些页面通常共享许多公共元素,因此开发人员将这些公共元素分离为基页模板,然后其他页面模板可以扩展。(这也称为模板继承。)
此外,由于您可能会创建许多扩展相同模板的页面,因此在VS Code中创建代码片段会很有帮助,您可以使用该代码片段快速初始化新的页面模板。代码段可以帮助您避免繁琐且容易出错的复制粘贴操作。
以下部分将介绍此过程的不同部分。
创建基页模板和样式
Flask中的基页模板包含一组页面的所有共享部分,包括对CSS文件,脚本文件等的引用。基本模板还定义了一个或多个块标记,其他扩展基础的模板应该覆盖。块标记由划定{% block <name> %}
并{% endblock %}
在两个基片模板和扩展的模板。
以下步骤演示了如何创建基本模板。
在该
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>© 2018</p>
</footer>
</div>
</body>
</html>
将以下样式添加到
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
,因此可以节省创建代码段的时间,以便使用对基本模板的适当引用来初始化新模板文件。代码片段从单个源提供一致的代码片段,从而避免了在使用现有代码中的复制粘贴时可能出现的错误。
在VS Code中,选择File(Windows / Linux)或Code(Mac),菜单,然后选择Preferences > User snippets。
在显示的列表中,选择html。(如果您之前已创建过片段,则该选项在列表的“ 现有片段”部分中可能显示为“html.json” 。)
在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"
}
}
保存
html.json
文件(⌘S)。现在,无论何时开始输入代码段的前缀,例如
flext
,VS Code都会将代码段作为自动填充选项提供,如下一节所示。您还可以使用“ 插入代码段”命令从菜单中选择代码段。
使用代码段添加页面
使用代码段,您可以快速为Home,About和Contact页面创建模板。
在该
templates
文件夹中,创建一个名为的新文件home.html
,然后开始键入flext
以查看该片段显示为完成:当您选择完成时,代码段的代码会出现,光标位于代码段的插入点上:
在“标题”块的插入点处,写入
Home
,并在“内容”块中写入<p>Home page for the Visual Studio Code Flask tutorial.</p>
,然后保存文件。这些行是扩展页面模板的唯一唯一部分:在
templates
文件夹中创建about.html
,使用片断插入样板标记,插入About us
并<p>About page for the Visual Studio Code Flask tutorial.</p>
在“标题”和“内容”块,分别然后保存文件。重复上一步,在两个内容块中创建
templates/contact.html
使用Contact us
和<p>Contact page for the Visual Studio Code Flask tutorial.</p>
。在
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
命令根据激活环境中安装的确切库生成文件:
使用Python选择所选环境:选择解释器命令,调用Python:创建终端命令以打开激活了该环境的终端。
在终端中,运行
pip freeze > requirements.txt
以requirements.txt
在项目文件夹中创建文件。
接收项目副本的任何人(或任何构建服务器)只需要运行pip install -r requirements.txt
命令来重新创建环境。
重构项目以支持进一步的开发
在本教程中,所有应用程序代码都包含在一个app.py
文件中。为了允许进一步开发和分离关注点,将这些片段重构app.py
为单独的文件是有帮助的。
在项目文件夹中,为应用程序创建一个文件夹,例如
hello_app
,将其文件与其他项目级文件(如VS代码存储设置和调试配置文件requirements.txt
的.vscode
文件夹)分开。移动
static
和templates
文件夹hello_app
,因为这些文件夹肯定包含应用程序代码。在该
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")
可选:在编辑器中单击鼠标右键,然后选择“ 排序导入”命令,该命令合并来自相同模块的导入,删除未使用的导入,并对导入语句进行排序。使用上面代码中的命令
views.py
更改导入如下(当然,您可以删除多余的行):from datetime import datetime from flask import Flask, render_template from . import app
在该
hello_app
文件夹中,创建一个__init__.py
包含以下内容的文件:import flask
app = flask.Flask(__name__)
在该
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.
打开调试配置文件
launch.json
并按env
如下所示更新属性以指向启动对象:"env": {
"FLASK_APP": "hello_app.webapp"
},
删除
app.py
项目根目录中的原始文件,因为其内容已移至其他应用程序文件中。您的项目结构现在应该类似于以下内容:
再次运行应用程序以确保一切正常,如果您有任何问题,请随时在VS Code docs repo中为此教程提交问题。
下一步
恭喜您完成了在Visual Studio代码中使用Flask的演练!
可以在GitHub上找到本教程中完成的代码项目:python-sample-vscode-flask-tutorial。
由于本教程仅涉及页面模板的表面,因此请参阅Jinja2文档以获取有关模板的更多信息。该模板设计文档包含模板语言的所有细节。
您可能还想查看与Python相关的VS Code文档中的以下文章:
在Visual Studio代码中使用Flask的更多相关文章
- [.net 面向对象程序设计进阶] (27) 团队开发利器(六)分布式版本控制系统Git——在Visual Studio 2015中使用Git
[.net 面向对象程序设计进阶] (26) 团队开发利器(六)分布式版本控制系统Git——在Visual Studio 2015中使用Git 本篇导读: 接上两篇,继续Git之旅 分布式版本控制系统 ...
- 如何在Visual Studio 2012中发布Web应用程序时自动混淆Javascript
同Java..NET实现的应用程序类似,Javascript编写的应用程序也面临一个同样的问题:源代码的保护.尽管对大多数Javascript应用公开源代码不算是很严重的问题,但是对于某些开发者来说, ...
- 在Visual Studio 2012中使用VMSDK开发领域特定语言(二)
本文为<在Visual Studio 2012中使用VMSDK开发领域特定语言>专题文章的第二部分,在这部分内容中,将以实际应用为例,介绍开发DSL的主要步骤,包括设计.定制.调试.发布以 ...
- 在Visual Studio 2012中使用VMSDK开发领域特定语言(一)
前言 本专题主要介绍在Visual Studio 2012中使用Visualization & Modeling SDK进行领域特定语言(DSL)的开发,包括两个部分的内容.在第一部分中,将对 ...
- Visual Studio Code中文文档(一)-快速入门
Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对J ...
- Visual Studio 2015中快捷键总结
今天总结了Visual Studio工具中常用的快捷键,可供平时参考查阅. 程序调试相关的快捷键F5: 启动调试Ctrl+F5: 开始执行(不调试)Shift+F5: 停止调试Ctrl+Shift+F ...
- ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序
基于Visual Studio 2015,你可以: 方便的管理前端包,如jQuery, Bootstrap, 或Angular. 自动运行任务,如LESS.JavaScript压缩.JSLint.Ja ...
- 11个Visual Studio代码性能分析工具
软件开发中的性能优化对程序员来说是一个非常重要的问题.一个小问题可能成为一个大的系统的瓶颈.但是对于程序员来说,通过自身去优化代码是十分困难的.幸运的是,有一些非常棒的工具可以帮助程序员进行代码分析和 ...
- 在 Visual Studio Code 中使用 PoweShell - CodeShell
一直希望在 Visual Studio Code 中使用 PowerShell,插件 CodeShell 提供了对于 PowerShell 的支持. 安装 首先按 F1,打开命令窗口,输入安装插件的命 ...
随机推荐
- Java EE之Struts2路径访问小结
一.项目WEB视图结构 注释:struts.xml:最普通配置,任何无特殊配置 二.访问页面 1.访问root.jsp //方式1: http://localhost/demo/root.jsp // ...
- 第18月第16天 statusBar
1. 我们都知道要改状态栏statusBar的颜色很简单,只要如下一行代码就可以, [[UIApplicationsharedApplication]setStatusBarStyle:UIStatu ...
- Nginx实战之让用户通过用户名密码认证访问web站点
1.Nginx实战之让用户通过用户名密码认证访问web站点 [root@master ~]# vim /usr/local/nginx/conf/extra/www.conf server { lis ...
- 运维数据库平台~inception审核规则详解
---恢复内容开始--- 一 简介:这次我们来介绍最核心的审核功能 二 讲解:简单来说 inception就是mysql的二次过滤,何谓二次过滤,我们知道,mysql本身都有自己的审核规则,为业界所通 ...
- mysql原理~二阶段提交
一 简介:今天咱们来聊聊 mysql 两阶段提交二 事务过程 perpare-commit 两个过程1 perpare阶段 redo日志 1.设置undo state=TRX_UNDO_P ...
- Delpher 必记-delphi环境安装
//Delpher 必记 环境: 安装包: 1.所有第三方控件包放在没有中文名的路径:如F:\DComp 安装包放在对应的版本的文件夹里面(实际中没有分类),然后看安装包的引用路径和输出路径,都要设定 ...
- python - 迭代器(迭代协议/可迭代对象)
迭代器 # 迭代器协议 # 迭代协议:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就触发一个 StopIteration 异常,以终止迭代(只能往后走不能往前退) # 可迭代对 ...
- 之手算KD-tree
转自:https://zhuanlan.zhihu.com/p/27453420 本文来源于Machine Learning: Clustering & Retrieval | Courser ...
- python学习之argparse模块
python学习之argparse模块 一.简介: argparse是python用于解析命令行参数和选项的标准模块,用于代替已经过时的optparse模块.argparse模块的作用是用于解析命令行 ...
- Python数据分析入门
Python数据分析入门 最近,Analysis with Programming加入了Planet Python.作为该网站的首批特约博客,我这里来分享一下如何通过Python来开始数据分析.具体内 ...