Erstellen Sie Ihr eigenes Forum mit FastAPI: Schritt 5 – Bearbeiten von Beiträgen

Im vorherigen Artikel haben wir ein Benutzersystem für unser Forum erstellt. Nun können sich Benutzer registrieren, anmelden und Beiträge unter ihrer eigenen Identität veröffentlichen.

Sobald ein Beitrag jedoch veröffentlicht ist, kann er derzeit nicht geändert werden. Was ist, wenn Sie einen Fehler bemerken oder weitere Inhalte hinzufügen möchten?

In diesem Artikel implementieren wir eine neue Funktion: Benutzer können die von ihnen erstellten Beiträge bearbeiten.

Schritt 1: Erstellen der Beitragsbearbeitungsseite

Zuerst benötigen wir eine neue HTML-Seite, auf der Benutzer den Titel und Inhalt ihrer Beiträge ändern können. Diese Seite wird der Seite für neue Beiträge sehr ähnlich sein, aber sie wird bereits mit den vorhandenen Daten des Beitrags vorausgefüllt.

Erstellen Sie im Ordner templates eine neue Datei namens edit_post.html.

templates/edit_post.html

<!DOCTYPE html>
<html>
  <head>
    <title>Beitrag bearbeiten - Mein FastAPI Forum</title>
    <style>
      body {
        font-family: sans-serif;
        margin: 2em;
      }
      form {
        width: 500px;
        margin: 0 auto;
      }
      input,
      textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
      }
      button {
        padding: 10px 15px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
      }
      a {
        display: block;
        margin-top: 1em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Beitrag bearbeiten</h1>
    <form method="post">
      <input type="text" name="title" value="{{ post.title }}" required /><br />
      <textarea name="content" rows="10" required>{{ post.content }}</textarea
      ><br />
      <button type="submit">Beitrag aktualisieren</button>
    </form>
    <a href="/posts">Abbrechen</a>
  </body>
</html>

Der Kern dieser Vorlage ist ein Formular mit zwei Eingabefeldern: title und content. Wir verwenden die Jinja2-Syntax {{ post.title }} und {{ post.content }} , um das Formular mit den vom Backend übergebenen Beitragsdaten vorauszufüllen.

Schritt 2: Hinzufügen von API-Routen für die Bearbeitung

Als Nächstes müssen wir in main.py zwei neue Routen hinzufügen, um die Bearbeitungslogik zu handhaben. Öffnen Sie die Datei main.py und fügen Sie den folgenden Code hinzu:

main.py (Hinzufügen neuer Routen)

# ... (Vorherige Imports und app, templates Definitionen bleiben unverändert) ...

# --- Routen ---

# ... (Vorherige Routen wie /, /posts, /api/posts bleiben unverändert) ...

@app.get("/posts/{post_id}/edit", response_class=HTMLResponse)
async def get_edit_post_form(
    request: Request,
    post_id: int,
    db: AsyncSession = Depends(get_db),
    current_user: Optional[models.User] = Depends(get_current_user)
):
    if not current_user:
        return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)

    result = await db.execute(select(models.Post).where(models.Post.id == post_id))
    post = result.scalar_one_or_none()

    if not post:
        raise HTTPException(status_code=404, detail="Post not found")

    if post.owner_id != current_user.id:
        raise HTTPException(status_code=403, detail="Not authorized to edit this post")

    return templates.TemplateResponse("edit_post.html", {"request": request, "post": post})


@app.post("/posts/{post_id}/edit")
async def edit_post(
    post_id: int,
    title: str = Form(...),
    content: str = Form(...),
    db: AsyncSession = Depends(get_db),
    current_user: Optional[models.User] = Depends(get_current_user)
):
    if not current_user:
        return RedirectResponse(url="/login", status_code=status.HTTP_302_FOUND)

    result = await db.execute(select(models.Post).where(models.Post.id == post_id))
    post = result.scalar_one_or_none()

    if not post:
        raise HTTPException(status_code=404, detail="Post not found")

    if post.owner_id != current_user.id:
        raise HTTPException(status_code=403, detail="Not authorized to edit this post")

    post.title = title
    post.content = content
    await db.commit()

    return RedirectResponse(url="/posts", status_code=status.HTTP_303_SEE_OTHER)

# ... (Nachfolgende Routen wie /register, /login, /logout bleiben unverändert) ...

Hier haben wir zwei Routen hinzugefügt:

GET /posts/{post_id}/edit: Diese Route findet einen Beitrag in der Datenbank basierend auf der post_id aus der URL. Sie überprüft dann, ob die post.owner_id mit der current_user.id übereinstimmt. Wenn die Validierung erfolgreich ist, rendert sie die Vorlage edit_post.html und übergibt das abgefragte post-Objekt daran.
POST /posts/{post_id}/edit: Diese Route empfängt den neuen title und content aus dem Formular und aktualisiert die Attribute des post-Objekts. Diese Operation validiert auch den Anmeldestatus und das Beitrags-Eigentum.

Schritt 3: Einen Einstiegspunkt auf der Hauptseite hinzufügen

Die Routen sind bereit. Als Nächstes müssen wir einen Einstiegspunkt für Beiträge hinzufügen, damit Benutzer auf die Bearbeitungsseite zugreifen können.

Ändern Sie die Datei templates/posts.html.

templates/posts.html (Aktualisiert)

... (Dateiheader und Stylesheet bleiben unverändert) ...
<body>
    ... (Header und Abschnitte für neue Beiträge bleiben unverändert) ...

    <hr />
    <h2>Beitragsliste</h2>

    {% for post in posts %}
    <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
      <h3>{{ post.title }}</h3>
      <p>{{ post.content }}</p>
      <small>Autor: {{ post.owner.username if post.owner else 'Unbekannt' }}</small>

      {% if current_user and post.owner_id == current_user.id %}
      <div style="margin-top: 10px;">
        <a href="/posts/{{ post.id }}/edit">Bearbeiten</a>
      </div>
      {% endif %}
    </div>
    {% endfor %}
</body>
</html>

Wir haben eine Jinja2-bedingte Anweisung unterhalb der Beitragsinformationen hinzugefügt: {% if current_user and post.owner_id == current_user.id %}

Wenn der aktuelle Benutzer angemeldet ist (current_user existiert) und die owner_id des Beitrags mit der id des aktuellen Benutzers übereinstimmt, wird ein "Bearbeiten"-Link angezeigt, der auf /posts/{{ post.id }}/edit verweist.

Auf diese Weise sehen Benutzer den Bearbeiten-Button nur bei ihren eigenen Beiträgen und können keine Beiträge anderer bearbeiten.

Ausführen und Überprüfen

Starten Sie Ihren uvicorn-Server neu:

 uvicorn main:app --reload

Besuchen Sie http://127.0.0.1:8000 und melden Sie sich an.

Suchen Sie einen Beitrag, den Sie zuvor veröffentlicht haben, und Sie sehen darunter einen „Bearbeiten“-Link. Für Beiträge anderer Benutzer sehen Sie den „Bearbeiten“-Link nicht.

Klicken Sie auf „Bearbeiten“, und die Seite wird zum Bearbeitungsformular weitergeleitet, das mit dem ursprünglichen Titel und Inhalt des Beitrags vorausgefüllt ist.

Ändern Sie den Inhalt und klicken Sie auf „Beitrag aktualisieren“. Die Seite wird zur Homepage zurückgeleitet, wo Sie sehen, dass der Beitrag erfolgreich aktualisiert wurde.

Das Projekt online bereitstellen

Genau wie im ersten Tutorial können Sie die Ergebnisse dieses Schritts online bereitstellen, damit Ihre Freunde die Änderungen und den Fortschritt Ihres Projekts erleben können.

Eine einfache Bereitstellungslösung ist die Verwendung von Leapcell.

Wenn Sie bereits bereitgestellt haben, pushen Sie einfach den Code in Ihr Git-Repository, und Leapcell wird den neuesten Code automatisch für Sie neu bereitstellen.

Wenn Sie den Bereitstellungsdienst von Leapcell noch nicht genutzt haben, können Sie das Tutorial in diesem Artikel konsultieren.

Zusammenfassung

Nachdem das Forum nun eine Bearbeitungsfunktion hat, ist es vollständiger geworden.

Neben dem Posten ist Interaktion für ein Forum unerlässlich. Wenn Benutzer einen interessanten (oder kontroversen) Beitrag sehen, möchten sie darunter ihre Meinung äußern.

Im nächsten Artikel fügen wir dem Forum eine interaktive Funktion hinzu: Kommentare und Antworten zu Beiträgen implementieren, damit Benutzer Diskussionen dazu führen können.