Oktatóanyag: Flask-alkalmazás létrehozása nézetekkel és lapsablonokkal a Visual Studióban

Ez a cikk a 2. lépést mutatja be A Flask webes keretrendszer használata a Visual Studiocímű oktatóanyag-sorozatában.

A Visual Studio lehetővé teszi Flask-alkalmazások létrehozását projektsablonokból, amelyek átfogóbb kiindulópontot biztosítanak a projektekhez. oktatóanyag 1. lépése ismerteti, hogyan hozhat létre Flask-alkalmazást egyetlen oldallal, ahol az összes kód egyetlen fájlban található. A 2. lépésben újra kell bontania a kódot, és létre kell hoznia egy struktúrát az oldalsablonokhoz a további fejlesztéshez. Különösen az alkalmazásnézetek kódját szeretné elkülöníteni más szempontoktól, például az indítási kódtól.

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

• Alkalmazáskód újrabontása a nézeteknek az indítási kódtól való elkülönítéséhez
• Nézet létrehozása oldalsablon használatával

Előfeltételek

• Egy Visual Studio-megoldás és Flask-alkalmazásprojekt készült el a következő lépésben: 1. lépés: Visual Studio-megoldás és Flask-projekt létrehozása.

Flask-projekt újrabontása további fejlesztéshez

A Blank Flask Web Project sablon lehetővé teszi, hogy egyetlen app.py fájllal rendelkező projektet hozzon létre, amely egyetlen nézet mellett indítási kódot tartalmaz. Ahhoz, hogy több nézetet és sablont tartalmazó alkalmazás továbbfejlődjön, el kell különítenie ezeket a függvényeket.

Kövesse az alábbi lépéseket a Flask-projekt módosításához a további fejlesztéshez:

1. A Megoldáskezelőbenkattintson a jobb gombbal a Flask-projektmappára (BasicProject), és válassza >Új mappa hozzáadásalehetőséget.

   

2. Nevezze el az új alkalmazásmappát HelloFlask.

3. Kattintson a jobb gombbal a HelloFlask mappára, majd új fájl létrehozásához válassza >Új elem hozzáadása lehetőséget.

4. Az Új elem hozzáadása párbeszédpanelen válassza a Üres Python-fájl fájlsablont:

   1. Nevezze el a fájlt __init__.py. A fájlnévnek két kezdő és két végződő aláhúzásjelet (_) kell tartalmaznia az initszó körül.

   2. Válassza a lehetőséget, majd adja hozzá alehetőséget.

   

5. Adja hozzá a következő kódot az új fájlhoz, amely létrehozza a Flask-példányt, és betölti az alkalmazásnézeteket:

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. A HelloFlask mappában hozzon létre egy másik, views.pynevű Python-fájlt.

   Fontos

   Mindenképpen adja meg a fájlnevet views.py. A név nézet a import HelloFlask.views fájlban lévő utasítás miatt fontos. Ha a név nézetek nem ugyanaz mindkét példányban, a Visual Studio futásidőben hibaüzenetet jelenít meg.

7. Adja hozzá a következő kódot a views.py fájlhoz. Ez a kód átnevezi a függvényt, és meghatározza a /home végpontra vezető visszatérési útvonalat:

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   Ez a kód tartalmazza a lapmegjelenítő kódot a app.py fájlból, és importálja a app fájlban deklarált objektumot.

8. A HelloFlask mappában hozzon létre egy sablonoknevű almappát. A mappa egyelőre üres.

9. A Flask-projekt mappában (BasicProject) cserélje le a app.py fájl tartalmát a következő kódra:

   import os
   from HelloFlask import app    # Imports the code from HelloFlask/__init__.py
   
   if __name__ == '__main__':
       HOST = os.environ.get('SERVER_HOST', 'localhost')
   
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
   
       app.run(HOST, PORT)
   

10. A kód frissítése után nevezze át a app.py fájlt runserver.py.

11. Győződjön meg arról, hogy az újrabontás alatt lévő Flask-projektstruktúra a következő példához hasonlóan néz ki:

    

Újrabontási program futtatása és útvonalak ellenőrzése

Most már készen áll a projekt Visual Studióban való futtatására:

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. Amikor az alkalmazás megnyílik a böngészőben, próbálkozzon a / (gyökér) és /home URL-útvonalvégpontokkal a böngészőben:

   

Frissített program futtatása a Hibakeresőben

A kód különböző részeinél töréspontokat is beállíthat, és követheti az alkalmazás indítási sorrendjét a Hibakereső:

1. Állítson be több töréspontot, például a következő pontokat:

   • A runserver.py fájl első sora
   • A __init__.py fájl első sora
   • A return "Hello Flask!" sor a views.py fájlban

