Udostępnij za pośrednictwem

Krok 2. Tworzenie aplikacji Django z widokami i szablonami stron

  • Artykuł

Poprzedni krok: Tworzenie projektu i rozwiązania programu Visual Studio

W projekcie programu Visual Studio masz teraz tylko składniki na poziomie witryny projektu Django, które mogą uruchamiać co najmniej jedną aplikację Django. Następnym krokiem jest utworzenie pierwszej aplikacji z jedną stroną.

W tym kroku dowiesz się, jak wykonywać następujące czynności:

  • Tworzenie aplikacji Django z jedną stroną (krok 2–1)
  • Uruchamianie aplikacji z projektu Django (krok 2–2)
  • Renderowanie widoku przy użyciu kodu HTML (krok 2–3)
  • Renderowanie widoku przy użyciu szablonu strony Django (krok 2–4)

Krok 2–1. Tworzenie aplikacji z domyślną strukturą

Aplikacja Django to oddzielny pakiet języka Python zawierający zestaw powiązanych plików do określonego celu. Projekt Django może zawierać wiele aplikacji, które ułatwiają hostowi sieci Web obsługę wielu oddzielnych punktów wejścia z jednej nazwy domeny. Na przykład projekt Django dla domeny, taki jak contoso.com , może zawierać jedną aplikację dla www.contoso.com, drugą aplikację dla support.contoso.comsystemu i trzecią aplikację dla programu docs.contoso.com. W tym przypadku projekt Django obsługuje routing i ustawienia adresu URL na poziomie witryny (w plikach urls.py i settings.py ). Każda aplikacja ma własne odrębne style i zachowanie za pośrednictwem wewnętrznego routingu, widoków, modeli, plików statycznych i interfejsu administracyjnego.

Aplikacja Django zwykle zaczyna się od standardowego zestawu plików. Program Visual Studio udostępnia szablony do inicjowania aplikacji Django w projekcie Django wraz ze zintegrowanym poleceniem menu obsługującym ten sam cel:

  • Szablony: w Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz pozycję Dodaj>nowy element. W oknie dialogowym Dodawanie nowego elementu wybierz szablon aplikacji Django 1.9, określ nazwę aplikacji w polu Nazwa, a następnie wybierz pozycję Dodaj.

Screenshot of Solution Explorer.

Screenshot of Add New Item window.

  • Zintegrowane polecenie: w Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>aplikację Django. To polecenie wyświetla monit o podanie nazwy. Określ nazwę aplikacji w polu Nowa nazwa aplikacji, a następnie wybierz przycisk OK.

    Menu command for adding a Django app.

    Menu command to enter a Django app name.

Przy użyciu jednej z metod utwórz aplikację o nazwie "HelloDjangoApp". Teraz w projekcie zostanie utworzony folder "HelloDjangoApp". Folder zawiera następujące elementy:

Django app files in Solution Explorer.

