Website-Suche

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

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

In Teil 1 dieser Serie haben Sie gelernt, wie Sie Django in einer virtuellen Umgebung installieren und konfigurieren, und Sie haben das Grundgerüst Ihres ersten Projekts erstellt.

Anschließend haben wir in Teil 2 eine Anwendung und ein Modell für Post-Objekte erstellt, die wir später in die Datenbank migrierten. Abschließend haben wir Ihnen gezeigt, wie Sie Ihre neu erstellte Anwendung in die Benutzeroberfläche der Django-Administration integrieren.

Diese Artikel sind Teil der Django-Reihe:

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

Überprüfen Sie die Python-Grundlagen und erstellen Sie Ihre erste Webanwendung mit Django – Teil 2

In diesem letzten Leitfaden besprechen wir, wie Sie über die Benutzeroberfläche auf die Anwendung zugreifen und sie für alle Arten von Geräten mobilfreundlich gestalten. Das heißt, fangen wir an.

Erstellen von Objekten über die Django-Administratoroberflä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-Administratoroberfläche.

Stellen Sie sicher, dass der in Django integrierte Webserver auf Port 8000 (oder einem anderen Ihrer Wahl) läuft, 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 und 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 (was wiederum erstellt ein Objekt vom Typ Post und fügt die zugehörigen Daten in die zugrunde liegende Datenbank ein):

Wiederholen Sie den Vorgang 2 oder 3 Mal:

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

Unsere erste Sicht

Unsere erste Ansicht (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) ist dafür verantwortlich, alle Post-Objekte zu filtern und diejenigen zurückzugeben, deren Wert whenPublished ist ist kleiner oder gleich dem aktuellen Datum und der aktuellen Uhrzeit (whenPublished__lte=timezone.now()), geordnet in absteigender Reihenfolge von whenPublished, was dasselbe ist, als würde man sagen: „ Neueste zuerst“.

Diese Objekte werden in einer Variablen mit dem praktischen Namen „posts“ gespeichert und zur Einbettung in den HTML-Code zurückgegeben (identifiziert als allposts), 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 im obigen whenPublished__lte verwendet, um ein Datenbankfeld (whenPublished) von einem Filter oder einer Operation (lte=kleiner als) zu trennen oder gleich).

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

Erstellen Sie eine Vorlage für unser erstes Projekt

Gemäß den im vorherigen Abschnitt angegebenen Anweisungen und Pfaden speichern wir unsere ursprüngliche Vorlage in myblog/templates/myblog. Das bedeutet, dass Sie ein Verzeichnis namens templates und ein Unterverzeichnis namens myblog erstellen müssen:


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

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

Darüber hinaus haben wir den Python-Code im HTML in geschweifte Klammern eingeschlossen. Bitte beachten Sie, dass wir für jedes Objekt vom Typ „Beitrag“ seinen Titel, sein Veröffentlichungsdatum und seinen Autor sowie schließlich seinen Text anzeigen. Schließlich sehen Sie in Rot, dass wir auf die über myblog/views.py zurückgegebenen Objekte verweisen:

Ok, hier ist die Datei posts.html:


<!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 Zeilenumbruchfilter verwendet, um Zeilenumbrüche im Klartext durch das entsprechende HTML-Äquivalent (
 oder

) zu ersetzen ), um jeden Beitrag richtig 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 in myblog eine Datei mit dem Namen urls.py und folgendem Inhalt:


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

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

Insbesondere stellt r'^$' eine leere Zeichenfolge dar, sodass, wenn wir unseren Browser auf http://ip-address:8000 (und nichts anderes) verweisen, die Die von der Variablen posts in views.py zurückgegebenen Daten (siehe vorheriger Abschnitt) werden auf unserer Homepage angezeigt:

Zu guter Letzt werden wir die Datei urls.py unserer Blog-Anwendung (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) in die Datei einbinden urls.py unseres Hauptprojekts (~/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')),
]

Dann starten wir den Webserver:


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

Wir sollten nun in der Lage sein, die Listen der zuvor erstellten Beiträge zu sehen:

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

Zusammenfassen

Sehen 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 werden. Andererseits definiert eine Vorlage die Benutzeroberfläche, auf der die von der Ansicht zurückgegebenen Daten angezeigt werden.

Nehmen wir an, wir möchten unser Modell ändern, indem wir ein Feld mit dem Namen summary zum Post-Objekt hinzufügen, in dem wir optional eine 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 erfahren 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 zu sehen:

2. Eine view-Funktion nimmt eine HTTP-Anfrage entgegen und gibt eine HTTP-Antwort zurück. In diesem Artikel ruft def posts(request) in views.py die zugrunde liegende Datenbank auf, um alle Beiträge abzurufen. Wenn wir alle Beiträge abrufen möchten, deren Titel das Wort „ansible“ enthält, 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

Falls 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 wirken mögen, kann ich Ihnen versichern, dass Django die Mühe wert ist, sich damit vertraut zu machen

Ich hoffe, dass das Beispiel, das wir in dieser Serie verwendet haben, um Ihnen dieses herausragende Web-Framework vorzustellen, Sie motivieren wird, 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 dabei zu lernen!

Sie können uns gerne über das untenstehende Formular eine Nachricht mit Fragen oder Anregungen zukommen lassen.