Oktatóanyag: Statikus fájlok kiszolgálása és sablonöröklés használata a Flasktal a Visual Studióban

Cikk
01/26/2025

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

Az oktatóanyag-sorozat előző lépései létrehoznak egy minimális Flask-alkalmazást egy önálló HTML-oldallal. A modern webalkalmazások általában több oldalból állnak, és megosztott erőforrásokat, például CSS- és JavaScript-fájlokat használnak a következetes stílus és viselkedés biztosításához. A 3. lépésben a Visual Studio elemsablonjaival tartalmat adhat hozzá a Flask-projekthez, és bővítheti az alkalmazás képességeit.

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

A Visual Studio elemsablonjaival gyorsan hozzáadhat új fájlokat a boilerplate-kóddal
Statikus fájlok kiszolgálása a Flask-kódból
További lapok hozzáadása a Flask alkalmazáshoz
Sablonöröklés használata a fejléc és a lapok közötti navigáció létrehozásához

Előfeltételek

Egy Visual Studio-megoldás és Flask-alkalmazásprojekt, amely létrehozva a 1. lépésben: Flask-projekt létrehozása, majd a 2. lépésben frissítve: Flask-projekt átalakítása.

Elemsablonok felfedezése a Visual Studióban

A Flask-alkalmazás fejlesztése során általában sokkal több Python-, HTML-, CSS- és JavaScript-fájlt ad hozzá. Minden fájltípushoz (és más fájlokhoz, például web.config, amelyekre szükség lehet az üzembe helyezéshez) a Visual Studio kényelmes elemsablonokat az első lépésekhez. Ezekkel a sablonokkal gyorsan hozzáadhat új, különböző típusú fájlokat a boilerplate-kóddal.

Az elérhető sablonok megtekintéséhez nyissa meg Megoldáskezelő a Visual Studióban, és nyissa meg a projektstruktúrát.
Kattintson a jobb gombbal arra a mappára, amelyben új fájlt szeretne létrehozni, és válassza >Új elem hozzáadásalehetőséget. Megnyílik az Új elem hozzáadása párbeszédpanel:
Sablon használatához válassza ki a kívánt sablont, adja meg a fájl nevét, majd válassza a hozzáadása lehetőséget.

A Visual Studio hozzáadja a fájlt az aktuális projekthez, és megjelöli a forráskövetés módosításait.

Az elemsablonok Visual Studio által való azonosításának ismertetése

A Visual Studio-projektfájl (.pyproj) egy olyan projekttípus-azonosítót tartalmaz, amely Python-projektként jelöli meg a fájlt. A Visual Studio ezzel a típusazonosítóval csak a projekttípusnak megfelelő elemsablonokat ismeri fel és jeleníti meg. A Visual Studio ezt a megközelítést követve számos projekttípushoz biztosít számos elemsablont anélkül, hogy minden alkalommal sorba rendezné őket.

Statikus fájlok kiszolgálása az alkalmazásból

A Pythonnal készült webalkalmazásokban (bármilyen keretrendszer használatával) a Python-fájlok mindig a webgazda kiszolgálóján futnak, és soha nem kerülnek át a felhasználó számítógépére. Más fájlokat, például a CSS-t és a JavaScriptet csak a böngésző használja, így a gazdakiszolgáló egyszerűen as-is továbbítja őket, amikor a rendszer kéri őket. Az ilyen típusú fájlokat "statikus" fájloknak nevezzük, és a Flask automatikusan kézbesíti őket anélkül, hogy bármilyen kódot kellene írnia. A HTML-fájlokban például statikus fájlokra hivatkozhat a projekt relatív elérési útján. A szakasz első eljárása azt mutatja be, hogyan használható statikus CSS-fájl egy meglévő lapsablonnal.

Ha statikus fájlt kell kézbesítenie kódból, például EGY API-végpont implementálásán keresztül, a Flask kényelmes módszert biztosít. A fájlokra a projekt gyökérkönyvtárában statikus nevű mappában található relatív elérési utak használatával hivatkozhat. A szakasz második eljárása bemutatja, hogyan használható egy egyszerű statikus adatfájl a kódból.