Element opis
Migracji Folder, w którym Django przechowuje skrypty aktualizujące bazę danych w celu dostosowania ich do zmian w modelach. Narzędzia migracji Django następnie stosują niezbędne zmiany do dowolnej poprzedniej wersji bazy danych, aby były zgodne z bieżącymi modelami. Korzystając z migracji, możesz skupić się na modelach i umożliwić Django obsługę bazowego schematu bazy danych. Migracje omówiono w dokumentacji platformy Django. Na razie folder zawiera plik __init__.py (wskazujący, że folder definiuje własny pakiet języka Python).
__init__.py Plik identyfikujący aplikację jako pakiet.
templates Folder szablonów stron Django zawierający pojedynczy plik index.html . Plik index.html znajduje się w folderze o nazwie takiej samej jak nazwa aplikacji. (W programie Visual Studio 2017 w wersji 15.7 lub starszej plik jest umieszczany bezpośrednio w obszarze szablonów , a krok 2–4 nakazuje utworzenie podfolderu). Szablony to bloki HTML, w których widoki mogą dodawać informacje w celu dynamicznego renderowania strony. Szablon strony "variables", taki jak {{ content }} w pliku index.html, są symbolami zastępczymi wartości dynamicznych, jak wyjaśniono w dalszej części tego artykułu (krok 2). Zazwyczaj aplikacje Django tworzą przestrzeń nazw dla swoich szablonów, umieszczając je w podfolderze zgodnym z nazwą aplikacji.
admin.py Plik języka Python, w którym rozszerzasz interfejs administracyjny aplikacji, który służy do wyświetlania i edytowania danych w bazie danych. Początkowo ten plik zawiera tylko instrukcję from django.contrib import admin. Domyślnie Django zawiera standardowy interfejs administracyjny za pośrednictwem wpisów w pliku settings.py projektu Django. Aby włączyć interfejs, możesz usunąć komentarz z istniejących wpisów w pliku urls.py .
apps.py Plik w języku Python, który definiuje klasę konfiguracji dla aplikacji (patrz poniżej, po tej tabeli).
models.py Modele to obiekty danych identyfikowane przez funkcje, za pomocą których widoki współdziałają z bazą danych aplikacji. Platforma Django udostępnia warstwę połączenia z bazą danych, aby aplikacje nie martwiły się szczegółami modeli. Plik models.py jest domyślnym miejscem, w którym tworzysz modele. Początkowo plik models.py zawiera tylko instrukcję from django.db import models.
tests.py Plik w języku Python zawierający podstawową strukturę testów jednostkowych.
views.py Widoki są podobne do stron internetowych, które przyjmują żądanie HTTP i zwracają odpowiedź HTTP. Zazwyczaj widoki renderowane jako HTML i przeglądarki internetowe wiedzą, jak wyświetlać, ale widok nie musi być widoczny (jak formularz pośredni). Widok jest definiowany przez funkcję języka Python, której obowiązkiem jest renderowanie kodu HTML w przeglądarce. Plik views.py jest domyślnym miejscem, w którym można tworzyć widoki. Początkowo plik views.py zawiera tylko instrukcję from django.shortcuts import render.

Gdy używasz nazwy "HelloDjangoApp", zawartość pliku apps.py jest wyświetlana jako:

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjango'

Pytanie: Czy tworzenie aplikacji Django w programie Visual Studio różni się od tworzenia aplikacji w wierszu polecenia?

Odpowiedź: Uruchomienie polecenia Dodaj aplikację Django lub użycie polecenia Dodaj>>nowy element z szablonem aplikacji Django powoduje utworzenie tych samych plików co polecenie manage.py startapp <app_name>Django. Zaletą tworzenia aplikacji w programie Visual Studio jest to, że folder aplikacji i wszystkie jego pliki są automatycznie zintegrowane w projekcie. Możesz użyć tego samego polecenia programu Visual Studio, aby utworzyć dowolną liczbę aplikacji w projekcie.

Krok 2–2. Uruchamianie aplikacji z projektu Django

