So erstellen Sie mobilfreundliche Webanwendungen mit dem Django-Framework - Teil 3

"Dieser Artikel wurde überarbeitet und mit der neuesten Version von Django aktualisiert – Mai 2016 "

In Teil 1 dieser Serie haben Sie gelernt, wie Sie Django in einer virtuellen Umgebung installieren und konfigurieren können, und Sie haben das Skelett Ihres ersten Projekts erstellt.

In Teil 2 haben wir dann eine Anwendung und ein Modell für Post-Objekte erstellt, die wir später in die Datenbank migriert haben. Abschließend haben wir Ihnen gezeigt, wie Sie Ihre neu erstellte Anwendung in die Benutzeroberfläche der Django-Verwaltung integrieren können.

Diese Artikel sind Teil der Django-Serie:

Installieren und Konfigurieren des Django Web Frameworks mit virtuellen Umgebungen – Teil 1

Wiederholung der Python-Grundlagen und Erstellen Ihrer ersten Webanwendung mit Django – Teil 2

In diesem abschließenden Leitfaden werden wir besprechen, wie Sie über die Benutzeroberfläche auf die Anwendung zugreifen und wie Sie sie für alle Arten von Geräten mobilfreundlich machen können. Das heißt, fangen wir an.

Erstellen von Objekten über die Django-Admin-Oberfläche

Um Objekte vom Typ Post zu erstellen (denken Sie daran, dass dies das Modell ist, das wir in Teil 2 dieser Serie definiert haben), verwenden wir die Django-Admin-Schnittstelle.

Stellen Sie sicher, dass der in Django integrierte Webserver auf Port 8000 (oder einem anderen Ihrer Wahl) ausgeführt wird, indem Sie den folgenden Befehl aus dem äußeren myfirstdjangoproject-Verzeichnis ausführen:

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

Öffnen Sie nun Ihren Webbrowser, zeigen Sie auf http://ip-address:8000/admin, melden Sie sich dann mit den Anmeldeinformationen an, die Sie im vorherigen Artikel eingerichtet haben, und beginnen Sie mit dem Schreiben eines Beitrags (der wiederum ein Objekt vom Typ Post erstellt und die zugehörigen Daten in die zugrunde liegende Datenbank einfügt):

Wiederholen Sie den Vorgang 2 oder 3 Mal:

Nachdem wir ein paar Beiträge erstellt haben, sehen wir uns an, was wir tun müssen, um sie mit unserem Webbrowser anzuzeigen.

Unsere erste Einschätzung

Unsere erste Ansicht (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) ist dafür verantwortlich, alle Post-Objekte zu filtern und diejenigen zurückzugeben, bei denen der Wert von whenPublished kleiner oder gleich dem aktuellen Datum und der aktuellen Uhrzeit (whenPublished__lte=timezone.now()) ist, sortiert nach absteigendem whenPublished, was gleichbedeutend ist mit "latest first".

Diese Objekte werden in einer Variablen mit dem bequemen Namen posts gespeichert und zurückgegeben (als allposts identifiziert), um in den HTML-Code eingebettet zu werden, wie wir im nächsten Abschnitt sehen werden:

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

Schließlich wird der doppelte Unterstrich in whenPublished__lte oben verwendet, um ein Datenbankfeld (whenPublished) von einem Filter oder einer Operation (lte=kleiner als oder gleich) zu trennen.

Nachdem wir unsere erste Ansicht definiert haben, arbeiten wir an der zugehörigen Vorlage.

Vorlage für unser erstes Projekt erstellen

Gemäß den Anweisungen und Pfaden, die im vorherigen Abschnitt angegeben wurden, speichern wir unsere erste Vorlage in myblog/templates/myblog. Das bedeutet, dass Sie ein Verzeichnis mit dem Namen templates und ein Unterverzeichnis mit dem Namen myblog erstellen müssen:

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

Wir rufen die Vorlage posts.html auf und fügen den folgenden Code darin ein. Sie werden feststellen, dass wir Online-Verweise auf jQuery-, Bootstrap-, FontAwesome- und Google-Schriftarten hinzufügen.

Darüber hinaus haben wir Python-Code in geschweifte Klammern im HTML eingefügt. Bitte beachten Sie, dass wir für jedes Objekt vom Typ Post den Titel, das Veröffentlichungsdatum und den Autor und schließlich den Text anzeigen. Schließlich sehen Sie in Rot, dass wir einen Verweis auf die Objekte herstellen, die über myblog/views.py zurückgegeben werden:

Ok, hier ist die 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>