Mindkét eljárásban a beállításoknak megfelelően rendszerezheti a fájlokat a statikus mappában.

Statikus CSS-fájl használata sablonban

Statikus fájl sablonban való használatához kövesse az alábbi lépéseket:

A Megoldáskezelőkattintson a jobb gombbal a projekt HelloFlask mappájára, válassza >Új mappa hozzáadásalehetőséget, és nevezze el a mappát statikus.
Kattintson a jobb gombbal a statikus mappára, és válassza >Új elem hozzáadásalehetőséget.
Az Új elem hozzáadása párbeszédpanelen jelölje ki a Stíluslap sablont, nevezze el a fájlt site.cs, majd válassza hozzáadása lehetőséget.

A Visual Studio hozzáadja a site.css fájlt a projekthez, és megnyitja a fájlt a szerkesztőben. Íme egy példa a Flask frissített projektstruktúrájára:
Cserélje le a site.css fájl tartalmát a következő stílusokkal:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Cserélje le a HelloFlask/templates/index.html fájl tartalmát a következő jelölőnyelvre:
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
Ez a kód az oktatóanyag-sorozat 2. lépésében szereplő <strong> HTML-elemet egy <span> elemre cseréli, amely a message stílusosztályra hivatkozik. A stílusosztályok ily módon történő használata nagyobb rugalmasságot biztosít a HTML-elem stílusának alakításához.
Mentse a projekt módosításait a Fájl>Mentés mind kiválasztásával, vagy a Ctrl+Shift+S billentyűparanccsal. (Ez a lépés nem szükséges, mert a projekt fejlesztése során a Visual Studio automatikusan menti a fájlokat.)
Futtassa a projektet, és figyelje meg az eredményeket. Ha végzett, állítsa le az alkalmazást.
(Nem kötelező) 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ó: Forráskövetési módosításainak véglegesítése az oktatóanyag-sorozat 2. lépésében.

Statikus fájl kiszolgálása kódból

A Flask egy send_static_file nevű függvényt biztosít, amelyet kódból hívhat meg, hogy a projekt statikus mappájában lévő bármely fájlra hivatkozzon. Az alábbi folyamat létrehoz egy egyszerű API-végpontot, amely egy statikus adatfájlt ad vissza:

A statikus mappában hozzon létre egy data.jsonnevű statikus JSON-adatfájlt. A Szöveg fájlsablont használhatja a fájl alapjául.
Cserélje le a JSON-fájl tartalmát a következő kódra, amely néhány mintaadatot biztosít a mechanizmus bemutatásához:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
A HelloFlask/views.py fájlban adjon hozzá egy függvényt az útvonal-/api/data végponttal, amely a statikus adatfájlt a send_static_file metódussal adja vissza:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Mentse a projekt módosításait, és futtassa újra a projektet. Keresse meg a /api/data útvonalvégpontot, és győződjön meg arról, hogy az alkalmazás visszaadja a statikus fájlt:
Ha végzett, állítsa le az alkalmazást.

Statikus fájlok és mappák rendszerezése

Más CSS-, JavaScript- és HTML-fájlokat is hozzáadhat a statikus mappához a projekt igényeinek megfelelően. A statikus fájlok rendszerezésének tipikus módja betűtípusok, szkriptekés tartalom (stíluslapok és egyéb fájlok) nevű almappák létrehozása.

URL-útvonalak és lekérdezési paraméterek használata API-kból

Az URL-változókat és a lekérdezési paramétereket API-kkal kezelheti a Flask használatakor. További információ: Változó URL-útvonalak és lekérdezési paraméterek használata az oktatóanyag-sorozat 1. lépésében.

Oldal hozzáadása a Flask-alkalmazáshoz

Ha egy másik lapot ad hozzá a Flask-alkalmazáshoz, az a következő feladatokat foglalja magában:

A nézetet meghatározó Python-függvény hozzáadása
A sablon hozzáadása a lap HTML-jelölőnyelvéhez
Az URL-útvonalak frissítése a Flask-projekt views.py fájljában

