Krok 4. Używanie pełnego szablonu projektu internetowego Django

Artykuł
08/25/2023

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

Teraz, gdy znasz już podstawy platformy Django w programie Visual Studio, możesz łatwo zrozumieć pełną aplikację, która została wprowadzona przez szablon "Django Web Project".

W tym kroku wykonasz następujące czynności:

Tworzenie pełniejszej aplikacji internetowej Django przy użyciu szablonu "Projekt internetowy Django" i badanie struktury projektu (krok 4–1)
Zapoznaj się z widokami i szablonami stron utworzonymi przez szablon projektu, który składa się z trzech stron dziedziczynych z szablonu strony podstawowej i który wykorzystuje statyczne biblioteki JavaScript, takie jak jQuery i Bootstrap (krok 4–2)
Omówienie routingu adresów URL dostarczonego przez szablon (krok 4–3)

Szablon zawiera również uwierzytelnianie podstawowe, które zostało omówione w kroku 5.

Krok 4–1. Tworzenie projektu na podstawie szablonu

W programie Visual Studio przejdź do Eksplorator rozwiązań, kliknij prawym przyciskiem myszy rozwiązanie Edukacja Django utworzone wcześniej w tym samouczku. Następnie wybierz pozycję Dodaj>nowy projekt. (Jeśli chcesz użyć nowego rozwiązania, wybierz pozycję Zamiast tego utwórz>nowy>projekt).
W oknie dialogowym Nowy projekt wyszukaj i wybierz szablon Projekt internetowy Django. Wywołaj projekt "DjangoWeb", a następnie wybierz pozycję Utwórz.
Ponieważ szablon zawiera plik requirements.txt , program Visual Studio monituje o lokalizację instalacji zależności. Po wyświetleniu monitu wybierz opcję Zainstaluj w środowisku wirtualnym, a następnie w oknie dialogowym Dodawanie środowiska wirtualnego wybierz pozycję Utwórz, aby zaakceptować ustawienia domyślne.
Gdy program Visual Studio zakończy konfigurowanie środowiska wirtualnego, postępuj zgodnie z instrukcjami wyświetlanymi w pliku readme.html , aby utworzyć administratora Django (czyli administratora). Kliknij prawym przyciskiem myszy projekt programu Visual Studio i wybierz polecenie Python>Django Create Superuser, a następnie postępuj zgodnie z monitami. Upewnij się, że rejestrujesz nazwę użytkownika i hasło podczas korzystania z funkcji uwierzytelniania aplikacji.
Ustaw projekt DjangoWeb jako domyślny dla rozwiązania Visual Studio, klikając prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierając polecenie Ustaw jako projekt startowy. Projekt startowy, który jest wyświetlany pogrubioną czcionką, jest uruchamiany po uruchomieniu debugera.
Wybierz pozycję Debuguj>rozpocznij debugowanie (F5) lub użyj przycisku Serwer internetowy na pasku narzędzi, aby uruchomić serwer.
Aplikacja utworzona przez szablon ma trzy strony: Strona główna, Informacje i Kontakt. Możesz nawigować między stronami przy użyciu paska nawigacyjnego. Pośmiń minutę lub dwie, aby zbadać różne części aplikacji. Aby uwierzytelnić się w aplikacji za pomocą polecenia Zaloguj się, użyj utworzonych wcześniej poświadczeń administratora.
Aplikacja utworzona przez szablon "Django Web Project" używa bootstrap do dynamicznego układu, który uwzględnia czynniki formularzy mobilnych. Aby zobaczyć ten czas odpowiedzi, zmień rozmiar przeglądarki na wąski widok, tak aby zawartość renderowana w pionie, a pasek nawigacyjny zmieni się w ikonę menu.
Możesz pozostawić aplikację uruchomioną dla poniższych sekcji.

Jeśli chcesz zatrzymać aplikację i zatwierdzić zmiany w kontroli źródła, otwórz stronę Zmiany w programie Team Explorer, kliknij prawym przyciskiem myszy folder środowiska wirtualnego (prawdopodobnie env) i wybierz pozycję Ignoruj te elementy lokalne.

