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

 

Flask 是一種輕量級 Web 應用程序 Python 框架，為 URL 路由和頁面呈現提供基礎知識。

Flask 被稱為“微”框架，因為它不直接提供窗體驗證、數據庫抽象、身份驗證等功能。 此類功能改為由名為 Flask 擴展的特殊 Python 包提供。 這些擴展無縫集成 Flask，所以看起來就像 Flask 本身的一部分。 例如，Flask 本身不提供頁模板引擎。 Jinja、Jade 等擴展提供模板化，如本教程所示。

在本教程中，你將了解：

• 使用“空白 Flask Web 項目”模板在 Git 存儲庫中創建一個基本 Flask 項目（步驟 1）
• 使用模板創建一個單頁 Flask 應用，並呈現該頁面（步驟 2）
• 為靜態文件提供服務、添加頁面和使用模板繼承（步驟 3）
• 使用 Flask Web 項目模板創建包含多個頁面和響應式設計的應用（步驟 4）
• 使用“投票 Flask Web 項目”模板創建使用多種存儲選項（Azure 存儲、MongoDB 或內存）的投票應用。

在這些步驟的過程中，將創建一個包含三個單獨項目的 Visual Studio 解決方案。 使用 Visual Studio 中包含的不同 Flask 項目模板創建項目。 通過將項目保留在同一解決方案中，可以輕松地在不同文件之間來回切換以進行比較。

 備注

本教程與 Flask 快速入門的區別在於，可以更詳細地了解 Flask 並了解如何使用不同的 Flask 項目模板（為自己的項目提供更全面的起點）。 例如，創建項目時，項目模板自動安裝 Flask 包，而無需按快速入門所示手動安裝包。

系統必備

• Windows 上的 Visual Studio 2017 有以下選項：
  • “Python 開發”工作負載（安裝程序中的“工作負載”選項卡）。 有關說明，請參閱在 Visual Studio 中安裝 Python 支持。
  • “代碼工具”下“單個組件”選項卡上的“適用於 Windows 的 Git”和“適用於 Visual Studio 的 GitHub 擴展”。

針對 Visual Studio 的 Python 工具的所有早期版本都附帶 Flask 項目模板，雖然詳細信息可能與本教程提供的信息有所出入。

Visual Studio for Mac 當前不支持 Python 開發。 在 Mac 和 Linux 上，使用 Visual Studio Code 中的 Python 擴展。

步驟 1-1：創建 Visual Studio 項目和解決方案

1. 在 Visual Studio 中，選擇“文件” > “新建” > “項目”，搜索“Flask”，然后選擇“空白 Flask Web 項目”模板。（還可以在左側列表的“Python” > “Web”中找到模板。）

   

2. 在對話框底部的字段中，輸入以下信息（如上圖所示），然后選擇“確定”：

   • 名稱：將 Visual Studio 項目的名稱設置為“BasicProject”。 此名稱還用於 Flask 項目。
   • 位置：指定要在其中創建 Visual Studio 解決方案和項目的位置。
   • 解決方案名稱：設置為“LearningFlask”，適用於本教程中作為多個項目的容器的解決方案。
   • 創建解決方案的目錄：保留設置（默認值）。
   • 新建 Git 存儲庫：選擇此選項（默認情況下會清除該選項），以便在 Visual Studio 創建解決方案時創建本地 Git 存儲庫。 如果未看到此選項，請運行 Visual Studio 2017 安裝程序並在“代碼工具”下的“單個組件”選項卡上添加“適用於 Windows 的 Git”和“適用於 Visual Studio 的 GitHub 擴展”。

3. 稍后 Visual Studio 會顯示一個對話框，提示“此項目需要外部包”（如下所示）。 顯示此對話框是因為該模板包含引用最新 Flask 1.x 包的 requirements.txt 文件。 （選擇“顯示所需包”查看確切的依賴項。）

   

4. 選擇選項“我將自行安裝”。 立即創建虛擬環境，確保它會從源代碼管理中排除。 （始終可從 requirements.txt 創建該環境。）

步驟 1-2：檢查 Git 控件並發布到遠程存儲庫

