Krok 2: Vytvoření aplikace Flask se zobrazeními a šablonami stránek

Článek
09/08/2023

Předchozí krok: Vytvoření projektu a řešení sady Visual Studio

V kroku 1 tohoto kurzu jste vytvořili aplikaci Flask s jednou stránkou a veškerým kódem v jednom souboru. Pokud chcete umožnit budoucí vývoj, je nejlepší refaktorovat kód a vytvořit strukturu pro šablony stránek. Konkrétně chcete oddělit kód pro zobrazení aplikace od jiných aspektů, jako je spouštěcí kód.

V tomto kroku se dozvíte, jak:

Refaktoring kódu aplikace pro oddělení zobrazení od spouštěcího kódu (krok 2–1)
Vykreslení zobrazení pomocí šablony stránky (krok 2–2)

Krok 2–1: Refaktoring projektu na podporu dalšího vývoje

V kódu vytvořeném šablonou "Prázdný webový projekt Flask" máte jeden app.py soubor, 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, je nejlepší tyto obavy oddělit.

Ve složce projektu vytvořte volanou HelloFlask složku aplikace (klikněte pravým tlačítkem na projekt v Průzkumník řešení a vyberte Přidat>novou složku.)
Ve složce HelloFlask vytvořte soubor s názvem __init__.py s následujícím obsahem, který vytvoří Flask instanci a načte zobrazení aplikace (vytvořené v dalším kroku):
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
Ve složce HelloFlask vytvořte soubor s názvem views.py s následujícím obsahem. Název views.py je důležitý, protože jste ho použili import HelloFlask.views v __init__.py. Pokud se názvy neshodovaly, zobrazí se za běhu chyba.
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
Kromě přejmenování funkce a trasy na hometento kód obsahuje kód vykreslování stránky z app.py a importuje app objekt deklarovaný v souboru __init__.py.
Vytvořte podsložku v pojmenovaných šablonách HelloFlask, která prozatím zůstává prázdná.

V kořenové složce projektu přejmenujte app.py na runserver.py a nastavte obsah tak, aby odpovídal následujícímu kódu:

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)

Struktura projektu by měla vypadat jako na následujícím obrázku:
Vyberte Spustit ladění ladění (F5) nebo pomocí tlačítka Webový server na panelu nástrojů (prohlížeč, který se může lišit) spusťte aplikaci a otevřete prohlížeč.> Zkuste trasu URL / i /home.
Zarážky můžete nastavit také v různých částech kódu a restartovat aplikaci, aby postupoval podle spouštěcí sekvence. Můžete například nastavit zarážku na prvních řádcích runserver.py a *HelloFlask_*init_.py a na return "Hello Flask!" řádku v views.py. Potom restartujte aplikaci (Restartovat ladění>, Ctrl+Shift+F5 nebo tlačítko panelu nástrojů zobrazené níže) a krokujte kód (F10) nebo spusťte z každé zarážky pomocí klávesy F5.
Až budete hotovi, aplikaci zastavte.

Potvrzení do správy zdrojového kódu

Po úspěšném provedení změn kódu a testování můžete zkontrolovat a potvrdit změny do správy zdrojového kódu. V pozdějších krocích vám tento kurz připomene, že jste se znovu zavázali ke správě zdrojového kódu, můžete se podívat na tuto část.

Výběrem tlačítka změny v dolní části sady Visual Studio (zakroužkovanou níže) přejděte do Team Exploreru.
V Team Exploreru zadejte zprávu potvrzení, jako je "Refaktorovací kód" a vyberte Potvrdit vše. Po dokončení potvrzení se zobrazí zpráva, že se místně vytvořila hodnota hash> potvrzení<. Synchronizujte změny a sdílejte změny se serverem. Pokud chcete odeslat změny do vzdáleného úložiště, vyberte Synchronizovat a pak v části Odchozí potvrzení vyberte Nabízená oznámení. Před nasdílením změn do vzdáleného umístění můžete také nashromáždět několik místních potvrzení.

Otázka: Jak často se má jeden potvrzení potvrdit do správy zdrojového kódu?

Odpověď: Potvrzení změn ve správě zdrojového kódu vytvoří záznam v protokolu změn a bod, na který můžete v případě potřeby obnovit úložiště. Každé potvrzení je také možné prozkoumat pro konkrétní změny. Vzhledem k tomu, že potvrzení v Gitu jsou levná, je lepší provádět časté potvrzení než hromadit větší počet změn do jednoho potvrzení. Nemusíte zadávat všechny malé změny do jednotlivých souborů. Při přidávání funkce obvykle provedete potvrzení, změníte strukturu, jako jste to udělali v tomto kroku, nebo refaktoringem nějakého kódu. Zkontrolujte také členitost potvrzení, která nejlépe vyhovují všem uživatelům ve vašem týmu.

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

