Kurz: Obsluha statických souborů a použití dědičnosti šablon pomocí Flasku v sadě Visual Studio

Článek
01/26/2025

Tento článek představuje krok 3 v sérii kurzů Práce s webovou architekturou Flask v sadě Visual Studio.

Předchozí kroky v této sérii kurzů vytvoří minimální aplikaci Flask s jednou stránkou samostatného KÓDU HTML. Moderní webové aplikace se obvykle skládají z mnoha stránek a používají sdílené prostředky, jako jsou soubory CSS a JavaScript, k zajištění konzistentního stylu a chování. V kroku 3 pracujete se šablonami položek sady Visual Studio, abyste do projektu Flask přidali obsah a rozšířili možnosti aplikace.

V kroku 3 kurzu se naučíte:

Použijte šablony položek sady Visual Studio k rychlému přidání nových souborů se šablonovým kódem.
Obsluha statických souborů z kódu Flask
Přidání dalších stránek do aplikace Flask
Použití dědičnosti šablon k vytvoření záhlaví a navigace napříč stránkami

Požadavky

Řešení sady Visual Studio a projekt aplikace Flask vytvořený v kroku 1: Vytvoření projektu Flask a aktualizace v kroku 2: Refaktoring projektu Flask.

Prozkoumejte šablony položek v sadě Visual Studio

Při vývoji aplikace Flask obvykle přidáváte mnoho dalších souborů Python, HTML, CSS a JavaScript. Pro každý typ souboru (a další soubory, jako jsou web.config, které možná potřebujete k nasazení), poskytuje Visual Studio praktické šablony položek , abyste mohli začít. Tyto šablony můžete použít k rychlému přidání nových souborů různých typů pomocí často používaného kódu.

Pokud chcete zobrazit dostupné šablony, přejděte do Průzkumníka řešení v sadě Visual Studio a otevřete strukturu projektu.
Pravým tlačítkem myši klikněte na složku, ve které chcete vytvořit nový soubor, a vyberte Přidat>Nová položka. Otevře se dialogové okno Přidat novou položku:
Pokud chcete použít šablonu, vyberte požadovanou šablonu, zadejte název souboru a vyberte Přidat.

Visual Studio přidá soubor do aktuálního projektu a označí změny pro správu zdrojového kódu.

Vysvětlení způsobu identifikace šablon položek v sadě Visual Studio

Soubor projektu sady Visual Studio (.pyproj) obsahuje identifikátor typu projektu, který soubor označí jako projekt Pythonu. Visual Studio používá tento identifikátor typu k rozpoznávání a zobrazení pouze šablon položek vhodných pro typ projektu. Visual Studio se řídí tímto přístupem a poskytuje bohatou sadu šablon položek pro mnoho typů projektů bez toho, abyste je museli řadit pokaždé.

Obsluha statických souborů z aplikace

Ve webové aplikaci sestavené pomocí Pythonu (pomocí libovolné architektury) se soubory Pythonu vždy spouštějí na serveru webového hostitele a nikdy se nepřenesou do počítače uživatele. Jiné soubory, jako jsou CSS a JavaScript, se používají jenom v prohlížeči, takže hostitelský server je jednoduše doručí as-is, když jsou požadovány. Tyto typy souborů se označují jako "statické" soubory a Flask je dokáže automaticky doručit, aniž byste museli psát jakýkoli kód. V souborech HTML můžete například odkazovat na statické soubory pomocí relativní cesty v projektu. První postup v této části ukazuje, jak použít statický soubor CSS s existující šablonou stránky.

Pokud potřebujete doručovat statický soubor z kódu, například prostřednictvím implementace koncového bodu rozhraní API, Flask poskytuje pohodlnou metodu. K souborům můžete odkazovat pomocí relativních cest ve složce s názvem statické v kořenovém adresáři projektu. Druhý postup v této části ukazuje, jak pracovat s jednoduchým statickým datovým souborem z kódu.

V obou postupech můžete soubory uspořádat pod statickou složku podle svých preferencí.

Použití statického souboru CSS v šabloně

Pokud chcete použít statický soubor v šabloně, postupujte takto:

V Průzkumníku řešeníklikněte pravým tlačítkem na složku HelloFlask v projektu, vyberte Přidat>Novou složkua pojmenujte složku static.
Klikněte pravým tlačítkem na statickou složku a vyberte Přidat>Nová položka.
V dialogovém okně Přidat novou položku vyberte šablonu šablony šablony stylů, pojmenujte soubor site.csa pak vyberte Přidat.

