Självstudie: Använda den fullständiga Django Web Project-mallen i Visual Studio

I den här artikeln beskrivs steg 4 i självstudieserien Arbeta med Django-webbramverket i Visual Studio.

Föregående steg i den här självstudieserien skapar en Visual Studio-lösning och Django-projekt för två program. BasicProject är en minimal app som baseras på mallen Blank Django Web Project och HelloDjangoApp använder Appmallen Django 1.9 för att hantera statiska filer med sidvisningar från HTML-mallar.

I steg 4 lägger du till en tredje Django-app i lösningen baserat på den fullständiga Django Web Project-mallen. Den här mallen hjälper dig att skapa en mer fullvärdig Django-app med tre sidor som ärver från en grundmall. Appen använder statiska JavaScript-bibliotek som jQuery och Bootstrap. Autentiseringsfunktionerna i mallen beskrivs i handledningsserien i det sista steget.

I steg 4 i självstudien lär du dig att:

• Skapa en mer fullständig Django-webbapp med hjälp av mallen Django Web Project
• Granska Django-projektstrukturen som tillhandahålls av mallen
• Utforska vyer och sidmallar som skapats av projektmallen
• Granska URL-routningen som tillhandahålls av mallen

Förutsättningar

• En Visual Studio-lösning som skapats i steg 1: Skapa Visual Studio-projekt och lösning, som använder mallen Blank Django Web Project.

• Läs avsnittet Krav i steg 1 i den här självstudieserien för mer information om Django-mallversioner, Visual Studio-projekt jämfört med Django-projekt och Python-utveckling på Mac.

• (Valfritt) Läs anvisningarna i föregående steg för ett Django-arbetsflöde från slutpunkt till slutpunkt i Visual Studio:

  • Steg 2: Skapa en app med vyer och sidmallar
  • steg 3: Hantera statiska filer och använd HTML-mallar

Skapa projekt från mall

Följ dessa steg för att skapa Django-webbappen från den fullständiga mallen Django Web Project:

1. I Visual Studio går du till Solution Explorer, högerklickar på lösningen LearningDjango och väljer Lägg till>nytt projekt.

   Not

   Steg 1 i självstudieserien skapar LearningDjango Visual Studio-lösning som innehåller alla Django-projekt som beskrivs i den här serien. Genom att hålla alla dina Django-projekt i samma lösning kan du enkelt växla fram och tillbaka mellan olika filer för jämförelse.

   Om du föredrar att använda en separat Visual Studio-lösning för Django-projektet i steg av den här självstudien, väljer du Fil>Nytt>Projekt i stället.

2. I dialogrutan Lägg till ett nytt projekt söker du efter "Django", väljer mallen Django Web Project och väljer Nästa.

3. Konfigurera ditt nya projekt:

   1. Ange projektets namn till DjangoWeb.

   2. Ange plats för Visual Studio för att spara projektet. (Standardvärdet är den aktuella platsen för lösningen och befintliga Django-projekt.)

4. Välj Skapa.

Skapa virtuell miljö

När Visual Studio har initierat skapandet av projektet bör du se meddelandeprompten Python-paketspecifikationsfilen "requirements.txt" identifierades i projektet "DjangoWeb".:

Meddelandet anger att den valda mallen innehåller en requirements.txt fil som du kan använda för att skapa en virtuell miljö för projektet.

Viktig

Om du inte ser meddelandeprompten kan det uppstå fel när du försöker skapa django-superanvändaren i nästa avsnitt.

Bekräfta att Visual Studio känner igen requirements.txt filen för projektet. I Solution Explorerexpanderar du projektmappen DjangoWeb och öppnar filen requirements.txt. Visual Studio bör visa meddelandeprompten som förväntat.

Följ de här stegen för att konfigurera den virtuella miljön:

1. I meddelandeprompten väljer du länken för att installera i eller skapa en virtuell miljö.

2. I dialogrutan Lägg till virtuell miljö väljer du Skapa för att acceptera standardvärdena.

Skapa Django-superanvändare

När Visual Studio har skapat projektet DjangoWeb öppnas readme.html-filen. Filen innehåller instruktioner för att skapa en Django-superanvändare (dvs. en administratör) för projektet.

