Krok 3: Obsluha statických souborů, přidání stránek a použití dědičnosti šablon s aplikací Flask

Článek
08/25/2023

Předchozí krok: Vytvoření aplikace Flask se zobrazeními a šablonami stránek

V předchozích krocích tohoto kurzu jste se naučili vytvořit 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 tomto kroku se naučíte:

Pomocí šablon položek sady Visual Studio můžete rychle přidat nové soubory různých typů pomocí vhodného často používaného kódu (krok 3–1).
Obsluha statických souborů z kódu (krok 3–2, volitelné)
Přidání dalších stránek do aplikace (krok 3–3)
Použití dědičnosti šablon k vytvoření záhlaví a navigačního panelu, který se používá na stránkách (krok 3–4)

Krok 3–1: Seznámení se šablonami položek

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 je web.config , které možná budete potřebovat pro nasazení), sada Visual Studio nabízí vhodné šablony položek, které vám pomůžou začít.

Pokud chcete zobrazit dostupné šablony, přejděte na Průzkumník řešení, klikněte pravým tlačítkem na složku, ve které chcete položku vytvořit, vyberte Přidat>novou položku:

Add new item dialog in Visual Studio

Pokud chcete použít šablonu, vyberte požadovanou šablonu, zadejte název souboru a vyberte OK. Přidání položky tímto způsobem automaticky přidá soubor do projektu sady Visual Studio a označí změny pro správu zdrojového kódu.

Otázka: Jak Visual Studio ví, které šablony položek mají být nabízeny?

Odpověď: Soubor projektu sady Visual Studio (.pyproj) obsahuje identifikátor typu projektu, který ho označí jako projekt Pythonu. Visual Studio používá tento identifikátor typu k zobrazení pouze šablon položek vhodných pro typ projektu. Visual Studio tak může poskytnout bohatou sadu šablon položek pro mnoho typů projektů, aniž byste je museli řadit pokaždé.

Krok 3–2: 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čí tak, jak je bude pokaždé, když je požaduje. Tyto soubory 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í část v tomto kroku přidá soubor CSS do existující šablony 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, která umožňuje odkazovat na soubory pomocí relativních cest v rámci složky s názvem static (v kořenovém adresáři projektu). Druhá část tohoto kroku ukazuje tuto metodu pomocí jednoduchého statického datového souboru.

V obou případech můžete soubory uspořádat pod statickými soubory, ale chcete.

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

V Průzkumník řešení klikněte pravým tlačítkem na složku HelloFlask v projektu sady Visual Studio, vyberte Přidat>novou složku a pojmenujte ji .static
Klikněte pravým tlačítkem myši na statickou složku a vyberte Přidat>novou položku. V dialogovém okně, které se zobrazí, vyberte šablonu Šablony stylů , pojmenujte soubor site.cssa vyberte OK. Soubor site.css se zobrazí v projektu a otevře se v editoru. Struktura složek by se měla podobat následujícímu obrázku:
Nahraďte obsah souboru site.css následujícím kódem a soubor uložte:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Obsah souboru templates/index.html aplikace nahraďte následujícím kódem, který nahradí <strong> prvek použitý v kroku 2 <span> odkazem na message třídu stylů. Použití třídy stylu tímto způsobem vám dává mnohem větší flexibilitu ve stylu prvku.
```
<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>
```
Spuštěním projektu sledujte výsledky. Až budete hotovi, zastavte aplikaci a potvrďte změny do správy zdrojového kódu (jak je vysvětleno v kroku 2).

Obsluha statického souboru z kódu

Flask poskytuje funkci, serve_static_file kterou můžete volat z kódu a odkazovat na libovolný soubor ve statické složce projektu. Následující proces vytvoří jednoduchý koncový bod rozhraní API, který vrátí statický datový soubor.

Pokud jste to ještě neudělali, vytvořte statickou složku: v Průzkumník řešení klikněte pravým tlačítkem na složku HelloFlask v projektu sady Visual Studio, vyberte Přidat>novou složku a pojmenujte ji .static
Ve statické složce vytvořte statický datový soubor JSON s názvem data.json s následujícím obsahem (což jsou bezvýznamná ukázková data):
```
{
    "01": {
        "note" : "Data is very simple because we're demonstrating only the mechanism."
    }
}
```
V views.py přidejte funkci s trasou /api/data, která vrací statický datový soubor pomocí send_static_file metody:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Spusťte aplikaci a přejděte do koncového bodu /api/data, abyste viděli, že je vrácen statický soubor. až budete hotovi, zastavte aplikaci.

Otázka: Existují nějaké konvence pro uspořádání statických souborů?

Odpověď: Do statické složky ale můžete přidat další soubory CSS, JavaScript a HTML. Typickým způsobem, jak uspořádat statické soubory, je vytvořit podsložky pojmenované písma, skripty a obsah (pro šablony stylů a všechny ostatní soubory).

Otázka: Návody zpracování proměnných adres URL a parametrů dotazu v rozhraní API?

Odpověď: Podívejte se na odpověď v kroku 1–4 otázky : Jak Flask funguje s proměnnými trasami URL a parametry dotazu?

Krok 3–3: Přidání stránky do aplikace

