Kurz: Začínáme s webovou architekturou Flask v sadě Visual Studio

Flask je zjednodušená architektura Pythonu pro webové aplikace, která poskytuje základy směrování adres URL a vykreslování stránek.

Flask se nazývá "mikro", protože přímo neposkytuje funkce, jako je ověřování formulářů, abstrakce databáze, ověřování atd. Tyto funkce jsou místo toho poskytovány speciálními balíčky Pythonu, které se nazývají rozšíření Flask. Rozšíření se bezproblémově integrují s Flaskem, aby se zobrazovala, jako by byla součástí samotného Flasku. Například Samotný Flask neposkytuje modul šablony stránky. Šablonování poskytuje rozšíření, jako je Jinja a Jade, jak je znázorněno v tomto kurzu.

V tomto kurzu se naučíte:

• Vytvořte základní projekt Flask v úložišti Git pomocí šablony Prázdný webový projekt Flask (krok 1).
• Vytvořte aplikaci Flask s jednou stránkou a vykreslíte ji pomocí šablony (krok 2).
• Obsluha statických souborů, přidání stránek a použití dědičnosti šablon (krok 3)
• Pomocí šablony webového projektu Flask vytvořte aplikaci s více stránkami a responzivním návrhem (krok 4).

V průběhu těchto kroků vytvoříte jedno řešení sady Visual Studio, které obsahuje dva samostatné projekty. Projekt vytvoříte pomocí různých šablon projektů Flask, které jsou součástí sady Visual Studio. Díky zachování projektů ve stejném řešení můžete snadno přepínat mezi různými soubory pro porovnání.

Poznámka:

Tento kurz se liší od rychlého startu Flasku, kde se dozvíte více o Flasku a o tom, jak používat různé šablony projektů Flask, které poskytují rozsáhlejší výchozí bod pro vaše vlastní projekty. Šablony projektů například automaticky nainstalují balíček Flask při vytváření projektu, a proto nemusíte balíček instalovat ručně, jak je znázorněno v rychlém startu.

Požadavky

• Visual Studio 2022 ve Windows s následujícími možnostmi:
  • Úloha vývoje v Pythonu (karta Úlohy v instalačním programu) Pokyny najdete v tématu Instalace podpory Pythonu v sadě Visual Studio.
  • Git pro Windows na kartě Jednotlivé komponenty v části Nástroje kódu

Šablony projektů Flask jsou součástí všech starších verzí nástrojů Python Tools pro Visual Studio, ale podrobnosti se můžou lišit od toho, co je popsáno v tomto kurzu.

Vývoj v pythonu se v Visual Studio pro Mac nepodporuje. V systému Mac a Linux použijte rozšíření Pythonu v kurzu editoru Visual Studio Code .

Krok 1–1: Vytvoření projektu a řešení sady Visual Studio

1. V sadě Visual Studio vyberte Soubor>nový>projekt a vyhledejte "Flask". Pak vyberte šablonu prázdného webového projektu Flask a vyberte Další.

   

2. Nakonfigurujte nový projekt zadáním následujících informací a pak vyberte Vytvořit:

   • Název: nastavte název projektu sady Visual Studio na BasicProject. Tento název se také používá pro projekt Flask.
   • Umístění: Zadejte umístění, ve kterém chcete vytvořit řešení a projekt sady Visual Studio.
   • Název řešení: nastavte na Učení Flask, který je vhodný pro řešení jako kontejner pro více projektů v tomto kurzu.

Krok 1–2: Prozkoumání ovládacích prvků Git a publikování do vzdáleného úložiště

V tomto kroku se seznámíte s ovládacími prvky Git sady Visual Studio a oknem Team Exploreru, ve kterém pracujete se správou zdrojového kódu.

1. Pokud chcete projekt potvrdit do místní správy zdrojového kódu, vyberte příkaz Přidat do správy zdrojového kódu v dolním rohu hlavního okna sady Visual Studio a vyberte možnost Git. Tato akce vás provede v okně Vytvořit úložiště Git, kde můžete vytvořit a odeslat nové úložiště.

   

2. Po vytvoření úložiště se v dolní části zobrazí sada nových ovládacích prvků Git. Zleva doprava tyto ovládací prvky zobrazují nepotvrzené potvrzení, nepotvrzené změny, aktuální větev a název úložiště:

   

