Zelfstudie: De volledige Django Web Project-sjabloon gebruiken in Visual Studio

Artikel
01/27/2025

Dit artikel bevat stap 4 in de reeks zelfstudies Werken met het Django-webframework in Visual Studio.

In de vorige stappen in deze reeks zelfstudies maakt u een Visual Studio-oplossing en Django-projecten voor twee toepassingen. BasicProject is een minimale app op basis van de sjabloon Blank Django Web Project en HelloDjangoApp de Django 1.9-app-sjabloon gebruikt om statische bestanden met paginaweergaven uit HTML-sjablonen te leveren.

In stap 4 voegt u een derde Django-app toe aan de oplossing op basis van de volledige sjabloon Django Web Project. Met deze sjabloon kunt u een volledigere Django-app maken met drie pagina's die overnemen van een basispaginasjabloon. De app maakt gebruik van statische JavaScript-bibliotheken zoals jQuery en Bootstrap. De verificatiemogelijkheden van de sjabloon worden beschreven in de laatste stap in de reeks zelfstudies.

In stap 4 van de zelfstudie leert u het volgende:

Een volledigere Django-web-app maken met behulp van de sjabloon Django Web Project
Bekijk de Django-projectstructuur die is geleverd door de sjabloon
De weergaven en paginasjablonen verkennen die zijn gemaakt door de projectsjabloon
De URL-routering bekijken die door de sjabloon wordt geleverd

Voorwaarden

Een Visual Studio-oplossing die is gemaakt in stap 1: Visual Studio-project en -oplossing maken, die gebruikmaakt van de sjabloon Blank Django Web Project.
Bekijk de sectie Vereisten in stap 1 van deze reeks zelfstudies voor meer informatie over Django-sjabloonversies, Visual Studio-projecten versus Django-projecten en Python-ontwikkeling op Mac.
(Optioneel) Bekijk de instructies in de vorige stappen voor een end-to-end Django-werkstroom in Visual Studio:
- stap 2: een app maken met weergaven en paginasjablonen
- stap 3: statische bestanden gebruiken en HTML-sjablonen gebruiken

Project maken op sjabloon

Volg deze stappen om de Django-web-app te maken op basis van de volledige sjabloon Django Web Project:

Ga in Visual Studio naar Solution Explorer, klik met de rechtermuisknop op de oplossing LearningDjango en selecteer Add>New Project.

Notitie

Stap 1 van de tutorialreeks maakt de LearningDjango Visual Studio-oplossing om alle Django-projecten te bevatten die in deze serie worden beschreven. Door al uw Django-projecten in dezelfde oplossing te houden, kunt u eenvoudig heen en weer schakelen tussen verschillende bestanden voor vergelijking.

Als u in deze zelfstudiestap liever een afzonderlijke Visual Studio-oplossing gebruikt voor het Django-project, selecteert u in plaats daarvan File>New>Project.
Zoek in het dialoogvenster Een nieuw project toevoegen naar 'Django', kies de sjabloon Django Webproject en selecteer Volgende.
Configureer uw nieuwe project:
1. Stel de Name van het project in op DjangoWeb.
2. Geef de Locatie voor Visual Studio op om het project op te slaan. (De standaardwaarde is de huidige locatie voor de oplossing en bestaande Django-projecten.)
Selecteer Maak.

Virtuele omgeving maken

Nadat Visual Studio het maken van een project heeft gestart, ziet u de berichtprompt Python-pakketspecificatiebestandrequirements.txtis gedetecteerd in project 'DjangoWeb'.:

Het bericht geeft aan dat de geselecteerde sjabloon een requirements.txt-bestand bevat dat u kunt gebruiken om een virtuele omgeving voor het project te maken.

Belangrijk

Als u de berichtprompt niet ziet, kunnen er fouten optreden wanneer u de Django-supergebruiker probeert te maken in de volgende sectie.

Controleer of Visual Studio het requirements.txt-bestand voor het project herkent. Vouw in Solution Explorerde map DjangoWeb uit en open het bestand requirements.txt. Visual Studio moet de berichtprompt weergeven zoals verwacht.

Volg deze stappen om de virtuele omgeving in te stellen:

Selecteer bij het ontvangen van het bericht de koppeling om te installeren in of om een virtuele omgevingte maken.
Selecteer in het dialoogvenster Virtuele omgeving toevoegen de optie Maken om de standaardinstellingen te accepteren.

Django supergebruiker maken

Nadat Visual Studio het DjangoWeb project heeft gemaakt, wordt het project readme.html-bestand geopend. Het bestand bevat instructies voor het maken van een Django-supergebruiker (dat wil gezegd een beheerder) voor het project.

Volg deze stappen om een Django-supergebruiker te maken:

Klik in Solution Explorermet de rechtermuisknop op het project DjangoWeb, selecteer Python-en selecteer Django Superuser maken:
Voer bij de prompt accountgegevens in voor het project, inclusief de gebruikersnaam, het wachtwoord en het e-mailadres.