Az alábbi lépéseket követve adjon hozzá egy Névjegy (/about) lapot a BasicProject Flask-projekthez, és a kezdőlapról az adott lapra mutató hivatkozásokat:

A Megoldáskezelőkattintson a jobb gombbal a projekt HelloFlask/templates mappájára, és válassza >Új elem hozzáadásalehetőséget.

Borravaló

Ha nem látja az Új elem parancsot a Hozzáadás menüben, állítsa le a Flask-alkalmazást, hogy a Visual Studio szükség szerint kilépjen a hibakeresési módból.
Az Új elem hozzáadása párbeszédpanelen jelölje ki a HTML-lap sablont, nevezze el a fájlt about.html, majd válassza hozzáadása lehetőséget.

Cserélje le a about.html fájl tartalmát a következő HTML jelölőnyelvvel:

<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

A következő lépésben a kezdőlapra mutató explicit hivatkozást egy navigációs sávra cseréli.

A HelloFlask/views.py fájlban adjon hozzá egy about nevű függvényt, amely a sablont használja:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

A HelloFlask/templates/index.html fájlban adja hozzá a következő jelölést az <body> elem első utasításaként:
```
<div><a href="about">About</a></div>
```
Ez a jelölés hozzáad egy hivatkozást a Flask-alkalmazás /about oldalára. Egy későbbi lépésben ezt a hivatkozást egy navigációs sávra cseréli.
Mentse a projekt módosításait, és futtassa újra a projektet. Keresse meg a /about lapot, és ellenőrizze a navigációt a különböző alkalmazáslapok között.
Ha végzett, állítsa le az alkalmazást.

Az oldalfüggvény elnevezése

A Flask nem ír elő korlátozásokat vagy követelményeket az oldalfüggvény nevére vonatkozóan. A @app.route dekoratőr határozza meg azokat az URL-címeket, amelyekre a Flask meghívja a függvényt válasz létrehozásához. A fejlesztők általában az oldalfüggvény nevét az útvonallal illesztik, de ez az illesztés nem kötelező.

Fejléc és navigáció esetén használja a sablonöröklést.

Az egyes oldalakon kifejezett navigációs hivatkozások helyett számos webalkalmazás rendelkezik egy arculati fejléccel és navigációs sávval, amely a legfontosabb laphivatkozásokat, előugró menüket és így tovább. Az alkalmazás konzisztenciájának biztosításához az élőfejnek és a navigációs sávnak minden oldalon azonosnak kell lennie, de nem kell minden lapsablonban ugyanazt a kódot megismételnie. Az összes lap közös részeit egyetlen fájlban határozhatja meg.

A Flask templating rendszere (alapértelmezés szerint Jinja) kétféleképpen használható egyes elemek több sablonban való újrafelhasználására:

Közé tartoznak a más lapsablonok, amelyeket a hivatkozó sablon egy adott helyére szúr be a szintaxis {% include <template_path> %}. Akkor is használhat változót, ha dinamikusan szeretné módosítani az elérési utat a kódban. A lap törzsében általában "include" elemeket használnak, hogy a megosztott sablont a lap egy adott helyére beépítsék.
Az öröklés a lapsablon elején található {% extends <template_path> %} szintaxist használja egy olyan megosztott alapsablon megadásához, amelyre a hivatkozó sablon épül. Az öröklést gyakran használják az alkalmazás lapjainak megosztott elrendezésének, navigációs sávjának és egyéb struktúráinak meghatározására. Ehhez a megközelítéshez olyan sablonokra van szükség, amelyek a hivatkozást biztosítják az alapsablon bizonyos területeinek hozzáadásához vagy módosításához, amelyeket blokkoknaknevezünk.

Mindkét megközelítés esetében a <template_path> érték az alkalmazás sablonok mappájához viszonyított (a../ vagy a ./ is megengedett).

Az alapsablon a blokkokat a {% block <block_name> %} és {% endblock %} címkékkel tagozza. Ha egy hivatkozó sablon ugyanazzal a blokknévvel rendelkező címkéket használ, akkor a hivatkozó sablon blokktartalma felülírja az alapsablonban lévő egyező blokkot.