3. Vyberte tlačítko Změny Gitu a Visual Studio otevře okno Team Exploreru na stránce Změny Gitu. Vzhledem k tomu, že nově vytvořený projekt je již potvrzen do správy zdrojového kódu automaticky, neuvidíte žádné čekající změny.

   

4. Na stavovém řádku sady Visual Studio vyberte tlačítko nepushed commits (šipka nahoru se 2) a otevřete stránku Synchronizace v Team Exploreru. Vzhledem k tomu, že máte jenom místní úložiště, poskytuje stránka jednoduché možnosti pro publikování úložiště do různých vzdálených úložišť.

   

   Můžete vybrat jakoukoli službu, kterou chcete použít pro své vlastní projekty. Tento kurz ukazuje použití GitHubu, kde se v úložišti Microsoft/python-sample-vs-learning-django udržuje dokončený ukázkový kód pro tento kurz.

5. Když vyberete některý z ovládacích prvků Publikovat , Team Explorer vás vyzve k zadání dalších informací. Například při publikování ukázky pro tento kurz muselo být nejprve vytvořeno samotné úložiště. V tomto případě se u adresy URL úložiště použila možnost Nasdílení změn do vzdáleného úložiště .

   

   Pokud nemáte existující úložiště, možnosti Publikovat na GitHubu a Nasdílení změn do Azure DevOps vám umožní vytvořit ho přímo ze sady Visual Studio.

6. Při práci v tomto kurzu se seznámíte s pravidelným používáním ovládacích prvků v sadě Visual Studio k potvrzení a nasdílení změn. Tento kurz vám připomene v příslušných bodech.

Tip

Pokud chcete rychle přecházet v Team Exploreru, vyberte záhlaví (které čte změny nebo nasdílení změn na obrázcích výše) a zobrazte místní nabídku dostupných stránek.

Otázka: Jaké jsou některé výhody použití správy zdrojového kódu od začátku projektu?

Odpověď: Použití správy zdrojového kódu ze začátku, zejména pokud používáte vzdálené úložiště, poskytuje pravidelné zálohování projektu mimo pracoviště. Na rozdíl od údržby projektu jen v místním systému souborů poskytuje správa zdrojového kódu úplnou historii změn a snadnou možnost vrátit jeden soubor nebo celý projekt do předchozího stavu. Tato historie změn pomáhá určit příčinu regresí (selhání testů). Správa zdrojového kódu je nezbytná, pokud na projektu pracuje více lidí, protože spravuje přepsání a zajišťuje řešení konfliktů. Správa zdrojového kódu je v podstatě formou automatizace, která vám pomůže automatizovat sestavování, testování a správu verzí. Je to první krok při používání DevOps pro projekt, a protože překážky vstupu jsou tak nízké, není opravdu důvod nepoužívat správu zdrojového kódu od začátku.

Další diskuzi o správě zdrojového kódu jako automatizaci najdete v tématu Zdroj pravdy: Role úložišť v DevOps, článek v MSDN Magazine napsaný pro mobilní aplikace, které platí také pro webové aplikace.

Otázka: Můžu sadě Visual Studio zabránit automatickému potvrzení nového projektu?

Odpověď: Ano. Pokud chcete automatické potvrzení zakázat, přejděte na stránku Nastavení v Team Exploreru, vyberte Globální nastavení Gitu>, zrušte zaškrtnutí políčka Potvrdit změny po sloučení a pak vyberte Aktualizovat.

Krok 1–3: Vytvoření virtuálního prostředí a jeho vyloučení ze správy zdrojového kódu

Teď, když jste pro svůj projekt nakonfigurovali správu zdrojového kódu, můžete vytvořit virtuální prostředí s potřebnými balíčky Flask, které projekt vyžaduje. Potom můžete pomocí Team Exploreru vyloučit složku prostředí ze správy zdrojového kódu.

1. V Průzkumník řešení klikněte pravým tlačítkem na uzel Prostředí Pythonu a vyberte Přidat prostředí.

   

2. Výběrem možnosti Vytvořit přijměte výchozí hodnoty v dialogovém okně Přidat virtuální prostředí. (Pokud chcete, můžete změnit název virtuálního prostředí, který jenom změní název její podsložky, ale env je to standardní konvence.)

   

3. Pokud se zobrazí výzva k vyjádření souhlasu s oprávněními správce, počkejte několik minut, než Visual Studio stáhne a nainstaluje balíčky. Během této doby se do tolika podsložek přenese několik tisíc souborů! Průběh můžete vidět v okně Výstup sady Visual Studio. Zatímco čekáte, zamyslete se nad oddíly otázky, které následují.