Följ dessa steg för att skapa en Django-superanvändare:

1. I Solution Explorerhögerklickar du på projektet DjangoWeb, väljer Pythonoch väljer sedan Django Create Superuser:

   

2. I prompten anger du kontoinformation för projektet, inklusive användarnamn, lösenord och e-postadress.

   Du behöver inte använda säkerhetsautentiseringsuppgifter för ett befintligt konto. Du kan skapa ett nytt användarnamn och lösenord som ska användas specifikt med Django-webbappen.

3. Registrera autentiseringsuppgifterna för senare användning. Du behöver autentiseringsuppgifterna för att kunna använda autentiseringsfunktionerna i webbappen.

Köra Django-webbprojekt

Nu är du redo att köra Django-webbprogrammet och se funktionerna i mallen:

1. I Solution Explorerhögerklickar du på projektet DjangoWeb och väljer Ange som startprojekt.

   Det här kommandot anger det valda projektet som standard startprojekt för Visual Studio-lösningen. När du startar felsökningsprogrammetkör Visual Studio koden för startprojektet. I Solution Explorervisas namnet på startprojektet för lösningen i fetstil:

   

2. Välj Felsök>Starta felsökning (F5) eller använd knappen Web Server i verktygsfältet för att köra servern:

   

Utforska sidor av webbapplikationer

Appen som skapas av mallen har tre sidor: "Start", "Om" och "Kontakt". Det finns länkar för varje sida i navigeringsfältet.

1. Prova att växla mellan sidorna med hjälp av alternativen i navigeringsfältet.

2. Granska de olika delarna av appen som körs, inklusive sidinnehållet. Observera hur URL-adressvägen ändras baserat på den aktuella sidan.

3. Autentisera med appen genom att välja alternativet Logga in i navigeringsfältet. Ange de autentiseringsuppgifter för superanvändare som du angav i föregående avsnitt.

4. Appen som skapats av Django Web Project-mallen använder Bootstrap för dynamisk layout som hanterar mobila formfaktorer. Om du vill se den här svarstiden ändrar du webbläsarens storlek till en smal vy så att innehållet återges lodrätt och navigeringsfältet förvandlas till en menyikon:

   

Du kan låta appen köras för övningarna i nästa avsnitt.

Om du vill spara ditt arbete stoppar du appen och följer anvisningarna i föregående steg i den här självstudieserien:

• Steg 1 (exkludera filer för virtuell miljö från källkontrollen)
• steg 2 (checka in ändringar i källkontrollen)

Granska projektstrukturen för webbappar

Mallen Django Web Project skapar ett webbappsprojekt i Visual Studio med följande struktur:

• Filer i projektroten DjangoWeb Visual Studio:

  • manage.py: Det administrativa verktyget Django.
  • db.sqlite3: En standarddatabas för SQLite.
  • requirements.txt: Identifierar paket i projektet som är beroende av Django 1.x.
  • readme.html: Innehåller information om webbappen, inklusive krav och kritiska användningsprocedurer. Visual Studio visar den här filen när projektet har skapats. Som tidigare beskrivits har den här filen instruktioner för att skapa ett superanvändarkonto (administratör) för appen.

• Mappen DjangoWeb/app:

  Den här mappen innehåller alla appfiler, inklusive vyer, modeller, tester, formulär. Den här mappen har även undermappar med filer, inklusive mallar, migreringaroch statiska. Du byter vanligtvis namn på mappen app för att använda ett mer distinkt namn som själva appnamnet.

• Mappen DjangoWeb/DjangoWeb:

  Den här mappen är django-projektmappen. Den innehåller typiska Django-projektfiler: __init__.py, settings.py, urls.pyoch wsgi.py. Den settings.py filen har redan konfigurerats för appen och databasfilen med hjälp av projektmallen. Den urls.py filen har också redan konfigurerats med vägarna till alla appsidor, inklusive Logga in formulär.

Dela virtuell miljö mellan Visual Studio-projekt