U hoeft geen beveiligingsreferenties te gebruiken voor een bestaand account. U kunt een nieuwe gebruikersnaam en een nieuw wachtwoord maken om specifiek te gebruiken met de Django-web-app.
Noteer de referenties voor later gebruik. U hebt de inloggegevens nodig om de authenticatiefuncties van de web-app te gebruiken.

Django-webproject uitvoeren

U bent nu klaar om de Django-webtoepassing uit te voeren en de functies van de sjabloon te bekijken:

Klik in Solution Explorermet de rechtermuisknop op het project DjangoWeb en selecteer Instellen als opstartproject.

Met deze opdracht stelt u het geselecteerde project in als het standaard opstartproject voor de Visual Studio-oplossing. Wanneer u het Foutopsporingsprogrammastart, voert Visual Studio de code voor het opstartproject uit. In Solution Explorerwordt de naam van het opstartproject voor de oplossing vet weergegeven:
Selecteer Foutopsporing>Start Foutopsporing (F5) of gebruik de knop Webserver op de werkbalk om de server uit te voeren:

Webapp-pagina's ontdekken

De app die door de sjabloon is gemaakt, heeft drie pagina's: 'Start', 'Info' en 'Contactpersoon'. Er zijn koppelingen voor elke pagina op de navigatiebalk.

Probeer tussen de pagina's te schakelen met behulp van de opties op de navigatiebalk.
Bekijk de verschillende onderdelen van de actieve app, inclusief de pagina-inhoud. U ziet hoe de URL-adresroute wordt gewijzigd op basis van de huidige pagina.
Verifieer met de app door de optie Aanmelden bij te selecteren op de navigatiebalk. Voer de superuser-gegevens in die u in de vorige sectie hebt opgegeven.
De app die met behulp van de Django Web Project sjabloon is gemaakt, maakt gebruik van Bootstrap voor een responsieve indeling die geschikt is voor mobiele formaten. Als u deze reactiesnelheid wilt zien, wijzigt u het formaat van de browser in een smalle weergave, zodat de inhoud verticaal wordt weergegeven en de navigatiebalk verandert in een menupictogram:

U kunt de app aan laten staan tijdens de oefeningen in de volgende sectie.

Als u uw werk wilt opslaan, stopt u de app en volgt u de instructies in de vorige stappen in deze reeks zelfstudies:

Projectstructuur van web-app onderzoeken

De sjabloon Django Web Project maakt een web-app-project in Visual Studio met de volgende structuur:

Bestanden in de hoofdmap van het DjangoWeb Visual Studio-project:
- manage.py: Het Django-beheerhulpprogramma.
- db.sqlite3-: een standaard SQLite-database.
- requirements.txt: Identificeert pakketten in het project die afhankelijk zijn van Django 1.x.
- readme.html: bevat informatie over de web-app, inclusief vereisten en kritieke gebruiksprocedures. Visual Studio geeft dit bestand weer na het maken van het project. Zoals eerder beschreven, bevat dit bestand de instructies voor het maken van een supergebruikeraccount (administrator) voor de app.
De map DjangoWeb/app:

Deze map bevat alle app-bestanden, waaronder weergaven, modellen, tests, formulieren. Deze map bevat ook submappen met bestanden, waaronder sjablonen, migratiesen statische. Meestal wijzigt u de naam van de app map om een meer onderscheidende naam te gebruiken, zoals de naam van de app zelf.
De map DjangoWeb/DjangoWeb:

Deze map is de Django projectmap. Het bevat de typische Django-projectbestanden: __init__.py, settings.py, urls.pyen wsgi.py. Het settings.py-bestand is al geconfigureerd voor de app en het databasebestand met behulp van de projectsjabloon. Het urls.py-bestand is ook al ingesteld met de routes naar alle app-pagina's, inclusief het aanmelden in formulier.

U kunt een virtuele omgeving delen tussen Visual Studio-projecten. Houd er echter rekening mee dat verschillende projecten waarschijnlijk verschillende pakketten in de loop van de tijd gebruiken. Een gedeelde virtuele omgeving moet alle pakketten bevatten voor alle projecten die deze gebruiken.

Voer de volgende stappen uit om een bestaande virtuele omgeving te gebruiken:

Wanneer u wordt gevraagd om afhankelijkheden in Visual Studio te installeren, selecteert u ik deze zelf installeer optie.
Klik in Solution Explorer-met de rechtermuisknop op het knooppunt Python-omgevingen en selecteer Bestaande virtuele omgeving toevoegen.
Navigeer naar en selecteer de map die de virtuele omgeving bevat en selecteer vervolgens OK-.

Onderzoeken van weergaven en paginasjablonen

De code voor de paginaweergaven die zijn gemaakt door het Django Web Project bevindt zich in het bestand app/views.py van het project. Elke weergavefunctie roept de django.shortcuts.render helperfunctie aan met het pad naar een sjabloon en een eenvoudig woordenlijstobject. De functie about maakt de weergave voor de pagina Info in de web-app:

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