4. Na ovládacích prvcích Git sady Visual Studio (na stavovém řádku) vyberte indikátor změn (který zobrazuje 99*), který otevře stránku Změny v Team Exploreru.

   Vytvoření virtuálního prostředí, které přineslo tisíce změn, ale nemusíte je do správy zdrojového kódu zahrnout, protože vy (nebo někdo jiný klonující projekt) můžete prostředí kdykoli znovu vytvořit z requirements.txt.

   Pokud chcete virtuální prostředí vyloučit, klikněte pravým tlačítkem myši na složku env a vyberte Ignorovat tyto místní položky.

   

5. Po vyloučení virtuálního prostředí jsou jedinými zbývajícími změnami souboru projektu a .gitignore. Soubor .gitignore obsahuje přidanou položku pro složku virtuálního prostředí. Rozdíl se zobrazí poklikáním na soubor.

6. Zadejte zprávu potvrzení a vyberte tlačítko Potvrdit vše a pak nasdílejte potvrzení do vzdáleného úložiště.

Otázka: Proč chci vytvořit virtuální prostředí?

Odpověď: Virtuální prostředí je skvělý způsob, jak izolovat přesné závislosti vaší aplikace. Taková izolace zabraňuje konfliktům v globálním prostředí Pythonu a pomáhá jak testování, tak spolupráci. V průběhu času při vývoji aplikace vždy přinášíte mnoho užitečných balíčků Pythonu. Udržováním balíčků ve virtuálním prostředí specifickém pro projekt můžete snadno aktualizovat soubor requirements.txt projektu, který popisuje toto prostředí, které je součástí správy zdrojového kódu. Když se projekt zkopíruje do libovolného jiného počítače, včetně buildových serverů, serverů nasazení a dalších vývojových počítačů, je snadné prostředí znovu vytvořit jenom pomocí souboru requirements.txt (proto prostředí nemusí být ve správě zdrojového kódu). Další informace naleznete v tématu Použití virtuálních prostředí.

Otázka: Návody odebrat virtuální prostředí, které se už zavázalo ke správě zdrojového kódu?

Odpověď: Nejprve upravte soubor .gitignore tak, aby se vyloučila složka: najděte oddíl na konci komentáře # Python Tools for Visual Studio (PTVS) a přidejte nový řádek pro složku virtuálního prostředí, například /BasicProject/env. (Vzhledem k tomu, že Visual Studio soubor nezobrazuje v aplikaciPrůzkumník řešení ho otevřete přímo pomocí příkazu nabídky Otevřít>>soubor. Soubor můžete otevřít také v Team Exploreru: na stránce Nastavení vyberte Úložiště Nastavení, přejděte do části Ignorovat soubory a atributy a pak vyberte odkaz Upravit vedle souboru .gitignore.)

Za druhé otevřete příkazové okno, přejděte do složky, jako je BasicProject , která obsahuje složku virtuálního prostředí, jako je env, a spusťte git rm -r env. Pak tyto změny potvrďte z příkazového řádku (git commit -m 'Remove venv') nebo potvrďte ze stránky Změny v Team Exploreru.

Krok 1–4: Prozkoumání často používaného kódu

1. Po dokončení vytváření projektu uvidíte řešení a projekt v Průzkumník řešení, kde projekt obsahuje pouze dva soubory, app.py a requirements.txt:

   

2. Jak jsme uvedli dříve, soubor requirements.txt určuje závislost balíčku Flask. Přítomnost tohoto souboru vás při prvním vytvoření projektu vyzve k vytvoření virtuálního prostředí.

3. Jeden soubor app.py obsahuje tři části. Nejprve je příkaz import pro Flask, který vytvoří instanci Flask třídy, která je přiřazena proměnné appa pak přiřadí proměnnou wsgi_app (což je užitečné při nasazování na webového hostitele, ale prozatím se nepoužívá):

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

4. Druhá část na konci souboru je trochu volitelného kódu, který spouští vývojový server Flask s konkrétními hodnotami hostitele a portu převzatými z proměnných prostředí (výchozí hodnota localhost:5555):

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

