Zelfstudie: Een Django-app maken met weergaven en paginasjablonen in Visual Studio

Artikel
01/27/2025

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

Met Visual Studio kunt u Django-toepassingen maken op basis van projectsjablonen die een uitgebreider uitgangspunt bieden voor uw projecten. stap 1 in de reeks zelfstudies beschrijft hoe u de configuratiebestanden op siteniveau voor een Django-webproject maakt ter ondersteuning van een of meer Django-web-apps. In stap 2 voegt u inhoud toe aan uw Django-webproject om uw eerste Django-web-app te maken met één pagina met meerdere weergegeven weergaven.

In stap 2 van de zelfstudie leert u het volgende:

Een Django-app maken met één pagina
De app uitvoeren vanuit het Django-project
Een weergave weergeven met BEHULP van HTML
Een weergave weergeven met behulp van een Django-paginasjabloon

Voorwaarden

Een Visual Studio-oplossing en Django-project dat is gemaakt in stap 1: Visual Studio-oplossing en Django-project maken.
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.

Django-app maken met standaardstructuur

Een Django-app is een afzonderlijk Python-pakket dat een set gerelateerde bestanden voor een specifiek doel bevat. Een Django-project kan veel apps bevatten, waardoor een webhost veel afzonderlijke toegangspunten (of routes) kan leveren vanaf één domeinnaam. Een Django-project voor een domein zoals contoso.com kan bijvoorbeeld één app bevatten voor de www.contoso.com route, een tweede app voor de support.contoso.com route en een derde app voor de docs.contoso.com route. In dit scenario verwerkt het Django-project URL-routering en -instellingen op siteniveau in de urls.py- en settings.py-bestanden. Elke app heeft een eigen eigen stijl en gedrag via de interne routering, weergaven, modellen, statische bestanden en beheerinterface.

De ontwikkeling van een Django-app begint meestal met een standaardset bestanden. Visual Studio biedt sjablonen voor het initialiseren van een Django-app met deze bestanden in een Django-project. Er is ook een geïntegreerde menuopdracht die hetzelfde doel heeft.

Sjabloon gebruiken om een app te maken

Volg deze stappen om de app te maken op basis van een sjabloon:

Klik in Solution Explorer-met de rechtermuisknop op het Visual Studio-project (BasicProject) en selecteer Toevoegen>Nieuw item.
Selecteer in het dialoogvenster Nieuw item toevoegen de sjabloon Django 1.9-app:
1. Voer de app NaamHelloDjangoAppin.
2. Selecteer toevoegen.

Volg deze stappen om de app te maken met behulp van de geïntegreerde Django-menuopdracht:

Klik in Solution Explorer-met de rechtermuisknop op het Visual Studio-project (BasicProject) en selecteer Django-app toevoegen>.
Voer in het dialoogvenster Django-app toevoegen de naam van de app in HelloDjangoApp:
Selecteer OK-.

Django-app map verkennen

Wanneer u de HelloDjangoApp-app maakt, maakt Visual Studio een map met dezelfde naam in uw Visual Studio-project:

De map bevat de volgende items:

