教學課程：在Visual Studio中使用 Flask Web 架構

本文是三部分教學課程系列的第一個步驟，示範如何在Visual Studio中使用 Flask。 Flask 是一種適用於 Web 應用程式的羽量型 Python 架構，可提供 URL 路由和頁面轉譯的基本概念。 Flask 被稱為「微型」框架，是因為它不會直接提供像是表單驗證、資料庫抽象層、身份驗證等功能。 這些功能是由稱為 Flask 擴充功能的特殊 Python 套件所提供，。 延伸模組與 Flask 緊密整合，因此它們看起來就像是 Flask 本身的一部分。 例如，Flask 本身不提供頁面範本引擎。 範本化是由 Jinja 和 Jade 等延伸模組所提供，如本教學課程所示。

在教學課程的步驟 1 中，您會瞭解如何：

• 建立 Visual Studio 方案和 Flask 專案
• 檢查項目重複使用程式碼並執行專案
• 建立 Git 存放庫以維護 Flask 項目的變更
• 使用 Git 版本控制系統
• 建立 Flask 專案的虛擬環境

本教學課程與 Flask 快速入門不同。 您可以深入瞭解 Flask，以及如何使用 Flask 專案範本，為您的專案提供更廣泛的起點。 當您建立專案時，範本會自動安裝 Flask 套件，而快速入門示範如何手動安裝套件。

先決條件

• 在 Windows 上的 Visual Studio Installer 中選取下列選項的 Visual Studio 2022：

  • 在 [工作負載] 索引卷標上，選取 [Python 開發] 選項。 如需詳細資訊，請參閱 在Visual Studio中安裝 Python 支援。

  • 在 [個別元件] 索引標籤的 [程式碼工具]下，選取 [Git for Windows ] 選項。

Flask 專案範本隨附於所有舊版的 Python Tools for Visual Studio 中。 範本詳細數據可能與本教學課程中的描述不同。

不支援 Visual Studio for Mac。 如需詳細資訊，請參閱 Visual Studio for Mac 發生什麼事？ Windows、Mac 和 Linux 上的 Visual Studio Code 透過可用的擴充功能與 Python 搭配運作。

建立 Visual Studio 方案和 Flask 專案

在本教學課程的步驟 1 中，您會建立單一 Visual Studio 解決方案，以包含兩個不同的 Flask 專案。 您可以使用 Visual Studio 隨附的不同 Flask 專案範本來建立專案。 藉由將專案保留在相同的方案中，您可以輕鬆地在不同的檔案之間來回切換以進行比較。

請遵循此程式來建立解決方案和 Flask Web 專案：

1. 在 Visual Studio 中，選取 [檔案]>[新增>專案]，搜尋 “Flask”。接著，選取 空白 Flask Web 專案 範本，然後選取 [下一步] 。

   

2. 設定新的項目與解決方案：

   1. 將 Visual Studio 項目的 名稱 設定為 BasicProject。 此名稱也用於 Flask 專案。

   2. 指定 Visual Studio 位置，以儲存方案和專案。

   3. 清除 將方案與專案放在相同目錄 選項中。

   4. 將 解決方案名稱 設定為 LearningFlask。 此解決方案可作為本教學課程系列中多個專案的容器。

3. 選擇 來建立。

4. 不久之後，Visual Studio 會在專案〈BasicProject〉中偵測到 Python 套件規格檔案〈requirements.txt〉。：

   

   對話框指出選取的範本包含 requirements.txt 檔案，可用來建立專案的虛擬環境。

5. 選取右側的 X，以關閉提示。 在本教學課程的稍後階段，您會建立虛擬環境，並確保來源控制系統排除這個虛擬環境。 （環境始終可以從 requirements.txt 檔案中建立。）

檢查 Git 控制件

在接下來的程序中，您將讓自己熟悉 Visual Studio 對 Git 原始檔控制的支援。

重要

在 Visual Studio 2019 16.8 版版本中，Git 版本控制體驗預設為開啟。 如果您想要深入瞭解它與 Team Explorer 的比較方式，請參閱 Git 和 Team Explorer頁面並存比較。