Visual Studio přidá do projektu soubor site.css a otevře ho v editoru. Tady je příklad aktualizované struktury projektu Flask:
Obsah souboru site.css nahraďte následujícími styly:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Nahraďte obsah souboru HelloFlask/templates/index.html následujícím kódem:
```
<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>
```
Tento kód nahradí element <strong> HTML z kroku 2 v sérii kurzů elementem <span>, který odkazuje na třídu stylu message. Použitím třídy stylu tímto způsobem získáte větší flexibilitu při stylování elementu HTML.
Uložte změny projektu tak, že vyberete Soubor>Uložit vše nebo použijete klávesovou zkratku Ctrl+Shift+S. (Tento krok není nutný, protože při vývoji projektu sada Visual Studio ukládá soubory automaticky.)
Spusťte projekt a sledujte výsledky. Až budete hotovi, aplikaci zastavte.
(Volitelné) Změny můžete potvrdit do správy zdrojového kódu a aktualizovat vzdálené úložiště. Další informace najdete v tématu Potvrzení změn ve správě zdrojového kódu v kroku 2 této série kurzů.

Obsluha statického souboru z kódu

Flask poskytuje funkci s názvem send_static_file, kterou můžete volat z kódu a odkazovat na libovolný soubor v rámci statické složky projektu. Následující proces vytvoří jednoduchý koncový bod rozhraní API, který vrátí statický datový soubor:

Ve složce statické vytvořte statický datový soubor JSON s názvem data.json. Šablonu souboru Text můžete použít jako základ souboru.
Nahraďte obsah souboru JSON následujícím kódem, který poskytuje ukázková data, která předvádějí mechanismus:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
Do souboru HelloFlask/views.py přidejte funkci s koncovým bodem trasy /api/data, který vrátí statický datový soubor pomocí metody send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Uložte změny projektu a spusťte projekt znovu. Přejděte do koncového bodu trasy /api/data a potvrďte, že aplikace vrátí statický soubor:
Až budete hotovi, aplikaci zastavte.

Uspořádání statických souborů a složek

Do statické složky můžete přidat další soubory CSS, JavaScript a HTML podle potřeb projektu. Typickým způsobem, jak uspořádat statické soubory, je vytvořit podsložky s názvem písma, skriptya obsah (pro šablony stylů a jakékoli jiné soubory).

Použití tras URL a parametrů dotazu z rozhraní API

Proměnné adresy URL a parametry dotazu můžete zpracovat pomocí rozhraní API, když pracujete s Flaskem. Další informace najdete v tématu Použití tras adres URL proměnných a parametrů dotazu v kroku 1 této série kurzů.

Přidání stránky do aplikace Flask

Přidání další stránky do aplikace Flask zahrnuje následující úlohy:

Přidání funkce Pythonu, která definuje zobrazení
Přidání šablony pro kód HTML stránky
Aktualizace tras URL v souboru views.py projektu Flask

Následujícím postupem přidáte stránku O aplikaci (/about) do projektu BasicProject Flask a odkazy na danou stránku z domovské stránky:

V Průzkumníku řešeníklikněte pravým tlačítkem na složku HelloFlask/templates projektu a vyberte Přidat>Nová položka.

Spropitné

Pokud v nabídce Přidat nevidíte příkaz Nová položka, ujistěte se, že jste zastavili aplikaci Flask, aby Visual Studio podle potřeby ukončilo režim ladění.
V dialogovém okně Přidat novou položku vyberte šablonu stránky HTML, pojmenujte soubor about.htmla pak vyberte Přidat.

Obsah souboru about.html nahraďte následujícím kódem HTML:

<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>

V dalším kroku nahradíte explicitní odkaz na domovskou stránku navigačním panelem.

Do souboru HelloFlask/views.py přidejte funkci s názvem about, která používá šablonu:

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

Do souboru HelloFlask/templates/index.html přidejte následující kód jako první příkaz v elementu <body>:
```
<div><a href="about">About</a></div>
```
Tento kód přidá odkaz na /about stránku aplikace Flask. V pozdějším kroku nahradíte tento odkaz navigačním panelem.
Uložte změny projektu a spusťte projekt znovu. Přejděte na /about stránku a zkontrolujte navigaci mezi různými stránkami aplikace.
Až budete hotovi, aplikaci zastavte.

Pojmenování funkce stránky

Flask neukládá žádná omezení ani požadavky na název vaší funkce stránky. Dekorátor @app.route určuje adresy URL, pro které Flask volá funkci, aby vygenerovala odpověď. Vývojáři obvykle přiřazují název funkce stránky k trase, ale tento typ párování není vyžadován.

Použijte dědičnost šablon pro záhlaví a navigaci

Místo explicitních navigačních odkazů na každé stránce má mnoho webových aplikací záhlaví s logem a navigační panel, který poskytuje nejdůležitější odkazy na stránky, vyskakovací nabídky a podobně. Pokud chcete zajistit konzistenci v aplikaci, záhlaví a navigační panel by měly být stejné na všech stránkách, ale v každé šabloně stránky nemusíte opakovat stejný kód. Společné části všech stránek můžete definovat v jednom souboru.