Sprawdzanie, co tworzy szablon

Na najszerszym poziomie szablon "Projekt internetowy Django" tworzy następującą strukturę:

Pliki w katalogu głównym projektu:
- manage.py: narzędzie administracyjne Django.
- db.sqlite3: domyślna baza danych SQLite.
- requirements.txt: zawiera zależność od platformy Django 1.x.
- readme.html: plik wyświetlany w programie Visual Studio po utworzeniu projektu. Jak wspomniano w poprzedniej sekcji, postępuj zgodnie z instrukcjami w tym miejscu, aby utworzyć konto administratora (administratora) dla aplikacji.
Folder aplikacji zawiera wszystkie pliki aplikacji, w tym widoki, modele, testy, formularze, szablony i pliki statyczne (zobacz krok 4–2). Zazwyczaj zmieniasz nazwę tego folderu, aby użyć bardziej charakterystycznej nazwy aplikacji.
Folder DjangoWeb (projekt Django) zawiera typowe pliki projektów Django: __init__.py, settings.py, urls.py i wsgi.py. Plik settings.py jest już skonfigurowany dla aplikacji i pliku bazy danych przy użyciu szablonu projektu. Plik urls.py jest już skonfigurowany przy użyciu tras do wszystkich stron aplikacji, w tym formularza logowania.

Odpowiedź: Tak jednak należy zrobić z świadomością, że różne projekty prawdopodobnie używają różnych pakietów w czasie. W związku z tym udostępnione środowisko wirtualne musi zawierać wszystkie pakiety dla wszystkich projektów, które go używają.

Niemniej jednak, aby użyć istniejącego środowiska wirtualnego, wykonaj poniższe kroki:

Po wyświetleniu monitu o zainstalowanie zależności w programie Visual Studio wybierz opcję Zainstaluję je samodzielnie .
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł Środowiska języka Python i wybierz polecenie Dodaj istniejące środowisko wirtualne.
Przejdź do folderu i wybierz folder zawierający środowisko wirtualne, a następnie wybierz przycisk OK.

Krok 4–2. Omówienie widoków i szablonów stron utworzonych przez szablon projektu

Jak widać podczas uruchamiania projektu, aplikacja zawiera trzy widoki: Strona główna, Informacje i Kontakt. Kod dla tych widoków znajduje się w pliku views.py . Każda funkcja widoku wywołuje django.shortcuts.render ścieżkę do szablonu i prosty obiekt słownika. Na przykład strona Informacje jest obsługiwana about przez funkcję :

def about(request):
    """Renders the about page."""
    assert isinstance(request, HttpRequest)
    return render(
        request,
        'app/about.html',
        {
            'title':'About',
            'message':'Your application description page.',
            'year':datetime.now().year,
        }
    )

Szablony znajdują się w folderze szablonów/aplikacji aplikacji aplikacji (zazwyczaj chcesz zmienić nazwę aplikacji na nazwę rzeczywistej aplikacji). Szablon podstawowy , layout.html, jest najbardziej rozbudowany. Plik layout.html odwołuje się do wszystkich niezbędnych plików statycznych (JavaScript i CSS). Plik layout.html definiuje również blok o nazwie "content", który inne strony zastępują i udostępnia inny blok o nazwie "scripts". Następujące fragmenty z adnotacjami z pliku layout.html pokazują następujące konkretne obszary:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- Define a viewport for Bootstrap's responsive rendering -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Django Application</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
    <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>
<body>
    <!-- Navbar omitted -->

    <div class="container body-content">

<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; {{ year }} - My Django Application</p>
        </footer>
    </div>

<!-- Additional scripts; use the "scripts" block to add page-specific scripts.  -->
    <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
    <script src="{% static 'app/scripts/respond.js' %}"></script>
{% block scripts %}{% endblock %}

</body>
</html>

Poszczególne szablony stron about.html, contact.html i index.html rozszerzają układ szablonu podstawowego.html. Plik szablonu about.html jest najprostszy i pokazuje {% extends %} tagi i {% block content %} :

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

