Wéi erstellen ech mobilfrëndlech Webapplikatiounen mam Django Framework - Deel 3

Am Deel 1 vun dëser Serie hutt Dir geléiert wéi Dir Django an engem virtuellen Ëmfeld installéiere kënnt an konfiguréieren an Dir hutt de Skelett vun Ärem éischte Projet erstallt.

Dann am Part 2 hu mir eng Applikatioun an e Modell fir Post Objekter erstallt, déi mir spéider an d'Datebank migréiert hunn. Schlussendlech hu mir Iech gewisen wéi Dir Är nei erstallt Applikatioun an d'Django Administratioun User Interface integréiert.

Dës Artikele sinn Deel vun der Django Serie:

An dësem leschte Guide wäerte mir diskutéieren wéi Dir Zougang zu der Applikatioun benotzt mat der UI a wéi Dir et mobilfrëndlech fir all Zort vun Apparater mécht. Dat gesot, loosst eis ufänken.

Erstellt Objekter iwwer d'Django Admin Interface

Fir Objekter vum Typ Post ze kreéieren (erënnert Iech datt de Modell deen mir am Deel 2 vun dëser Serie definéiert hunn), wäerte mir d'Django Admin Interface benotzen.

Vergewëssert Iech datt den Django agebaute Webserver um Port 8000 leeft (oder en aneren vun Ärer Wiel) andeems Dir de folgende Kommando aus dem äusseren myfirstdjangoproject Verzeichnis leeft:

# cd ~/myfirstdjangoenv/myfirstdjangoproject
# python manage.py runserver 0.0.0.0:8000

Maacht elo Äre Webbrowser op a weist op http://ip-address:8000/admin, loggt Iech dann un mat den Umeldungsinformatiounen, déi Dir am viregten Artikel ageriicht hutt, a fänkt un e Post ze schreiwen (deen, erëm, wäert en Objet vum Typ Post erstellen an déi assoziéiert Donnéeën an d'Basisdatenbank setzen):

Widderhuelen de Prozess 2 oder 3 Mol:

Nodeems mir e puer Posts erstallt hunn, loosst eis kucken wat mir maache musse fir se mat eisem Webbrowser ze weisen.

Eis éischt Vue

Eis éischt Vue (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) wäert zoustänneg sinn fir all Post Objekter ze filteren an déi zréckzebréngen wou de Wäert vun whenPublished manner wéi oder gläich ass wéi den aktuellen Datum an Zäit (whenPublished__lte=timezone.now()) bestallt duerch erofgaang wann Published, wat d'selwecht ass wéi läscht als éischt ze soen.

Dës Objete ginn an eng Variabel bequem benannt Posts gespäichert, a ginn zréck (identifizéiert als allposts) fir an den HTML agebaut ze ginn, wéi mir an der nächster Sektioun gesinn:

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

Schlussendlech gëtt den duebelen Ënnersträich am whenPublished__lte uewen benotzt fir en Datebankfeld (whenPublished) vun engem Filter oder enger Operatioun ze trennen (lte = manner wéi oder gläich).

Wann mir eis initial Vue definéiert hunn, loosst eis un der verbonne Schabloun schaffen.

Schabloun fir eisen éischte Projet erstellen

No den Direktiven a Weeër, déi an der viregter Sektioun uginn sinn, späichere mir eis initial Schabloun am myblog/templates/myblog. Dëst bedeit datt Dir e Verzeechnes mam Numm Schablounen an en Ënnerverzeechnes mam Numm myblog erstellen musst:

# cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
# mkdir -p templates/myblog

Mir nennen d'Schabloun posts.html an setzen de folgende Code dran. Dir wäert bemierken datt mir online Referenzen op jQuery, Bootstrap, FontAwesome, a Google Schrëften derbäi ginn.

Zousätzlech hu mir Python Code a Curly Klammeren am HTML zougemaach. Notéiert w.e.g. datt mir fir all Objet vum Typ Post säin Titel, säin publizéierten Datum an den Auteur, a schliisslech säin Text weisen. Endlech, a rout gesitt Dir datt mir eng Referenz op d'Objeten maachen, déi iwwer myblog/views.py zréckginn:

Ok, hei ass d'posts.html Datei:

<!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>

An der uewe genannter Schabloun gëtt de Linebreak-Filter benotzt fir Zeilpausen am Kloertext mat dem entspriechende HTML-Äquivalent ( oder

) ze ersetzen fir all Post richteg mat Paragraph Trennung.

