前の記事では、FastAPIブログのユーザーログインとセッション管理を完全に実装しました。これで、サーバーはユーザーのログイン状態を「記憶」し、認証が必要なページを保護できるようになりました。
ログインユーザーとゲストを区別できるようになったので、ブログにインタラクティブな機能を追加するのに最適な時期です。
この記事では、ブログの基本的かつ重要な機能であるコメントシステムを追加します。
具体的には、以下の機能を実装します。
- 各投稿の下にコメントリストを表示する。
- ログインしたユーザーが記事にコメントを投稿できるようにする。
ステップ 1: コメントのデータモデルを作成する
PostおよびUserモデルと同様に、Commentモデルにも独自のデータモデルとPostおよびUserとの関係性が必要です。
1. コメントモデルの作成
models.pyファイルを開き、Commentモデルを追加し、双方向の関係性を確立するためにUserおよびPostモデルを更新します。
ここでは3つのことを行いました。
content、createdAt、およびpostテーブルとuserテーブルを指す外部キーpostIdとuserIdを含むCommentモデルを作成しました。CommentモデルでRelationshipを使用して、PostおよびUserとの「many-to-one」リレーションシップを定義しました。UserおよびPostモデルに逆の「one-to-many」リレーションシップcommentsを追加しました。これにより、PostオブジェクトのすべてのコメントやUserオブジェクトが作成したすべてのコメントを簡単に取得できます。
main.pyでcreate_db_and_tables関数を構成したため、アプリケーション起動時にSQLModelモデルを自動的に検出し、対応するデータベーステーブルを作成または更新します。SQLを手動で実行する必要はありません。
手動でSQLを実行する必要がある場合、データベースがLeapcellで作成されている場合は、
そのグラフィカルインターフェイスを通じて簡単にSQLステートメントを実行できます。ウェブサイトのデータベース管理ページにアクセスし、上記のステートメントをSQLインターフェイスに貼り付けて実行します。
ステップ 2: コメントのビジネスロジックを実装する
次に、コメントの作成とクエリを処理する関数を作成します。
プロジェクトのルートディレクトリに新しいファイルcomments_service.pyを作成し、コメントに関連するビジネスロジックを格納します。
get_comments_by_post_id関数は、投稿の下にあるすべてのコメントを取得するために使用されます。create_commentは、新しいコメントをデータベースに保存するために使用されます。モデルでRelationshipを正しく設定したため、後でテンプレートでcomment.user.usernameを使用して、コメント投稿者のユーザー名を簡単にアクセスできます。
ステップ 3: コメントの送信と表示のためのルートを作成する
次に、コメント機能を投稿ページに統合する必要があります。これには、ユーザーが送信したコメントを受け取るバックエンドルートと、コメントを表示するために投稿詳細ページルートの更新の2つの部分が必要です。
1. コメントルートの作成
routrsフォルダに新しいファイルcomments.py`を作成します。
@@CODE_BLOCK2@@
このルートはPOSTリレーションシップのみを処理します。以前に作成したlogin_required依存関係を使用して保護し、ログインユーザーのみがコメントを投稿できるようにします。コメントが正常に作成された後、ページは元の投稿詳細ページにリダイレクトされます。
2. メインアプリケーションおよび投稿ルートの更新
まず、作成したコメントルーターをmain.pyにマウントしましょう。
@@CODE_BLOCK3@@
次に、routers/posts.pyのget_post_by_id関数を修正して、投稿詳細ページをレンダリングする際に、その投稿のすべてのコメントを取得して渡すようにします。
@@CODE_BLOCK4@@
ステップ 4: フロントエンドビューを更新する
最後のステップは、コメントリストとコメントフォームを表示するようにテンプレートファイルを変更することです。
templates/post.htmlを開き、投稿コンテンツの下、バックリンクの上に次のコードを追加します。
@@CODE_BLOCK5@@
{% for comment in comments %}を使用して、すべてのコメントをループして表示します。comment.user.usernameを通じて、コメント投稿者のユーザー名を直接表示できます。{% if user %}を使用してユーザーがログインしているかどうかを確認します。ログインしている場合はコメントフォームが表示され、そうでない場合はログインリンクが表示されます。
ページをより見栄え良くするには、public/css/style.cssにスタイルを追加できます。
実行とテスト
アプリケーションを再起動します。
ブラウザを開き、いずれかの投稿の詳細ページに移動します。新しいコメントセクションが表示されます。
コメントボックスに何か入力して送信します。ページがリフレッシュされた後、コメントリストに投稿したばかりのコメントが表示されます。
おめでとうございます。ブログにコメントシステムを正常に追加しました！
もちろん、現在のコメント機能はまだ非常に基本的です。次の記事では、作者がコメントに返信するロジックを実装して、この機能をさらに強化し、ブログのインタラクティブ性を次のレベルに引き上げます。
Xでフォローする：@LeapcellJP
関連記事：
