Visual Studio 中的了解Flask 教學課程步驟1，Flask 基本概念
文章推薦指數： 80 %
使用Flask Web Project 範本，建立具有多個頁面與回應式設計的應用程式(步驟4) 。
在這些步驟中，您會建立單一Visual Studio 方案，其中包含兩個不同的 ...
跳到主要內容
已不再支援此瀏覽器。
請升級至MicrosoftEdge，以利用最新功能、安全性更新和技術支援。
下載MicrosoftEdge
其他資訊
目錄
結束焦點模式
閱讀英文
儲存
編輯
共用
Twitter
LinkedIn
Facebook
電子郵件
WeChat
目錄
閱讀英文
儲存
目錄
閱讀英文
儲存
編輯
Twitter
LinkedIn
Facebook
電子郵件
WeChat
目錄
教學課程：開始使用VisualStudio中的FlaskWeb架構
發行項
03/09/2022
2位參與者
此頁面有所助益嗎？
Yes
No
還有其他意見反應嗎？
系統會將意見反應傳送給Microsoft：按下[提交]按鈕，您的意見反應將用來改善Microsoft產品和服務。
隱私權原則。
送出
謝謝。
本文內容
Flask是一個輕量型的PythonWeb應用程式架構，可提供URL路由和頁面轉譯的基本要素。
Flask被稱為「微」架構，因為它並不直接提供表單驗證、資料庫抽象、驗證等功能。
這類功能會改由稱為Flask「延伸模組」的特殊Python套件提供。
延伸模組會與Flask緊密整合，讓它們看起來像是Flask本身的一部分。
例如，Flask本身並不提供頁面範本引擎。
如本教學課程中所示範，範本化功能是由Jinja和Jade等延伸模組所提供。
在本教學課程中，您會了解如何：
在Git存放庫中使用「空白FlaskWebProject」範本建立基本的Flask專案，(步驟1)。
建立具有單一頁面的Flask應用程式，並使用範本(步驟2)來呈現該頁面。
提供靜態檔案、新增頁面，以及使用範本繼承(步驟3)。
使用FlaskWebProject範本，建立具有多個頁面與回應式設計的應用程式(步驟4)。
使用投票FlaskWebProject範本來建立輪詢應用程式，以使用各種儲存體選項(Azure儲存體、MongoDB或記憶體)。
在這些步驟的整個過程中，您會建立包含三個個別專案的單一VisualStudio解決方案。
您會使用VisualStudio隨附的不同Flask專案範本來建立專案。
透過將專案保留在同一個解決方案中，可讓您輕鬆地來回切換，比較不同的檔案。
在本教學課程中，您會了解如何：
在Git存放庫中使用「空白FlaskWebProject」範本建立基本的Flask專案，(步驟1)。
建立具有單一頁面的Flask應用程式，並使用範本(步驟2)來呈現該頁面。
提供靜態檔案、新增頁面，以及使用範本繼承(步驟3)。
使用FlaskWebProject範本，建立具有多個頁面與回應式設計的應用程式(步驟4)。
在這些步驟中，您會建立單一VisualStudio方案，其中包含兩個不同的專案。
您會使用VisualStudio隨附的不同Flask專案範本來建立專案。
透過將專案保留在同一個解決方案中，可讓您輕鬆地來回切換，比較不同的檔案。
注意
本教學課程與Flask快速入門的差異在於，您可以深入了解Flask，以及如何使用各種不同Flask專案範本，以便為自己的專案提供更廣泛的起點。
例如，專案範本會在建立專案時自動安裝Flask套件，而不像快速入門中所示，需要您手動安裝套件。
必要條件
Windows上具有下列選項的VisualStudio2017或更新版本：
Python開發工作負載(安裝程式的[工作負載]索引標籤)。
如需相關指示，請參閱在VisualStudio中安裝Python支援。
[程式碼工具]下[個別元件]索引標籤上的[GitforWindows]和[VisualStudio的GitHub擴充]。
使用下列選項在Windows上VisualStudio2022：
Python開發工作負載(安裝程式的[工作負載]索引標籤)。
如需相關指示，請參閱在VisualStudio中安裝Python支援。
GitforWindows在[程式代碼工具]底下的[個別元件]索引標籤上。
Flask專案範本隨附于所有舊版適用於VisualStudio的Python工具，但詳細資料可能與本教學課程中討論的內容不同。
VisualStudioforMac目前不支援Python開發。
在Mac和Linux上，請使用VisualStudioCode教學課程中的Python擴充功能。
步驟1-1：建立VisualStudio專案和解決方案
在VisualStudio中，選取>[檔案新增>Project]，搜尋"Flask"，然後選取[空白FlaskWebProject]範本。
(範本也可在左側清單中的Python>Web下找到。
)
在對話方塊底部的欄位中，輸入下列資訊(如上圖所示)，然後選取[確定]：
名稱：將VisualStudio專案名稱設定為BasicProject。
此名稱也會用於Flask專案。
位置：指定要在其中建立VisualStudio解決方案和專案的位置。
解決方案名稱：設定為LearningFlask，適用于在本教學課程中作為多個專案容器的解決方案。
為解決方案建立目錄：設定維持不變(預設值)。
建立新的Git存放庫：選取此選項(預設為清除)，以便VisualStudio在建立解決方案時一併建立本機Git存放庫。
若您沒有看到此選項，請執行VisualStudio安裝工具，並在[程式碼工具]下的[個別元件]索引標籤上新增GitforWindows和VisualStudio的GitHub延伸模組。
隨後VisualStudio會以對話方塊提示您，指出此專案需要外部套件(如下所示)。
之所以會出現此對話方塊，是因為範本包含參考最新Flask1.x套件的requirements.txt檔案。
(選取[顯示必要套件]來查看確切相依性)。
選取[我將自行安裝]選項。
您很快便會建立虛擬環境，以確定它已從原始檔控制中排除。
(環境隨時可以從requirements.txt建立。
)
在VisualStudio中，選取>[檔案新增>]Project，然後搜尋"Flask"。
然後，選取空白的FlaskWebProject範本，然後選取[下一步]。
輸入下列資訊來設定新的專案，然後選取[建立]：
名稱：將VisualStudio專案名稱設定為BasicProject。
此名稱也會用於Flask專案。
位置：指定要在其中建立VisualStudio解決方案和專案的位置。
解決方案名稱：設定為LearningFlask，適用于在本教學課程中作為多個專案容器的解決方案。
步驟1-2：檢查Git控制項並發佈至遠端存放庫
因為您已在[新專案]對話方塊中選取[建立新的Git存放庫]，所以在建立流程完成時，系統便會立即對本機原始檔控制認可此專案。
在此步驟中，您將能熟悉VisualStudio的Git控制項，以及用來處理原始檔控制的[TeamExplorer]視窗。
檢查VisualStudio主視窗右下角的Git控制項。
這些控制項由左至右會顯示未推送的認可、未認可的變更、存放庫名稱，以及目前的分支：
注意
如果您並未在[新專案]對話方塊中選取[建立新的Git存放庫]，Git控制項只會顯示建立本機存放庫的[新增至原始檔控制]命令。
選取變更按鈕，VisualStudio會將其[TeamExplorer]視窗開啟至[變更]頁面。
因為新建立的專案已經自動認可至原始檔控制，所以您不會看到任何暫止的變更。
在VisualStudio狀態列上，選取未推送認可按鈕(具有2的向上箭頭)，以在TeamExplorer中開啟[同步處理]頁面。
因為您只有本機存放庫，該頁面會提供簡單的選項，以將存放庫發佈至不同的遠端存放庫。
您可以為自己的專案選取所需的任何服務。
本教學課程示範如何使用GitHub，其中教學課程的完整範例程式碼保存在Microsoft/python-sample-vs-learning-flask存放庫中。
選取任何[發佈]控制項時，[TeamExplorer]會提示您輸入更多資訊。
例如，發佈此教學課程的範例時，必須先建立存放庫本身，而在這種情況下，[推送至遠端存放庫]選項會和存放庫的URL搭配使用。
如果您尚無現有存放庫，[發佈至GitHub]與[推送至AzureDevOps]選項可讓您直接在VisualStudio內建立存放庫。
隨著您逐步完成本教學課程，請建立定期使用VisualStudio中的控制項來認可並推送變更的習慣。
本教學課程會合適的時機點提醒您。
提示
若要在TeamExplorer內快速瀏覽，請選取標題(在上面影像中標為[變更]或[推送])以查看可用頁面的快顯功能表。
在此步驟中，您將能熟悉VisualStudio的Git控制項，以及用來處理原始檔控制的[TeamExplorer]視窗。
若要將專案認可至本機原始檔控制，請在VisualStudio主視窗的右下角選取[加入至原始檔控制]命令，然後選取[Git]選項。
此動作會帶您前往[建立Git存放庫]視窗，您可以在其中建立和推送新的存放庫。
建立存放庫之後，底部會出現一組新的Git控制項。
這些控制項會從左至右顯示未推送認可、未認可的變更、最新分支和儲存機制的名稱：
選取[git變更]按鈕，VisualStudio在[git變更]頁面上開啟其TeamExplorer視窗。
因為新建立的專案已經自動認可至原始檔控制，所以您不會看到任何暫止的變更。
在VisualStudio狀態列上，選取未推送認可按鈕(具有2的向上箭頭)，以在TeamExplorer中開啟[同步處理]頁面。
因為您只有本機存放庫，該頁面會提供簡單的選項，以將存放庫發佈至不同的遠端存放庫。
您可以為自己的專案選取所需的任何服務。
本教學課程示範如何使用GitHub，用於教學課程的完整範例程式碼維護於Microsoft/python-sample-vs-learning-django存放庫中。
選取任何[發佈]控制項時，[TeamExplorer]會提示您輸入更多資訊。
例如，在發佈本教學課程的範例時，必須先建立存放庫本身。
在此情況下，會使用「推送至遠端存放庫」選項與存放庫的URL。
如果您尚無現有存放庫，[發佈至GitHub]與[推送至AzureDevOps]選項可讓您直接在VisualStudio內建立存放庫。
隨著您逐步完成本教學課程，請建立定期使用VisualStudio中的控制項來認可並推送變更的習慣。
本教學課程會在適當的點提醒您。
提示
若要在TeamExplorer內快速瀏覽，請選取標題(在上面影像中標為[變更]或[推送])以查看可用頁面的快顯功能表。
問題：從專案一開始就使用原始檔控制會有哪些優點？
答：從一開始就使用原始檔控制，特別是當您也使用遠端存放庫時，會提供專案的一般異地備份。
不同於只在本機檔案系統上維護專案，原始檔控制也能提供完整的變更記錄，並能輕易將單一檔案或整個專案還原至先前的狀態。
該變更記錄可協助判斷迴歸(測試失敗)的原因。
如果有多人正在處理某個專案，則原始檔控制是不可或缺的，因為它會管理覆寫並提供衝突解決。
原始檔控制基本上是一種自動化形式，可讓您妥善地將組建、測試和發行管理自動化。
這是使用專案DevOps的第一個步驟，而且因為進入的障礙太低，所以根本沒有理由要從頭開始使用原始檔控制。
如需原始檔控制作為自動化的進一步討論，請參閱MSDNMagazine針對行動應用程式(但也同樣適用於Web應用程式)所撰寫的文章：本質來源：存放庫在DevOps中的角色(英文)。
問題：我能夠避免VisualStudio自動認可新專案嗎？
回答：是。
若要停用自動認可，請移至[TeamExplorer]中的[設定]頁面，選取[Git]>[全域設定]，清除標示為[預設在合併後認可變更]的選項，然後選取[更新]。
步驟1-3：建立虛擬環境並將它從原始檔控制中排除
既然您已為專案設定原始檔控制，現在便可為專案所需的Flask套件建立必要的虛擬環境。
接著，您可以使用[TeamExplorer]將環境的資料夾從原始檔控制中排除。
在[方案總管]中，以滑鼠右鍵按一下[Python環境]節點，然後選取[新增虛擬環境]。
[新增虛擬環境]對話方塊隨即出現，上面的訊息指出我們找到requirements.txt檔案。
此訊息表示VisualStudio會使用該檔案來設定虛擬環境。
選取[建立]來接受預設值。
(您可以視需要變更虛擬環境的名稱，這只會變更其子資料夾的名稱，但env為標準慣例)。
在出現提示時同意賦與系統管理員權限，然後在VisualStudio下載並安裝套件時耐心等待幾分鐘，這對於Flask及其相依性來說，意謂著會在超過100個子資料夾中擴增數千個檔案。
您可以在VisualStudio的[輸出]視窗中查看進度。
您可在等候期間思考下方的＜問題＞小節。
您也可以在Flask安裝(英文)頁面(flask.pcocoo.org)上查看Flask相依性的描述。
在VisualStudioGit控制項(位於狀態列)上，選取變更指標(顯示99*)，這會在TeamExplorer中開啟[變更]頁面。
建立虛擬環境帶來了數千個變更，但是並不需要將其中任何一個變更包含在原始檔控制中，因為您(或複製專案的任何其他人)隨時可從requirements.txt重新建立環境。
若要排除虛擬環境，請以滑鼠右鍵按一下env資料夾，然後選取[略過這些本機項目]。
排除虛擬環境之後，剩下的變更都是針對專案檔和.gitignore的變更。
.gitignore檔案包含針對虛擬環境資料夾的新增項目。
您可以按兩下該檔案以查看差異。
輸入認可訊息並選取[全部認可]按鈕，然後視需要將認可推送至遠端存放庫。
在方案總管中，以滑鼠右鍵按一下[Python環境]節點，然後選取[新增環境]。
在[新增虛擬環境]對話方塊中，選取[建立]以接受預設值。
(您可以視需要變更虛擬環境的名稱，這只會變更其子資料夾的名稱，但env為標準慣例)。
如果出現提示，請同意系統管理員許可權，然後在VisualStudio下載並安裝套件時，等候幾分鐘的時間。
在這段期間，會將數千個檔案傳送到多個子資料夾！您可以在VisualStudio的[輸出]視窗中查看進度。
您可在等候期間思考下方的＜問題＞小節。
在VisualStudioGit控制項(位於狀態列)上，選取變更指標(顯示99*)，這會在TeamExplorer中開啟[變更]頁面。
建立虛擬環境帶來了數千個變更，但是並不需要將其中任何一個變更包含在原始檔控制中，因為您(或複製專案的任何其他人)隨時可從requirements.txt重新建立環境。
若要排除虛擬環境，請以滑鼠右鍵按一下env資料夾，然後選取[略過這些本機項目]。
排除虛擬環境之後，剩下的變更都是針對專案檔和.gitignore的變更。
.gitignore檔案包含針對虛擬環境資料夾的新增項目。
您可以按兩下該檔案以查看差異。
輸入認可訊息，然後選取[全部認可]按鈕，然後將認可推送至遠端存放庫。
問題：為什麼我要建立虛擬環境？
答案：虛擬環境是隔離應用程式確切相依性的絕佳方法。
這類隔離方式可避免在全域Python環境中發生衝突，並協助測試和共同作業。
隨著您持續開發應用程式，不免會帶入許多有用的Python套件。
透過將套件留在專案特定的虛擬環境中，您可以輕鬆更新專案中描述該環境的requirements.txt檔案(其包含在原始檔控制中)。
將專案複製到任何其他電腦(包括建置伺服器、部署伺服器及其他開發電腦)時，只要使用requirements.txt就能輕鬆重新建立環境(這就是為何環境不需要位於原始檔控制中的原因)。
如需詳細資訊，請參閱使用虛擬環境。
問題：我要如何移除已認可至原始檔控制的虛擬環境？
回答：首先，請編輯.gitignore檔案以將該資料夾排除：在結尾尋找註解為#PythonToolsforVisualStudio(PTVS)的區段，然後為虛擬環境資料夾新增一行，例如/BasicProject/env。
(因為VisualStudio不會在[方案總管]中顯示該檔案，請使用[檔案]>[開啟]>[檔案]功能表命令來直接開啟該檔案。
您也可以從TeamExplorer開啟該檔案：在[設定]頁面上，選取[存放庫設定]，移至[忽略屬性檔案]區段，然後選取.gitignore旁邊的[編輯]連結。
)
再來，請開啟命令視窗，巡覽至包含虛擬環境資料夾(例如env)的資料夾(例如BasicProject)，然後執行gitrm-renv。
接著，從命令列(gitcommit-m'Removevenv')認可那些變更，或是從[TeamExplorer]的[變更]頁面認可它們。
步驟1-4：檢查未定案程式碼
建立完專案之後，您就會在[方案總管]中看到解決方案和專案，其中專案只包含app.py和requirements.txt這兩個檔案：
如先前所述，requirements.txt檔案會指定Flask套件相依性。
正是因為這個檔案，系統才會在您首次建立專案時邀請您建立虛擬環境。
單一的app.py檔案包含三個部分。
First是importFlask的語句，可建立類別的實例Flask（指派給變數app），然後指派wsgi_app變數(這在部署到web主機時很有用，但目前不用於)：
fromflaskimportFlask
app=Flask(__name__)
#MaketheWSGIinterfaceavailableatthetoplevelsowfastcgicangetit.
wsgi_app=app.wsgi_app
第二個部分(位於檔案結尾)是些許選擇性程式碼，會以取自環境變數的特定主機和連接埠值(預設為localhost:5555)啟動Flask開發伺服器：
if__name__=='__main__':
importos
HOST=os.environ.get('SERVER_HOST','localhost')
try:
PORT=int(os.environ.get('SERVER_PORT','5555'))
exceptValueError:
PORT=5555
app.run(HOST,PORT)
第三個部份是些許簡短程式碼，會將函式指派給URL路由，這意謂著函式會提供由該URL識別的資源。
您將使用Flask的@app.route裝飾項目來定義路由，此裝飾項目的引數是網站根目錄的相對URL。
正如您在程式碼中所看到的，這裡的函式只會傳回文字字串，這已足以供瀏覽器呈現頁面。
在接下來的步驟中，您會以HTML呈現更豐富的頁面。
@app.route('/')
defhello():
"""Rendersasamplepage."""
return"HelloWorld!"
問題：Flask類別的name引數用途為何？
回答：此引數是應用程式模組或套件的名稱，可告訴Flask該去哪裡尋找範本、靜態檔案，以及其他屬於應用程式的資源。
對於包含在單一模組中的應用程式來說，__name__一律是正確的值。
此引數對於需要偵錯資訊的延伸模組來說，也相當重要。
如需詳細資訊和額外的引數，請參閱Flask類別文件(英文)(flask.pocoo.org)。
問題：一個函式是否可以有多個路由裝飾項目？
回答：是，如果同一個函式為多個路由提供服務，您可以視需要使用任意數目的裝飾項目。
例如，若要將hello函式同時用於"/"和"/hello"，請使用下列程式碼：
@app.route('/')
@app.route('/hello')
defhello():
"""Rendersasamplepage."""
return"HelloWorld!"
問題：Flask如何與變數URL路由和查詢參數搭配運作？
答：在路由中，您可以使用標記任何變數
例如，以形式/hello/
您可以透過request.args屬性取得查詢參數，特別是透過request.args.get方法。
如需詳細資訊，請參閱Flask文件中的要求物件(英文)。
#URL:/hello/
如需詳細資料，請參閱Flask文件中的變數規則(英文)。
問題：VisualStudio是否可以在我安裝其他套件之後，從虛擬環境產生requirements.txt檔案？
回答：是。
展開[Python環境]節點，以滑鼠右鍵按一下虛擬環境，然後選取[產生requirements.txt]命令。
在您修改環境時，最好定期使用此命令，並將對requirements.txt的變更，連同依存於該環境的任何其他程式碼變更認可至原始檔控制。
如果您在組建伺服器上設定持續整合，每當您修改環境時，都應該產生該檔案並認可變更。
步驟1-5：執行專案
在VisualStudio中，選取[Debug>開始調試](F5)或使用工具列上的[Web服務器]按鈕(您所看到的瀏覽器可能會有不同的)：
上述任一命令都會將一個隨機連接埠號碼指派給PORT環境變數，然後執行pythonapp.py。
此程式碼會在Flask的開發伺服器內使用該連接埠來啟動應用程式。
如果VisualStudio表示無法啟動偵錯工具，且包含指出沒有啟動檔案的訊息，請以滑鼠右鍵按一下[方案總管]中的app.py，然後選取[設定為啟動檔案]。
當伺服器啟動時，您會看到主控台視窗開啟，其中顯示伺服器記錄檔。
接著，VisualStudio會自動將瀏覽器開啟至http://localhost:
問題：使用[偵錯]功能表命令和使用專案Python子功能表上的伺服器命令，兩者有何差異？
回答：除了[偵錯]功能表命令與工具列按鈕之外，您也可以使用專案內容功能表上的[Python]>[執行伺服器]或[Python]>[執行偵錯伺服器]命令來啟動伺服器。
這兩個命令都會開啟主控台視窗，您可在該處看到執行中伺服器的本機URL(localhost:port)。
不過，您必須以該URL手動開啟瀏覽器，而且執行debugserver不會自動啟動VisualStudio偵錯工具。
您可以稍後使用Debug>attachtoprocess命令，將偵錯工具附加至執行中的進程。
後續步驟
目前，基本Flask專案會將起始程式碼和頁面程式碼放在同一個檔案中。
最好是將這兩個考量重點分開，並且也使用範本將HTML和資料分開。
使用檢視與頁面範本來建立Flask應用程式
深入了解
Flask快速入門(英文)(flask.pocoo.org)
GitHub上的教學課程原始程式碼：Microsoft/python-sample-vs-learning-flask(英文)
本文內容
延伸文章資訊
- 1第20 天：Flask：基礎網頁製作 - iT 邦幫忙
要開始用Python 寫網站的話，絕大多數的人腦中浮現的第一個選擇大概會是Flask➀。Flask 這個套件提供了不少架設網站需要的基本工具，包括路由(Routes)、網頁模板(template...
- 2Flask實作_基礎_01_建立第一個app
tags: python flask. 在Flask中，要建置一個網頁或是api並不是難事，難的事通常不會是這個，而 ...
- 3Welcome to Flask — Flask Documentation (2.0.x)
The rest of the docs describe each component of Flask in detail, with a full reference in the API...
- 4使用Python 和Flask 建立AI Web 應用程式- Learn - Microsoft ...
學習目標. 在本課程模組中，您將使用Flask 和認知服務以建置翻譯文字的網站。 了解如何設定 ...
- 5pallets/flask: The Python micro framework for building ... - GitHub
Flask is a lightweight WSGI web application framework. It is designed to make getting started qui...