Artikel	Beschrijving
migraties	Een map waarin Django scripts opslaat die de database bijwerken zodat deze overeenkomt met de wijzigingen in de modellen. Django's migratiehulpprogramma's passen vervolgens de benodigde wijzigingen toe op een eerdere versie van de database zodat deze overeenkomen met de huidige modellen. Wanneer u migraties gebruikt, houdt u de focus op uw modellen en laat Django het onderliggende databaseschema verwerken. Voor de oefeningen in deze reeks zelfstudies bevat de map een __init__.py-bestand, waarmee wordt aangegeven dat de map een eigen Python-pakket definieert. Zie de Django-documentatievoor meer informatie.
__init__.py	De aanwezigheid van het init-bestand identificeert de Django-app als een pakket.
sjablonen	Een map voor Django-paginasjablonen met één index.html-bestand. Het index.html-bestand wordt in de map geplaatst met dezelfde naam als de app-naam. Sjablonen zijn blokken HTML waarin weergaven informatie kunnen toevoegen om een pagina dynamisch weer te geven. Paginasjabloon 'variabelen', zoals `{{ content }}` in het bestand index.html, zijn tijdelijke aanduidingen voor dynamische waarden, zoals verderop in dit artikel wordt uitgelegd. Meestal maken Django-apps een naamruimte voor hun sjablonen door ze in een submap te plaatsen die overeenkomt met de naam van de app.
admin.py	Het Python-bestand waarin u de beheerinterface van de app uitbreidt, die wordt gebruikt om gegevens in een database weer te geven en te bewerken. In eerste instantie bevat dit bestand alleen de instructie, `from django.contrib import admin`. Django bevat standaard een standaardbeheerdersinterface via vermeldingen in het settings.py-bestand van het Django-project. Als u de interface wilt inschakelen, kunt u opmerkingen bij de bestaande vermeldingen in het urls.py-bestand verwijderen.
apps.py	Een Python-bestand dat een configuratieklasse definieert voor de app. (Zie het voorbeeld dat volgt op deze tabel.)
models.py	Modellen zijn gegevensobjecten, geïdentificeerd door functies, waarmee weergaven communiceren met de onderliggende database van de app. Django biedt de databaseverbindingslaag, zodat de apps zich niet bezig houden met de details van de modellen. Het models.py-bestand is een standaardlocatie waar u uw modellen maakt. In eerste instantie bevat het bestand models.py alleen de instructie, `from django.db import models`.
tests.py	Een Python-bestand dat de basisstructuur van eenheidstests bevat.
views.py	Weergaven zijn vergelijkbaar met webpagina's, die een HTTP-verzoek ontvangen en een HTTP-reactie terugsturen. Normaal gesproken worden weergaven weergegeven als HTML en webbrowsers weten hoe ze moeten worden weergegeven, maar een weergave hoeft niet per se zichtbaar te zijn (zoals een tussenliggend formulier). Een Python-functie definieert de weergave waarmee de HTML naar de browser wordt weergegeven. Het views.py-bestand is een standaardlocatie waar u uw weergaven maakt. In eerste instantie bevat het bestand views.py alleen de instructie, `from django.shortcuts import render`.

Wanneer u de naam 'HelloDjangoApp' gebruikt, wordt de inhoud van het bestand apps.py als volgt weergegeven:

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjangoApp'

Een app maken in Visual Studio of vanaf de opdrachtregel

De opdracht Add>Django-app en de opdracht Add>New Item (gecombineerd met een Django-toepassingssjabloon) produceren dezelfde bestanden als de Django CLI-opdracht manage.py startapp <app_name>. Het voordeel van het maken van de Django-app in Visual Studio is dat de app-map en alle bijbehorende bestanden automatisch worden geïntegreerd in het project. U kunt dezelfde Visual Studio-opdracht gebruiken om een willekeurig aantal apps in uw project te maken.

App-specifieke paginaweergaven toevoegen

Als u uw huidige project uitvoert in Visual Studio door Foutopsporing>Start Debugging (F5) of Webserver te selecteren op de hoofdwerkbalk, ziet u de standaard Django-pagina. Web-apps hebben meestal meerdere pagina's met verschillende weergaven. Een unieke route voor het URL-adres van de app identificeert elke pagina in de app.

Volg deze stappen om app-specifieke paginaweergaven te definiëren en de app toe te voegen aan het Django-project:

Vervang in de submap HelloDjangoApp van uw Visual Studio-project de inhoud van het views.py-bestand door de volgende code:
```
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, Django!")
```
Met deze code worden de benodigde rendering- en HTTP-definities geïmporteerd en wordt een weergave met de naam indexgedefinieerd.

Wijzig in de BasicProject submap van uw Visual Studio-project het urls.py-bestand zodat het overeenkomt met de volgende code. U kunt de instructieve opmerkingen in het huidige bestand behouden, zoals u wilt.

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')
]

Elk URL-patroon beschrijft de weergaven waarnaar Django specifieke site-relatieve URL's routeert (het routegedeelte dat volgt op het URL-adres https://www.domain.com/):

De eerste vermelding in de urlPatterns definitie die begint met de reguliere expressie ^$ is de routering voor de hoofdpagina van de site, /.
De tweede vermelding, ^home$, routeert naar de /home pagina van de toepassing.

U ziet dat de definitie in deze voorbeeldcode laat zien dat u meerdere routeringen naar dezelfde weergave kunt hebben.

Onbewerkte routetekenreeksen definiëren met (r) voorvoegsel

Het r-voorvoegsel in een routereeks in Python betekent "ongefilterd". Dit voorvoegsel instrueert Python om geen tekens binnen de routereeks te ontsnappen. De reguliere expressies voor routereeksen gebruiken veel speciale tekens. Het r voorvoegsel in een routetekenreeks is gemakkelijker te lezen dan het escape-teken \.

Caret(^) en dollartekens ($) gebruiken in routes

