Views und Templates — Rendern der Artikelliste

In diesem Kapitel lernst du, Django-Views zu verwenden, um Daten aus der Datenbank abzurufen und zusammen mit Templates die Liste der Artikelkarten auf der Blog-Startseite zu rendern.

Die Rolle von Views (View)

Views sind Djangos zentrale Logikschicht und zuständig für:

Benutzeranfragen entgegennehmen (requestparameter)
Abfragen der benötigten Daten aus der Datenbank
Übergeben von Daten an Templates zum Rendern von HTML und Rückgabe an den Benutzer.

Django-Views können auf zwei Arten geschrieben werden:Funktionsbasierte View (FBV)und klassenbasierte Views (CBV).

In den ersten acht Kapiteln priorisieren wir FBV (funktionsbasierte Views)—dies ist intuitiver und besser für Anfänger geeignet, den Anfrageverarbeitungsprozess zu verstehen.

Grundlagen der Funktions-Views

Eine Django-View-Funktion empfängtrequestParameter und RückgabewerteHttpResponseObjekt.

Beispiel

# Dateipfad: blog/views.py
from django.shortcuts import render
from .models import Post

def index(request):
"""Blog-Startseite: zeigt alle Artikel an"""
# Alle Artikel aus der Datenbank abfragen (in umgekehrter chronologischer Reihenfolge)
posts = Post.objects.all().order_by('-created_at')

# Die drei Parameter von render:
# 1. request — Request-Objekt
# 2. Template-Pfad — blog/index.html
# 3. Kontextwörterbuch — Daten, die an das Template übergeben werden
context = {
'posts': posts,
'title': 'EXAMPLE Blog - Startseite'
}
return render(request, 'blog/index.html', context)

render()Es ist die am häufigsten verwendete Shortcut-Funktion in Django, die kombiniert: Templates laden → Daten injizieren → HTML generieren → Antworten zurückgeben.

Django-Template-Syntax

Die Django-Template-Syntax ist der Vue3-Template-Syntax sehr ähnlich, aber es gibt einige wichtige Unterschiede.

Zweck	Django-Templates	Vue3-Template
Ausgabevariablen	`{{ variable }}`	`{{ variable }}`
Schleifen	`{% for item in list %}...{% endfor %}`	`v-for="item in list"`
Bedingungen	`{% if cond %}...{% endif %}`	`v-if="cond"`
URL-Generierung	`{% url 'name' %}`	`router-link to="name"`
Layout erben	`{% extends 'base.html' %}`	Komponentenverschachtelung

Hauptunterschied: Django-Templates verwenden{% %}Umschließende Steuer-Tags; Vue3 verwendetv-Direktiven. In Django-Templates erfolgtServerseitigesRendering – HTML wird generiert und dann an den Browser gesendet; Vue3 führtBrowser-seitigesRendering durch – der Browser empfängt JS und setzt dann das HTML zusammen.

Template-Vererbung: base.html

Wenn mehrere Seiten dieselbe Navigationsleiste und Fußzeile teilen, verwenden SieTemplate-Vererbung, um Duplikate zu vermeiden.

Das übergeordnete Template definiert Blöcke, und untergeordnete Templates füllen bestimmte Inhalte ein.

Erstellen Sie das übergeordnete Template base.html