5. Třetí je krátký kód, který přiřadí funkci ke směrování adresy URL, což znamená, že funkce poskytuje prostředek identifikovaný adresou URL. Trasy definujete pomocí dekorátoru Flasku @app.route , jehož argumentem je relativní adresa URL z kořenového adresáře webu. Jak vidíte v kódu, funkce zde vrátí pouze textový řetězec, který stačí k vykreslení prohlížeče. V následujících krocích vykreslujete bohatší stránky pomocí HTML.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Otázka: Jaký je účel argumentu názvu třídy Flask?

Odpověď: Argument je název modulu nebo balíčku aplikace a říká Flasku, kde hledat šablony, statické soubory a další prostředky, které patří do aplikace. U aplikací obsažených v jednom modulu __name__ je vždy správná hodnota. Je také důležité pro rozšíření, která potřebují informace o ladění. Další informace a další argumenty najdete v dokumentaci ke třídě Flask (flask.pocoo.org).

Otázka: Může mít funkce více než jeden dekorátor trasy?

Odpověď: Ano, můžete použít tolik dekorátorů, kolik chcete, pokud stejná funkce obsluhuje více tras. Pokud chcete například použít hello funkci pro "/" i "/hello", použijte následující kód:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Otázka: Jak Flask funguje s trasami adres URL proměnných a parametry dotazu?

Odpověď: V trase označíte libovolnou proměnnou a <variable_name>Flask předá proměnnou funkci pomocí pojmenovaného argumentu v cestě URL. Například trasa ve formě /hello/<name> vygeneruje řetězcový argument volaný name funkci. Parametry dotazu jsou k dispozici prostřednictvím request.args vlastnosti, konkrétně prostřednictvím request.args.get metody.

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Chcete-li změnit typ, předpona proměnné intpomocí , floatpath (který přijímá lomítka k označení názvů složek) a uuid. Podrobnosti najdete v dokumentaci k Flasku v pravidlech proměnných.

Otázka: Může Visual Studio po instalaci dalších balíčků vygenerovat soubor requirements.txt z virtuálního prostředí?

Odpověď: Ano. Rozbalte uzel Prostředí Pythonu, klikněte pravým tlačítkem na virtuální prostředí a vyberte příkaz Generovat požadavky.txt. Tento příkaz je vhodné používat pravidelně při úpravách prostředí a potvrdit změny požadavků.txt do správy zdrojového kódu spolu s dalšími změnami kódu, které závisí na daném prostředí. Pokud nastavíte kontinuální integraci na buildovém serveru, měli byste soubor vygenerovat a potvrdit změny při každé úpravě prostředí.

Krok 1–5: Spuštění projektu

1. V sadě Visual Studio vyberte >Spustit ladění (F5) nebo použijte tlačítko Webového serveru na panelu nástrojů (prohlížeč, který se může lišit):

   

2. Oba příkazy přiřadí proměnné prostředí PORT náhodné číslo portu a pak spustí python app.py. Kód spustí aplikaci pomocí daného portu na vývojovém serveru Flasku. Pokud visual Studio říká, že se nepovedlo spustit ladicí program se zprávou o tom, že nemáte spouštěcí soubor, klikněte pravým tlačítkem na app.py v Průzkumník řešení a vyberte Nastavit jako spouštěcí soubor.

3. Po spuštění serveru se otevře okno konzoly s protokolem serveru. Visual Studio pak automaticky otevře prohlížeč, do http://localhost:<port>kterého by se měla zobrazit zpráva vykreslená hello funkcí:

   

4. Až budete hotovi, zastavte server zavřením okna konzoly nebo pomocí příkazu Ladění>zastavit ladění v sadě Visual Studio.

Otázka: Jaký je rozdíl mezi použitím příkazů nabídky Ladění a příkazů serveru v podnabídce Pythonu projektu?

Odpověď: Kromě příkazů nabídky Ladění a tlačítek na panelu nástrojů můžete server spustit také pomocí serveru Spustit v Pythonu>nebo příkazy pro ladění serveru Python>Spustit v místní nabídce projektu. Oba příkazy otevřou okno konzoly, ve kterém se zobrazí místní adresa URL (localhost:port) pro spuštěný server. Musíte ale ručně otevřít prohlížeč s danou adresou URL a spuštění ladicího serveru nespustí ladicí program sady Visual Studio automaticky. Ladicí program můžete později připojit ke spuštěném procesu pomocí příkazu Připojit k procesu ladění>.

Další kroky

V tomto okamžiku základní projekt Flask obsahuje spouštěcí kód a kód stránky ve stejném souboru. Nejlepší je oddělit tyto dvě otázky a také oddělit HTML a data pomocí šablon.

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