Jeśli na tym etapie ponownie uruchomisz projekt w programie Visual Studio (przy użyciu przycisku paska narzędzi lub Debuguj>rozpocznij debugowanie), nadal będzie widoczna strona domyślna. Nie jest wyświetlana żadna zawartość aplikacji, ponieważ musisz zdefiniować stronę specyficzną dla aplikacji i dodać aplikację do projektu Django:

  1. W folderze HelloDjangoApp zmodyfikuj plik views.py , aby zdefiniować widok o nazwie "index":

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

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

  2. W folderze BasicProject (utworzonym w kroku 1) zmodyfikuj plik urls.py, aby był zgodny z następującym kodem (możesz zachować komentarz instruktażowy, jeśli chcesz):

    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żdy wzorzec adresu URL opisuje widoki, do których Django kieruje określone adresy URL względne witryny (czyli część https://www.domain.com/poniżej ). Pierwszym wpisem rozpoczynającym urlPatterns się od wyrażenia ^$ regularnego jest routing dla katalogu głównego witryny "/". Drugi wpis, ^home$ w szczególności kieruje "/home". Możesz mieć wiele routingów do tego samego widoku.

  3. Uruchom ponownie projekt, aby wyświetlić komunikat Hello, Django! zgodnie z definicją w widoku. Po zakończeniu zatrzymaj serwer.

Zatwierdzanie kontroli źródła

Po pomyślnym wprowadzeniu zmian w kodzie i przetestowaniu możesz przejrzeć i zatwierdzić kontrolę źródła. W kolejnych krokach, gdy ten samouczek przypomina o ponownym zatwierdzeniu kontroli źródła, możesz zapoznać się z tą sekcją.

  1. Wybierz przycisk zmiany u dołu programu Visual Studio (po okręgu poniżej), aby przejść do programu Team Explorer.

    Source control changes button on the Visual Studio status bar.

  2. W programie Team Explorer wprowadź komunikat zatwierdzenia, taki jak "Utwórz początkową aplikację Django", a następnie wybierz pozycję Zatwierdź wszystko. Po zakończeniu zatwierdzania zostanie wyświetlony komunikat Commit hash created locally (Utworzenie skrótu> zatwierdzenia <lokalnie). Zsynchronizuj, aby udostępnić zmiany serwerowi. Jeśli chcesz wypchnąć zmiany do repozytorium zdalnego, wybierz pozycję Synchronizuj, a następnie wybierz pozycję Wypchnij w obszarze Zatwierdzenia wychodzące. Można również zgromadzić wiele lokalnych zatwierdzeń przed wypchnięciem do lokalizacji zdalnej.

    Push commits to remote repository in Team Explorer.

Pytanie: Jaki jest prefiks "r" przed ciągami routingu dla?

Odpowiedź: Prefiks "r" w ciągu w języku Python oznacza "nieprzetworzone", co nakazuje językowi Python, aby nie unikał żadnych znaków w ciągu. Wyrażenia regularne używają wielu znaków specjalnych. Użycie prefiksu "r" znacznie ułatwia odczytywanie ciągów niż znaki ucieczki "\".

Pytanie: Co oznaczają znaki ^ i $ w wpisach routingu adresów URL?

Odpowiedź: W wyrażeniach regularnych, które definiują wzorce adresów URL, ^ oznacza "początek wiersza" i $ oznacza "koniec wiersza", gdzie w adresach URL są względem katalogu głównego witryny (część, która następuje poniżej https://www.domain.com/). Wyrażenie ^$ regularne skutecznie oznacza "puste" i pasuje do pełnego adresu URL https://www.domain.com/ (nic nie jest dodawane do katalogu głównego witryny). Wzorzec ^home$ pasuje dokładnie https://www.domain.com/home/do . (Django nie używa końcowego / w dopasowywaniu wzorca).

Jeśli nie używasz końcowego $ w wyrażeniu regularnym, tak jak w ^homeprzypadku , wzorzec adresu URL pasuje do dowolnego adresu URL, który zaczyna się od "home", takich jak "home", "homestead", i "home192837".

Aby eksperymentować z różnymi wyrażeniami regularnymi, wypróbuj narzędzia online, takie jak regex101.com w pythex.org.

Krok 2–3. Renderowanie widoku przy użyciu języka HTML

Funkcja index , która jest w pliku views.py , generuje odpowiedź HTTP w postaci zwykłego tekstu dla strony. Większość rzeczywistych stron internetowych odpowiada za pomocą rozbudowanych stron HTML, które często zawierają dane na żywo. Podstawowym powodem definiowania widoku przy użyciu funkcji jest dynamiczne generowanie zawartości.

Ponieważ argumentem HttpResponse jest tylko ciąg, możesz utworzyć dowolny kod HTML, który chcesz w ciągu. W prostym przykładzie zastąp index funkcję następującym kodem (zachowaj istniejące from instrukcje). Następnie index funkcja wygeneruje odpowiedź HTML przy użyciu zawartości dynamicznej aktualizowanej za każdym razem, gdy odświeżysz stronę.

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)

Teraz uruchom ponownie projekt, aby zobaczyć komunikat podobny do "Hello Django! w poniedziałek 16 kwietnia 2018 r. o 16:28:10". Odśwież stronę, aby zaktualizować czas i potwierdzić, że zawartość jest generowana przy użyciu każdego żądania. Po zakończeniu zatrzymaj serwer.

Napiwek

Skrótem do zatrzymywania i ponownego uruchamiania projektu jest użycie polecenia menu Debuguj>ponownie (Ctrl+Shift+F5) lub przycisku Uruchom ponownie na pasku narzędzi debugowania:

Restart button on the debugging toolbar in Visual Studio.

Krok 2–4. Renderowanie widoku przy użyciu szablonu strony

Generowanie kodu HTML w kodzie działa prawidłowo w przypadku małych stron. Jednak w miarę jak strony są bardziej zaawansowane, należy zachować statyczne części strony HTML (wraz z odwołaniami do plików CSS i JavaScript) jako "szablony stron". Następnie możesz wstawić zawartość dynamiczną, wygenerowaną przy użyciu kodu do szablonów stron. W poprzedniej sekcji tylko data i godzina wywołania now.strftime jest dynamiczna, co oznacza, że całą inną zawartość można umieścić w szablonie strony.

Szablon strony Django to blok html zawierający wiele tokenów zastępczych nazywanych "zmiennymi". Zmienne są delineated według {{ i }}, na przykład {{ content }}. Następnie moduł szablonu Django zastępuje zmienne zawartością dynamiczną, którą podajesz w kodzie.

W poniższych krokach pokazano użycie szablonów stron:

  1. W folderze BasicProject zawierającym projekt Django otwórz plik settings.py . Dodaj nazwę aplikacji "HelloDjangoApp" do INSTALLED_APPS listy. Dodanie aplikacji do listy informuje projekt Django, że istnieje folder "HelloDjangoApp" zawierający aplikację:

    INSTALLED_APPS = [
    'HelloDjangoApp',
    # Other entries...
]

  2. W pliku settings.py upewnij się, że TEMPLATES obiekt zawiera następujący wiersz (dołączony domyślnie). Poniższy kod instruuje Django, aby wyszukał szablony w folderze szablonów zainstalowanej aplikacji:

    'APP_DIRS': True,

  3. W folderze HelloDjangoApp otwórz plik szablonu strony templates/HelloDjangoApp/index.html (lub templates/index.html w programie VS 2017 15.7 lub starszym), aby sprawdzić, czy zawiera jedną zmienną: {{ content }}

    <html>
  <head>
    <title></title>
  </head>

  <body>
    {{ content }}
  </body>
</html>

  4. W folderze HelloDjangoApp otwórz plik views.py i zastąp index funkcję następującym kodem, który używa funkcji pomocniczej django.shortcuts.render. Pomocnik render udostępnia uproszczony interfejs do pracy z szablonami stron. Upewnij się, że zachowasz wszystkie istniejące from instrukcje.

    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")
        }
    )

    Pierwszym argumentem do elementu renderjest obiekt żądania, po którym następuje względna ścieżka do pliku szablonu w folderze szablonów aplikacji. Plik szablonu ma nazwę dla obsługiwanego widoku, jeśli jest to konieczne. Trzecim argumentem do render jest następnie słownik zmiennych, do których odwołuje się szablon. W tym przypadku zmienna w szablonie może odwoływać się do {{ object.property }}obiektu .

  5. Uruchom projekt i obserwuj dane wyjściowe. Powinien zostać wyświetlony podobny komunikat, jak w kroku 2–2, wskazujący, że szablon działa.

    Zwróć uwagę, że kod HTML użyty we content właściwości jest renderowany tylko jako zwykły tekst, ponieważ render funkcja automatycznie ucieka przed kodem HTML. Automatyczna ucieczka zapobiega przypadkowym atakom polegającym na wstrzyknięciu luk w zabezpieczeniach. Deweloperzy często zbierają dane wejściowe z jednej strony i używają jej jako wartości w innej za pośrednictwem symbolu zastępczego szablonu. Ucieczka służy również jako przypomnienie, że najlepiej zachować kod HTML w szablonie strony i poza nim. Ponadto w razie potrzeby można utworzyć więcej zmiennych. Na przykład zmień plik index.html przy użyciu szablonów, aby był zgodny z następującym znacznikiem. Poniższy znacznik dodaje tytuł strony i przechowuje wszystkie formatowania w szablonie strony:

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

    Następnie, aby podać wartości dla wszystkich zmiennych w szablonie strony, napisz index funkcję widoku zgodnie z opisem w tym miejscu:

    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")
        }
    )

  6. Zatrzymaj serwer i uruchom ponownie projekt. Upewnij się, że strona jest poprawnie renderowana:

    Running app using the template.

  7. Program Visual Studio 2017 w wersji 15.7 lub starszej: w ostatnim kroku przenieś szablony do podfolderu o nazwie takiej samej jak aplikacja. Podfolder tworzy przestrzeń nazw i unika potencjalnych konfliktów z innymi aplikacjami, które można dodać do projektu. (Szablony w programie VS 2017 w wersji 15.8 lub nowszej są wykonywane automatycznie). Oznacza to, że utwórz podfolder w szablonach o nazwie HelloDjangoApp, przenieś plik index.html do tego podfolderu i zmodyfikuj index funkcję widoku. Funkcja index view będzie odwoływać się do nowej ścieżki szablonu, HelloDjangoApp/index.html. Następnie uruchom projekt, sprawdź, czy strona jest poprawnie renderowana, i zatrzymaj serwer.

  8. W razie potrzeby zatwierdź zmiany kontroli źródła i zaktualizuj repozytorium zdalne zgodnie z opisem w kroku 2–2.

