Sådan oprettes mobilvenlige webapplikationer ved hjælp af Django Framework - Del 3
I del 1 af denne serie lærte du, hvordan du installerer og konfigurerer Django i et virtuelt miljø, og du oprettede skelettet til dit første projekt.
Derefter oprettede vi i del 2 en applikation og en model til Post-objekter, som vi senere migrerede til databasen. Endelig viste vi dig, hvordan du integrerer din nyoprettede applikation til brugergrænsefladen til Django-administrationen.
Disse artikler er en del af Django-serien:
I denne sidste vejledning vil vi diskutere, hvordan du får adgang til applikationen ved hjælp af brugergrænsefladen, og hvordan du gør den mobilvenlig til alle slags enheder. Når det er sagt, lad os komme i gang.
Oprettelse af objekter via Django admin-grænsefladen
For at oprette objekter af typen Post (husk at det er den model, vi definerede i del 2 i denne serie), bruger vi Django admin-interface.
Sørg for, at den indbyggede Django-webserver kører på port 8000 (eller en anden efter eget valg) ved at køre følgende kommando fra det ydre myfirstdjangoproject-bibliotek:
# cd ~/myfirstdjangoenv/myfirstdjangoproject # python manage.py runserver 0.0.0.0:8000
Åbn nu din webbrowser og peg på http:/ip-adresse: 8000/admin , log derefter på ved hjælp af de legitimationsoplysninger, du oprettede i den forrige artikel, og begynd at skrive et indlæg (som igen, opretter et objekt af typen Post og indsætter de tilknyttede data i den underliggende database):
Gentag processen 2 eller 3 gange:
Når vi har oprettet et par indlæg, skal vi se, hvad vi skal gøre for at vise dem ved hjælp af vores webbrowser.
Vores oprindelige opfattelse
Vores første visning (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) har ansvaret for at filtrere alle Post-objekter og returnere dem, hvor værdien af whenPublished er mindre end eller lig med den aktuelle dato og tid (nårPubliceret__lte = timezone.now()) ordnet ved faldende nårPubliceret, hvilket er det samme som at sige "senest først".
Disse objekter gemmes i en variabel, der er praktisk navngivet indlæg, og returneres (identificeret som allposts) for at blive indlejret i HTML, som vi vil se i det næste afsnit:
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})
Endelig bruges det dobbelte understregning i whenPublished__lte ovenfor til at adskille et databasefelt (nårPubliceret) fra et filter eller en operation (lte = mindre end eller lig).
Når vi har defineret vores oprindelige visning, lad os arbejde på den tilknyttede skabelon.
Opret skabelon til vores første projekt
Efter retningslinjerne og stierne i det foregående afsnit gemmer vi vores oprindelige skabelon i myblog/templates/myblog. Dette betyder, at du bliver nødt til at oprette et bibliotek med skabeloner og en underkatalog kaldet myblog:
# cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog # mkdir -p templates/myblog
Vi kalder skabelonen posts.html og indsætter følgende kode i den. Du vil bemærke, at vi tilføjer online referencer til jQuery, Bootstrap, FontAwesome og Google skrifttyper.
Derudover har vi lukket Python-kode inden for krøllede parenteser i HTML-koden. Bemærk, at for hvert objekt af typen Post vil vi vise dets titel, dens offentliggjorte dato og forfatter og endelig dens tekst. Endelig vil du i rødt se, at vi henviser til de objekter, der returneres via myblog/views.py:
Ok, her er posts.html-filen:
<!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>
I ovenstående skabelon bruges linebreaks-filteret til at erstatte linjeskift i almindelig tekst med det tilsvarende HTML-ækvivalent ( eller
Dernæst er vi nødt til at oprette en kortlægning mellem webadresser i vores applikation og de tilsvarende visninger, der returnerer dataene. For at gøre det skal du oprette en fil med navnet urls.py inde i myblog med følgende indhold:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
r ^$ fortjener lidt mere forklaring. Den førende r instruerer Django om at behandle strengen i enkelte citater som et regulært udtryk.
Især r ^$ repræsenterer en tom streng, så når vi peger vores browser på http:/ip-adresse: 8000 (og intet andet), returneres dataene af de variable indlæg inde i views.py (se forrige afsnit) vil blive præsenteret på vores startside:
Sidst, men ikke mindst, inkluderer vi urls.py-filen i vores blogapplikation (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) i urls.py i vores hovedprojekt (~/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')),
]
Lad os derefter starte webserveren:
# cd ~/myfirstdjangoenv/myfirstdjangoproject # python manage.py runserver 0.0.0.0:8000
Vi skal nu kunne se listerne over indlæg, vi oprettede tidligere:
Takket være Bootstrap kan du stadig have en fremragende visualisering i en mindre enhed:
Opsummering
Lad os nu gennemgå de begreber, vi har dækket i denne artikel og gennem denne serie:
1. Hver model definerer et objekt og kortlægges til en databasetabel, hvis felter til gengæld tilordnes objektets egenskaber. På den anden side definerer en skabelon brugergrænsefladen, hvor de data, der returneres af visningen, vises.
Lad os sige, at vi vil ændre vores model ved at tilføje et felt med en opsummering til objektet Post, hvor vi gemmer en valgfri kort beskrivelse af hvert indlæg. Lad os tilføje følgende linje i myblog/models.py:
summary = models.CharField(max_length=350, blank=True, null=True)
Som vi lærte i den foregående artikel, er vi nødt til at migrere ændringerne til databasen:
# python manage.py makemigrations myblog # python manage.py migrate myblog
Brug derefter admin-grænsefladen til at redigere indlægene og tilføj en kort oversigt til hvert indlæg. Til sidst skal du erstatte følgende linje i skabelonen (posts.html):
<p>{{ post.text|linebreaks }}</p>
med
<p>{{ post.summary }}</p>
Opdater hjemmesiden for at se ændringerne:
2. En visningsfunktion tager en HTTP-anmodning og returnerer et HTTP-svar. I denne artikel foretager def-indlæg (anmodning) i views.py et opkald til den underliggende database for at hente alle indlæg. Hvis vi vil hente alle indlæg med ordet ansible i titlen, skal vi erstatte det.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
med
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
Ved at adskille brugergrænsefladen fra applikationslogikken i webapplikationer letter Django opgaverne med at vedligeholde og eskalere apps.
3. Hvis du fulgte instruktionerne i denne serie, skal projektets struktur være som følger:
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
Hvis ovenstående liste ikke vises korrekt i din browser, er her et skærmbillede af output fra følgende kommando:
# tree myfirstdjangoenv/myfirstdjangoproject
Resumé
Selvom alle disse begreber i starten måske virker lidt skræmmende, kan jeg forsikre Dem om, at Django er værd at gøre alt for at gøre sig bekendt med det
Jeg håber, at eksemplet, som vi har brugt i denne serie til at introducere dig til denne fremragende webramme, vil motivere dig til at lære mere. I så fald er den officielle Django-dokumentation (som konstant holdes opdateret) det bedste sted at starte.
Jeg kan forsikre dig om, at der er meget mere ved Django, end vi i tilstrækkelig grad kan dække i en række artikler, så er du velkommen til at udforske det og lære ved at gøre!
Send os gerne en note med spørgsmål eller forslag ved hjælp af nedenstående formular.