Systém šablon Flask (ve výchozím nastavení Jinja) nabízí dva způsoby opětovného použití konkrétních prvků napříč několika šablonami:

Zahrnuje jsou další šablony stránek, které vložíte na konkrétní místo v odkazující šabloně se syntaxí {% include <template_path> %}. Proměnnou můžete použít také v případě, že chcete změnit cestu dynamicky v kódu. Vložené prvky se obvykle používají v textu stránky pro vložení sdílené šablony na specifickém místě na stránce.
dědičnost používá syntaxi {% extends <template_path> %} na začátku šablony stránky k určení sdílené základní šablony, na které odkazující šablona vychází. Dědičnost se běžně používá k definování sdíleného rozložení, navigačního panelu a dalších struktur pro stránky aplikace. Tento přístup vyžaduje odkazovat na šablony pro přidání nebo úpravu pouze konkrétních oblastí základní šablony označované jako bloky .

U obou přístupů je hodnota <template_path> relativní ke složce šablon aplikace (../ nebo ./ jsou také povoleny).

Základní šablona označuje bloky pomocí značek {% block <block_name> %} a {% endblock %}. Pokud odkazující šablona používá značky se stejným názvem bloku, přepíše obsah bloku v odkazující šabloně odpovídající blok v základní šabloně.

Následující kroky ukazují dědičnost šablon:

V Průzkumníku řešeníklikněte pravým tlačítkem myši na složku HelloFlask/templates a vytvořte nový soubor ze šablony stránky HTML s názvem layout.html.

Obsah souboru layout.html nahraďte následujícím kódem HTML:

<!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>

Tato šablona obsahuje blok s názvem content, který identifikuje veškerý obsah, který odkazující stránky potřebují nahradit.

Do souboru HelloFlask/static/site.css přidejte na konec souboru následující styly:

.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;
}

Tyto definice stylu generují pro toto cvičení zajímavý výsledek. Tento průvodce neukazuje responzivní návrh.

Nahraďte obsah souboru HelloFlask/templates/index.html následujícím kódem:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Šablona index teď odkazuje na základní šablonu a přepíše blok content. Můžete vidět, že pomocí dědičnosti je tato šablona zjednodušená.
Nahraďte obsah souboru HelloFlask/templates/about.html následujícím kódem, takže šablona about odkazuje také na základní šablonu a přepíše blok content:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Spusťte aplikaci znovu a sledujte výsledky. Pomocí odkazů na navigačním panelu můžete přepínat mezi stránkami aplikace.
Až budete hotovi, zastavte aplikaci a uložte změny projektu.
Vzhledem k tomu, že jste v aplikaci udělali podstatné změny, je vhodné uložit změny do úložiště Git. Další informace najdete v tématu Potvrzení změn ve správě zdrojového kódu v kroku 2 této série kurzů.

Recenze tutoriálu

Blahopřejeme k dokončení tohoto tutoriálu o Flasku ve Visual Studio.

V tomto kurzu jste se naučili:

Vytvoření projektu Flask s více stránkami
Použití šablon k vytvoření různých zobrazení stránek
Podávejte statické soubory, přidávejte stránky a použijte dědičnost šablon

Dokumentace návrháře šablon Jinja (jinja.pocoo.org)
url_for v dokumentaci objektu aplikace Flask (flask.pocoo.org)
Výukový program zdrojového kódu na GitHubu (Microsoft/python-sample-vs-learning-flask)

Sdílet prostřednictvím

Kurz: Obsluha statických souborů a použití dědičnosti šablon pomocí Flasku v sadě Visual Studio

Požadavky

Prozkoumejte šablony položek v sadě Visual Studio

Vysvětlení způsobu identifikace šablon položek v sadě Visual Studio

Obsluha statických souborů z aplikace

Použití statického souboru CSS v šabloně

Obsluha statického souboru z kódu

Uspořádání statických souborů a složek

Použití tras URL a parametrů dotazu z rozhraní API

Přidání stránky do aplikace Flask

Pojmenování funkce stránky

Použijte dědičnost šablon pro záhlaví a navigaci

Recenze tutoriálu

Váš názor

Další materiály

Sdílet prostřednictvím

Kurz: Obsluha statických souborů a použití dědičnosti šablon pomocí Flasku v sadě Visual Studio

Požadavky

Prozkoumejte šablony položek v sadě Visual Studio

Vysvětlení způsobu identifikace šablon položek v sadě Visual Studio

Obsluha statických souborů z aplikace

Použití statického souboru CSS v šabloně

Obsluha statického souboru z kódu

Uspořádání statických souborů a složek

Použití tras URL a parametrů dotazu z rozhraní API

Přidání stránky do aplikace Flask

Pojmenování funkce stránky

Použijte dědičnost šablon pro záhlaví a navigaci

Recenze tutoriálu

Související obsah

Váš názor

Další materiály