Oktatóanyag: A Flask webes keretrendszer használata a Visual Studióban

Ez a cikk egy háromrészes oktatóanyag-sorozat első lépése, amely bemutatja, hogyan használható a Flask a Visual Studióban. Flask egy egyszerűsített Python-keretrendszer webalkalmazásokhoz, amely az URL-útválasztás és a lapmegjelenítés alapjait biztosítja. A Flaskot "mikro" keretrendszernek nevezik, mert nem nyújt közvetlenül olyan funkciókat, mint az űrlapérvényesítés, az adatbázis absztrakciója, a hitelesítés stb. Ezeket a funkciókat ehelyett a Flask bővítményeknevű speciális Python-csomagok biztosítják. A bővítmények zökkenőmentesen integrálhatók a Flasktal, így úgy jelennek meg, mintha maguk a Flask részei lennének. Maga a Flask például nem biztosít lapsablonmotort. A templatingot olyan bővítmények biztosítják, mint a Jinja és a Jade, ahogy az ebben az oktatóanyagban is látható.

Az oktatóanyag 1. lépésében megtanulhatja, hogyan:

• Visual Studio-megoldás és Flask-projekt létrehozása
• A projekt sablonkódjának vizsgálata és a projekt futtatása
• Git-adattár létrehozása a Flask-projekt módosításainak fenntartásához
• A Git forráskódvezérlőinek használata
• Virtuális környezet létrehozása a Flask-projekthez

Ez az oktatóanyag eltér a Flask rövid útmutatójától. További információ a Flaskról és a Flask-projektsablonok használatáról, hogy átfogóbb kiindulópontot biztosítson a projektekhez. A sablonok automatikusan telepítik a Flask-csomagot egy projekt létrehozásakor, míg a rövid útmutató bemutatja, hogyan kell manuálisan telepíteni a csomagot.

Előfeltételek

• Visual Studio 2022 vagy újabb Windows rendszeren a Visual Studio Installerben a következő beállításokkal:

  • A Számítási feladatok lapon válassza a Python fejlesztés opciót. További információ: Python-támogatás telepítése a Visual Studio.

  • Az Egyes összetevők fül alatt a Kódeszközökrésznél válassza a Git for Windows opciót.

A Flask-projektsablonok a Python Tools for Visual Studio összes korábbi verziójában megtalálhatók. A sablon részletei eltérhetnek az oktatóanyag leírásától.

A Visual Studio for Mac nem támogatott. További információért lásd: Mi történik a Mac Visual Studióval? A Visual Studio Code Windows, Mac és Linux rendszeren jól működik a Pythonnal az elérhető bővítmények révén.

Visual Studio-megoldás és Flask-projekt létrehozása

Az oktatóanyag 1. lépésében egyetlen Visual Studio-megoldást hoz létre, amely két különálló Flask-projektet tartalmaz. A projekteket a Visual Studio különböző Flask-projektsablonjaival hozhatja létre. Ha a projekteket ugyanabban a megoldásban tartja, egyszerűen válthat oda-vissza a különböző fájlok között összehasonlítás céljából.

A megoldás és a Flask-webprojekt létrehozásához kövesse az alábbi eljárást:

1. A Visual Studióban válassza Fájl>Új>Project lehetőséget, és keresse meg a "Flask" kifejezést. Ezután válassza a Blank Flask Web Project sablont, majd válassza a Továbblehetőséget.

   

2. Konfigurálja az új projektet és megoldást:

   1. Állítsa be a Visual Studio-projekt nevét a BasicProject. Ez a név a Flask-projekthez is használatos.

   2. Adja meg a Visual Studio helyét, ahol a megoldást és a projektet lehet menteni.

   3. Törölje a jelölést a "megoldás és projekt elhelyezése ugyanabban a könyvtárban" beállításnál.

   4. Állítsa a Megoldás nevétLearningFlask-ra. A megoldás ebben az oktatóanyag-sorozatban több projekt tárolójaként szolgál.

3. Válassza a és alétrehozása lehetőséget.

4. Egy pillanat múlva a Visual Studio megjeleníti az "BasicProject" projektben észlelt "requirements.txt" Python-csomag specifikációs fájlját.:

   

   A párbeszédpanel azt jelzi, hogy a kijelölt sablon tartalmaz egy requirements.txt fájlt, amellyel virtuális környezetet hozhat létre a projekthez.

