快速入門：使用 Visual Studio 建立 Python Web 應用程式

在本快速入門中，您會根據 Visual Studio 中的 Flask 架構建立 Python Web 應用程式。 您可以透過離散步驟來建立專案，以協助您瞭解 Visual Studio 的基本功能。 探索如何建立專案專案、新增程式碼和執行應用程式。

如果您需要安裝 Visual Studio，請移至 Visual Studio 下載 以免費安裝。 在 Visual Studio 安裝程式中，選取 Python 開發 工作負載。 在安裝詳細資料窗格中，選取 [Python Web 支援]。

建立專案

下列步驟會建立空白專案，作為應用程式的容器。

1. 開啟 Visual Studio。 在開始畫面上，選取 [建立新專案]。

2. 在 [建立新專案 ] 對話方塊中，在搜尋方塊中輸入 Python web 。 在結果清單中，選取 [Web 專案]，然後選取 [ 下一步]。

   

   如果您沒有看到 Python Web 專案範本，請選取 [工具]>] 以執行 Visual Studio 安裝程式。 在安裝程式中，選取 Python 開發 工作負載。 在 [安裝詳細資料] 底下，選取 [Python Web 支援]，然後選取 [修改]。

3. 在 [設定您的新專案] 對話方塊中，輸入 HelloPython 作為 [專案名稱]，指定專案 [位置]，然後選取 [建立]。

   

   新專案會在 [方案總管] 中開啟。 解決方案名稱會自動設定為符合專案名稱。 新專案是空的，因為它不包含任何檔案。

   

Visual Studio 中的專案和解決方案

在 Visual Studio 中為 Python 應用程式建立專案有優點。 Python 應用程式通常僅使用資料夾和檔案來定義，但隨著應用程式的變大，這種簡單的結構可能會變得繁瑣。 應用程式可能涉及自動產生的檔案、Web 應用程式的 JavaScript 和其他元件。 Visual Studio 專案有助於管理這種複雜性。

專案會以 .pyproj 檔案識別，該檔案會識別與專案相關聯的所有來源和內容檔案。 .pyproj 檔案包含每個檔案的建置資訊、維護與原始檔控制系統整合的資訊，並協助將應用程式組織成邏輯元件。

Visual Studio 解決方案是一個容器，可協助您將一或多個相關專案作為群組進行管理。 Visual Studio 會在 [方案總管] 中顯示您的解決方案。 解決方案會儲存非專案特定的組態設定。 解決方案中的專案也可以相互參考。 例如，執行 Python 應用程式專案可以自動建置第二個專案，例如 Python 應用程式使用的 C++ 延伸模組。

安裝 Flask 程式庫

Python 中的 Web 應用程式幾乎總是使用眾多可用的 Python 函式庫之一來處理低階細節，例如路由 Web 請求和塑造回應。 Visual Studio 提供許多 Web 應用程式的範本。 您可以在本快速入門稍後從其中一個範本建立專案。

使用下列步驟，將 Flask 程式庫安裝到 Visual Studio 用於此專案的預設 全域環境 。

1. 展開專案中的 Python 環境 節點，以查看專案的預設環境。

   

2. 以滑鼠右鍵按一下環境，然後選取 [管理 Python 套件]。 此命令會在 [套件 （PyPI）] 索引標籤上開啟 [Python 環境] 視窗。

3. 在搜尋欄位中輸入 flask 。

   • 如果 Flask 命令出現在搜尋框下方，則 Flask 已存在於系統上。 繼續至下個步驟。

   • 如果 Flask 命令未出現在搜尋方塊下方，請選取 [執行命令：pip install flask]。

     

     如果全域環境套件資料夾位於 C：\Program Files 等受保護區域中，則會出現提高許可權提示。 接受任何管理員權限的提示。 您可以觀察 Visual Studio 輸出 視窗以取得進度。

4. 安裝 Flask 之後，程式庫會出現在 方案總管的環境中。 您現在可以在 Python 程式碼中使用 Flask 命令。

   

備註

開發人員通常不會在全域環境中安裝程式庫，而是建立 一個虛擬環境 來安裝特定專案的程式庫。 Visual Studio 範本通常會提供此選項，如 快速入門 - 使用範本建立 Python 專案中所述。