Pytanie: Czy szablony stron muszą znajdować się w osobnym pliku?

Odpowiedź: Zazwyczaj szablony są przechowywane w oddzielnych plikach HTML. Można również użyć wbudowanego szablonu. Aby zachować czyste rozdzielenie znaczników i kodu, zaleca się użycie oddzielnego pliku.

Pytanie: Szablony muszą używać rozszerzenia pliku HTML?

Odpowiedź: Rozszerzenie HTML dla plików szablonów strony jest całkowicie opcjonalne, ponieważ identyfikujesz dokładną ścieżkę względną do pliku w drugim argumencie render funkcji. Jednak program Visual Studio (i inne edytory) udostępnia funkcje, takie jak uzupełnianie kodu i kolorowanie składni z plikami HTML , co przewyższa fakt, że szablony stron nie są ściśle HTML.

W rzeczywistości podczas pracy z projektem Django program Visual Studio automatycznie wykrywa plik HTML z szablonem Django i udostępnia pewne funkcje autouzupełniania. Na przykład po rozpoczęciu wpisywania komentarza {#do szablonu strony Django program Visual Studio automatycznie wyświetla znaki zamykające #} . Polecenia zaznaczenia komentarza i zaznaczenia komentarza (w menu Edytuj>zaawansowane i na pasku narzędzi) również używają komentarzy szablonu zamiast komentarzy HTML.

Pytanie: Po uruchomieniu projektu widzę błąd, że nie można odnaleźć szablonu. Co jest nie tak?

Odpowiedź: Jeśli widzisz błędy, których nie można odnaleźć szablonu, upewnij się, że aplikacja została dodana do settings.py projektu Django na INSTALLED_APPS liście. Bez tego wpisu Django nie będzie wiedzieć, co należy zajrzeć do folderu szablonów aplikacji.

Pytanie: Dlaczego nazwy szablonów mają znaczenie?

Odpowiedź: Gdy Django szuka szablonu określonego render w funkcji, używa pierwszego pliku zgodnego ze ścieżką względną. Jeśli masz wiele aplikacji Django w tym samym projekcie z tymi samymi strukturami folderów dla szablonów, prawdopodobnie jedna aplikacja przypadkowo użyje szablonu z innej aplikacji. Aby uniknąć takich błędów, zawsze należy utworzyć podfolder w folderze szablonów aplikacji, który odpowiada nazwie aplikacji, aby uniknąć duplikowania.

Następne kroki

Obsługa plików statycznych, dodawanie stron i używanie dziedziczenia szablonu

Głębiej