Beispiel

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}EXAMPLE Blog{% endblock %}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
.navbar {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 40px; background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.navbar .logo { font-size: 22px; font-weight: bold; color: #2c3e50; text-decoration: none; }
.navbar a { margin-left: 20px; text-decoration: none; color: #333; }
.container { max-width: 960px; margin: 40px auto; padding: 0 20px; }
.footer { text-align: center; padding: 20px; color: #999; border-top: 1px solid #eee; }
.section-title { font-size: 24px; margin-bottom: 20px; }
</style>
{% block extra_head %}{% endblock %}
</head>
<body>

<header class="navbar">
<a href="/" class="logo">BEISPIEL Blog</a>
<nav>
<a href="/">Startseite</a>
<a href="#">Über uns</a>
</nav>
</header>


<main class="container">
{% block content %}
{% endblock %}
</main>


<footer class="footer">
<p>© 2024 BEISPIEL Blog. Bereitgestellt von Django.</p>
</footer>
</body>
</html>

Erstelle das untergeordnete Template index.html

Beispiel

{% extends 'blog/base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<h2 class="section-title">Neueste Artikel</h2>

{% if posts %}
<div class="article-grid">
{% for post in posts %}
<div class="article-card">
<div class="card-content">
<span class="card-category">{{ post.category.name }}</span>
<h3>{{ post.title }}</h3>
<p>{{ post.summary|truncatechars:80 }}</p>
<span class="card-date">{{ post.created_at|date:"Y-m-d" }}</span>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="empty-tip">Noch keine Artikel vorhanden, bitte dranbleiben.</p>
{% endif %}
{% endblock %}

Mehrere Wissenspunkte, die in Templates verwendet werden:

Syntax	Bedeutung
`{% extends 'blog/base.html' %}`	Die Vererbung des übergeordneten Templates muss in der ersten Zeile stehen.
`{% block content %}...{% endblock %}`	Fülle den im übergeordneten Template definierten Inhaltsblock aus.
`{{ post.category.name }}`	Zugriff auf die Eigenschaften verwandter Objekte über Fremdschlüssel
`{{ post.summary\|truncatechars:80 }}`	Filter: auf die ersten 80 Zeichen kürzen
`{{ post.created_at\|date:"Y-m-d" }}`	Filter: Datum formatieren

In Django-Templates,FilterPipe-Symbol verwenden|Gibt an, nach einer Variable platziert, für formatierte Ausgabe verwendet. Häufige Filter:date、truncatechars、length、default。

Stile zur Artikelliste hinzufügen

Fügen Sie das folgende CSS zum style-Tag in base.html hinzu:

Beispiel

/* Layout des Artikelkarten-Rasters */
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}

.article-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.card-content {
padding: 20px;
}

.card-category {
display: inline-block;
padding: 2px 10px;
background: #E8EEF5;
color: #3D71A6;
border-radius: 12px;
font-size: 12px;
margin-bottom: 8px;
}

.article-card h3 {
font-size: 18px;
margin-bottom: 8px;
color: #222;
}

.article-card p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 12px;
}

.card-date {
font-size: 12px;
color: #999;
}

.empty-tip {
text-align: center;
color: #999;
padding: 60px 0;
font-size: 16px;
}

Praktische Übung: Überprüfe den Effekt der Startseite

Stelle sicher, dass die folgenden Punkte erledigt sind:

Die Modelle Post und Category sind in models.py definiert und wurden migriert
Mindestens 3-5 Artikel wurden im Admin-Backend angelegt (verschiedenen Kategorien zugewiesen).
Die Funktion index in views.py fragt Artikel aus der Datenbank ab und übergibt sie an das Template.
Die Route / in urls.py verweist auf die index-View

Starte den Server und besuche die Startseite. Du solltest die Liste der Artikelkarten sehen, die dynamisch aus Datenbankdaten gerendert wird.

Kapitelzusammenfassung

In diesem Kapitel hast du das Kernzusammenspiel von Django-Views und -Templates gemeistert: views.py fragt Daten aus der Datenbank ab und übergibt sie an den Kontext, render() rendert Templates, das übergeordnete Template base.html definiert Layout + Blöcke, untergeordnete Templates erweitern und füllen Inhalte ein, Django-Template-Syntax ({{ }}, {% %}, Filter).

Die Blog-Startseite ist jetzt datenbankgestützt und nicht mehr hartcodiert.

Weitere Erweiterungen

Praxisprojekt

Views und Templates — Rendern der Artikelliste

Die Rolle von Views (View)

Grundlagen der Funktions-Views

Beispiel

Django-Template-Syntax

Template-Vererbung: base.html

Erstellen Sie das übergeordnete Template base.html

Beispiel

Erstelle das untergeordnete Template index.html

Beispiel

Stile zur Artikelliste hinzufügen

Beispiel

Praktische Übung: Überprüfe den Effekt der Startseite

Kapitelzusammenfassung