Krok 2: Vytvoření aplikace Django 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 projektu sady Visual Studio máte jenom komponenty na úrovni webu projektu Django, které teď můžou spouštět jednu nebo více aplikací Django. Dalším krokem je vytvoření první aplikace s jednou stránkou.

V tomto kroku se naučíte:

Vytvoření aplikace Django s jednou stránkou (krok 2–1)
Spuštění aplikace z projektu Django (krok 2–2)
Vykreslení zobrazení pomocí HTML (krok 2–3)
Vykreslení zobrazení pomocí šablony stránky Django (krok 2–4)

Krok 2–1: Vytvoření aplikace s výchozí strukturou

Aplikace Django je samostatný balíček Pythonu, který obsahuje sadu souvisejících souborů pro konkrétní účel. Projekt Django může obsahovat mnoho aplikací, které pomáhají webovému hostiteli obsluhovat mnoho samostatných vstupních bodů od jednoho názvu domény. Například projekt Django pro doménu, jako contoso.com je, může obsahovat jednu aplikaci pro www.contoso.com, druhou aplikaci pro support.contoso.coma třetí aplikaci pro docs.contoso.com. V tomto případě projekt Django zpracovává směrování a nastavení adresy URL na úrovni webu (ve svých urls.py a settings.py souborech). Každá aplikace má svůj vlastní odlišný styl a chování prostřednictvím interního směrování, zobrazení, modelů, statických souborů a rozhraní pro správu.

Aplikace Django obvykle začíná standardní sadou souborů. Visual Studio poskytuje šablony pro inicializaci aplikace Django v rámci projektu Django spolu s příkazem integrované nabídky, který slouží stejnému účelu:

Šablony: V Průzkumník řešení klikněte pravým tlačítkem myši na projekt a vyberte Přidat>novou položku. V dialogovém okně Přidat novou položku vyberte šablonu aplikace Django 1.9, zadejte název aplikace do pole Název a vyberte Přidat.

Screenshot of Solution Explorer.

Screenshot of Add New Item window.

Integrovaný příkaz: V Průzkumník řešení klikněte pravým tlačítkem na projekt a vyberte Přidat> aplikaci Django. Tento příkaz vás vyzve k zadání názvu. Do pole Nový název aplikace zadejte název aplikace a vyberte OK.

Pomocí některé z metod vytvořte aplikaci s názvem "HelloDjangoApp". Teď se ve vašem projektu vytvoří složka HelloDjangoApp. Složka obsahuje následující položky:

Django app files in Solution Explorer.

Položka	Popis
Migrace	Složka, ve které Django ukládá skripty, které aktualizují databázi tak, aby odpovídaly změnám modelů. Nástroje pro migraci Django pak aplikují potřebné změny na všechny předchozí verze databáze tak, aby odpovídaly aktuálním modelům. Pomocí migrací se zaměříte na své modely a necháte Django zpracovávat základní schéma databáze. Migrace jsou popsány v dokumentaci Django. Složka teď obsahuje soubor __init__.py (označující, že složka definuje vlastní balíček Pythonu).
__init__.py	Soubor, který identifikuje aplikaci jako balíček.
templates	Složka pro šablony stránek Django, která obsahuje jeden soubor index.html . Soubor index.html se umístí do složky se stejným názvem jako název aplikace. (V sadě Visual Studio 2017 15.7 a starší se soubor umístí přímo pod šablony a krok 2–4 vás vyzve k vytvoření podsložky.) Šablony jsou bloky HTML, do kterých můžou zobrazení přidávat informace pro dynamické vykreslení stránky. Šablona stránky "proměnné", například `{{ content }}` v index.html, jsou zástupné symboly pro dynamické hodnoty, jak je vysvětleno dále v tomto článku (krok 2). Aplikace Django obvykle vytvoří obor názvů pro své šablony tak, že je umístí do podsložky, která odpovídá názvu aplikace.
admin.py	Soubor Pythonu, ve kterém rozšiřujete rozhraní pro správu aplikace, které slouží k zobrazení a úpravě dat v databázi. Zpočátku tento soubor obsahuje pouze příkaz, `from django.contrib import admin`. Django ve výchozím nastavení zahrnuje standardní rozhraní pro správu prostřednictvím položek v souboru settings.py projektu Django. Pokud chcete rozhraní zapnout, můžete zrušit komentář existujících položek v urls.py souboru.
apps.py	Soubor Pythonu, který definuje třídu konfigurace pro aplikaci (viz níže za touto tabulkou).
models.py	Modely jsou datové objekty identifikované funkcemi, pomocí kterých zobrazení pracují s podkladovou databází aplikace. Django poskytuje vrstvu připojení k databázi, aby se aplikace netýkají podrobností o modelech. Soubor models.py je výchozím místem, kde vytváříte modely. Zpočátku soubor models.py obsahuje pouze příkaz, `from django.db import models`.
tests.py	Soubor Pythonu, který obsahuje základní strukturu testů jednotek.
views.py	Zobrazení se podobají webovým stránkám, které přebírají požadavek HTTP a vrací odpověď HTTP. Zobrazení se obvykle vykreslují jako HTML a webové prohlížeče, ale zobrazení nemusí být nutně viditelné (například zprostředkující formulář). Zobrazení je definováno funkcí Pythonu, jejíž odpovědností je vykreslení KÓDU HTML do prohlížeče. Soubor views.py je výchozím místem, kde vytváříte svá zobrazení. Zpočátku soubor views.py obsahuje pouze příkaz, `from django.shortcuts import render`.