HTML-paginasjablonen voor de weergaven bevinden zich in de map app/templates/app van het project (waarvan u de naam gewoonlijk wijzigt). De basissjabloon, layout.html, is de meest uitgebreide. Het bestand verwijst naar alle benodigde statische bestanden (JavaScript en CSS) voor de app-weergaven.

Met deze sjabloon worden ook twee block secties gedefinieerd: content en scripts. Op de andere webapp-pagina's wordt de sectie {% block content %} in het layout.html-bestand overschreven. U ziet de twee block secties in het <body> element in deze geannoteerde versie van het layout.html-bestand:

<!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>&copy; {{ 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>

De afzonderlijke HTML-paginasjablonen, about.html, contact.htmlen index.html, breiden de basissjabloon uit layout.html. Het sjabloonbestand about.html is het eenvoudigst en toont de {% extends %} tag en {% block content %} sectie:

{% 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 %}

De index.html- en contact.html-sjabloonbestanden gebruiken dezelfde structuur en bieden meer instructies in het content blok.

De map app/templates/app bevat nog twee HTML-paginasjablonen. Het login.html-bestand definieert de pagina-inhoud voor de pagina Aanmelden bij-app. Het loginpartial.html bestand wordt met de {% include %} instructie in het layout.html bestand gebracht. In de laatste stap (gebruikers verifiëren) in deze reeks zelfstudies worden deze twee sjabloonbestanden gedetailleerder beschreven.

Inspringen {% blok %} en {% eindblok %} tags in sjablonen

In de HTML-voorbeelden worden markeringen weergegeven die zijn opgegeven in de paginasjabloon in Visual Studio. U ziet dat de block tags niet zijn ingesprongen in de markering. Als u de locatie van de block tags duidelijk wilt weergeven, laten visual Studio-paginasjablonen deze tags niet inspringen.

Django-paginasjablonen werken echter prima als u de block tags inspringt. Sommige ontwikkelaars geven er de voorkeur aan om de tags te aligneren binnen de juiste bovenliggende HTML-elementen.

URL-routepatronen onderzoeken

Het URL-bestand van het Django-project (DjangoWeb/DjangoWeb/urls.py) dat is gemaakt door de sjabloon Django Web Project bevat de volgende code:

"""
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),
]

De eerste drie URL-patronen worden rechtstreeks toegewezen aan de home, contacten about weergavefuncties die zijn gedefinieerd in het bestand app/views.py van het project. De patronen login/ en logout/ komen overeen met de verificatiefuncties van de app.

Speciale URL-routepatronen, zoals ^login/$ en ^logout$, hebben toegang tot ingebouwde Django-zichten in plaats van app-gedefinieerde zichten. Aanroepen naar de methode url bevatten ook extra gegevens om de weergave aan te passen. In de laatste stap (gebruikers verifiëren) in deze reeks zelfstudies wordt beschreven hoe u kunt werken met URL-aanroepen.

Verschillen in URL-patronen verkennen

In stap 3 (overname van HTML-sjablonen) van deze zelfstudiereeks, gebruikt het pad voor de "Over"-pagina het '^about$'-patroon. Dit patroon verschilt van de URL-route die in deze zelfstudiestap wordt weergegeven. Afhankelijk van uw sjabloonversie kan in de voorbeeldcode het URL-patroon 'Info' worden weergegeven als about/ of ^about in plaats van ^about$.

Het ontbreken van het afsluitende dollarteken $ in de reguliere expressie is een verzuim in veel versies van de projectsjabloon. Het URL-patroon werkt perfect voor een pagina met de naam 'about' of 'About'. Zonder het afsluitende $ teken komt het URL-patroon echter ook overeen met URL's zoals 'about=django', 'about09876', 'about-face', enzovoort. Met het afsluitende $ teken wordt een URL-patroon gemaakt dat alleen overeenkomt met de term 'about'.

Volgende stap

stap 5: gebruikers verifiëren in Django

Delen via

Zelfstudie: De volledige Django Web Project-sjabloon gebruiken in Visual Studio

Voorwaarden

Project maken op sjabloon

Virtuele omgeving maken

Django supergebruiker maken

Django-webproject uitvoeren

Webapp-pagina's ontdekken

Projectstructuur van web-app onderzoeken

Onderzoeken van weergaven en paginasjablonen

Inspringen {% blok %} en {% eindblok %} tags in sjablonen

URL-routepatronen onderzoeken

Verschillen in URL-patronen verkennen

Volgende stap

Feedback

Aanvullende resources

Delen via

Zelfstudie: De volledige Django Web Project-sjabloon gebruiken in Visual Studio

Voorwaarden

Project maken op sjabloon

Virtuele omgeving maken

Django supergebruiker maken

Django-webproject uitvoeren

Webapp-pagina's ontdekken

Projectstructuur van web-app onderzoeken

Virtuele omgeving delen tussen Visual Studio-projecten

Onderzoeken van weergaven en paginasjablonen

Inspringen {% blok %} en {% eindblok %} tags in sjablonen

URL-routepatronen onderzoeken

Verschillen in URL-patronen verkennen

Volgende stap

Feedback

Aanvullende resources