Kurz: Vytvoření aplikace Flask se zobrazeními a šablonami stránek v sadě Visual Studio

Článek
01/27/2025

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

Visual Studio umožňuje vytvářet aplikace Flask ze šablon projektů, které poskytují rozsáhlejší výchozí bod pro vaše projekty. krok 1 v kurzu popisuje, jak vytvořit aplikaci Flask s jednou stránkou, kde je veškerý kód v jednom souboru. V kroku 2 refaktorujete kód a vytvoříte strukturu pro šablony stránek, které umožní další vývoj. Konkrétně chcete oddělit kód pro zobrazení aplikace od jiných aspektů, jako je spouštěcí kód.

V kroku 2 kurzu se naučíte:

Refaktoring kódu aplikace pro oddělení zobrazení od spouštěcího kódu
Vykreslení zobrazení pomocí šablony stránky

Požadavky

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

Refaktoring projektu Flask pro další vývoj

Šablona prázdného webového projektu Flask umožňuje vytvořit projekt s jedním app.py souborem, který obsahuje spouštěcí kód společně s jedním zobrazením. Pokud chcete umožnit další vývoj aplikace s více zobrazeními a šablonami, musíte tyto funkce oddělit.

Podle těchto kroků upravte projekt Flask tak, aby umožňoval další vývoj:

V Průzkumníku řešeníklikněte pravým tlačítkem na složku projektu Flask (BasicProject) a vyberte Přidat>novou složku.
Pojmenujte novou složku aplikace HelloFlask .
Klikněte pravým tlačítkem na složku HelloFlask a vyberte Přidat>Nová položka a vytvořte nový soubor.
V dialogovém okně Přidat novou položku vyberte šablonu souboru Prázdný soubor Pythonu:
1. Pojmenujte soubor __init__.py. Název souboru by měl obsahovat dvě úvodní a dvě koncová podtržítka (_) kolem slova init.
2. Vyberte Přidat.
Do nového souboru přidejte následující kód, který vytvoří instanci Flask a načte zobrazení aplikace:
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
Ve složce HelloFlask vytvořte další nový soubor Pythonu s názvem views.py.

Důležitý

Nezapomeňte zadat název souboru jako views.py. Název zobrazení je důležitý kvůli příkazu import HelloFlask.views v souboru __init__.py. Pokud název zobrazení není stejný v obou instancích, zobrazí Visual Studio chybu při spuštění.
Do souboru views.py přidejte následující kód. Tento kód funkci přejmenuje a definuje návratovou trasu do koncového bodu /home:
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
Tento kód také obsahuje kód vykreslování stránky ze souboru app.py a importuje objekt app deklarovaný v souboru __init__.py.
Ve složce HelloFlask vytvořte podsložku s názvem templates. Složka je prozatím prázdná.

Ve složce projektu Flask (BasicProject) nahraďte obsah souboru app.py následujícím kódem:

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)

Po aktualizaci kódu přejmenujte soubor app.py na runserver.py.
Ověřte, že struktura projektu Flask refaktored vypadá jako v následujícím příkladu:

Spuštění refaktorovaného programu a kontrola tras

Teď jste připraveni spustit projekt v sadě Visual Studio:

V aplikaci Visual Studio vyberte Ladění>Spustit ladění (F5) nebo vyberte Webový server na hlavním panelu nástrojů (prohlížeč se může lišit):
Když se aplikace otevře v prohlížeči, vyzkoušejte koncové body tras URL / (root) a /home.

Spuštění aktualizovaného programu v ladicím programu

Můžete také nastavit zarážky v různých částech kódu a postupovat podle spouštěcí sekvence aplikace v Debugger:

Nastavte několik zarážek, jako například tyto:
- První řádek souboru runserver.py
- První řádek souboru __init__.py
- Řádek return "Hello Flask!" v souboru views.py
Spusťte aplikaci v ladicím programu výběrem Ladění>Spustit ladění nebo F5.
Zatímco je ladicí program spuštěn, projděte si kód pomocí F10nebo spusťte kód z každého zastavení pomocí F5. Ovládací prvky ladění můžete použít také na hlavním panelu nástrojů v sadě Visual Studio, například Pokračovat, Zastavit, Restartovata možnosti Krok:
Až to budete hotovi, vyberte Ctrl+C a pak stisknutím libovolné klávesy aplikaci zastavte. Můžete také zavřít všechna otevřená okna prohlížeče pro trasy.