A következő lépések a sablonöröklést mutatják be:

A Megoldáskezelőkattintson a jobb gombbal a HelloFlask/templates mappára, és hozzon létre egy új fájlt a HTML-lap sablonból layout.htmlnéven.

Cserélje ki a layout.html fájl tartalmát a következő HTML jelölésre:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

Ez a sablon egy contentnevű blokkot tartalmaz, amely azonosítja a hivatkozó lapok lecserélendő összes tartalmát.

A HelloFlask/static/site.css fájlban adja hozzá a következő stílusokat a fájl végéhez:

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Ezek a stílusdefiníciók érdekes eredményt adnak ehhez a gyakorlathoz. Ez az útmutató nem mutatja be a rugalmas kialakítást.

Cserélje le a HelloFlask/templates/index.html fájl tartalmát a következő jelölésre:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
A index sablon most már az alapsablonra hivatkozik, és felülbírálja a content blokkot. Láthatja, hogy az örökléssel ez a sablon egyszerűbb.
Cserélje le a HelloFlask/templates/about.html fájl tartalmát a következő korrektúrára, így a about sablon az alapsablonra is hivatkozik, és felülbírálja a content blokkot:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Futtassa újra az alkalmazást, és figyelje meg az eredményeket. Az alkalmazásoldalak közötti váltáshoz használja a navigációs sáv hivatkozásait.
Ha elkészült, állítsa le az alkalmazást, és mentse a projekt módosításait.
Mivel jelentős módosításokat hajtott végre az alkalmazásban, érdemes mentenie a módosításokat egy Git-adattárba. További információért lásd a módosítások véglegesítése a forráskövető rendszerben részt ennek az oktatóanyag-sorozatnak a 2. lépésében.

Oktatóanyag áttekintése

Gratulálunk, hogy elvégezte ezt az oktatóanyagot a Flaskon a Visual Studióban.

Ebben az oktatóanyagban megtanulta, hogyan:

Flask-projekt létrehozása több oldallal
Különböző oldalnézetek létrehozása sablonok használatával
Statikus fájlok kiszolgálása, lapok hozzáadása és sablonöröklés használata

Jinja Template Designer dokumentáció (jinja.pocoo.org)
url_for a Flask-alkalmazás objektumdokumentációjában (flask.pocoo.org)
Oktatóanyag forráskódja a GitHubon (Microsoft/python-sample-vs-learning-flask)

Megosztás a következőn keresztül:

Oktatóanyag: Statikus fájlok kiszolgálása és sablonöröklés használata a Flasktal a Visual Studióban

Előfeltételek

Elemsablonok felfedezése a Visual Studióban

Az elemsablonok Visual Studio által való azonosításának ismertetése

Statikus fájlok kiszolgálása az alkalmazásból

Statikus CSS-fájl használata sablonban

Statikus fájl kiszolgálása kódból

Statikus fájlok és mappák rendszerezése

URL-útvonalak és lekérdezési paraméterek használata API-kból

Oldal hozzáadása a Flask-alkalmazáshoz

Az oldalfüggvény elnevezése

Fejléc és navigáció esetén használja a sablonöröklést.

Oktatóanyag áttekintése

Visszajelzés

További források

Megosztás a következőn keresztül:

Oktatóanyag: Statikus fájlok kiszolgálása és sablonöröklés használata a Flasktal a Visual Studióban

Előfeltételek

Elemsablonok felfedezése a Visual Studióban

Az elemsablonok Visual Studio által való azonosításának ismertetése

Statikus fájlok kiszolgálása az alkalmazásból

Statikus CSS-fájl használata sablonban

Statikus fájl kiszolgálása kódból

Statikus fájlok és mappák rendszerezése

URL-útvonalak és lekérdezési paraméterek használata API-kból

Oldal hozzáadása a Flask-alkalmazáshoz

Az oldalfüggvény elnevezése

Fejléc és navigáció esetén használja a sablonöröklést.

Oktatóanyag áttekintése

Kapcsolódó tartalom

Visszajelzés

További források