In reguliere expressies die URL-patronen definiëren, betekent het caretsymbool ^ 'begin van regel' en het dollarteken $ betekent 'einde van regel'. Er zijn verschillende toepassingen voor deze tekens in URL's ten opzichte van de hoofdmap van de site (het deel dat het app-adres volgt https://www.domain.com/):

De reguliere expressie ^$ betekent in feite 'leeg' en komt overeen met het volledige URL-adres voor de hoofdmap van de site van de app, https://www.domain.com/.
Het patroon ^home$ komt exact overeen met https://www.domain.com/home/, dat is de siteroute die gevolgd wordt door /home. (Django maakt geen gebruik van de afsluitende schuine streep bij patroonherkenning.)
Als u geen afsluitend dollarteken gebruikt $ in een reguliere expressie, zoals voor de ^home routetekenreeks, is url-patroonkoppeling van toepassing op elke URL die begint met home, zoals home, homework, homestead, home192837enzovoort.

Als u wilt experimenteren met verschillende reguliere expressies, probeert u online tools zoals regex101.com en pythex.org.

App uitvoeren vanuit Django-project

Nadat u app-specifieke inhoud hebt toegevoegd, voert u uw app opnieuw uit en controleert u de routeweergaven in de browser:

Wanneer de toepassing in de browser wordt geopend, controleert u de paginaweergaven voor zowel de URL-paden / (hoofdmap van de site) als /home in de browser. Voor beide routes geeft de toepassing het bericht weer Hallo, Django! in de browser.
Wanneer u klaar bent, selecteert u Ctrl+C in het consolevenster, gevolgd door een willekeurige toets om de toepassing te stoppen. U kunt ook Foutopsporing selecteren>Foutopsporing stoppen.
Sluit alle geopende browservensters voor de toepassing.

Wijzigingen doorvoeren in broncodebeheer

Nadat u de Django-app-code hebt bijgewerkt en de updates hebt getest, kunt u uw wijzigingen controleren en doorvoeren in broncodebeheer:

Sla de wijzigingen in uw projectbestanden op, zoals met de sneltoets Ctrl+S.
Selecteer op de Git-besturingselementenbalk de niet-doorgevoerde wijzigingen (potlood 11) om het venster Git Changes te openen:
Voer in het venster Git Changes een doorvoerbericht in en selecteer Alledoorvoeren:

Wanneer de commit is voltooid, wordt in Visual Studio het bericht weergegeven Commit <hash> lokaalgemaakt.
(Optioneel) Push de doorgevoerde wijzigingen naar uw externe opslagplaats:
1. Selecteer op de Git-werkbalk de uitgaande/binnenkomende commits (pijlen 1/0).
2. Selecteer synchroniseren (eerst trekken, dan duwen) of duwen.
U kunt ook meerdere lokale commits verzamelen voordat u deze naar de externe repository pusht.

Sla de wijzigingen in uw projectbestanden op, zoals met de sneltoets Ctrl+S.
Selecteer de niet-doorgevoerde wijzigingen (potlood 11) rechtsonder in Visual Studio, waarmee Team Explorer-wordt geopend:
In Team Explorer, voer een commitbericht in zoals "Django-app-specifieke pagina maken" en selecteer vervolgens Alles doorvoeren.

Wanneer de doorvoering is voltooid, wordt in Visual Studio het bericht weergegeven Commit <hash> lokaal gemaakt. Synchroniseer om uw wijzigingen te delen met de server.
(Optioneel) Push de doorgevoerde wijzigingen naar uw externe opslagplaats:
1. Selecteer in Team ExplorerSynchroniseren.
2. Vouw de uitgaande doorvoeringen uit en selecteer Push-.
U kunt ook meerdere lokale commits verzamelen voordat u ze naar de externe opslagplaats verstuurt.

Voor volgende procedures in deze reeks zelfstudies raadpleegt u deze sectie voor de stappen voor het doorvoeren van wijzigingen in broncodebeheer.

Sjablonen gebruiken om pagina's en weergaven weer te geven

De index functie in het views.py-bestand genereert een HTTP-antwoord zonder opmaak voor de Django-app-pagina. De meeste echte webpagina's reageren met uitgebreide HTML-pagina's die vaak livegegevens bevatten. De belangrijkste reden waarom ontwikkelaars weergaven definiëren met behulp van een functie, is het dynamisch genereren van inhoud.

Het argument voor de methode HttpResponse is slechts een tekenreeks. U kunt elke HTML in een tekenreeks samenstellen met behulp van dynamische inhoud. Omdat het het beste is om markeringen van gegevens te scheiden, is het beter om de markering in een sjabloon te plaatsen en de gegevens in code te bewaren.

