Mobilbarát webalkalmazások létrehozása a Django Framework segítségével – 3. rész
„Ezt a cikket felülvizsgáltuk és frissítettük a Django legújabb verziójával – 2016. május”
A sorozat 1. részében megtanulta, hogyan telepítse és konfigurálja a Django-t virtuális környezetben, és létrehozta első projektjének vázát.
Ezután a 2. részben létrehoztunk egy alkalmazást és egy modellt a Post objektumokhoz, amelyeket később migráltunk az adatbázisba. Végül megmutattuk, hogyan integrálhatja újonnan létrehozott alkalmazását a Django adminisztrációs felhasználói felületébe.
Ezek a cikkek a Django sorozat részei:
A Django Web Framework telepítése és konfigurálása virtuális környezetekkel – 1. rész
A Python alapjainak áttekintése és az első webes alkalmazás létrehozása a Django segítségével – 2. rész
Ebben az utolsó útmutatóban megvitatjuk, hogyan férhet hozzá az alkalmazáshoz a felhasználói felület segítségével, és hogyan tehetjük mobilbaráttá mindenféle eszközön. Ez azt jelenti, kezdjük.
Objektumok létrehozása a Django adminisztrátori felületén keresztül
Post típusú objektumok létrehozásához (ne feledje, hogy ez az a modell, amelyet a sorozat 2. részében definiáltunk) a Django adminisztrátori felületét fogjuk használni.
Győződjön meg arról, hogy a Django beépített webszerver a 8000 porton fut (vagy egy másik, az Ön által választott porton) a következő parancs futtatásával a külső myfirstdjangoproject könyvtárból:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Most nyissa meg a webböngészőt, és mutasson a http://ip-address:8000/admin elemre, majd jelentkezzen be az előző cikkben megadott hitelesítő adatokkal, és kezdjen el bejegyzést írni (ami ismét létrehoz egy Közzététel típusú objektumot, és beilleszti a kapcsolódó adatokat az alapul szolgáló adatbázisba):
Ismételje meg a folyamatot 2-3 alkalommal:
Miután elkészítettünk néhány bejegyzést, nézzük meg, mit kell tennünk ahhoz, hogy webböngészőnkkel megjelenítsük őket.
Kezdeti nézetünk
Az első nézetünk (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) lesz felelős az összes Bejegyzés objektum szűréséért, és visszaadja azokat, ahol a whenPublished értéke van. kisebb vagy egyenlő, mint az aktuális dátum és idő (whenPublished__lte=timezone.now()), csökkenő sorrendben whenPublished, ami megegyezik azzal, mintha „ a legfrissebb először“.
Ezeket az objektumokat a rendszer egy kényelmesen elnevezett bejegyzésekbe menti, és visszaküldi őket (összes bejegyzésként azonosítva), hogy beágyazzák őket a HTML-be, amint azt a következő részben látni fogjuk:
from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
return render(request, 'myblog/posts.html', {'allposts': posts})
Végül a fenti whenPublished__lte dupla aláhúzásjelével elválasztja az adatbázismezőt (whenPublished) egy szűrőtől vagy művelettől (lte=kevesebb, mint vagy egyenlő).
Miután meghatároztuk a kezdeti nézetünket, dolgozzunk a kapcsolódó sablonon.
Hozzon létre sablont első projektünkhöz
Az előző részben megadott utasításokat és útvonalakat követve a kezdeti sablonunkat a myblog/templates/myblog oldalon tároljuk. Ez azt jelenti, hogy létre kell hoznia egy sablonok nevű könyvtárat és egy myblog nevű alkönyvtárat:
cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog
Meghívjuk a posts.html sablont, és beillesztjük a következő kódot. Észreveheti, hogy online hivatkozásokat adunk a jQuery, a Bootstrap, a FontAwesome és a Google betűtípusokhoz.
Ezenkívül a Python kódot zárójelek közé helyeztük a HTML-ben. Kérjük, vegye figyelembe, hogy minden Post típusú objektumnál megjelenik a címe, a közzététel dátuma és a szerzője, végül pedig a szövege. Végül pirossal látni fogja, hogy a myblog/views.py oldalon visszaküldött objektumokra hivatkozunk:
Rendben, itt a posts.html fájl:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<style>
.title {
font-family: 'Indie Flower', serif;
font-size: 30px;
color: #1E90FF;
}
h1 {
font-family: 'Pacifico', serif;
font-size: 45px;
color: #1E90FF;
}
</style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
<div>
<div class="title">{{ post.title }}</div>
<strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</body>
</html>
A fenti sablonban a sortörés szűrő az egyszerű szövegben lévő sortöréseket a megfelelő HTML megfelelőre (
Ezután be kell állítani egy leképezést az alkalmazásunkban található URL-ek és az adatokat visszaadó megfelelő nézetek között. Ehhez hozzon létre egy urls.py nevű fájlt a saját blogomban a következő tartalommal:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
Az r'^$' megérdemel egy kicsit bővebb magyarázatot. A bevezető r arra utasítja a Djangot, hogy az idézőjelekben lévő karakterláncot reguláris kifejezésként kezelje.
Az r'^$' egy üres karakterláncot jelöl, így amikor a böngészőnket a http://ip-address:8000 címre irányítjuk (és semmi másra), a a views.py fájlban található posts változó által visszaadott adatok (lásd az előző részt) a kezdőlapunkon jelennek meg:
Végül, de nem utolsósorban a blogalkalmazásunk (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) urls.py fájlját is belefoglaljuk a fő projektünk urls.py fájlja (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('myblog.urls')),
]
Ezután indítsuk el a webszervert:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Most már látnunk kell a korábban létrehozott bejegyzések listáját:
A Bootstrap-nek köszönhetően továbbra is kiváló vizualizációt készíthet egy kisebb eszközön:
Összegezve
Tekintsük át az ebben a cikkben és a sorozatban tárgyalt fogalmakat:
1. Mindegyik modell egy objektumot határoz meg, és egy adatbázistáblához rendeli, amelynek mezői az adott objektum tulajdonságaira vannak leképezve. Másrészt egy sablon határozza meg a felhasználói felületet, ahol a nézet által visszaadott adatok megjelennek.
Tegyük fel, hogy módosítani szeretnénk a modellünket úgy, hogy hozzáadunk egy összefoglaló nevű mezőt a Post objektumhoz, ahol az egyes bejegyzések opcionális rövid leírását tároljuk. Adjuk hozzá a következő sort a myblog/models.py fájlhoz:
summary = models.CharField(max_length=350, blank=True, null=True)
Amint azt az előző cikkben megtudtuk, a változtatásokat át kell helyeznünk az adatbázisba:
python manage.py makemigrations myblog
python manage.py migrate myblog
Ezután használja az adminisztrációs felületet a bejegyzések szerkesztéséhez, és minden bejegyzéshez adjon hozzá egy rövid összefoglalót. Végül cserélje ki a következő sort a sablonban (posts.html):
<p>{{ post.text|linebreaks }}</p>
val vel
<p>{{ post.summary }}</p>
A változások megtekintéséhez frissítse a kezdőlapot:
2. A view függvény fogad egy HTTP-kérést, és HTTP-választ ad vissza. Ebben a cikkben a def posts(request) views.py meghívja az alapul szolgáló adatbázist az összes bejegyzés lekéréséhez. Ha minden olyan bejegyzést le akarunk kérni, amelyeknek a címében szerepel az ansible szó, cseréljük le.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
val vel
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
Azáltal, hogy a webes alkalmazásokban elválasztja a felhasználói felületet az alkalmazáslogikától, a Django megkönnyíti az alkalmazások karbantartásának és bővítésének feladatait.
3. Ha követte az ebben a sorozatban található utasításokat, a projekt felépítése a következő:
myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│ ├── admin.py
│ ├── admin.pyc
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ ├── 0001_initial.pyc
│ │ ├── __init__.py
│ │ └── __init__.pyc
│ ├── models.py
│ ├── models.pyc
│ ├── templates
│ │ └── myblog
│ │ └── posts.html
│ ├── tests.py
│ ├── urls.py
│ ├── urls.pyc
│ ├── views.py
│ └── views.pyc
└── myfirstdjangoproject
├── __init__.py
├── __init__.pyc
├── settings.py
├── settings.pyc
├── urls.py
├── urls.pyc
├── wsgi.py
└── wsgi.pyc
Ha a fenti lista nem jelenik meg megfelelően a böngészőben, itt van egy képernyőkép a következő parancs kimenetéről:
tree myfirstdjangoenv/myfirstdjangoproject
Összegzés
Bár ezek a fogalmak elsőre kissé ijesztőnek tűnhetnek, biztosíthatom önöket, hogy a Django megér minden erőfeszítést, hogy megismerje.
Remélem, hogy a példa, amellyel ebben a sorozatban bemutattuk ezt a kiváló webes keretrendszert, további tanulásra ösztönöz. Ha igen, akkor a hivatalos Django dokumentáció (amelyet folyamatosan frissítenek) a legjobb kiindulópont.
Biztosíthatom Önöket arról, hogy a Django sokkal többet tartalmaz, mint amennyit egy cikksorozatban kellőképpen leírhatunk, ezért nyugodtan fedezze fel, és tanuljon cselekvés közben!
Kérdéseivel vagy javaslataival nyugodtan írjon nekünk az alábbi űrlap segítségével.