コンテンツにスキップ

FastAPIデスクトップツール-002

[質問]

（前回の続き） 削除機能、いいですね。付けてください。

[回答] Gemini

削除機能を追加しましょう！ 個人の日記やメモとして使う場合、間違えて投稿したものをサクッと消せると便利ですよね。

既存のコードに 「削除用エンドポイント（API）」 の追加と、「削除ボタン」 の設置を行います。

1. main.py への追加

投稿をIDで指定して削除する処理を追加します。

# 既存のインポートに加えて、redirectを追加（既にResponseで入っていますが一応）
from fastapi import HTTPException

# --- 既存のコードの下に追加 ---

@app.post("/delete/{post_id}")
def delete_post(post_id: int, db: Session = Depends(get_db)):
    post = db.query(models.Post).filter(models.Post.id == post_id).first()
    if not post:
        raise HTTPException(status_code=404, detail="Post not found")

    db.delete(post)
    db.commit()
    return responses.RedirectResponse(url="/", status_code=303)

2. templates/index.html の修正

各記事のフッター部分に「削除」ボタンを追加します。誤操作を防ぐために、少し小さめのデザインにしましょう。

<article>
    <header>
        <strong>{{ post.title }}</strong> 
        <small style="float: right;">{{ post.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
    </header>

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

    <footer>
        <form action="/delete/{{ post.id }}" method="post" style="margin: 0; text-align: right;">
            <button type="submit" class="outline secondary" 
                    style="padding: 2px 10px; font-size: 0.8rem; border-color: #e53935; color: #e53935;"
                    onclick="return confirm('本当に削除しますか？')">
                削除
            </button>
        </form>
    </footer>
</article>

3. 動作の仕組み

今回の修正で、データの流れは以下のようになります。

  1. HTML側: 各投稿に紐付いた post.id を使って /delete/1 のようなURLへフォームを送信します。
  2. JavaScript: onclick="return confirm(...)" を入れているので、ボタンを押した瞬間にブラウザの確認ダイアログが出ます。
  3. FastAPI側: 指定されたIDのデータをDBから探し、db.delete() で削除を実行します。
  4. リダイレクト: 削除完了後、再びトップページ（/）を表示して、一覧から消えていることを確認できます。

次のステップ：さらに使いやすくするには？

これで「書く・見る・消す」の基本が揃いました。次に欲しくなるとしたら、こんな機能でしょうか：

  • 編集機能: 誤字脱字を直せるようにする。
  • 検索機能: 過去の投稿をキーワードで探せるようにする。
  • 画像アップロード: 写真も一緒に投稿できるようにする。

どれか気になるものはありますか？あるいは、見た目をもっとオシャレにカスタマイズしたいなど、リクエストがあれば教えてください！