由於選擇了“新建項目”對話框中的“創建新的 Git 存儲庫”，在創建過程完成后，項目就已經提交到本地源代碼管理。 在此步驟中，你將熟悉 Visual Studio 的 Git 控件和在其中使用源代碼管理的“團隊資源管理器”窗口。

1. 在 Visual Studio 主窗口下角處檢查 Git 控件。 這些控件從左到右依次顯示未推送的提交、未提交的更改、存儲庫的名稱以及當前分支：

   

    備注

   如果未選擇“新建項目”對話框中的”創建新 Git 存儲庫“，Git 控件將僅顯示用於創建本地存儲庫的”添加到源代碼管理“命令。

   

2. 選擇“更改”按鈕，Visual Studio 會在“更改”頁上打開“團隊資源管理器”窗口。 由於新創建的項目已經自動提交給源代碼管理，因此，看不到任何掛起的更改。

   

3. 在 Visual Studio 狀態欄中，選擇“未推送的提交”按鈕（標有“2”的向上箭頭）以打開團隊資源管理器中的“同步”頁。 由於你只有一個本地存儲庫，頁面將提供簡單的選項將存儲庫發布到不同的遠程存儲庫。

   

   可以為自己的項目選擇任何所需的服務。 本教程演示了如何使用 GitHub，其中本教程已完成的示例代碼保存在 Microsoft/python-sample-vs-learning-flask 存儲庫中。

4. 選擇任一“發布”控件時，“團隊資源管理器”都將提示你輸入詳細信息。 例如，在發布本教程的示例時，必須首先創建存儲庫本身，在這種情況下，“推送到遠程存儲庫”選項將與存儲庫的 URL 結合使用。

   

   如果沒有現有存儲庫，可通過“發布到 GitHub”和“推送到 Azure DevOps”選項直接從 Visual Studio 創建一個存儲庫。

5. 按照本教程執行操作時，請養成定期在 Visual Studio 中使用控件提交和推送更改的習慣。 本教程會在適當時機提醒你。

 提示

要在團隊資源管理器中快速導航，請選擇標頭（上圖中顯示為“更改”或“推送”）來查看可用頁面的彈出菜單。

問：從項目一開始就使用源代碼管理有什么好處？

答：首先，從一開始就使用源代碼管理，特別是如果同時還使用遠程存儲庫，就可以提供項目的常規異地備份。與在本地文件系統上維護項目不同，源代碼管理還提供了完整的更改歷史記錄，用戶可以輕松地將單個文件或整個項目還原到以前的狀態。 此更改歷史記錄有助於確定回歸的原因（測試失敗）。 此外，如果多個人員執行一個項目，則源代碼管理必不可少，因為它管理重寫並提供沖突解決方案。 最后，源代碼管理從根本上來說是一種自動化形式，它為自動化構建、測試和發布管理提供充分准備。 這實際上是將 DevOps 用於項目的第一步，而且由於入門門檻非常低，因此沒有理由不從一開始就使用源代碼管理。

有關源控制作為自動化的進一步討論，請參閱真相的來源：DevOps 中存儲庫的作用，這是 MSDN 雜志中為移動應用編寫的一篇文章，也適用於 Web 應用。

問：我能否阻止 Visual Studio 自動提交新項目？

答：可以。 若要禁用自動提交，請轉到“團隊資源管理器”中的“設置”頁，選擇“Git” > “全局設置”，清除標記為“合並后默認提交更改”的選項，然后選擇“更新”。

步驟 1-3：創建虛擬環境並從源代碼管理中將其排除

你已為項目配置源代碼管理，現在可以創建包含項目必需 Flask 包的虛擬環境。 然后，可以使用“團隊資源管理器”從源代碼管理中排除環境文件夾。

1. 在“解決方案資源管理器”中，右鍵單擊“Python 環境”節點並選擇“添加虛擬環境”。

   

2. 隨即出現“添加虛擬環境”對話框，並顯示一條消息，指示“已找到 requirements.txt 文件。” 此消息表示 Visual Studio 使用該文件來配置虛擬環境。

   