Weergaven aanpassen om inline-HTML te gebruiken

Converteer de weergaveverwerking om inline-HTML voor de pagina te gebruiken met een aantal dynamische inhoud:

Open het views.py bestand in de HelloDjangoApp submap van uw Visual Studio-project.

Vervang de functie index door de volgende code (behoud de bestaande from-instructies):

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)

De herziene index functie genereert een HTML-antwoord met behulp van dynamische inhoud die wordt bijgewerkt telkens wanneer u de pagina vernieuwt.

Sla uw wijzigingen op en voer uw app opnieuw uit. Op de pagina worden nu de huidige datum en tijd weergegeven, samen met de "Hello Django! bericht.
Vernieuw de pagina een paar keer om te bevestigen dat de datum en tijd worden bijgewerkt. Wanneer u klaar bent, stopt u de app.

HTML-sjabloon maken voor paginaweergaven

Het genereren van HTML in code werkt prima voor kleine pagina's. Als pagina's echter geavanceerder worden, moet u de statische HTML-onderdelen van uw pagina onderhouden (samen met verwijzingen naar CSS- en JavaScript-bestanden) als 'paginasjablonen'. Vervolgens kunt u de dynamische, door code gegenereerde inhoud invoegen in de paginasjablonen. In de vorige sectie is alleen de datum en tijd van de now.strftime-aanroep dynamisch, wat betekent dat alle andere inhoud in een paginasjabloon kan worden geplaatst.

Een Django-paginasjabloon is een blok HTML dat meerdere vervangende tokens bevat, genaamd 'variabelen'. Open en sluit gekrulde haakjes {{ en }} de variabelen, zoals {{ content }}, afbakenen. De sjabloonmodule van Django vervangt vervolgens variabelen door dynamische inhoud die u in code opgeeft.

Volg deze stappen om het weergaveproces voor pagina's te converteren om een HTML-sjabloon te gebruiken:

Open het settings.py bestand in de submap HelloDjangoApp van uw Visual Studio-project.
Werk de app-verwijzingen in de INSTALLED_APPS-definitie bij om de naam van de app HelloDjangoAppop te nemen. Voeg de naam van de app toe als eerste vermelding in de lijst:
```
INSTALLED_APPS = [
    'HelloDjangoApp',
    # Existing entries in the list ...
]
```
Als u de app toevoegt aan de lijst, wordt het Django-project geïnformeerd dat er een map is met de naam HelloDjangoApp die een app bevat.
Controleer of de configuratie van het TEMPLATES-object APP_DIRS is ingesteld op True:
```
'APP_DIRS': True,
```
Met deze instructie wordt Django geïnstrueerd om te zoeken naar sjablonen in de map sjablonen voor een geïnstalleerde toepassing. (Deze instructie moet standaard worden opgenomen in de definitie.)
Open in de submap HelloDjangoApp het paginasjabloonbestand in de map templates/HelloDjangoApp/index.html.
Controleer of het bestand slechts één variabele bevat, {{ content }}:
```
<html>
 <head>
 <title></title>
 </head>

 <body>
 {{ content }}
 </body>
</html>
```
De {{ content }}-verklaring is een tijdelijke aanduiding of vervangingstoken (ook wel een -sjabloonvariabelegenoemd) waarvoor u in de code een waarde opgeeft.
Open het views.py bestand in de HelloDjangoApp submap van uw Visual Studio-project.
Vervang de index functie door de volgende code die gebruikmaakt van de django.shortcuts.render helperfunctie (behoud de bestaande from instructies):
```
def index(request):
 now = datetime.now()

 return render(
 request,
 "HelloDjangoApp/index.html", # Relative path from the 'templates' folder to the template file
 {
 'content': "Hello Django! on " + now.strftime("%A, %d %B, %Y at %X")
 }
 )
```
De render helperfunctie biedt een vereenvoudigde interface voor het werken met paginasjablonen. Deze functie heeft drie argumenten:
- Het aanvraagobject.
- Het relatieve pad naar het sjabloonbestand in de sjablonen van de app map. Een sjabloonbestand heeft een naam voor de weergave die het ondersteunt, indien van toepassing.
- Een woordenlijst met variabelen waarnaar de sjabloon verwijst. U kunt objecten opnemen in de woordenlijst, waar een variabele in de sjabloon kan verwijzen naar {{ object.property }}.
Sla uw projectwijzigingen op en voer de app opnieuw uit.