Uložte změny do správy zdrojového kódu

Jakmile refaktorujete kód a otestujete aktualizace, můžete zkontrolovat a potvrdit změny ve správě zdrojového kódu:

Uložte změny souborů projektu, například pomocí klávesové zkratky Ctrl+S.
Na panelu ovládacích prvků Gitu výběrem nepotvrzených změn (tužka 5) otevřete okno změny Gitu:
V okně Git Changes zadejte zprávu potvrzení a vyberte Potvrdit vše:

Po dokončení potvrzení Visual Studio zobrazí zprávu Potvrzení <hash> vytvořený místně.
(Volitelné) Nasdílejte potvrzené změny do vzdáleného úložiště:
1. Na panelu ovládacích prvků Git vyberte odchozí a příchozí potvrzení (šipky 1/0).
2. Vyberte synchronizace (vyžádat nasdílení změn) nebo push.
Můžete také akumulovat několik lokálních commitů před jejich odesláním do vzdáleného úložiště.

Uložte změny souborů projektu, například pomocí klávesové zkratky Ctrl+S.
V sadě Visual Studio vyberte nepotvrzené změny (tužka 5), které se otevře Team Exploreru:
V Team Exploreruzadejte zprávu o commitu, například "Refaktoring kódu", a vyberte Potvrdit vše.

Po dokončení potvrzení sada Visual Studio zobrazí zprávu Potvrzení <hash> vytvořené místně. Synchronizujte změny a sdílejte změny se serverem.
(Volitelné) Nasdílejte potvrzené změny do vzdáleného úložiště:
1. V Team Exploreruvyberte Synchronizovat.
2. Rozbalte odchozí commity a vyberte Push.
Před odesláním do vzdáleného úložiště můžete také shromáždit několik místních commitů.

Další postupy v této sérii kurzů najdete v této části, kde najdete postup potvrzení změn ve správě zdrojového kódu.

Určení frekvence commitů a pushů

Potvrzení změn ve správě zdrojového kódu vytvoří záznam v protokolu změn a bod, na který můžete podle potřeby obnovit úložiště. Můžete také prozkoumat každý commit a zkontrolovat konkrétní změny.

Potvrzení v Gitu jsou nenáročná. Může být vhodnější odeslat změny v malých objemech s častými potvrzeními, nikoli hromadit velký počet změn a odeslat je jako jediné potvrzení.

Nemusíte zadávat všechny malé změny do jednotlivých souborů. Při přidávání funkce je běžné provést potvrzení, změnit strukturu, jak je znázorněno v tomto kroku série kurzů, nebo refaktorovat nějaký kód. Je také dobré si ověřit s vašimi spolupracovníky, jaká úroveň podrobností potvrzení nejlépe vyhovuje všem.

Jak často provádíte commit a jak často odesíláte commity do vzdáleného úložiště, jsou dvě různé záležitosti. Než je odešlete do vzdáleného úložiště, můžete v místním úložišti nashromáždit několik commitů. Frekvence potvrzení závisí na tom, jak váš tým chce úložiště spravovat.

Použití šablon k vykreslení stránek a zobrazení

Funkce home v souboru views.py vygeneruje pro stránku odpověď HTTP ve formátu prostého textu. Většina skutečných webových stránek reaguje bohatými stránkami HTML, které často obsahují živá data. Primárním důvodem, proč vývojáři definují zobrazení pomocí funkce, je dynamicky generovat obsah.

Návratová hodnota zobrazení je pouze řetězec. Pomocí dynamického obsahu můžete vytvořit libovolný kód HTML v řetězci. Protože je nejlepší oddělit označení od dat, je lepší ukládat označení do šablony a ponechat data v kódu.

Úprava zobrazení tak, aby používala vložený kód HTML

Prvním krokem je převod zpracování zobrazení tak, aby se pro stránku používal vložený kód HTML s nějakým dynamickým obsahem:

Obsah souboru views.py nahraďte následujícím kódem:

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