2. Indítsa el az alkalmazást a Hibakereső a Hibakeresés>Start Hibakeresés vagy az F5kiválasztásával.

3. Amíg a Hibakereső fut, végighaladhat a kódon a F10használatával, vagy lefuttathatja a kódot az egyes töréspontokról a F5segítségével. A Visual Studio fő eszköztárán hibakeresési vezérlőket is használhat, például Folytatás, leállítása, Újraindításés lépés beállításai:

   

4. Ha végzett, válassza a Ctrl+C billentyűkombinációt az alkalmazás leállításához. Bezárhat minden megnyitott böngészőablakot is az útvonalakhoz.

Módosítások véglegesítése a forrásvezérlőben

A kód újrabontása és a frissítések tesztelése után áttekintheti és véglegesítheti a módosításokat a forrásvezérlőben:

1. Mentse a projektfájlok módosításait, például a Ctrl+S billentyűparanccsal.

2. A Git vezérlősávján válassza a nem véglegesített módosításokat (ceruza 5) a Git-módosítások ablak megnyitásához:

   

3. A Git-módosítások ablakban írjon be egy véglegesítési üzenetet, és válassza Véglegesítés:

   

   A véglegesítés befejezésekor a Visual Studio megjeleníti az üzenetet: "Véglegesítési kivonat <hash,> létrehozva helyileg."

4. (Nem kötelező) A véglegesített módosítások leküldése a távoli adattárba:

   1. A Git vezérlősávján válassza ki a kimenő/bejövő véglegesítéseket (1/0 nyíl).

   2. Válassza a Szinkronizálás (Lekérés, Feltöltés) vagy a Feltöltéslehetőséget.

   

   Több helyi véglegesítést is halmozhat fel, mielőtt leküldené őket a távoli adattárba.

Az oktatóanyag-sorozat további eljárásait ebben a szakaszban találja a forráskövetés módosításainak véglegesítéséhez szükséges lépésekről.

A commit-ek és push-ok gyakoriságának meghatározása.

A forrásvezérlő módosításainak véglegesítése létrehoz egy rekordot a változásnaplóban, és egy pontot, amelyre szükség szerint visszaállíthatja az adattárat. Az egyes commitok megvizsgálásával áttekintést nyerhet a konkrét módosításokról.

A Gitben a commit-ek olcsók. Érdemes lehet kisebb mennyiségben, gyakori véglegesítésekkel elküldeni a módosításokat ahelyett, hogy nagy számú módosítást halmoz fel, és egyetlen véglegesítésként küldi el őket.

Nem kell minden apró módosítást véglegesítenie az egyes fájlokban. Gyakran előfordul, hogy véglegesítést hajt végre egy funkció hozzáadásakor, az oktatóanyag-sorozat jelen lépésében látható struktúra módosítása vagy kód újrabontásakor. Emellett érdemes egyeztetni a közreműködőkkel, hogy az elkötelezések részletessége mindenki számára a legjobban működjön.

A véglegesítés gyakorisága és a véglegesítések távoli adattárba való leküldésének gyakorisága két különböző szempont. Előfordulhat, hogy több commit-et halmoz fel a helyi adattárban, mielőtt feltöltené őket a távoli adattárba. A véglegesítések gyakorisága attól függ, hogy a csapat hogyan szeretné kezelni az adattárat.

Lapok és nézetek megjelenítése sablonok használatával

A home fájl függvénye egyszerű szöveges HTTP-választ hoz létre a laphoz. A legtöbb valós weblap gazdag HTML-lapokkal válaszol, amelyek gyakran tartalmaznak élő adatokat. A fejlesztők elsősorban azért definiálnak nézeteket egy függvény használatával, hogy dinamikusan generálják a tartalmat.

A nézet visszatérési értéke csupán egy karakterlánc. Dinamikus tartalommal bármilyen HTML-t létrehozhat egy sztringen belül. Mivel a legjobb, ha elkülöníti a korrektúrát az adatoktól, jobb, ha a korrektúrát egy sablonban helyezi el, és kódban tartja az adatokat.

A nézetek módosítása beágyazott HTML-kód használatára

Az első lépés az, hogy a nézetfeldolgozást úgy módosítsa, hogy az oldal néhány dinamikus tartalmához inline HTML-t használjon.

1. Cserélje le a views.py fájl tartalmát a következő kódra:

   from datetime import datetime
   from flask import render_template
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       html_content = "<html><head><title>Hello Flask</title></head><body>"
       html_content += "<strong>Hello Flask!</strong> on " + formatted_now
       html_content += "</body></html>"
   
       return html_content
   

2. Mentse a módosításokat, és futtassa újra az alkalmazást.