如需其他可用 Python 套件的詳細資訊，請參閱 Python 套件索引。

新增程式碼檔

您現在已準備好新增一些 Python 程式碼來實作最小的 Web 應用程式。

1. 以滑鼠右鍵按一下 [方案總管] 中的專案，然後選取 [新增>專案]。

2. 在 [新增專案 ] 對話方塊中，選取 [ 空白 Python 檔案] 選項。

3. 輸入檔案名稱 app.py，然後選取 [新增]。 Visual Studio 會自動在編輯器視窗中開啟檔案。

4. 複製以下程式碼並將其貼到 app.py 檔案中：

   from flask import Flask
   
   # Create an instance of the Flask class that is the WSGI application.
   # The first argument is the name of the application module or package,
   # typically __name__ when using a single module.
   app = Flask(__name__)
   
   # Flask route decorators map / and /hello to the hello function.
   # To add other resources, create functions that generate the page contents
   # and add decorators to define the appropriate resource locators for them.
   
   @app.route('/')
   @app.route('/hello')
   def hello():
      # Render the page
      return "Hello Python!"
   
   if __name__ == '__main__':
      # Run the app server on localhost:4449
      app.run('localhost', 4449)
   
   

「 新增項目」 對話方塊會顯示許多其他類型的檔案，您可以新增至 Python 專案，例如 Python 類別、Python 套件、Python 單元測試或 web.config 檔案。 一般來說，這些 項目模板 是快速創建具有有用樣板代碼的文件的好方法。

如需 Flask 的詳細資訊，請參閱 Flask 快速入門。

執行應用程式

請依照下列步驟執行您的 Web 應用程式：

1. 在 [方案總管] 中，以滑鼠右鍵按一下 app.py 檔案，然後選取 [ 設定為啟動檔案]。 此命令會識別執行應用程式時要在 Python 中啟動的程式碼檔案。

   

2. 以滑鼠右鍵按一下 [方案總管] 中的專案，然後選取 [屬性]。

3. 在 [屬性] 對話方塊的 [偵錯] 索引標籤上，將 [埠號碼 ] 屬性設定為 4449。 此設定可確保 Visual Studio 搭配 localhost:4449 啟動瀏覽器，以符合程式碼中的 app.run 引數。

4. 在 Visual Studio 中，選取 [除錯>不除錯啟動] 或按 Ctrl+F5，以儲存檔案更改並執行應用程式。

   命令視窗隨即開啟，並顯示訊息 「正在執行中 https://localhost:4449"。 瀏覽器視窗隨即localhost:4449開啟，並顯示訊息「Hello， Python！」。 要求GET也會出現在命令視窗中，狀態為「200」。

   如果瀏覽器未自動開啟，請開啟您選擇的瀏覽器，然後移至 localhost:4449。

   如果您在命令視窗中只看到 Python 互動式 Shell，或該視窗在螢幕上短暫閃爍，請確定 app.py 檔案已設定為啟動檔案。

5. 在瀏覽器視窗中，前往 localhost:4449/hello，以確認 /hello 資源的裝飾器是否也正常運作。

   同樣地，GET要求會出現在命令視窗中，狀態為「200」。

   也嘗試一些其他 URL，看看它們是否在命令視窗中顯示 「404」 狀態碼。

6. 關閉命令視窗以停止應用程式，然後關閉瀏覽器視窗。

開始有或沒有偵錯

您可以在啟用或不啟用偵錯的情況下執行應用程式。 以下是這些選項之間的差異：

• [ 開始偵錯] 命令會在 Visual Studio 偵錯工具的內容中執行應用程式。 使用偵錯工具，您可以設定斷點、檢查變數以及逐行逐步執行程式碼。 應用程式在偵錯工具中執行速度可能會變慢，因為勾點可讓偵錯成為可能。

• 使用 [ 啟動而不偵錯] 命令，直接執行應用程式，而不需要偵錯內容，類似於從命令列執行應用程式。 此命令還會自動啟動瀏覽器並打開項目 屬性調>試 選項卡中指定的 URL。

相關內容

• 快速入門：從範本建立 Python 專案
• 教學課程：在 Visual Studio 中使用 Python
• Python Web 應用程式專案範本