Uložte změny a spusťte aplikaci znovu.
Aktualizujte stránku několikrát, abyste potvrdili, že se aktualizuje datum a čas. Až budete hotovi, aplikaci zastavte.

Vytvoření šablony HTML

V dalším kroku převeďte proces vykreslování stránky tak, aby používal šablonu HTML:

Klikněte pravým tlačítkem na složku šablony a vyberte Přidat>Novou položku a pak vytvořte nový soubor.
V dialogovém okně Přidat novou položku vyberte šablonu souboru HTML Page. Pojmenujte soubor index.html a vyberte Přidat.
Nahraďte zadaný obsah souboru HTML následujícím kódem:
```
<html>
<head>
   <title>Hello Flask</title>
</head>

<body>
   {{ content }}
</body>
</html>
```
V tomto kódu je příkaz {{ content }} zástupným nebo náhradním tokenem (označovaným také jako proměnná šablony ), pro který zadáte hodnotu v kódu.

Úprava domovské funkce pro načtení šablony

Je potřeba upravit funkci home tak, aby používala metodu render_template. Tato metoda načte šablonu HTML a poskytuje hodnotu pro {{ content }} pomocí pojmenovaného argumentu, který odpovídá názvu zástupného symbolu.

V souboru views.py nahraďte definici funkce home následujícím kódem:

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)

Flask automaticky hledá šablony ve složce , takže cesta k šabloně je relativní vzhledem k této složce.

Uložte změny projektu a spusťte aplikaci znovu.

Všimněte si, že vložená syntaxe HTML (\<strong> ...) v hodnotě content nevykreslí jako HTML, protože modul šablony (Jinja) automaticky unikne obsahu HTML. Automatické escapování zabraňuje náhodným zranitelnostem vůči injekčním útokům.

Vývojáři často shromažďují vstup z jedné stránky a používají ho jako hodnotu v jiné pomocí zástupného symbolu šablony. Escaping také slouží jako připomenutí, že je nejlepší zachovat html mimo kód.

Až budete hotovi, aplikaci zastavte.

Použití jedinečných zástupných symbolů

Pro každou část dat v kódu HTML můžete použít jedinečné zástupné symboly. Potom znovu upravte funkci home a zadejte konkrétní zástupné hodnoty:

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

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

V souboru views.py nahraďte definici funkce home následujícím kódem, který poskytuje hodnoty pro všechny zástupné symboly:

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)

Uložte změny a spusťte aplikaci znovu. Tentokrát byste měli vidět správně vykreslený výstup:
Změny můžete potvrdit do správy zdrojového kódu a aktualizovat vzdálené úložiště. Další informace naleznete v tématu Potvrzení změn ve správě zdrojového kódu.

Samostatné šablony stránek

Šablony se obvykle uchovávají v samostatných souborech HTML, ale můžete také použít vloženou šablonu. Samostatné soubory se doporučují, aby se zachovalo čisté oddělení mezi značkováním a kódem.

Použití rozšíření .html pro šablony

Rozšíření .html pro soubory šablon stránek je zcela volitelné. Vždy můžete identifikovat přesnou relativní cestu k souboru v prvním argumentu funkce render_template. Visual Studio (a další editory) obvykle poskytují funkce, jako je dokončování kódu a zvýrazňování syntaxe pomocí .html souborů, což převažuje nad tím, že šablony stránek nejsou v HTML.

Při práci s projektem Flask sada Visual Studio automaticky zjistí, jestli je soubor HTML, který upravujete, ve skutečnosti šablona Flasku a poskytuje určité funkce automatického dokončování. Pokud začnete zadávat komentář k šabloně stránky Flask ({#), Visual Studio automaticky doplní zavírací znaky #}. Příkazy Zkomentovat výběr a Zrušit komentování výběru (v nabídce Upravit>Upřesnit) také používají komentáře z šablony místo komentářů HTML.

Uspořádání šablon do podsložek

Můžete použít podsložky a pak odkazovat na relativní cestu pod složky šablon ve voláních funkce render_template. Tento přístup představuje skvělý způsob, jak efektivně vytvářet obory názvů pro šablony.

Další krok

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

Sdílet prostřednictvím