Když použijete název "HelloDjangoApp", zobrazí se obsah souboru apps.py takto:

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjango'

Otázka: Liší se vytváření aplikace Django v sadě Visual Studio od vytvoření aplikace na příkazovém řádku?

Odpověď: Spuštění příkazu Přidat>aplikaci Django nebo použití příkazu Přidat>novou položku pomocí šablony aplikace Django vytvoří stejné soubory jako příkaz manage.py startapp <app_name>Django . Výhodou vytvoření aplikace v sadě Visual Studio je, že se složka aplikace a všechny její soubory automaticky integrují do projektu. Stejný příkaz sady Visual Studio můžete použít k vytvoření libovolného počtu aplikací v projektu.

Krok 2–2: Spuštění aplikace z projektu Django

Pokud v tomto okamžiku projekt spustíte znovu v sadě Visual Studio (pomocí tlačítka panelu nástrojů nebo >ladění spustit ladění), stále se zobrazí výchozí stránka. Nezobrazuje se žádný obsah aplikace, protože potřebujete definovat stránku specifickou pro aplikaci a přidat ji do projektu Django:

Ve složce HelloDjangoApp upravte soubor views.py tak, aby definoval zobrazení s názvem "index":

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, Django!")

Ve složce BasicProject (vytvořené v kroku 1) upravte soubor urls.py tak, aby odpovídal následujícímu kódu (pokud chcete, můžete zachovat instrukční komentář):
```
from django.urls import include, re_path
import HelloDjangoApp.views

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
    re_path(r'^$', HelloDjangoApp.views.index, name='index'),
    re_path(r'^home$', HelloDjangoApp.views.index, name='home')
]
```
Každý vzor adresy URL popisuje zobrazení, do kterých Django směruje konkrétní adresy URL relativní vzhledem k webu (to znamená část, která následuje https://www.domain.com/). První položka, urlPatterns která začíná regulárním výrazem ^$ , je směrování kořenového adresáře lokality "/". Druhá položka, ^home$ konkrétně směruje "/home". Můžete mít více směrování do stejného zobrazení.
Spusťte projekt znovu, aby se zobrazila zpráva Hello, Django! definovaná zobrazením. Až budete hotovi, zastavte server.

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 správu 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 "Create initial Django app" (Vytvořit počáteční aplikaci Django) a vyberte Commit All (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á je předpona r před směrovacími řetězci?

Odpověď: Předpona r v řetězci v Pythonu znamená "raw", která dává Pythonu pokyn, aby neukazoval žádné znaky v řetězci. Regulární výrazy používají mnoho speciálních znaků. Použití předpony r usnadňuje čtení řetězců než řídicí znaky \.

Otázka: Co znamenají znaky ^ a $ v položkách směrování adresy URL?

Odpověď: V regulárních výrazech, které definují vzory adresy URL, ^ znamená "začátek řádku" a $ znamená "konec řádku", kde adresy URL jsou relativní ke kořenovému adresáři webu (část, která následuje https://www.domain.com/). Regulární výraz ^$ efektivně znamená "prázdné" a odpovídá úplné adrese URL https://www.domain.com/ (nic není přidáno do kořenového adresáře webu). Vzor ^home$ přesně https://www.domain.com/home/odpovídá . (Django nepoužívá koncové / v porovnávání vzorů.)

Pokud v regulárním výrazu nepoužíváte koncovou hodnotu $ jako ^homev případě , pak vzor adresy URL odpovídá libovolné adrese URL, která začíná na "home", například "home", "homework", "homestead" a "home192837".

Pokud chcete experimentovat s různými regulárními výrazy, vyzkoušejte online nástroje, jako je regex101.com na pythex.org.

Krok 2–3: Vykreslení zobrazení pomocí HTML

Funkce index , kterou máte 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 k definování zobrazení pomocí funkce je dynamické generování obsahu.

Vzhledem k tomu, že HttpResponse argumentem je jen řetězec, můžete vytvořit libovolný kód HTML, který se vám líbí v řetězci. Jako jednoduchý příklad nahraďte index funkci následujícím kódem (zachovat existující from příkazy). Funkce index pak vygeneruje odpověď HTML pomocí dynamického obsahu, který se aktualizuje při každé aktualizaci stránky.

from datetime import datetime

def index(request):
    now = datetime.now()

    html_content = "<html><head><title>Hello, Django</title></head><body>"
    html_content += "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
    html_content += "</body></html>"

    return HttpResponse(html_content)

Teď spusťte projekt znovu a zobrazte zprávu typu "Hello Django! 16. dubna 2018 v 16:28:10". Aktualizujte stránku, aby se aktualizoval čas, a ověřte, že se obsah generuje s každou žádostí. Až budete hotovi, zastavte server.

Tip

Zástupce pro zastavení a restartování projektu spočívá v použití příkazu nabídky Restartovat ladění>(Ctrl+Shift+F5) nebo tlačítka Restartovat na panelu nástrojů ladění:

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

Generování html v kódu funguje dobře pro malé stránky. Vzhledem k tomu, že stránky jsou propracovanější, musíte zachovat statické části stránky HTML (společně s odkazy na soubory CSS a JavaScript) jako "šablony stránek". Do šablon stránek pak můžete vložit dynamický obsah vygenerovaný kódem. V předchozí části je dynamické pouze datum a čas volání now.strftime , což znamená, že veškerý ostatní obsah lze umístit do šablony stránky.

Šablona stránky Django je blok HTML, který obsahuje více náhradních tokenů označovaných jako proměnné. Proměnné jsou delineovány a {{}}, {{ content }}například . Modul šablony Django pak nahradí proměnné dynamickým obsahem, který zadáte v kódu.

Následující kroky ukazují použití šablon stránek:

Ve složce BasicProject, která obsahuje projekt Django, otevřete soubor settings.py. Do seznamu přidejte název aplikace HelloDjangoApp INSTALLED_APPS . Přidání aplikace do seznamu říká projektu Django, že existuje složka "HelloDjangoApp" obsahující aplikaci:
```
INSTALLED_APPS = [
    'HelloDjangoApp',
    # Other entries...
]
```
V souboru settings.py se ujistěte, že TEMPLATES objekt obsahuje následující řádek (zahrnutý ve výchozím nastavení). Následující kód dá Django pokyn, aby hledal šablony ve složce šablon nainstalované aplikace:
```
'APP_DIRS': True,
```
Ve složce HelloDjangoApp otevřete soubor šablony stránky templates/HelloDjangoApp/index.html (nebo templates/index.html ve VS 2017 15.7 a starší), abyste mohli vidět, že obsahuje jednu proměnnou: {{ content }}
```
<html>
  <head>
    <title></title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
Ve složce HelloDjangoApp otevřete soubor views.py a nahraďte index funkci následujícím kódem, který používá pomocnou django.shortcuts.render funkci. Pomocník render poskytuje zjednodušené rozhraní pro práci se šablonami stránek. Ujistěte se, že jste zachovali všechny existující from příkazy.
```
from django.shortcuts import render   # Added for this step

def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'content': "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )
```
Prvním argumentem renderje objekt požadavku následovaný relativní cestou k souboru šablony ve složce šablon aplikace. Soubor šablony je v případě potřeby pojmenovaný pro zobrazení, které podporuje. Třetím argumentem render je pak slovník proměnných, na které šablona odkazuje. Do slovníku můžete zahrnout objekty, v takovém případě může proměnná v šabloně odkazovat na {{ object.property }}.
Spusťte projekt a sledujte výstup. Měla by se zobrazit podobná zpráva jako v kroku 2–2, což znamená, že šablona funguje.

Všimněte si, že html, který jste použili ve content vlastnosti, se vykresluje pouze jako prostý text, protože render funkce automaticky unikne 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 v šabloně stránky a mimo kód. V případě potřeby je také jednoduché vytvořit více proměnných. Například změňte soubor index.html se šablonami tak, aby odpovídaly následujícímu kódu. Následující kód přidá název stránky a zachová veškeré formátování v šabloně stránky:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Pokud pak chcete zadat hodnoty pro všechny proměnné v šabloně stránky, napište index funkci zobrazení, jak je uvedeno zde:
```
def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'title' : "Hello Django",
            'message' : "Hello Django!",
            'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )
```
Zastavte server a restartujte projekt. Ujistěte se, že se stránka vykresluje správně:
Visual Studio 2017 verze 15.7 a starší: Jako poslední krok přesuňte šablony do podsložky s názvem stejné jako vaše aplikace. Podsložka vytvoří obor názvů a zabrání potenciálním konfliktům s jinými aplikacemi, které můžete do projektu přidat. (Šablony ve VS 2017 15.8+ to dělají automaticky.) To znamená, že v šablonách s názvem HelloDjangoApp vytvořte podsložku, přesuňte soubor index.html do této podsložky a upravte index funkci zobrazení. Funkce index zobrazení bude odkazovat na novou cestu šablony HelloDjangoApp/index.html. Pak spusťte projekt, ověřte, že se stránka vykresluje správně, a zastavte server.
Potvrďte změny ve správě zdrojového kódu a v případě potřeby aktualizujte vzdálené úložiště, jak je popsáno v kroku 2–2.

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. Pokud chcete zachovat čisté oddělení mezi revizemi a kódem, doporučujeme použít samostatný soubor.

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

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

Ve skutečnosti, když pracujete s projektem Django, Visual Studio automaticky rozpozná soubor HTML, který má šablonu Django, a poskytuje určité funkce automatického dokončování. Když například začnete psát komentář k šabloně stránky Django, {#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: Při spuštění projektu se zobrazí chyba, že se šablona nenašla. Co je?

Odpověď: Pokud se zobrazí chyby, které se v šabloně nenašly, ujistěte se, že jste aplikaci přidali do settings.py projektu Django v INSTALLED_APPS seznamu. Bez této položky Django neví, co se má ve složce šablon aplikace hledat.

Otázka: Proč jsou názvy šablon důležité?

Odpověď: Když Django hledá šablonu uvedenou ve render funkci, použije první soubor, který odpovídá relativní cestě. Pokud máte ve stejném projektu více aplikací Django se stejnými strukturami složek pro šablony, je pravděpodobné, že jedna aplikace neúmyslně použije šablonu z jiné aplikace. Abyste se těmto chybám vyhnuli, vždy vytvořte podsložku ve složce šablon aplikace, která odpovídá názvu aplikace, aby nedocházelo k duplicitě.

Další kroky

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

Přejít hlouběji

Psaní první aplikace Django, část 1 – zobrazení (docs.djangoproject.com)
Další možnosti šablon Django, jako jsou zahrnutí a dědičnost, najdete v tématu Jazyk šablony Django (docs.djangoproject.com).
Trénování regulárních výrazů v Učení (LinkedIn)
Zdrojový kód kurzu na GitHubu: Microsoft/python-sample-vs-learning-django

Sdílet prostřednictvím