在Visual Studio代碼中使用Flask

時間 2019-12-01

標籤 visual studio 代碼使用 flask 欄目 Visual Studio 简体版

原文原文鏈接

Flask是一個用於Web應用程序的輕量級Python框架，它提供了URL路由和頁面呈現的基礎知識。css

Flask被稱爲「微」框架，由於它不直接提供表單驗證，數據庫抽象，身份驗證等功能。這些功能由稱爲Flask 擴展的特殊Python包提供。擴展程序與Flask無縫集成，所以它們看起來好像是Flask自己的一部分。例如，Flask不提供頁面模板引擎，但默認狀況下安裝Flask包含Jinja模板引擎。爲方便起見，咱們一般將這些默認值稱爲Flask的一部分。html

在本教程中，您將建立一個簡單的Flask應用程序，其中包含三個使用公共基本模板的頁面。在此過程當中，您將體驗VS Code的許多功能，包括使用終端，編輯器，調試器，代碼片斷等。python

能夠在GitHub上找到本教程中完成的代碼項目：python-sample-vscode-flask-tutorial。linux

先決條件

要成功完成本教程，您必須執行如下操做（與常規Python教程中的步驟相同）：git

安裝Python擴展。github
安裝Python 3的一個版本（編寫本教程）。選項包括：web
- （全部操做系統）從python.org下載; 一般使用頁面上首先出現的Download Python 3.6.5按鈕（或任何最新版本）。
- （Linux）內置的Python 3安裝效果很好，但要安裝其餘Python包，必須sudo apt install python3-pip在終端中運行。
- （MacOS）使用macOS上的Homebrewbrew install python3安裝（不支持在macOS上安裝Python系統）。
- （全部操做系統）從Anaconda下載（用於數據科學目的）。
在Windows上，確保Python解釋器的位置包含在PATH環境變量中。您能夠經過path在命令提示符下運行來檢查這一點。若是未包含Python解釋器的文件夾，請打開Windows設置，搜索「環境」，選擇編輯賬戶的環境變量，而後編輯Path變量以包含該文件夾。數據庫

爲Flask建立項目環境

在本節中，您將建立一個安裝Flask的虛擬環境。使用虛擬環境能夠避免將Flask安裝到全局Python環境中，而且能夠精確控制應用程序中使用的庫。虛擬環境還能夠輕鬆地爲環境建立requirements.txt文件。express

在您的文件系統上，爲本教程建立一個項目文件夾，例如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.exeAnaconda安裝，則會看到錯誤，由於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 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是項目文件夾所在的驅動器號。
保存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使用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時自動安裝。該引擎提供靈活的選項，包括模板繼承。經過繼承，您能夠定義具備公共標記的基頁，而後使用特定於頁面的添加在該基礎上構建。

在本節中，您將使用模板建立單個頁面。在接下來的部分中，您將應用程序配置爲提供靜態文件，而後爲應用程序建立多個頁面，每一個頁面都包含基礎模板中的導航欄。

在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> Hello there, {{ name }}! 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 元素：
```
{{ message }}. 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>&copy; 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，並在「內容」塊中寫入Home page for the Visual Studio Code Flask tutorial.，而後保存文件。這些行是擴展頁面模板的惟一惟一部分：
在templates文件夾中建立about.html，使用片段插入樣板標記，插入About us並About page for the Visual Studio Code Flask tutorial.在「標題」和「內容」塊，分別而後保存文件。
重複上一步，在兩個內容塊中建立templates/contact.html使用Contact us和Contact page for the Visual Studio Code Flask tutorial.。

在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中爲此教程提交問題。