Oktatóanyag: A Teljes Django Web Project-sablon használata a Visual Studióban
Ez a cikk a 4. lépést mutatja be a Django webes keretrendszer használata a Visual Studiocímű oktatóanyag-sorozatában.
Az oktatóanyag-sorozat előző lépései létrehoznak egy Visual Studio-megoldást és Django-projekteket két alkalmazáshoz. BasicProject a Blank Django Web Project sablonon alapuló minimális alkalmazás, és HelloDjangoApp a Django 1.9 alkalmazássablont használja a statikus fájlok HTML-sablonokból származó lapmegtekintésekkel való kiszolgálásához.
A 4. lépésben egy harmadik Django-alkalmazást ad hozzá a megoldáshoz a Django Web Project teljes sablon alapján. Ez a sablon segít egy teljesebb Django-alkalmazás létrehozásában, amely három oldalból örököl egy alaplapsablont. Az alkalmazás olyan statikus JavaScript-kódtárakat használ, mint a jQuery és a Bootstrap. A sablon hitelesítési funkcióit az oktatóanyag-sorozat utolsó lépésében ismertetjük.
Az oktatóanyag 4. lépésében megtanulhatja, hogyan:
- Teljesebb Django-webalkalmazás létrehozása a Django Web Project sablonnal
- Tekintse át a sablon által biztosított Django-projektstruktúrát
- A projektsablon által létrehozott nézetek és lapsablonok megismerése
- A sablon által biztosított URL-útválasztás vizsgálata
Előfeltételek
Az 1. lépésben létrehozott Visual Studio-megoldás: Visual Studio-projekt és megoldáslétrehozása, amely az Üres Django Web Project sablont használja.
Tekintse át az oktatóanyag-sorozat 1. lépésének Előfeltételek szakaszát a Django-sablonverziókkal, a Visual Studio-projektekkel és a Django-projektekkel és a Mac Python-fejlesztéssel kapcsolatos részletekért.
(Nem kötelező) Tekintse át a Visual Studióban egy végpontok közötti Django-munkafolyamat előző lépéseinek utasításait:
Projekt létrehozása sablonból
Az alábbi lépéseket követve hozza létre a Django webalkalmazást a teljes Django Web Project sablonból:
A Visual Studióban nyissa meg Megoldáskezelő, kattintson a jobb gombbal a LearningDjango megoldásra, és válassza a >Új projekthozzáadása lehetőséget.
Jegyzet
Az oktatóanyag-sorozat 1. lépése létrehozza a LearningDjango Visual Studio-megoldást, amely a sorozatban leírt összes Django-projektet tartalmazza. Ha az összes Django-projektet ugyanabban a megoldásban tartja, egyszerűen válthat oda-vissza a különböző fájlok között összehasonlítás céljából.
Ha ebben az oktatóanyagban külön Visual Studio-megoldást szeretne használni a Django-projekthez, válassza inkább Fájl>Új>Projekt lehetőséget.
Az Új projekt hozzáadása párbeszédpanelen keressen rá a "Django" kifejezésre, válassza a Django Web Project sablont, és válassza a Következőlehetőséget.
Az új projekt konfigurálása:
Állítsa a projekt nevét DjangoWeb .
Adja meg a helyet, ahol a Visual Studio elmenti a projektet. (Az alapértelmezett hely a megoldás és a meglévő Django-projektek aktuális helye.)
Válassza a éslétrehozása opciót.
Virtuális környezet létrehozása
Miután a Visual Studio elindítja a projekt létrehozását, meg kell jelennie az üzenetnek: A "requirements.txt" Python-csomag specifikációs fájl észlelve a "DjangoWeb" projektben. :
Az üzenet azt jelzi, hogy a kijelölt sablon tartalmaz egy requirements.txt fájlt, amellyel virtuális környezetet hozhat létre a projekthez.
Fontos
Ha nem jelenik meg az üzenet, hibákat tapasztalhat, amikor megpróbálja létrehozni a Django felügyelő felhasználót a következő szakaszban.
Győződjön meg arról, hogy a Visual Studio felismeri a projekthez tartozó requirements.txt fájlt. A Megoldáskezelőbenbontsa ki a DjangoWeb projektmappát, és nyissa meg a requirements.txt fájlt. A Visual Studiónak a várt módon kell megjelenítenie az üzenetkérést.
A virtuális környezet beállításához kövesse az alábbi lépéseket:
Az üzenetben válassza ki a virtuális környezetbe való telepítéshez vagylétrehozásához szükséges hivatkozást.
A Virtuális környezet hozzáadása párbeszédpanelen válassza a létrehozása lehetőséget az alapértelmezett beállítások elfogadásához.
Django szuperfelhasználó létrehozása
Miután a Visual Studio létrehozta a DjangoWeb projektet, megnyílik a projekt readme.html fájl. A fájl útmutatást tartalmaz egy Django szuperfelhasználói (azaz rendszergazda) létrehozásához a projekthez.
Django-szuperfelhasználó létrehozásához kövesse az alábbi lépéseket:
A Megoldáskezelőkattintson a jobb gombbal a DjangoWeb projektre, válassza Python-, majd válassza Django Create Superuser:
A parancssorban adja meg a projekt fiókadatait, beleértve a felhasználónevet, a jelszót és az e-mail-címet.
Nem kell biztonsági hitelesítő adatokat használnia egy meglévő fiókhoz. Létrehozhat egy új felhasználónevet és jelszót, amelyet kifejezetten a Django webalkalmazással használhat.
Jegyezze fel a hitelesítő adatokat későbbi használatra. A webalkalmazás hitelesítési funkcióinak gyakorlásához szüksége van a hitelesítő adatokra.
Django webes projekt futtatása
Most már készen áll a Django webalkalmazás futtatására, és megtekintheti a sablon által biztosított funkciókat:
A Megoldáskezelőbenkattintson a jobb gombbal a DjangoWeb projektre, és válassza a Indítási projektként beállításlehetőséget.
Ez a parancs beállítja a kijelölt projektet a Visual Studio-megoldás alapértelmezett indítási projektjének. A Hibakeresőindításakor a Visual Studio futtatja az indítási projekt kódját. Megoldáskezelőa megoldás indítási projektjének neve félkövér színben jelenik meg:
Válassza a Hibakeresés>indítása (F5) vagy használja a Webkiszolgáló gombot az eszköztáron a kiszolgáló futtatásához:
Webalkalmazás-lapok felfedezése
A sablon által létrehozott alkalmazás három oldalból áll: "Kezdőlap", "Névjegy" és "Kapcsolatfelvétel". A navigációs sáv minden egyes oldalára mutató hivatkozások találhatók.
A navigációs sáv beállításaival váltson a lapok között.
Vizsgálja meg a futó alkalmazás különböző részeit, beleértve a lap tartalmát is. Figyelje meg, hogyan változik az URL-cím útvonala az aktuális oldal alapján.
Hitelesítés az alkalmazással a navigációs sávon a Bejelentkezés lehetőség kiválasztásával. Adja meg az előző szakaszban megadott felügyelői hitelesítő adatokat.
A Django Web Project-sablon által létrehozott alkalmazás a Bootstrap-t használja a reszponzív elrendezéshez, amely a mobil eszközökhöz alkalmazkodik. A válaszképesség megtekintéséhez méretezze át a böngészőt egy keskeny nézetre, hogy a tartalom függőlegesen jelenítse meg a tartalmat, és a navigációs sáv menüikonná változik:
Az alkalmazást hagyhatja futni a következő szakasz gyakorlataihoz.
Ha menteni szeretné a munkáját, állítsa le az alkalmazást, és kövesse az oktatóanyag-sorozat korábbi lépéseinek utasításait:
- 1. lépés (a virtuális környezet fájljainak kizárása a forrásvezérlőből)
- 2. lépés (a forráskövetés módosításainak véglegesítése)
Webalkalmazás-projektstruktúra vizsgálata
A Django Web Project sablon egy webalkalmazás-projektet hoz létre a Visual Studióban a következő struktúrával:
A DjangoWeb Visual Studio projekt gyökérkönyvtárában található fájlok:
- manage.py: A Django felügyeleti segédprogram.
- db.sqlite3: Alapértelmezett SQLite-adatbázis.
- requirements.txt: A projekt azon csomagjait azonosítja, amelyek a Django 1.x-hez függenek.
- readme.html: A webalkalmazással kapcsolatos információkat tartalmaz, beleértve a követelményeket és a kritikus használati eljárásokat. A Visual Studio a projekt létrehozása után jeleníti meg ezt a fájlt. A korábban leírtaknak megfelelően ez a fájl tartalmazza az alkalmazáshoz tartozó felügyelői (rendszergazdai) fiók létrehozásához szükséges utasításokat.
A DjangoWeb/alkalmazás mappája:
Ez a mappa tartalmazza az összes alkalmazásfájlt, beleértve nézeteket, modelleket, teszteket, űrlapokat. Ez a mappa fájlokat tartalmazó almappákkal is rendelkezik, beleértve sablonokat, migrálásokat, valamint statikus. Az alkalmazás mappáját általában úgy nevezheti át, hogy egy jellegzetesebb nevet használjon, például magát az alkalmazásnevet.
A DjangoWeb/DjangoWeb mappa:
Ez a mappa a Django projektmappája. Tartalmazza a tipikus Django-projektfájlokat: __init__.py, settings.py, urls.pyés wsgi.py. A settings.py fájl már konfigurálva van az alkalmazáshoz és az adatbázisfájlhoz a projektsablon használatával. A urls.py fájl már be van állítva az összes alkalmazásoldal útvonalával, beleértve a Bejelentkezés űrlapot is.
Virtuális környezet megosztása Visual Studio-projektek között
Virtuális környezetet megoszthat a Visual Studio-projektek között. Ne feledje azonban, hogy a különböző projektek idővel valószínűleg különböző csomagokat használnak. A megosztott virtuális környezetnek tartalmaznia kell az összes csomagot az azt használó összes projekthez.
Meglévő virtuális környezet használatához kövesse az alábbi lépéseket:
Amikor a rendszer kéri, hogy telepítse a függőségeket a Visual Studióban, válassza én magam telepítem őket lehetőséget.
A Megoldáskezelőbenkattintson a jobb gombbal a Python-környezetek csomópontra, és válassza a Meglévő virtuális környezet hozzáadásalehetőséget.
Keresse meg és jelölje ki a virtuális környezetet tartalmazó mappát, majd válassza az OKlehetőséget.
Oldalnézetek és lapsablonok vizsgálata
A Django Web Project által létrehozott lapmegtekintések kódja a projekt alkalmazásában/views.py fájljában található. Minden nézetfüggvény meghívja a django.shortcuts.render segédfüggvényt egy sablon és egy egyszerű szótárobjektum elérési útjával. A about függvény létrehozza az "About" oldal nézetét a webalkalmazásban.
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,
}
)
A nézetekhez tartozó HTML-lapsablonok a projekt app/templates/app mappában találhatók, amelyet gyakran át szoktak nevezni. Az alapsablon , layout.html, a legkiterjedtebb. A fájl az alkalmazásnézetekhez szükséges összes statikus fájlra (JavaScript és CSS) hivatkozik.
Ez a sablon két block szakaszt is meghatároz: content és scripts. A többi webalkalmazás-lap felülírja a layout.html fájl {% block content %} szakaszát. Az e jelölt változatban a layout.html fájl <body> elemének két block szakasza látható.
<!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>
Az egyes HTML-lapsablonok, about.html, contact.htmlés index.htmlkiterjesztik az alapsablont layout.html. A about.html sablonfájl a legegyszerűbb, és a {% extends %} címkét és {% block content %} szakaszt jeleníti meg:
{% 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 %}
A index.html és contact.html sablonfájlok ugyanazt a struktúrát használják, és további útmutatást nyújtanak a content blokkban.
Az alkalmazás/sablonok/alkalmazás mappa további két HTML-lapsablont tartalmaz. A login.html fájl határozza meg a Bejelentkezési alkalmazáslap lap tartalmát. A loginpartial.html fájl a {% include %} utasítással kerül a layout.html fájlba. Az oktatóanyag-sorozat utolsó lépése (felhasználók hitelesítése) részletesebben ismerteti ezt a két sablonfájlt.
{% blokk %} és {% végblokk %} címkék behúzása sablonokban
A HTML-minták a Visual Studio oldalsablonjában megadott jelölőnyelvet mutatják be. Vegye észre, hogy a block címkék nincsenek behúzva a jelölésben. A block címkék helyének egyértelmű megjelenítéséhez a Visual Studio lapsablonjai nem húzják be ezeket a címkéket.
A Django oldal sablonok azonban jól működnek, ha behúzza a block címkéket. Egyes fejlesztők szívesebben igazítják a címkéket a megfelelő szülő HTML-elemeken belül.
URL-útvonalminták vizsgálata
A Django-projekt url-fájlja (DjangoWeb/DjangoWeb/urls.py) a Django Web Project sablonja a következő kódot tartalmazza:
"""
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),
]
Az első három URL-minta közvetlenül a projekt alkalmazásában található views.py fájlban definiált home, contactés about nézetfüggvényekhez van társítva. A login/ és logout/ minták megfelelnek az alkalmazás hitelesítési funkcióinak.
Speciális URL-útvonalminták, például ^login/$ és ^logout$ az alkalmazás által meghatározott nézetek helyett a beépített Django-nézetekhez férnek hozzá. A url metódus hívásai további adatokat is tartalmaznak a nézet testreszabásához. Az oktatóanyag-sorozat utolsó lépése (felhasználók hitelesítése) az URL-hívások működését ismerteti.
Az URL-minták különbségeinek feltárása
Az oktatóanyag-sorozat 3. lépésében (HTML-sablonöröklés) a "Rólunk" oldal elérési útja a '^about$' mintát használja. Ez a minta eltér az oktatóanyag lépésében bemutatott URL-útvonaltól. A sablon verziójától függően előfordulhat, hogy a mintakód a "Névjegy" oldal URL-mintázatát about/ vagy ^about jeleníti meg ^about$helyett.
A reguláris kifejezésből hiányzó, záró $ dollárjel számos projektsablon verziójának mulasztása. Az URL-minta tökéletesen működik egy "about" vagy "About" nevű oldalon. A záró $ karakter nélkül azonban az URL-minta olyan URL-címekkel is megegyezik, mint a "about=django", "about09876", "about-face", stb. A záró $ karakter egy olyan URL-mintát hoz létre, amely biztosítja, hogy csak az "about" kifejezésnek feleljen meg.