Krok 2–2: Vykreslení stránky pomocí šablony

Funkce home , kterou jste zatím v views.py vygeneruje pro stránku nic víc než odpověď HTTP ve formátu prostého textu. Většina skutečných webových stránek ale reaguje bohatými stránkami HTML, které často obsahují živá data. Primárním důvodem definování zobrazení pomocí funkce je dynamické generování obsahu.

Vzhledem k tomu, že návratová hodnota zobrazení je jen řetězec, můžete vytvořit libovolný kód HTML, který se vám líbí v řetězci, pomocí dynamického obsahu. Protože je ale nejlepší oddělit značky od dat, je lepší kód umístit do šablony a zachovat data v kódu.

Pro začátek upravte views.py tak, aby obsahoval následující kód, který používá vložený kód HTML pro stránku s nějakým dynamickým obsahem:

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

Spusťte aplikaci a několikrát aktualizujte stránku, abyste viděli, že se aktualizuje datum a čas. Až budete hotovi, aplikaci zastavte.
Pokud chcete převést vykreslování stránky na použití šablony, vytvořte ve složce šablon soubor s názvem index.html s následujícím obsahem, kde {{ content }} je zástupný nebo náhradní token (označovaný také jako proměnná šablony), pro který zadáte hodnotu v kódu:
```
<html>
  <head>
    <title>Hello Flask</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
Upravte funkci tak, aby se použila homerender_template k načtení šablony a zadání hodnoty pro "obsah", která se provádí pomocí pojmenovaného argumentu, který odpovídá názvu zástupného symbolu. Flask automaticky hledá šablony ve složce šablon , takže cesta k šabloně je relativní vzhledem k této složce:
```
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)
```
Spusťte aplikaci a prohlédněte si výsledky. Všimněte si, že vložený kód HTML v content hodnotě se nevykreslí jako HTML, protože modul šablon (Jinja) automaticky unikne obsahu HTML. Automatický únik zabraňuje náhodným ohrožením zabezpečení útoků prostřednictvím injektáže. Vývojáři často shromažďují vstup z jedné stránky a používají ho jako hodnotu v jiné prostřednictvím zástupného symbolu šablony. Escaping také slouží jako připomenutí, že je nejlepší zachovat html mimo kód.

Proto zkontrolujte šablony\index.html tak, aby obsahovaly jedinečné zástupné symboly pro každou část dat v rámci revizí:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Potom aktualizujte home funkci tak, aby poskytovala 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)
```
Spusťte aplikaci znovu a podívejte se na 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 najdete v kroku 2–1.

Otázka: Musí být šablony stránek v samostatném souboru?

Odpověď: Šablony jsou obvykle udržovány v samostatných souborech HTML, můžete také použít vloženou šablonu. Samostatné soubory se doporučují, aby se zachovalo čisté oddělení mezi revizemi a kódem.

Otázka: Musí šablony používat příponu souboru .html?

Odpověď: Přípona .html pro soubory šablon stránky je zcela volitelná, protože vždy můžete identifikovat přesnou relativní cestu k souboru v prvním argumentu funkce render_template . Visual Studio (a další editory) ale obvykle poskytuje funkce, jako je dokončování kódu a barevné zbarvení syntaxe se soubory .html , což převáží nad skutečností, že šablony stránek nejsou HTML.

Při práci s projektem Flask sada Visual Studio automaticky rozpozná, kdy je soubor HTML, který upravujete, ve skutečnosti šablona Flask, a poskytuje určité funkce automatického dokončování. Když například začnete psát komentář k šabloně stránky Flask, {#sada Visual Studio vám automaticky poskytne zavírací #} znaky. Příkazy Pro výběr komentáře a zrušení komentáře (v nabídce Upravit>upřesnit a na panelu nástrojů) také místo komentářů HTML používají komentáře šablony.

Otázka: Lze šablony uspořádat do dalších podsložek?

Odpověď: Ano, můžete použít podsložky a pak odkazovat na relativní cestu pod šablonami při voláních render_template. Je to skvělý způsob, jak efektivně vytvářet obory názvů pro šablony.

Další kroky

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

Přejít hlouběji

Rychlý start Flask – Vykreslování šablon (flask.pocoo.org)
Zdrojový kód kurzu na GitHubu: Microsoft/python-sample-vs-learning-flask