3. Frissítse a lapot néhányszor, hogy meggyőződjön arról, hogy a dátum és az idő frissül. Ha végzett, állítsa le az alkalmazást.

HTML-sablon létrehozása

Ezután konvertálja a lapmegjelenítési folyamatot HTML-sablon használatára:

1. Kattintson a jobb gombbal a sablonokra mappára, és válassza a >Új elem hozzáadása lehetőséget egy új fájl létrehozásához.

2. Az Új elem hozzáadása párbeszédpanelen válassza ki a HTML-lap fájlsablont. Nevezze el a fájlt index.html, és válassza hozzáadása lehetőséget.

3. Cserélje le a HTML fájl biztosított tartalmát a következő jelölésre:

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   Ebben a kódban a {{ content }} utasítás egy helyőrző vagy helyettesítő token (más néven sablonváltozó), amelyhez értéket biztosít a kódban.

Az Otthoni funkció beállítása a sablon betöltésére

A home metódus használatához módosítania kell a render_template függvényt. Ez a metódus betölti a HTML-sablont, és a helyőrző nevével azonos elnevezésű argumentum használatával adja meg a {{ content }} értékét.

1. A views.py fájlban cserélje le a home függvénydefiníciót a következő kódra:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           content = "<strong>Hello, Flask!</strong> on " + formatted_now)
   

   A Flask automatikusan keres sablonokat a -sablonokban mappában, így a sablon elérési útja az adott mappához viszonyítva van.

2. Mentse a projekt módosításait, és futtassa újra az alkalmazást.

   Figyelje meg, hogy a beágyazott HTML-szintaxis (\<strong> ...) az content értéken belül nem jeleníti meg HTML-ként, mert a templatáló motor (Jinja) automatikusan kikerüli a HTML-tartalmat. Az automatikus menekülés megakadályozza a véletlen biztonsági réseket az injektálási támadásokhoz.

   A fejlesztők gyakran gyűjtenek adatokat az egyik oldalról, és egy sablon helyőrző használatával használják azt értékként egy másikban. A menekülés arra is emlékeztet, hogy a HTML-t érdemes a kódból kivenni.

   Ha végzett, állítsa le az alkalmazást.

Eltérő helyőrzők használata

Az egyes adatelemekhez különálló helyőrzőket használhat az HTML-jelölésben. Ezután módosítsa ismét a home függvényt a megadott helyőrző értékek megadásához:

1. Cserélje le a index.html fájl tartalmát a következő jelölésre:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. A views.py fájlban cserélje le a home függvénydefiníciót a következő kódra, hogy az összes helyőrző értékeit adja meg:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           title = "Hello Flask",
           message = "Hello, Flask!",
           content = " on " + formatted_now)
   

3. Mentse a módosításokat, és futtassa újra az alkalmazást. Ezúttal a megfelelően renderelt kimenetnek kell megjelennie:

   

4. Véglegesítheti a módosításokat a forráskövetésben, és frissítheti a távoli adattárat. További információért lásd: Módosítások véglegesítése a forrásvezérlésben.

Oldalsablonok elkülönítése

A sablonok általában külön HTML-fájlokban vannak fenntartva, de beágyazott sablonokat is használhat. A korrektúra és a kód tiszta elkülönítésének fenntartása érdekében ajánlott külön fájlokat létrehozni.

.html bővítmény használata sablonokhoz

A lapsablonfájlok .html bővítménye nem kötelező. A render_template függvény első argumentumában mindig meghatározhatja a fájl pontos relatív elérési útját. A Visual Studio (és más szerkesztők) azonban általában olyan funkciókat biztosítanak, mint a kódkiegészítés és a szintaxis színezése .html fájlokkal, ami meghaladja azt a tényt, hogy a lapsablonok nem HTML-fájlok.

Flask-projekt használatakor a Visual Studio automatikusan észleli, hogy a szerkesztett HTML-fájl valójában Flask-sablon-e, és bizonyos automatikus kiegészítési funkciókat biztosít. Ha beír egy Flask-lapsablon megjegyzést ({#), a Visual Studio automatikusan beírja a záró #} karaktereket. A Megjegyzéskijelölési és Kijelölés törlése parancsok (a Szerkesztés>Speciális menüben) html-megjegyzések helyett sablon megjegyzéseket is használnak.

Sablonok rendezése almappákba

Használhat almappákat, majd a függvény hívásaiban a render_template mappája alatti relatív elérési útra hivatkozhat. Ezzel a módszerrel hatékonyan hozhat létre névtereket a sablonokhoz.

Következő lépés

3. lépés: Statikus fájlok kiszolgálása, lapok hozzáadása és sablonöröklés használata