3. 選擇“創建”以接受默認設置。 （如果你願意，可以更改虛擬環境名稱，這只會更改其子文件夾的名稱，但 env 是標准約定。）

4. 如果收到提示，同意管理員權限，然后在 Visual Studio 下載和安裝包時耐心等待幾分鍾，對於 Flask 及其依賴項來說，這意味着在超過 100 的子文件夾中展開大約一千個文件。 可以在 Visual Studio“輸出”窗口中查看進度。 在等待時，仔細考慮下面的“問題”部分。 還可以在 Flask 安裝頁 (flask.pcocoo.org) 上查看 Flask 依賴項的描述。

5. 在 Visual Studio Git 控件（位於狀態欄上）上，選擇更改指示器（顯示“99*”），這將打開團隊資源管理器中的“更改”頁。

   創建虛擬環境帶來了數百項更改，但不需要在源代碼管理中包含其中任何一項，因為你（或克隆項目的任何人員）始終可從 requirements.txt 重新創建環境。

   要排除虛擬環境，請右鍵單擊 env 文件夾，然后選擇“忽略這些本地項”。

   

6. 排除虛擬環境后，剩下的唯一更改是針對項目文件和 .gitignore。 .gitignore 文件包含虛擬環境文件夾的附加條目。 可以雙擊文件查看差異。

7. 輸入提交消息，然后選擇“全部提交”按鈕，根據需要將提交推送到遠程存儲庫。

問：為什么需要創建虛擬環境？

答：虛擬環境是隔離應用確切依賴項的好辦法。 此類隔離避免了全局 Python 環境中的沖突，有助於進行測試和協作。 隨着時間的推移，在開發應用時，總是會引入許多有用的 Python 包。 通過將包保存在特定於項目的虛擬環境中，可以輕松更新項目中介紹該環境的 requirements.txt 文件，該文件包含在源代碼管理中。 如果項目被復制到任何其他計算機（包括生成服務器、部署服務器和其他開發計算機），僅使用 requirements.txt 即可輕松重新創建環境（這就是為什么環境不需要包含在源代碼管理中）。 有關詳細信息，請參閱使用虛擬環境。

問：如何刪除已經提交給源代碼管理的虛擬環境？

答：首先，編輯 .gitignore 文件以排除文件夾：在末尾找到帶注釋 # Python Tools for Visual Studio (PTVS) 的部分，並為虛擬環境文件夾添加一個新行，如 /BasicProject/env。 （由於 Visual Studio 不會顯示“解決方案資源管理器”中的文件，請使用“文件” > “打開” > “文件”菜單命令直接打開它。 也可以從團隊資源管理器打開文件：在“設置”頁上，選擇“存儲庫設置”，轉到“忽略和屬性文件”部分，然后選擇 .gitignore 旁的“編輯”鏈接。）

接下來，打開命令窗口，導航到包含虛擬環境文件夾（如 env）的文件夾（如 BasicProject），然后運行 git rm -r env。 然后從命令行 (git commit -m 'Remove venv') 提交這些更改，或從“團隊資源管理器”的“更改”頁進行提交。

步驟 1-4：檢查樣本代碼

1. 項目創建完成后，在解決方案資源管理器中查看解決方案和項目，其中項目僅包含兩個文件 app.py 和 requirements.txt：

   

2. 如前文所述，requirements.txt 文件指定 Flask 包依賴項。 該文件旨在邀請你在第一次創建項目時創建虛擬環境。

3. 一個 app.py 文件包含三個部分。 第一部分是 Flask import 語句，其作用是創建 Flask 類實例（分配給變量 app），然后分配 wsgi_app 變量（部署到 Web 主機時非常有用，但是現階段暫不使用）：

   Python復制

   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 

4. 第二部分（文件末尾）是一些可選代碼，其作用是使用從環境變量中提取的特定主機和端口值（默認為 localhost:5555）啟動 Flask 開發服務器：

   Python復制

   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) 

5. 第三部分是將函數分配到 URL 路由的一些短代碼，其作用是提供 URL 標識的資源。 使用 Flask 的 @app.route 修飾器定義路由，其參數是站點根目錄中的相對 URL。 正如代碼中所示，此處的函數僅返回文本字符串，已足夠瀏覽器呈現。 在后面的步驟中，使用 HTML 呈現更豐富的頁面。

   Python復制

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