5. Válassza a jobb oldalon található X az üzenet bezárásához. Az oktatóanyag későbbi részében létrehozza a virtuális környezetet, és biztosítja, hogy a forrásvezérlés kizárja a környezetet. (A környezet mindig később hozható létre a requirements.txt fájlból.)

Git-vezérlők vizsgálata

A következő eljárás során megismerkedhet a Visual Studio Git-forrásvezérlési támogatásával.

1. Ha a projektet a helyi forrásvezérlőhöz szeretné véglegesíteni, válassza a Hozzáadás a Forrásvezérlőhöz a Visual Studio főablakának jobb alsó sarkában, majd válassza Git:

   

   Megnyílik a Git adattár létrehozása ablak, ahol létrehozhat és leküldhet egy új adattárat.

2. Az adattár létrehozása után a Git vezérlősáv a Visual Studio főablakának jobb alsó sarkában jelenik meg:

   

   Balról jobbra a Git vezérlősávon látható a kimenő/bejövő véglegesítések száma (nyilak #/#), a nem véglegesített módosítások száma (ceruza #), az aktuális ág neve és az aktuális adattár neve. A Git-vezérlők a fő eszköztár Git menüjében is elérhetők.

3. A Git vezérlősávján válassza a módosításokat (ceruza #) a Git-módosítások ablak megnyitásához. Kiválaszthatja Git-módosítások megtekintése> (Ctrl+O, Ctrl+G):

   

   Ebben az ablakban a nem véglegesített módosítások részletei láthatók, beleértve a rejtett módosításokat is. Mivel az újonnan létrehozott projekt már automatikusan le van kötelezve a forráskövetésre, nem fog függőben lévő módosításokat látni.

4. A Git vezérlősávján jelölje ki a véglegesítéseket (nyilak #/#), majd válassza Az összes véglegesítés megtekintése:

   

   Megnyílik a Git-adattár ablak. Választhatja Nézet>Git-adattár (Ctrl+O, Ctrl+R):

   

   Ebben az ablakban a bal oldali panelen az aktuális tárház részletei, a jobb oldali panelen pedig az aktuális ág kimenő és bejövő véglegesítései láthatók.

   A fájl különbségnézetének megtekintéséhez jelöljön ki egy véglegesítést a középső panelen. Az előző verzió a bal oldalon, a módosított verzió pedig a jobb oldalon jelenik meg. A részletek tartalmazzák a módosítás szerzőt, a változás véglegesítőt és a véglegesítési üzenetet is.

Az oktatóanyag során megismerkedhet a Visual Studio Git-vezérlőinek rendszeres használatával a módosítások véglegesítéséhez és leküldéséhez. Ez az oktatóanyag emlékezteti a megfelelő pontokra.

Forrásvezérlő használata a kezdetektől

A forrásvezérlés használatának számos előnye van a projekt elejétől kezdve. Ha a projekt kezdetétől használ forrásvezérlőt, különösen ha távoli adattárat is használ, rendszeres helyszíni biztonsági másolatot kap a projektről. A projekt helyi fájlrendszeren való fenntartásával ellentétben a forrásvezérlés teljes változáselőzményeket is biztosít, és egyszerű lehetőséget kínál egyetlen fájl vagy az egész projekt korábbi állapotba való visszaállítására. A változáselőzmények segítenek meghatározni a regressziók (teszthibák) okát.

A forrásvezérlés elengedhetetlen, ha többen dolgoznak egy projekten, mert felülírásokat kezel, és ütközésmegoldást biztosít. A forrásvezérlés alapvetően az automatizálás egyik formája, amely jól automatizálja a buildeket, a tesztelést és a kiadáskezelést. Ez az első lépés az Azure DevOps projekthez való használatához, és mivel a belépési korlátok olyan alacsonyak, valójában nincs ok arra, hogy az elejétől kezdve ne használja a forrásvezérlést.

További információ a forrásvezérlésről, mint automatizálásról: The Source of Truth: The Role of Repositories in DevOps( Az adattárak szerepe a DevOpsban) című cikk, amely az MSDN Magazin mobilalkalmazásokhoz készült, webalkalmazásokra is érvényes cikkét tartalmazza.

Projektek automatikus véglegesítésének megakadályozása a Visual Studióban

Az alábbi lépéseket követve megakadályozhatja, hogy a Visual Studio automatikusan véglegesítse az új projektet:

1. Nyissa meg az Eszközök>beállításai panelt, és bontsa ki a Minden beállítás>forrásvezérlő>git beállításai szakaszt .

2. Törölje a véglegesítési módosításokat az egyesítés után az alapértelmezett beállítás szerint .

Virtuális környezet létrehozása és a forrásvezérlő kizárása

Miután konfigurálta a projekt forrásvezérlését, létrehozhatja a virtuális környezetet a projekthez szükséges Flask-csomagokkal. Ezután a Git-módosítások ablakban kizárhatja a környezet mappáját a forrásvezérlőből.

1. A Megoldáskezelőbenkattintson a jobb gombbal a Python-környezetek csomópontra, és válassza a Környezet hozzáadásalehetőséget.

   

2. A Környezet hozzáadása párbeszédpanelen válassza a létrehozása lehetőséget az alapértelmezett értékek elfogadásához. (Igény szerint módosíthatja a virtuális környezet nevét, amely megváltoztatja az almappájának nevét, de env szabványos konvenció.)

   

3. Ha a Visual Studio rendszergazdai jogosultságokat kér, adja meg a hozzájárulását. Várjon néhány percet, amíg a Visual Studio letölti és telepíti a csomagokat. A Flask és függőségei esetében a folyamat több mint 100 almappában közel 1000 fájl kibontását igényelheti. Az előrehaladást a Visual Studio Kimeneti ablakban tekintheti meg.

4. A Git vezérlősávján válassza ki a nem véglegesített módosításokat (amely most már 99+) az Git-módosítások ablak megnyitásához:

   

   A virtuális környezet létrehozása több ezer módosítást eredményez, de nem kell őket belefoglalnia a forráskezelésbe. Ön vagy bárki más, aki klónozza a projektet, mindig létrehozhatja a környezetet a requirements.txt fájl használatával.

5. Ha ki szeretné zárni a virtuális környezetet a forrásvezérlőből, a Git-módosítások ablakban kattintson a jobb gombbal a env mappára, és válassza a Hagyja figyelmen kívül ezeket a helyi elemeket:

   

   A virtuális környezet kizárása után csak a projektfájl (.py) és a .gitignore fájl módosításai maradnak, amelyek a virtuális környezet mappájának hozzáadott bejegyzését tartalmazzák.

   A .gitignore fájl különbségeinek megtekintéséhez kattintson duplán a Git változtatások ablakban.

6. A Git-módosítások ablakban írjon be egy véglegesítési üzenetet, például a "Kezdeti projektmódosítások":

   

7. A Véglegesítés legördülő menüben válassza Véglegesítés szakaszos és leküldéseslehetőséget.

Megnyithatja a Git-adattár ablakot, és ellenőrizheti, hogy az előkészített véglegesítések megjelennek-e az aktuális ág Helyelőzmények ablakában.

A virtuális környezetek céljának megismerése

A virtuális környezet nagyszerű módszer az alkalmazás pontos függőségeinek elkülönítésére. Ez az elkülönítési módszer elkerüli az ütközéseket egy globális Python-környezetben, és mind a tesztelést, mind az együttműködést támogatja. Idővel egy alkalmazás fejlesztése során mindig számos hasznos Python-csomagot fog behozni. Ha a csomagokat projektspecifikus virtuális környezetben tartja, egyszerűen frissítheti a projekt requirements.txt fájlját, amely a forrásvezérlőben található környezetet írja le. Ha a projektet más számítógépekre, például buildkiszolgálókra, üzembehelyezési kiszolgálókra és más fejlesztői számítógépekre másolja, könnyen újra létrehozhatja a környezetet. A környezetet csak a requirements.txt fájl használatával hozhatja létre újra, ezért a környezetnek nem kell forrásvezérlésben lennie. További információ: Virtuális környezetek használata.

Virtuális környezet eltávolítása a forrásvezérlés alatt

A virtuális környezeteket eltávolíthatja, miután a forráskezelés alatt áll. Kövesse az alábbi lépéseket:

1. Szerkessze a .gitignore fájlt a mappa kizárásához:

   1. Nyissa meg a fájlt a Fájl>Megnyitás>Fájllehetőség kiválasztásával.

      A fájlt megnyithatja a Team Explorer-ból is. A Beállítások lapon válassza Adattár beállításailehetőséget. Lépjen a & attribútumfájlok figyelmen kívül hagyása szakaszra, és válassza a .gitignoremelletti Szerkesztés hivatkozást.

   2. Keresse meg azt a szakaszt a végén, amely a megjegyzést # Python Tools for Visual Studio (PTVS).

   3. A szakasz után adjon hozzá egy új sort a virtuális környezet mappájához, például /BasicProject/env.

2. Nyisson meg egy parancsablakot, és lépjen arra a mappára (például BasicProject), amely rendelkezik a virtuális környezet mappával, például env.

3. Futtassa a git rm -r env parancsot a jelenleg forrásvezérlés alatt álló virtuális környezet eltávolításához.

4. Véglegesítse a módosításokat a git commit -m 'Remove venv' paranccsal, vagy véglegesítse őket a Team ExplorerVáltozások lapján.

A sablonkód vizsgálata

Ebben a szakaszban a Visual Studio által a sablon kiválasztása alapján létrehozott Project-fájlban (.py) lévő sablonkódot vizsgáljuk meg.

1. Nyissa meg Megoldáskezelő a megoldás- és projektfájlok megtekintéséhez. A kezdeti projekt csak két fájlt tartalmaz, app.py és requirements.txt:

   

   A requirements.txt fájl határozza meg a Flask-csomag függőségeit. A fájl jelenléte arra kéri, hogy a projekt első létrehozásakor hozzon létre egy virtuális környezetet.

   Az egyetlen app.py fájl egy üres Flask-webes projekt sablonkódját tartalmazza.

2. Nyissa meg a app.py fájlt a szerkesztőben, és vizsgálja meg az első szakaszt, a Flask import utasítását.

   Ez az utasítás létrehozza a Flask osztály egy példányát, amely a appváltozóhoz van rendelve. Ez a szakasz egy wsgi_app változót is hozzárendel (amely akkor hasznos, ha egy web gazdagépen helyezi üzembe, de egyelőre nem használja):

   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. A második áttekintendő szakasz a fájl végén található. Ez a szakasz nem kötelező kódot tartalmaz, amellyel elindíthatja a Flask fejlesztői kiszolgálót.

   Definiálhatja a kódot a környezeti változókból vett adott gazdagép- és portértékek használatára, vagy használhatja az alapértelmezett gazdagép- és portértéket 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. A vizsgálandó kód harmadik szakasza egy függvényt rendel egy URL-útvonalhoz, ami azt jelenti, hogy a függvény biztosítja az URL-cím által azonosított erőforrást.

   Útvonalakat a Flask @app.route dekoratőrével határozhat meg egy olyan argumentummal, amely a webhelygyökér relatív URL-címe. Ahogy a kódban látható, a függvény csak egy szöveges sztringet ad vissza, ami elegendő ahhoz, hogy a böngésző megjelenítse. Az oktatóanyag-sorozat későbbi lépéseiben frissítheti a kódot, hogy html-lel jelenítsen meg gazdagabb oldalakat.

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

A Flask osztály névargumentumának ismertetése

A Flask-osztály name argumentuma az alkalmazás moduljának vagy csomagjának neve. A Flask a név alapján határozza meg, hogy hol keresse az alkalmazáshoz tartozó sablonokat, statikus fájlokat és egyéb erőforrásokat. Az egyetlen modulban található alkalmazások esetében a __name__ mindig a megfelelő érték. A név olyan bővítmények esetében is fontos, amelyek hibakeresési információkat igényelnek. További információt és egyéb argumentumokat a Flask-osztály dokumentációjában (flask.pocoo.org) talál.

Több útvonal-dekorátor használata

Egy függvény több útvonal-dekorátorsal is rendelkezhet. Annyi dekoratőrt használhat, amennyit csak szeretne, ha ugyanaz a függvény több útvonalat is kiszolgál. Ha például a hello útvonalhoz és a / útvonalhoz is használni szeretné a /hello függvényt, használja a következő kódot:

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

Változó URL-útvonalak és lekérdezési paraméterek használata

A Flask képes változó URL-útvonalakkal és lekérdezési paraméterekkel dolgozni. Egy útvonalon minden változót megjelölhet a <variable_name> attribútummal. A Flask az URL-elérési út egy elnevezett argumentumával továbbítja a változót a függvénynek. Egy /hello/<name> formátumú útvonal például létrehoz egy name nevű sztringargumentumot a függvényhez. A lekérdezési paraméterek a request.args tulajdonságon keresztül érhetők el, különösen a request.args.get metóduson keresztül. Az alábbi kód egy példát mutat be:

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

A típus módosításához tedd előtagnak a változó elé int, float, path (amelyik a mappanevek elválasztásához perjeleket fogad el) és uuid. További információ: Változó szabályok a Flask dokumentációjában.

Követelmények létrehozása a csomag telepítése után

A Visual Studio más csomagok telepítése után létrehozhat egy requirements.txt fájlt egy virtuális környezetből.

• A Megoldáskezelő-ben bontsa ki a Python környezetek csomópontot, kattintson a jobb gombbal a virtuális környezetre, és válassza a requirements.txtlétrehozása opciót.

A környezet módosításakor érdemes rendszeresen használni ezt a parancsot. Mentse el a változtatásokat a requirements.txt fájlban a forrásvezérlőben, valamint ugyanígy mentse el az adott környezettől függő egyéb kódmódosításokat is. Ha folyamatos integrációt állít be egy buildkiszolgálón, a környezet módosításakor létre kell hoznia a fájlt, és véglegesítenie kell a módosításokat.

A projekt futtatása

Most már készen áll a projekt Visual Studióban való futtatására az alábbi eljárással:

1. A Visual Studióban válassza a Hibakeresés>Hibakeresés indítása (F5) lehetőséget, vagy válassza webkiszolgáló a fő eszköztáron (a böngésző eltérő lehet):

   

2. Bármelyik parancs véletlenszerű portszámot rendel a PORT környezeti változóhoz, és futtatja a Python app.py fájlt.

   A kód azzal indítja el az alkalmazást, hogy ezt a portot használja a Flask fejlesztői kiszolgálón belül.

   Ha a Visual Studio közzéteszi az üzenetet, Nem sikerült elindítani a hibakereső, és azt jelzi, hogy nem található indítási fájl, kattintson a jobb gombbal a app.py fájlra a Megoldáskezelőben, és válassza a Beállítás indítási fájlkéntlehetőséget.

3. A kiszolgáló indításakor megnyílik egy konzolablak a kiszolgálónapló megjelenítéséhez. A Visual Studio automatikusan megnyitja a böngészőt http://localhost:<port>, ahol a hello függvény által megjelenített üzenetnek kell megjelennie:

   

4. Ha elkészült, zárja be a konzolablakot, amely leállítja a Flask fejlesztői kiszolgálót. Kiválaszthatja a hibakeresés>, illetve a Hibakeresés leállításalehetőséget is.

Hibakeresési parancsok összehasonlítása a Project Python-parancsokkal

Különbség van a Hibakeresési menüparancsok és a projekt Python almenüjében felsorolt kiszolgálói parancsok használata között.

A Hibakeresési menüparancsok és eszköztárgombok mellett a Python>Start server vagy Python>Start hibakeresési kiszolgáló parancsaival is elindíthatja a kiszolgálót a projekt helyi menüjében.

Mindkét parancs megnyit egy konzolablakot, amelyben megjelenik a futó kiszolgáló helyi URL-címe (localhost:port). Manuálisan azonban meg kell nyitnia egy böngészőt ezzel az URL-címmel, és a hibakeresési kiszolgáló futtatása nem indítja el automatikusan a Visual Studio hibakeresőt. Ha szeretné, később csatolhat egy hibakeresőt a futó folyamathoz a Hibakeresési>Csatolás folyamathoz paranccsal.

Következő lépés

2. lépés: Flask-alkalmazás létrehozása nézetekkel és lapsablonokkal