In der obigen Vorlage wird der Zeilenumbruch-Filter verwendet, um Zeilenumbrüche im Nur-Text durch das entsprechende HTML-Äquivalent (<br /> oder </p>) zu ersetzen, um jeden Beitrag korrekt mit Absatztrennung zu formatieren.

Als Nächstes müssen wir eine Zuordnung zwischen URLs in unserer Anwendung und den entsprechenden Ansichten einrichten, die die Daten zurückgeben. Erstellen Sie dazu eine Datei mit dem Namen urls.py in myblog mit folgendem Inhalt:

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

Das r'^$' verdient etwas mehr Erklärung. Das führende r weist Django an, die Zeichenkette in einfachen Anführungszeichen als regulären Ausdruck zu behandeln.

Insbesondere stellt r'^$' eine leere Zeichenkette dar, so dass, wenn wir unseren Browser auf http://ip-address:8000 (und sonst nichts) verweisen, die Daten, die von der Variablen posts in views.py zurückgegeben werden (siehe den vorherigen Abschnitt), auf unserer Homepage angezeigt werden:

Zu guter Letzt werden wir die urls.py Datei unserer Blog-Anwendung (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) in die urls.py unseres Hauptprojekts (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py) aufnehmen:

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')),
]

Dann starten wir den Webserver:

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

Wir sollten jetzt in der Lage sein, die Listen der Beiträge zu sehen, die wir zuvor erstellt haben:

Dank Bootstrap können Sie auch auf einem kleineren Gerät eine hervorragende Visualisierung haben:

Zusammenfassung

Schauen wir uns nun die Konzepte an, die wir in diesem Artikel und in dieser Serie behandelt haben:

1. Jedes Modell definiert ein Objekt und wird einer Datenbanktabelle zugeordnet, deren Felder wiederum den Eigenschaften dieses Objekts zugeordnet sind. Auf der anderen Seite definiert eine Vorlage die Benutzeroberfläche, auf der die von der Ansicht zurückgegebenen Daten angezeigt werden.

Angenommen, wir möchten unser Modell ändern, indem wir dem Post-Objekt ein Feld mit dem Namen summary hinzufügen, in dem wir eine optionale kurze Beschreibung jedes Beitrags speichern. Fügen wir die folgende Zeile in myblog/models.py hinzu:

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

Wie wir im vorherigen Artikel gelernt haben, müssen wir die Änderungen in die Datenbank migrieren:

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

Verwenden Sie dann die Admin-Oberfläche, um die Beiträge zu bearbeiten und jedem Beitrag eine kurze Zusammenfassung hinzuzufügen. Ersetzen Sie abschließend die folgende Zeile in der Vorlage (posts.html):

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

mit

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

Aktualisieren Sie die Startseite, um die Änderungen anzuzeigen:

2. Eine View-Funktion nimmt eine HTTP-Anforderung entgegen und gibt eine HTTP-Antwort zurück. In diesem Artikel führt def posts(request) in views.py einen Aufruf an die zugrunde liegende Datenbank aus, um alle Beiträge abzurufen. Wenn wir alle Beiträge mit dem Wort ansible im Titel abrufen möchten, sollten wir ersetzen.

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

mit

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

Durch die Trennung der Benutzeroberfläche von der Anwendungslogik in Webanwendungen erleichtert Django die Aufgaben der Wartung und Eskalation von Apps.

3. Wenn Sie die Anweisungen in dieser Serie befolgt haben, sollte die Struktur Ihres Projekts wie folgt aussehen:

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

Für den Fall, dass die obige Liste in Ihrem Browser nicht korrekt angezeigt wird, finden Sie hier einen Screenshot der Ausgabe des folgenden Befehls:

tree myfirstdjangoenv/myfirstdjangoproject

Zusammenfassung

Obwohl all diese Konzepte auf den ersten Blick ein wenig einschüchternd erscheinen mögen, kann ich Ihnen versichern, dass Django alle Mühen wert ist, die notwendig sind, um sich damit vertraut zu machen

Ich hoffe, dass das Beispiel, mit dem wir Sie in dieser Serie an dieses herausragende Webframework herangeführt haben, Sie motiviert, mehr zu lernen. Wenn ja, ist die offizielle Django-Dokumentation (die ständig auf dem neuesten Stand gehalten wird) der beste Ausgangspunkt.

Ich kann Ihnen versichern, dass Django viel mehr zu bieten hat, als wir in einer Reihe von Artikeln angemessen behandeln können, also zögern Sie nicht, es zu erkunden und durch Handeln zu lernen!

Schreiben Sie uns gerne eine Nachricht mit Fragen oder Anregungen über das untenstehende Formular.