Přidání další stránky do aplikace znamená následující:

Přidejte funkci Pythonu, která definuje zobrazení.
Přidejte šablonu pro značku stránky.
Přidejte potřebné směrování do souboru urls.py projektu Flask.

Následující postup přidá do projektu "HelloFlask" stránku About a odkazy na danou stránku z domovské stránky:

V Průzkumník řešení klikněte pravým tlačítkem na složku šablon, vyberte Přidat>novou položku, vyberte šablonu položky stránky HTML, pojmenujte soubor about.htmla vyberte OK.

Tip

Pokud se příkaz Nová položka nezobrazí v nabídce Přidat , ujistěte se, že jste aplikaci zastavili, aby Visual Studio ukončilo režim ladění.

Nahraďte obsah about.html následujícím kódem (explicitní odkaz na domovskou stránku nahradíte jednoduchým navigačním panelem v kroku 3-4):

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

Otevřete soubor views.py aplikace a přidejte funkci s názvemabout, která používá šablonu:

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

Otevřete soubor templates/index.html a přidejte do elementu <body> následující řádek bezprostředně za účelem propojení se stránkou About (tento odkaz opět nahradíte navigačním panelem v kroku 3-4):
```
<div><a href="about">About</a></div>
```
Uložte všechny soubory pomocí příkazu nabídky Uložit>vše nebo stiskněte kombinaci kláves Ctrl+Shift+S. (Tento krok není potřeba, protože spuštění projektu v sadě Visual Studio ukládá soubory automaticky. Nicméně, je to dobrý příkaz vědět o!)
Spusťte projekt, abyste mohli sledovat výsledky a kontrolovat navigaci mezi stránkami. Po dokončení aplikaci zastavte.

Otázka: Záleží na názvu funkce stránky flask?

Odpověď: Ne, protože je to @app.route dekorátor, který určuje adresy URL, pro které Flask volá funkci pro vygenerování odpovědi. Vývojáři obvykle odpovídají názvu funkce na trasu, ale takové porovnávání není povinné.

Krok 3–4: Vytvoření záhlaví a navigačního panelu pomocí dědičnosti šablon

Místo explicitních navigačních odkazů na každé stránce moderní webové aplikace obvykle používají záhlaví značky a navigační panel, který poskytuje nejdůležitější odkazy na stránky, místní nabídky atd. Aby se zajistilo, že je aplikace konzistentní, záhlaví a navigační panel by měly být stejné na všech stránkách, aniž by se opakoval stejný kód v každé šabloně stránky. Místo toho chcete definovat společné části všech stránek na jednom místě.

Systém šablon Flask (Ve výchozím nastavení Jinja) poskytuje dva způsoby opětovného použití konkrétních prvků napříč několika šablonami: zahrnutí a dědičnost.

Obsahuje další šablony stránek, které vložíte na určité místo v odkazující šabloně pomocí syntaxe {% include <template_path> %}. Proměnnou můžete použít také v případě, že chcete změnit cestu dynamicky v kódu. Zahrnutí se obvykle používají v textu stránky k načtení sdílené šablony v určitém umístění na stránce.
Dědičnost používá {% extends <template_path> %} na začátku šablony stránky k určení sdílené základní šablony, na které pak 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, takže odkazující šablony potřebují přidávat nebo upravovat jenom určité oblasti základní šablony označované jako bloky.

V oboupřípadechch <template_path>.././

Základní šablona označuje bloky používající {% block <block_name> %} a {% endblock %} značky. Pokud odkazující šablona používá značky se stejným názvem bloku, jeho blokový obsah přepíše obsah základní šablony.

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

Ve složce šablon aplikace vytvořte nový soubor HTML (pomocí místní nabídky Přidat>novou položku nebo přidat>stránku HTML) s názvem layout.html a nahraďte jeho obsah kódem níže. Vidíte, že tato šablona obsahuje blok s názvem "content", který je vše, co odkazující stránky potřebují nahradit:

<!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; 2018</p>
        </footer>
    </div>
</body>
</html>

Do souboru static/site.css aplikace přidejte následující styly (tento názorný postup neukazuje responzivní návrh. Tyto styly ale generují pouze zajímavý výsledek):

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

Upravte templates/index.html tak, aby odkazovaly na základní šablonu a přepsaly blok obsahu. Můžete vidět, že pomocí dědičnosti se tato šablona stane jednoduchou:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Upravte templates/about.html tak, aby odkazoval také na základní šablonu a přepsal blok obsahu:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Spuštěním serveru sledujte výsledky. Až budete hotovi, zavřete server.
Vzhledem k tomu, že jste v aplikaci udělali podstatné změny, je opět vhodná doba k potvrzení změn do správy zdrojového kódu.

Další kroky

S těmito prostředky můžete pokračovat hlouběji:

Další možnosti šablon Jinja, jako je tok řízení, najdete v dokumentaci k Návrháři šablon Jinja (jinja.pocoo.org).
Podrobnosti o použití url_fornajdete v url_for v dokumentaci k objektu aplikace Flask (flask.pocoo.org).
Zdrojový kód kurzu na GitHubu: Microsoft/python-sample-vs-learning-flask