不過，如果您想要繼續在 Visual Studio 2019 中使用 Team Explorer，請移至 [工具]>[>環境]>[預覽功能]，然後切換 [[新增 Git 使用者體驗] 複選框。 （此選項不適用於 Visual Studio 2022 和更新版本。如需詳細資訊，請參閱在 Team Explorer 中連線至專案 。

1. 若要將項目認可至本機原始檔控制，請選取 [Visual Studio 主視窗中右下方的 [新增至原始檔控制]，然後選取 [Git：

   

   [建立 Git 存放庫] 視窗隨即開啟，您可以在其中建立並推送新的存放庫。

2. 建立存放庫之後，Git 控件列會出現在 Visual Studio 主視窗中的右下角：

   

   從左到右，Git 控制列會顯示傳出/傳入提交的數目（箭號 #/#）、未提交的變更數目（鉛筆 #）、目前分支名稱，以及目前的倉庫名稱。 Git 控制項也可以在主要工具列的 [Git] 選單上取得。

3. 在 Git 控制項列上，選取變更（鉛筆 #）以開啟 [Git Changes] 視窗。 您也可以選擇 檢視>Git 變更 （Ctrl+O，Ctrl+G）：

   

   此視窗會顯示任何未認可的變更詳細數據，包括隱藏的變更。 由於您新建立的專案已自動提交到版本控制中，因此您不會看到任何擱置的變更。

4. 在 Git 控制項列上，選取提交（箭號 #/#），然後選取「檢視所有提交」：

   

   Git 存放庫 視窗隨即開啟。 您也可以選取 [檢視]>Git 存放庫 （Ctrl+O，Ctrl+R）：

   

   此視窗左窗格中顯示當前存放庫的詳細資訊，右窗格中顯示具有傳出/傳入提交的當前分支。

   若要查看檔案差異檢視，請在中央窗格中選取提交。 舊版會顯示在左側，修訂的版本會顯示在右側。 詳細數據也包含變更作者、變更認可者和認可訊息。

當您進行本教學課程時，請養成定期使用 Visual Studio 中的 Git 控制項來提交和推送變更的習慣。 本教學課程會在適當的時間點提醒您。

從頭開始使用原始檔控制

從項目開頭使用原始檔控制有幾個優點。 當您從項目開頭使用原始檔控制時，特別是當您也使用遠端存放庫時，您就會定期取得專案的異地備份。 與維護本機文件系統上的專案不同，原始檔控制也提供完整的變更歷程記錄，以及將單一檔案或整個專案還原成先前狀態的簡單功能。 變更歷程記錄有助於判斷回歸的原因（測試失敗）。

如果多個人員正在處理專案，則原始檔控制很重要，因為它會管理覆寫並提供衝突解決。 原始檔控制基本上是一種自動化形式，可讓您妥善進行組建、測試和發行管理。 這是針對專案使用 Azure DevOps 的第一個步驟，而且因為進入障礙太低，所以從一開始就沒有理由不使用原始檔控制。

如需更多關於將原始碼控制作為自動化的一部分的資訊，請參閱 真相來源：DevOps 中的存放庫角色，這篇發表於 MSDN Magazine 的文章主要撰寫於行動應用程式，但同樣適用於 Web 應用程式。

防止 Visual Studio 自動認可專案

請遵循下列步驟來防止 Visual Studio 自動認可新專案：

1. 選取 [工具]>[選項]>[原始檔控制]>[Git 全域設定]。

2. 根據預設，清除 [合併后認可變更] 選項，然後選取 [確定] [確定]。

建立虛擬環境並排除原始檔控制

設定專案的原始檔控制之後，您可以使用專案所需的必要 Flask 套件來建立虛擬環境。 然後，您可以使用 [Git 變更] 視窗，將環境的資料夾排除在版本控制之外。

1. 在 [方案總管]中，以滑鼠右鍵按兩下 [Python 環境] 節點，然後選取 [[新增環境]。

   

2. 在 [[新增環境] 對話框中，選取 [建立]，以接受預設值。 （如果您想要的話，您可以變更虛擬環境的名稱，這會變更其子資料夾的名稱，但 env 是標準慣例。

   

3. 如果 Visual Studio 提示您提供系統管理員許可權，請提供您的同意。 在 Visual Studio 下載並安裝套件時等候幾分鐘。 針對 Flask 及其相依性，此程式可能需要在超過 100 個子資料夾中展開接近 1,000 個檔案。 您可以在 Visual Studio [輸出] 視窗中檢視進度。

4. 在 Git 控制列上，選取未提交的變更（現在顯示 99+），以開啟 [Git 變更] 視窗：

   

   建立虛擬環境會產生數千個變更，但您不需要將它們包含在原始檔控制中。 您或複製專案的任何其他人都可以使用 requirements.txt 檔案來重新建立環境。

5. 若要從原始檔控制中排除虛擬環境，請在 [Git 變更] 視窗中，以滑鼠右鍵按一下 [env] 資料夾，然後選取 [忽略這些本機專案：

   

   排除虛擬環境之後，剩下的唯一變更是專案文件 （.py） 和 .gitignore 檔案，其中包含一個有關虛擬環境資料夾的新增條目。

   若要查看 .gitignore 檔案的差異檢視，請在 [Git 變更] 視窗中按兩下檔案。

6. 在 [Git 變更] 視窗中，輸入提交訊息，例如「初始專案變更」：

   

7. 在 [提交] 下拉選單中，選取 [提交已暫存的變更並推送]。

您可以開啟 [Git 存放庫] 視窗，並確認目前分支中 [本機歷程記錄] 顯示的已暫存的提交。

瞭解虛擬環境的目的

虛擬環境是隔離應用程式確切相依性的絕佳方式。 這種隔離方法可避免全域 Python 環境中的衝突，並協助測試和共同作業。 隨著時間推移，當您開發應用程式時，您總是引進許多實用的 Python 套件。 藉由將套件保留在專案特定的虛擬環境中，您可以輕鬆地更新描述該環境的專案 requirements.txt 檔案，而此檔案包含在原始檔控制中。 當您將專案複製到其他計算機，包括組建伺服器、部署伺服器和其他開發計算機時，很容易重新建立環境。 您只能使用 requirements.txt 檔案來重新建立環境，這就是為什麼環境不需要在原始檔控制中的原因。 如需詳細資訊，請參閱 使用虛擬環境。

拿掉原始檔控制下的虛擬環境

您可以在將虛擬環境納入版本控制之後移除它。 請遵循下列步驟：

1. 編輯 .gitignore 檔案以排除資料夾：

   1. 選取 [檔案]>[開啟>檔案]來開啟檔案。

      您也可以從 Team Explorer開啟檔案。 在 [設定] 頁面上，選取 [存放庫設定]。 移至 [忽略 & 屬性檔] 區段，然後選取 .gitignore旁 編輯 連結。

   2. 找出結尾處具有批注 # Python Tools for Visual Studio (PTVS)的區段。

   3. 在該區段之後，新增虛擬環境資料夾的新行，例如 /BasicProject/env。

2. 開啟指令視窗並移至具有虛擬環境資料夾的資料夾（例如 BasicProject），例如 env。

3. 執行 git rm -r env 命令，以移除目前在原始檔控制下的虛擬環境。

4. 使用 git commit -m 'Remove venv' 命令提交您的變更，或從 Team Explorer的 變更 頁面提交變更。

檢查樣板代碼

在本節中，您將檢視 Visual Studio 根據您選擇的範本在 Project 檔案（.py）中建立的樣板程式碼。

1. 開啟 [方案總管] ，以檢視您的方案和項目檔。 初始專案只包含兩個檔案，app.py 和 requirements.txt：

   

   requirements.txt 檔案會指定 Flask 套件相依性。 這個檔案的存在會在您第一次建立專案時提示您建立虛擬環境。

   單一 app.py 檔案包含空 Flask 網站專案的範本程式碼。

2. 在編輯器中開啟 app.py 檔案，並檢查第一個區段 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
   

3. 要檢閱的第二個區段會在檔案結尾發生。 本節包含可用來啟動 Flask 開發伺服器的選擇性程序代碼。

   您可以定義程式碼，以使用從環境變數擷取的特定主機和埠值，或使用預設主機和埠值 localhost:55551。

   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)
   

4. 要檢查的程式代碼第三個區段會將函式指派給 URL 路由，這表示函式會提供 URL 所識別的資源。

   您可以使用 Flask 的 @app.route 裝飾器，並以從網站根目錄開始的相對 URL 作為參數來定義路由。 如您在程式代碼中所見，函式只會傳回文字字串，足以讓瀏覽器轉譯。 在本教學課程系列後續的步驟中，您會更新程序代碼，以使用 HTML 轉譯更豐富的頁面。

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

瞭解 Flask 類別中的 name 自變數

Flask 類別中的 name 自變數是應用程式模組或套件的名稱。 Flask 會使用名稱來判斷要在哪裡尋找屬於應用程式的範本、靜態檔案和其他資源。 對於單一模組中包含的應用程式，__name__ 一律是適當的值。 名稱對於需要偵錯資訊的延伸模組也很重要。 如需詳細資訊和其他自變數，請參閱 Flask 類別檔 （flask.pocoo.org）。

使用多個路由裝飾器

函式可以有多個路由裝飾器。 如果相同的函式提供多個路由，則可以使用任意多的裝飾器。 例如，若要針對 / 路由和 /hello 路由使用 hello 函式，請使用下列程式代碼：

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

使用變數 URL 路由和查詢參數

Flask 可以使用變數 URL 路由和查詢參數。 在路由中，您可以使用 <variable_name> 屬性標記任何變數。 Flask 會使用 URL 路徑中的具名自變數，將變數傳遞至函式。 例如，格式為 /hello/<name> 的路由會產生名為 name 函式的字元串自變數。 查詢參數可透過 request.args 屬性取得，特別是透過 request.args.get 方法取得。 下列程式代碼提供範例：

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

若要變更類型，請在變數前面加上 int、float、path（接受斜線來劃定資料夾名稱），並 uuid。 如需詳細資訊，請參閱 Flask 檔中 變數規則。

在套件安裝之後產生需求

安裝其他套件之後，Visual Studio 可以從虛擬環境產生 requirements.txt 檔案。

• 在 [方案總管]中，展開 [Python 環境] 節點，右鍵點擊你的虛擬環境，然後選擇 [產生 requirements.txt]。

當您修改環境時，定期使用此命令是很好的作法。 將 requirements.txt 檔案的變更提交至版本控制系統，以及相依於該環境的任何其他程式碼變更。 如果您在建置伺服器上設定持續整合，您應該在修改環境時產生檔案並提交變更。

執行專案

現在您已準備好依照下列程式在 Visual Studio 中執行專案：

1. 在 Visual Studio 中，選取 [偵錯]>[開始偵錯] （F5），或在主要工具列上選取 [網頁伺服器]（您看到的瀏覽器可能會有所不同）：

   

2. 任一命令都會將隨機埠號碼指派給 PORT 環境變數，並執行 Python app.py 檔案。

   程式代碼會使用該埠在 Flask 開發伺服器內啟動應用程式。

   如果 Visual Studio 張貼訊息 無法啟動除錯程式，並指出找不到啟動檔案，請在 [方案總管] 中以滑鼠右鍵按鍵按鍵按鍵按 app.py 檔案，然後選取 [[設定為啟動檔案]。

3. 當伺服器啟動時，主控台視窗隨即開啟以顯示伺服器記錄檔。 Visual Studio 會自動開啟瀏覽器至 http://localhost:<port>，您應該會看到由 hello 函式顯示的訊息：

   

4. 完成時，請關閉主控台視窗，這會停止 Flask 開發伺服器。 您也可以選擇 [偵錯]>[停止偵錯]。

比較偵錯命令與專案 Python 命令

使用 Debug 選單命令與專案的 Python 子選單中列出的伺服器命令之間存在差異。

除了 偵錯 選單命令和工具列按鈕之外，您也可以使用 Python>[開始] 伺服器 或 Python>[啟動偵錯伺服器] 專案操作功能表上的命令來啟動伺服器。

這兩個命令都會開啟主控台視窗，您可以在其中看到執行中伺服器的本機 URL（localhost:port）。 不過，您必須以該 URL 手動開啟瀏覽器，而且執行偵錯伺服器不會自動啟動 Visual Studio 調試程式。 如果您想要稍後再將偵錯程式附加到執行中的進程，您可以使用 偵錯>附加至進程 命令。

下一步

步驟 2：使用檢視和頁面範本建立 Flask 應用程式