問：name 參數對 Flask 類的作用是什么？

答：該參數是應用的模塊或包名稱，告知 Flask 查找屬於應用的模板、靜態文件和其他資源的位置。 對於單個模板中包含的應用，__name__ 始終是正確值。 對需要調試信息的擴展也非常重要。 有關詳細信息及其他參數，請參閱 Flask 類文檔 (flask.pocoo.org)。

問：一個函數能否有多個路由修飾器？

答：能，如果同一個函數服務於多個路由，則可以使用任意數量的修飾器。 例如，若要為“/”和“/hello”使用 hello 函數，請使用以下代碼：

Python復制

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

問：Flask 如何使用變量 URL 路由和查詢參數？

答：在路由中，使用 <variable_name> 標記任意變量，Flask 使用命名參數將參數傳遞到函數。 變量可以是 URL 路徑的一部分或在查詢參數中。 例如，'/hello/<name> 形式的路由將名為 name 的字符串參數生成到函數，在路由中使用 ?message=<msg> 分析為“message=”查詢參數提供的值並將其傳遞到 msg 等函數：

Python復制

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

若要更改類型，將變量前綴設為 int、float、path（接受斜杠來說明文件夾名稱）和 uuid。 有關詳細信息，請參閱 Flask 文檔中的變量規則。

還通過 request.args 屬性提供查詢參數，特別是通過 request.args.get 方法。 有關詳細信息，請參閱 Flask 文檔中的請求對象。

問：在我安裝其他包后，Visual Studio 能否從虛擬環境生成 requirements.txt 文件？

答：可以。 展開“Python 環境”節點，右鍵單擊虛擬環境，並選擇“生成 requirements.txt”命令。 在修改環境，並將對 requirements.txt 所做的更改連同依賴於該環境的任何其他代碼更改提交給源代碼管理時，建議定期使用此命令。 如果在生成服務器上設置持續集成，應該在修改環境時生成文件並提交更改。

步驟 1-5：運行該項目

1. 在 Visual Studio 中，選擇“調試” > “啟動調試”(F5) 或使用工具欄上的“Web 服務器”按鈕（所看到的瀏覽器可能會有所不同）：

   

2. 任何一個命令將隨機端口號分配到 PORT 環境變量，然后運行 python app.py。 代碼使用 Flask 開發服務器中的端口啟動應用。 如果 Visual Studio 顯示“啟動調試器失敗”並顯示無啟動文件的相關消息，右鍵單擊解決方案資源管理器中的 app.py 並選擇“設為啟動文件”。

3. 服務器啟動時，會打開一個控制台窗口，其中顯示服務器日志。 然后，Visual Studio 自動將瀏覽器打開到 http://localhost:<port>，其中應該看到 hello 函數呈現的消息：

   

4. 完成后，通過關閉控制台窗口，或使用 Visual Studio 中的“調試” > “停止調試”命令來停止服務器。

問：在項目 Python 子菜單中使用“調試”菜單命令和服務器命令有何區別？

答：除了“調試”菜單命令和工具欄按鈕之外，還可以使用項目上下文菜單上的“Python” > “運行服務器”或“Python” > “運行調試服務器”命令來啟動服務器。 這兩個命令都會打開一個控制台窗口，可以在其中看到運行服務器的本地 URL (localhost:port)。 但是，必須使用該 URL 手動打開瀏覽器，並且運行調試服務器不會自動啟動 Visual Studio 調試器。 如果需要，稍后可以使用“調試” > “附加到進程”命令，將調試器附加到正在運行的進程。

后續步驟

此時，基本 Flask 項目在同一個文件中包含啟動代碼和頁面代碼。 最好將這兩個關注點分開，並且最好使用模板分離 HTML 和數據。

使用視圖和頁面模板創建 Flask 應用

深入了解

• Flask 快速入門 (flask.pocoo.org)
• GitHub 上的教程源代碼：Microsoft/python-sample-vs-learning-flask