Als nächst musse mir eng Mapping tëscht URLen an eiser Applikatioun an déi entspriechend Usiichten opsetzen, déi d'Donnéeën zréckginn. Fir dat ze maachen, erstellt eng Datei mam Numm urls.py am myblog mat dem folgenden Inhalt:

from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

De r^$ verdéngt e bësse méi Erklärung. De féierende r instruéiert den Django fir d'String an eenzel Zitater als regulär Ausdrock ze behandelen.

Besonnesch r^$ stellt eng eidel String duer, sou datt wa mir eise Browser op http://ip-address:8000 weisen (an näischt anescht), d'Donnéeën zréckginn vun de verännerleche Poste bannent views.py (kuckt op déi viregte Sektioun) gëtt op eiser Homepage presentéiert:

Lescht awer net zulescht wäerte mir d'urls.py Datei vun eiser Blogapplikatioun (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) an d'urls.py vun eisem Haaptprojet (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls) enthalen .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')),
]

Da loosst eis de Webserver starten:

# cd ~/myfirstdjangoenv/myfirstdjangoproject
# python manage.py runserver 0.0.0.0:8000

Mir sollten elo d'Lëschte vu Poste gesinn, déi mir virdru erstallt hunn:

Dank Bootstrap kënnt Dir nach ëmmer eng exzellent Visualiséierung an engem méi klengen Apparat hunn:

Zesummefaassung

Loosst eis elo d'Konzepter iwwerpréiwen, déi mir an dësem Artikel an an dëser Serie ofgedeckt hunn:

1. All Modell definéiert en Objet a Kaarten op eng Datebank Dësch, deenen hir Felder am Tour Kaart op d'Eegeschafte vun deem Objet. Op der anerer Säit definéiert eng Schabloun d'Benotzerinterface wou d'Donnéeën, déi vun der Vue zréckginn, ugewise ginn.

Loosst eis soen datt mir eise Modell änneren wëllen andeems Dir e Feld mam Numm Resumé op de Post Objet bäidréit, wou mir eng optional kuerz Beschreiwung vun all Post späicheren. Loosst eis déi folgend Zeil an myblog/models.py bäidroen:

summary = models.CharField(max_length=350, blank=True, null=True)

Wéi mir am virege Artikel geléiert hunn, musse mir d'Ännerungen an d'Datebank migréieren:

# python manage.py makemigrations myblog
# python manage.py migrate myblog

Benotzt dann d'Admin-Interface fir d'Posts z'änneren an e kuerze Resumé fir all Post ze addéieren. Endlech ersetzen déi folgend Zeil an der Schabloun (posts.html):

<p>{{ post.text|linebreaks }}</p>

mat

<p>{{ post.summary }}</p>

Erfrëscht d'Homepage fir d'Ännerungen ze gesinn:

2. Eng Vue Funktioun hëlt eng HTTP- Ufro an zréck engem HTTP- Äntwert. An dësem Artikel mécht def posts (Ufro) an views.py en Uruff un déi ënnerierdesch Datebank fir all Posts ze recuperéieren. Wa mir all Posts mam Wuert ansible am Titel wëllen zréckzéien, da sollte mir ersetzen.

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

mat

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

Andeems Dir d'Benotzerinterface vun der Applikatiounslogik an Webapplikatiounen trennt, erliichtert Django d'Aufgaben fir Apps z'erhalen an z'eskaléieren.

3. Wann Dir d'Instruktiounen an dëser Serie gefollegt hutt, sollt d'Struktur vun Ärem Projet wéi follegt sinn:

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

Am Fall wou déi uewe genannte Lëscht net korrekt an Ärem Browser ugewise gëtt, hei ass e Screenshot vum Ausgang vum folgenden Kommando:

# tree myfirstdjangoenv/myfirstdjangoproject

Resumé

Och wann all dës Konzepter op d'éischt e bëssen entimidéierend schéngen kënnen, kann ech Iech versécheren, datt den Django all Efforten wäert wäert ass fir se kennen ze léieren

Ech hoffen datt d'Beispill dat mir an dëser Serie benotzt hunn fir Iech an dësem aussergewéinleche Webkader virzestellen Iech motivéiere fir méi ze léieren. Wann jo, ass déi offiziell Django Dokumentatioun (déi dauernd um neiste Stand gehaalen gëtt) déi bescht Plaz fir unzefänken.

Ech kann Iech versécheren datt et vill méi fir Django ass wéi mir an enger Serie vun Artikelen adequat ofdecken, also fillt Iech gratis et z'entdecken a léieren duerch ze maachen!

Fillt eis gratis eng Notiz mat Froen oder Suggestiounen mat dem Formulaire hei drënner ze schécken.