Pliki szablonów index.html i contact.html używają tej samej struktury i zapewniają bardziej długotrwałą zawartość w bloku "zawartość".

W folderze templates/app znajduje się również czwarta strona login.html wraz z plikiem loginpartial.html, który został przeniesiony do pliku layout.html przy użyciu polecenia {% include %}. Te pliki szablonów zostały omówione w kroku 5 uwierzytelniania.

Pytanie: Czy {% blokuj %} i {% blokady końcowej %} mogą być wcięty w szablonie strony Django?

Odpowiedź: Tak. Szablony stron Django działają prawidłowo, jeśli wcięcie tagów bloku, być może wyrównanie ich do odpowiednich elementów nadrzędnych. Aby wyraźnie wyświetlić lokalizację tagów bloków, szablony stron programu Visual Studio nie wcięcia tagów bloków.

Krok 4–3. Omówienie routingu adresów URL utworzonego przez szablon

Plik urls.py projektu Django utworzony przez szablon "Django Web Project" zawiera następujący kod:

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

Pierwsze trzy wzorce adresów URL są mapować bezpośrednio na homewidoki , contacti about w pliku views.py aplikacji. ^login/$ Wzorce i ^logout$, z drugiej strony, używają wbudowanych widoków Django zamiast widoków zdefiniowanych przez aplikację. Wywołania url metody obejmują również dodatkowe dane w celu dostosowania widoku. Krok 5 bada te wywołania.

Pytanie: Dlaczego w utworzonym projekcie wzorzec adresu URL "about" używa '^about' zamiast '^about$', jak pokazano tutaj?

Odpowiedź: Brak końcowego ciągu "$" w wyrażeniu regularnym był prostym nadzorem w wielu wersjach szablonu projektu. Wzorzec adresu URL doskonale sprawdza się dla strony o nazwie "about". Jednak bez końcowego "$" wzorzec adresu URL pasuje również do adresów URL, takich jak "about=django", "about09876", "aboutoflaughter", itd. Końcowy ciąg "$" jest pokazany tutaj, aby utworzyć wzorzec adresu URL pasujący tylko do "około".

Następne kroki

Uwierzytelnianie użytkowników w usłudze Django

Głębiej

Pisanie pierwszej aplikacji Django, część 4 — formularze i widoki ogólne (docs.djangoproject.com)
Samouczek dotyczący kodu źródłowego w witrynie GitHub: Microsoft/python-sample-vs-learning-django

Udostępnij za pośrednictwem

Krok 4. Używanie pełnego szablonu projektu internetowego Django

Krok 4–1. Tworzenie projektu na podstawie szablonu

Sprawdzanie, co tworzy szablon

Krok 4–2. Omówienie widoków i szablonów stron utworzonych przez szablon projektu

Pytanie: Czy {% blokuj %} i {% blokady końcowej %} mogą być wcięty w szablonie strony Django?

Krok 4–3. Omówienie routingu adresów URL utworzonego przez szablon

Pytanie: Dlaczego w utworzonym projekcie wzorzec adresu URL "about" używa '^about' zamiast '^about$', jak pokazano tutaj?

Następne kroki

Głębiej

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Krok 4. Używanie pełnego szablonu projektu internetowego Django

Krok 4–1. Tworzenie projektu na podstawie szablonu

Sprawdzanie, co tworzy szablon

Pytanie: Czy istnieje możliwość udostępniania środowiska wirtualnego między projektami programu Visual Studio?

Krok 4–2. Omówienie widoków i szablonów stron utworzonych przez szablon projektu

Pytanie: Czy {% blokuj %} i {% blokady końcowej %} mogą być wcięty w szablonie strony Django?

Krok 4–3. Omówienie routingu adresów URL utworzonego przez szablon

Pytanie: Dlaczego w utworzonym projekcie wzorzec adresu URL "about" używa '^about' zamiast '^about$', jak pokazano tutaj?

Następne kroki

Głębiej

Opinia

Dodatkowe zasoby