U ziet dat de inline-HTML-syntaxis (\ ...) in de content waarde niet als HTML-code wordt weergegeven, omdat de sjabloonengine (Jinja) automatisch html-inhoud escapeert. Automatisch ontsnappen voorkomt onbedoelde beveiligingsproblemen bij injectieaanvallen.

Ontwikkelaars verzamelen vaak invoer van de ene pagina en gebruiken deze als een waarde in een andere pagina met behulp van een tijdelijke aanduiding voor sjablonen. Escapen fungeert ook als een herinnering dat het het beste is om HTML uit de code te houden.

Wanneer u klaar bent, stopt u de app.

Afzonderlijke tijdelijke aanduidingen gebruiken

U kunt afzonderlijke tijdelijke aanduidingen gebruiken voor elk stukje gegevens in de HTML-opmaak. Pas vervolgens de functie index opnieuw aan om de specifieke waarden voor tijdelijke aanduidingen op te geven:

Vervang de inhoud van de -sjablonen/HelloDjangoApp/index.html paginasjabloonbestand door de volgende markeringen:
```
<html>
 <head>
 <title>{{ title }}</title>
 </head>
 <body>
 {{ message }}{{ content }}
 </body>
</html>
```
Met deze HTML-opmaak wordt een paginatitel toegevoegd en blijft alle opmaak in de paginasjabloon behouden.

Vervang in het bestand HelloDjangoApp/views.py de functie index door de volgende code:

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

Deze code bevat waarden voor alle variabelen in de paginasjabloon.

Sla uw wijzigingen op en voer uw app opnieuw uit. Deze keer ziet u de correct weergegeven uitvoer:
U kunt uw wijzigingen doorvoeren in broncodebeheer en uw externe opslagplaats bijwerken. Zie Wijzigingen doorvoeren in broncodebeheervoor meer informatie.

Afzonderlijke paginasjablonen

Sjablonen worden meestal onderhouden in afzonderlijke HTML-bestanden, maar u kunt ook een inlinesjabloon gebruiken. Afzonderlijke bestanden worden aanbevolen om een schone scheiding tussen markeringen en code te behouden.

.html-extensie gebruiken voor sjablonen

De .html-extensie voor paginasjabloonbestanden is volledig optioneel. U kunt altijd het exacte relatieve pad naar het bestand in het eerste argument aan de functie render_template identificeren. Visual Studio (en andere editors) bieden echter doorgaans functies zoals het voltooien van code en syntaxiskleuring met .html bestanden, wat opweegt tegen het feit dat paginasjablonen geen HTML zijn.

Wanneer u met een Django-project werkt, detecteert Visual Studio automatisch of het HTML-bestand dat u bewerkt, daadwerkelijk een Django-sjabloon is en bepaalde functies voor automatisch aanvullen biedt. Als u een Django-paginasjabloonopmerking begint te typen ({#), voegt Visual Studio automatisch de afsluitende #}-tekens toe. De opdrachten Commentaarselectie en Selectie niet becommentariëren (in het menu Bewerken>Geavanceerd) gebruiken ook sjabloonopmerkingen in plaats van HTML-opmerkingen.

Problemen oplossen

Wanneer u uw app uitvoert, kunnen er problemen optreden met betrekking tot het sjabloonbestand voor uw app. Controleer de volgende punten en controleer of de configuratie van uw Django-project juist is.

Sjabloon is niet gevonden

Als Django of Visual Studio een -sjabloon-niet-gevonden-fout weergeeft, zorg ervoor dat uw app op de INSTALLED_APPS-lijst staat. Deze lijst bevindt zich in het settings.py bestand onder de app-submap van uw Visual Studio-project (zoals HelloDjangoApp). Als de lijst geen vermelding voor uw app bevat, weet Django niet of ze in de sjablonen van de app map moeten zoeken.

Sjabloonstructuur dupliceren

Wanneer Django zoekt naar een sjabloon waarnaar wordt verwezen in de functie render, wordt het eerste bestand gebruikt dat overeenkomt met het relatieve pad. Als u meerdere Django-apps in hetzelfde project met dezelfde mapstructuren voor sjablonen hebt, is het waarschijnlijk dat één app onbedoeld een sjabloon uit een andere app kan gebruiken. Als u dergelijke fouten wilt voorkomen, maakt u altijd een submap onder de sjablonen van een app map die overeenkomt met de naam van de app om duplicatie te voorkomen.

Volgende stap

stap 3: statische bestanden weergeven, pagina's toevoegen en sjabloonovername gebruiken

Delen via