Samouczek: używanie pełnego szablonu projektu internetowego Django w programie Visual Studio
W tym artykule przedstawiono krok 4 z serii samouczków Praca z platformą internetową Django w programie Visual Studio.
Poprzednie kroki w tej serii samouczków tworzą rozwiązanie programu Visual Studio i projekty Django dla dwóch aplikacji. BasicProject to minimalna aplikacja oparta na szablonie Blank Django Web Project i HelloDjangoApp używa szablonu aplikacji Django 1.9 do udostępniania plików statycznych z widokami stron z szablonów HTML.
W kroku 4 dodasz trzecią aplikację Django do rozwiązania na podstawie pełnego szablonu projektu internetowego Django. Ten szablon ułatwia utworzenie pełniejszej aplikacji Django z trzema stronami dziedziczynymi z szablonu strony podstawowej. Aplikacja używa statycznych bibliotek JavaScript, takich jak jQuery i Bootstrap. Możliwości uwierzytelniania szablonu są opisane w ostatnim kroku serii samouczków.
W kroku 4 samouczka dowiesz się, jak wykonywać następujące czynności:
- Tworzenie pełniejszej aplikacji internetowej Django przy użyciu szablonu projektu internetowego Django
- Przejrzyj strukturę projektu Django dostarczoną przez szablon
- Eksplorowanie widoków i szablonów stron utworzonych przez szablon projektu
- Sprawdzanie routingu adresów URL dostarczonego przez szablon
Warunki wstępne
Rozwiązanie Visual Studio utworzone w Krok 1: Tworzenie projektu i rozwiązania Visual Studio, które używa szablonu Pustego Projektu Internetowego Django.
Zapoznaj się z sekcją Wymagania wstępne w kroku 1 tej serii samouczków, aby uzyskać szczegółowe informacje na temat wersji szablonów Django, projektów programu Visual Studio i projektów Django oraz programowania w języku Python na komputerach Mac.
(Opcjonalnie) Zapoznaj się z instrukcjami w poprzednich krokach dla kompleksowego przepływu pracy Django w programie Visual Studio:
Tworzenie projektu na podstawie szablonu
Wykonaj następujące kroki, aby utworzyć aplikację internetową Django na podstawie pełnego szablonu projektu webowego Django Web Project:
W programie Visual Studio przejdź do eksploratora rozwiązań , kliknij prawym przyciskiem myszy rozwiązanie LearningDjango, a następnie wybierz pozycję Dodaj>Nowy projekt.
Notatka
Krok 1 serii samouczków tworzy rozwiązanie LearningDjango Visual Studio zawierające wszystkie projekty Django opisane w tej serii. Zachowując wszystkie projekty Django w tym samym rozwiązaniu, można łatwo przełączać się między różnymi plikami w celu porównania.
Jeśli wolisz użyć oddzielnego rozwiązania programu Visual Studio dla projektu Django w tym samouczku, wybierz Plik>Nowy>Projekt.
W oknie dialogowym Dodaj nowy projekt wyszukaj ciąg "Django", wybierz szablon Projekt internetowy Django, a następnie wybierz pozycję Dalej.
Skonfiguruj nowy projekt:
Ustaw Nazwę projektu na DjangoWeb.
Określ Location dla programu Visual Studio, aby zapisać projekt. (Wartość domyślna to bieżąca lokalizacja dla rozwiązania i istniejących projektów Django).
Wybierz pozycję Utwórz.
Tworzenie środowiska wirtualnego
Po zainicjowaniu tworzenia projektu przez program Visual Studio powinien zostać wyświetlony komunikat wykryto plik specyfikacji pakietu języka Python "requirements.txt" w projekcie "DjangoWeb".:
Komunikat wskazuje, że wybrany szablon zawiera plik requirements.txt, którego można użyć do utworzenia środowiska wirtualnego dla projektu.
Ważny
Jeśli nie widzisz monitu, mogą wystąpić błędy podczas próby utworzenia administratora Django w następnej sekcji.
Upewnij się, że program Visual Studio rozpoznaje plik requirements.txt dla projektu. W eksploratorze rozwiązań , rozwiń folder projektu DjangoWeb i otwórz plik requirements.txt. Program Visual Studio powinien wyświetlić monit zgodnie z oczekiwaniami.
Wykonaj następujące kroki, aby skonfigurować środowisko wirtualne:
Po wyświetleniu monitu wybierz link do zainstalowania w środowisku wirtualnym lub utwórz go.
W oknie dialogowym Dodaj środowisko wirtualne wybierz opcję Utwórz, aby zaakceptować ustawienia domyślne.
Tworzenie superużytkownika Django
Gdy program Visual Studio utworzy projekt DjangoWeb, zostanie otwarty plik readme.html projektu. Plik zawiera instrukcje dotyczące tworzenia superużytkownika Django (to znaczy administratora) dla projektu.
Wykonaj następujące kroki, aby utworzyć administratora Django:
W eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt DjangoWeb, wybierz pozycję Python, a następnie wybierz Django Create Superuser:
Po wyświetleniu monitu wprowadź szczegóły konta dla projektu, w tym nazwę użytkownika, hasło i adres e-mail.
Nie musisz używać poświadczeń zabezpieczeń dla istniejącego konta. Możesz utworzyć nową nazwę użytkownika i hasło, które będą używane specjalnie z aplikacją internetową Django.
Zarejestruj poświadczenia do późniejszego użycia. Do wykonywania funkcji uwierzytelniania aplikacji internetowej potrzebne są poświadczenia.
Uruchamianie projektu internetowego Django
Teraz możesz uruchomić aplikację internetową Django i wyświetlić funkcje udostępniane przez szablon:
W Eksploratorze rozwiązań , kliknij prawym przyciskiem myszy projekt DjangoWeb, a następnie wybierz Ustaw jako projekt startowy.
To polecenie ustawia wybrany projekt jako domyślny projekt startowy dla rozwiązania programu Visual Studio. Po uruchomieniu Debuggerprogram Visual Studio uruchamia kod dla projektu startowego. W eksploratorze rozwiązań nazwa projektu startowego dla rozwiązania jest wyświetlana pogrubioną:
Wybierz pozycję Debuguj>Rozpocznij debugowanie (F5) lub użyj przycisku serwera sieci Web na pasku narzędzi, aby uruchomić serwer:
Eksplorowanie stron aplikacji internetowej
Aplikacja utworzona przez szablon ma trzy strony: "Strona główna", "Informacje" i "Kontakt". Na pasku nawigacyjnym znajdują się linki dla każdej strony.
Spróbuj przełączać się między stronami przy użyciu opcji na pasku nawigacyjnym.
Sprawdź różne części uruchomionej aplikacji, w tym zawartość strony. Zwróć uwagę, że trasa adresu URL zmienia się na podstawie bieżącej strony.
Uwierzytelnij się przy użyciu aplikacji, wybierając opcję Zaloguj się na pasku nawigacyjnym. Wprowadź poświadczenia administratora podane w poprzedniej sekcji.
Aplikacja utworzona przez szablon projektu internetowego Django używa Bootstrap do responsywnego układu, który uwzględnia urządzenia mobilne. Aby zobaczyć tę responsywność, zmień rozmiar przeglądarki na wąski widok, tak aby zawartość była wyświetlana pionowo, a pasek nawigacyjny zmienia się w ikonę menu.
Możesz pozostawić aplikację uruchomioną na potrzeby ćwiczeń w następnej sekcji.
Jeśli chcesz zapisać swoją pracę, zatrzymaj aplikację i postępuj zgodnie z instrukcjami w poprzedniej serii samouczków:
- Krok 1 (wykluczanie plików środowiska wirtualnego z kontroli źródła)
- Krok 2 (zatwierdzanie zmian kontroli źródła)
Sprawdzanie struktury projektu aplikacji internetowej
Szablon projektu internetowego Django tworzy projekt aplikacji internetowej w programie Visual Studio z następującą strukturą:
Pliki w katalogu głównym projektu DjangoWeb Visual Studio:
- manage.py: narzędzie administracyjne Django.
- db.sqlite3: domyślna baza danych SQLite.
- requirements.txt: identyfikuje pakiety w projekcie, które mają zależność od platformy Django 1.x.
- readme.html: zawiera informacje o aplikacji internetowej, w tym wymagania i krytyczne procedury użycia. Program Visual Studio wyświetla ten plik po utworzeniu projektu. Jak opisano wcześniej, ten plik zawiera instrukcje tworzenia konta superużytkownika (administratora) dla aplikacji.
Folder DjangoWeb/app:
Ten folder zawiera wszystkie pliki aplikacji, w tym widoki , modele , testy , formularze . Ten folder zawiera również podfoldery z plikami, w tym szablonami , migracjami i statycznymi. Zazwyczaj zmieniasz nazwę folderu aplikacji, aby użyć bardziej charakterystycznej nazwy, takiej jak sama nazwa aplikacji.
Folder DjangoWeb/DjangoWeb:
Ten folder jest folderem projektu Django. Zawiera typowe pliki projektów Django: __init__.py, settings.py, urls.pyi 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 z trasami do wszystkich stron aplikacji, w tym formularza logowania .
Udostępnianie środowiska wirtualnego między projektami programu Visual Studio
Środowisko wirtualne można udostępniać między projektami programu Visual Studio. Należy jednak pamiętać, że różne projekty prawdopodobnie używają różnych pakietów w czasie. Udostępnione środowisko wirtualne musi zawierać wszystkie pakiety dla wszystkich projektów, które go używają.
Aby użyć istniejącego środowiska wirtualnego, wykonaj następujące kroki:
Po wyświetleniu monitu o zainstalowanie zależności w programie Visual Studio wybierz pozycję Zainstaluję je samodzielnie.
W eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł Środowiska języka Python i wybierz pozycję Dodaj istniejące środowisko wirtualne.
Przejdź do folderu zawierającego środowisko wirtualne i wybierz go, a następnie wybierz pozycję OK.
Sprawdzanie widoków i szablonów stron
Kod widoków strony utworzonych przez Django Web Project znajduje się w pliku projektu aplikacji/views.py. Każda funkcja widoku wywołuje funkcję pomocnika django.shortcuts.render ze ścieżką do szablonu i prostym obiektem słownika. Funkcja about tworzy widok strony "Informacje" w aplikacji internetowej:
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 stron HTML dla widoków znajdują się w folderze app/templates/app projektu (który często zmieniasz). Szablon podstawowy, layout.html, jest najbardziej rozbudowany. Plik odnosi się do wszystkich niezbędnych plików statycznych (JavaScript i CSS) dla widoków aplikacji.
Ten szablon definiuje również dwie sekcje block: content i scripts. Inne strony aplikacji internetowej zastępują sekcję {% block content %} w pliku layout.html. Dwie sekcje block można wyświetlić w elemecie <body> w tej anotowanej wersji pliku layout.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Define 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>
<!-- Navigation bar section omitted in this excerpt -->
<div class="container body-content">
<!-- Content block - App pages override this block -->
{% block content %}
{% endblock %}
<!-- App header and footer content -->
<hr/>
<footer>
<p>© {{ year }} - My Django Application</p>
</footer>
</div>
<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>
<!-- Scripts block - List page-specific scripts in this block -->
{% block scripts %}
{% endblock %}
</body>
</html>
Poszczególne szablony stron HTML, about.html, contact.htmli index.html, z których każdy rozszerza szablon podstawowy layout.html. Plik szablonu about.html jest najprostszy i pokazuje sekcję {% extends %} i {% block content %}:
{% extends "app/layout.html" %}
<!-- Content block overrides "content" block in layout template -->
{% 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 zawierają więcej instrukcji w bloku content.
Folder app/templates/app zawiera jeszcze dwa szablony stron HTML. Plik login.html definiuje zawartość strony dla strony Zaloguj się aplikacji. Plik loginpartial.html jest wprowadzany do pliku layout.html za pomocą instrukcji {% include %}. W ostatnim kroku w tej serii samouczków (krok uwierzytelniania użytkowników) opisano bardziej szczegółowo te dwa szablony plików.
Wcięcia tagów {% block %} i {% endblock %} w szablonach
Przykłady HTML pokazują znaczniki podane w szablonie strony w programie Visual Studio. Zwróć uwagę, że tagi block nie są wcięte w kodzie. Aby wyraźnie zlokalizować tagi block, szablony stron programu Visual Studio nie wcięcają tych tagów.
Jednak szablony stron Django działają prawidłowo, jeśli poprawnie wcięte są znaki tagów block. Niektórzy deweloperzy wolą dopasowywać tagi do odpowiednich nadrzędnych elementów HTML.
Sprawdzanie wzorców tras adresów URL
Plik URL projektu Django (DjangoWeb/DjangoWeb/urls.py) utworzony przez szablon Django Web Project zawiera następujący kod:
"""
Definition of urls for DjangoWeb
"""
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ą mapowane bezpośrednio na funkcje widoku home, contacti about zdefiniowane w pliku aplikacji /views.py projektu. Wzorce login/ i logout/ odpowiadają funkcjom uwierzytelniania aplikacji.
Specjalne wzorce tras URL, takie jak ^login/$ i ^logout$, uzyskują dostęp do wbudowanych widoków Django zamiast widoków zdefiniowanych przez aplikację. Wywołania metody url zawierają również dodatkowe dane, aby dostosować widok. W ostatnim kroku (uwierzytelnianie użytkowników) w tej serii samouczków opisano sposób pracy z wywołaniami adresu URL.
Eksplorowanie różnic w wzorcach adresów URL
W krok 3 (dziedziczenie szablonu HTML) w tej serii samouczków ścieżka strony „Informacje” używa wzorca '^about$'. Ten wzorzec różni się od trasy adresu URL przedstawionej w tym samouczku Krok. W zależności od wersji szablonu przykładowy kod może wyświetlać wzorzec adresu URL strony "Informacje" jako about/ lub ^about zamiast ^about$.
Brak końcowego znaku dolara $ w wyrażeniu regularnym jest przeoczeniem w wielu wersjach szablonu projektu. Wzorzec adresu URL doskonale sprawdza się dla strony o nazwie "about" lub "About". Jednak bez końcowego znaku $ wzorzec adresu URL pasuje również do adresów URL, takich jak "about=django", "about09876", "about-face" itd. Końcowy znak $ tworzy wzorzec adresu URL, który zapewnia dopasowanie tylko dla terminu "about".