Du kan dela en virtuell miljö mellan Visual Studio-projekt. Tänk dock på att olika projekt sannolikt använder olika paket över tid. En delad virtuell miljö måste innehålla alla paket för alla projekt som använder den.

Följ dessa steg om du vill använda en befintlig virtuell miljö:

1. När du uppmanas att installera beroenden i Visual Studio väljer du jag installerar dem själv alternativet.

2. I Solution Explorerhögerklickar du på noden Python-miljöer och väljer Lägg till befintlig virtuell miljö.

3. Gå till och välj mappen som innehåller den virtuella miljön och välj sedan OK.

Granska vyer och sidmallar

Koden för sidvyerna som skapats av Django Web Project finns i projektets app/views.py-fil. Varje vyfunktion anropar hjälpfunktionen django.shortcuts.render med sökvägen till en mall och ett enkelt ordlisteobjekt. Funktionen about skapar vyn för sidan "Om" i webbappen:

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-sidmallar för vyerna finns i projektets app/mallar/app mapp (som du ofta byter namn på). Basmallen, layout.html, är den mest omfattande. Filen refererar till alla nödvändiga statiska filer (JavaScript och CSS) för appvyerna.

Den här mallen definierar också två block avsnitt: content och scripts. De andra webbappsidorna åsidosätter avsnittet {% block content %} i layout.html-filen. Du kan se de två block avsnitten i elementet <body> i den här kommenterade versionen av layout.html-filen:

<!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 enskilda HTML-sidmallarna, about.html, contact.htmloch index.html, utökar var och en basmallen layout.html. Den about.html mallfilen är den enklaste och visar {% extends %}-taggen och {% block content %} avsnittet:

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

Mallfilerna index.html och contact.html använder samma struktur och ger fler instruktioner i content-blocket.

Mappen app/templates/app innehåller ytterligare två HTML-sidmallar. Filen login.html definierar sidinnehållet för Logga in appsida. Filen loginpartial.html förs in i layout.html-filen med instruktionen {% include %}. I sista steget (autentisera användare) i den här självstudieserien beskrivs dessa två mallfiler mer detaljerat.

Indrag taggarna {% block %} och {% endblock %} i mallar

HTML-exemplen visar markering som anges i sidmallen i Visual Studio. Observera att de block taggarna inte är indragna i pålägget. För att tydligt visa platsen för block taggar drar inte Visual Studio-sidmallar in dessa taggar.

Django-sidmallar fungerar dock bra om du drar in block taggarna. Vissa utvecklare föredrar att justera taggarna inom lämpliga överordnade HTML-element.

Granska routningsmönster för URL

Django-projektets URL-fil (DjangoWeb/DjangoWeb/urls.py) som skapats av mallen Django Web Project innehåller följande 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),
]

De första tre URL-mönstren mappas direkt till home, contactoch about vyfunktioner som definierats i projektets app/views.py-fil. Mönstren login/ och logout/ motsvarar appens autentiseringsfunktioner.

Särskilda URL-vägmönster som ^login/$ och ^logout$ ger åtkomst till inbyggda Django-vyer i stället för app-definierade vyer. Anrop till metoden url innehåller även extra data för att anpassa vyn. I senaste steget (autentisera användare) i den här självstudieserien beskrivs hur du arbetar med URL-anrop.

Utforska skillnader i URL-mönster

I steg 3 (arv av HTML-mallar) i den här självstudieserien använder sökvägen till sidan "Om" '^about$' mönster. Det här mönstret skiljer sig från URL-vägen som presenteras i det här steget i självstudiekursen. Beroende på mallversionen kan exempelkoden visa url-mönstret "Om" som about/ eller ^about i stället för ^about$.

Bristen på det avslutande dollartecknet $ i det reguljära uttrycket är ett förbiseende i många versioner av projektmallen. URL-mönstret fungerar perfekt för en sida med namnet "om" eller "Om". Men utan det avslutande $ tecknet matchar URL-mönstret även URL:er som "about=django", "about09876", "about-face" och så vidare. Det avslutande $-tecknet skapar ett URL-mönster som endast garanterar matchningar för termen "om".

Nästa steg

steg 5: Autentisera användare i Django