
前回の記事で、フォーラムのユーザーシステムを構築しました。これにより、ユーザーは登録、ログイン、および自分のIDの下での投稿が可能になりました。
しかし、投稿が公開された後、現在のところ変更することはできません。エラーを見つけたり、さらにコンテンツを追加したりしたい場合はどうすればよいでしょうか?
この記事では、新しい機能、つまりユーザーが作成した投稿を編集できるようにする機能を実装します。
ステップ1:投稿編集ページの作成
まず、ユーザーが投稿のタイトルとコンテンツを編集できる新しいHTMLページが必要です。このページは新しい投稿フォームと非常によく似ていますが、既存の投稿データで事前に埋め込まれます。
templatesフォルダにedit_post.htmlという名前の新しいファイルを作成します。
templates/edit_post.html
このテンプレートの核心は、titleとcontentの2つの入力フィールドを持つフォームです。Jinja2の{{ post.title }}と{{ post.content }}構文を使用して、バックエンドから渡された投稿データでフォームを事前に埋め込みます。
ステップ2:編集用のAPIルートの追加
次に、編集ロジックを処理するためにmain.pyに2つの新しいルートを追加する必要があります。main.pyファイルを開き、次のコードを追加します。
main.py(新しいルートの追加)
ここでは2つのルートを追加しました。
GET /posts/{post_id}/edit:このルートはURLからのpost_idに基づいてデータベースで投稿を検索します。次に、post.owner_idがcurrent_user.idと一致することを確認します。検証が成功した場合、edit_post.htmlテンプレートをレンダリングし、クエリされたpostオブジェクトを渡します。POST /posts/{post_id}/edit:このルートは、フォームから新しいtitleとcontentを受け取り、postオブジェクトの属性を更新します。この操作では、ログインステータスと投稿の所有権も検証します。
ステップ3:メインページにエントリーポイントを追加
ルートの準備ができました。次に、ユーザーが編集ページにアクセスできるように、投稿のエントリーポイントを追加する必要があります。
templates/posts.htmlファイルを変更します。
templates/posts.html(更新)
投稿情報の下にJinja2の条件文を追加しました。
{% if current_user and post.owner_id == current_user.id %}
現在のユーザーがログインしている場合(current_userが存在する)で、投稿のowner_idが現在のユーザーのidと一致する場合、「Edit」リンク(/posts/{{ post.id }}/editを指す)が表示されます。
これにより、ユーザーは自分の投稿にのみ編集ボタンが表示され、他人の投稿は編集できなくなります。
実行と検証
uvicornサーバーを再起動します。
http://127.0.0.1:8000にアクセスしてログインします。
以前に公開した投稿を見つけ、「Edit」リンクが表示されるはずです。他のユーザーの投稿には「Edit」リンクは表示されません。
「Edit」をクリックすると、投稿の元のタイトルとコンテンツで事前に埋め込まれた編集フォームにリダイレクトされます。
コンテンツを変更して「Update Post」をクリックします。ページはホームページにリダイレクトされ、投稿コンテンツが正常に更新されたことを確認できます。
プロジェクトのオンラインデプロイ
最初のチュートリアルと同様に、このステップの結果をオンラインにデプロイして、友人たちにプロジェクトの変更と進捗を体験してもらうことができます。
簡単なデプロイソリューションはLeapcellを使用することです。
以前にデプロイしたことがある場合は、コードをGitリポジトリにプッシュするだけで、Leapcellが最新のコードを自動的に再デプロイしてくれます。
Leapcellのデプロイサービスを初めて使用する場合は、こちらの記事のチュートリアルを参照してください。
まとめ
フォーラムに編集機能が追加され、より完全なものになりました。
投稿以外にも、フォーラムでのインタラクションは不可欠です。ユーザーは興味深い(または物議を醸す)投稿を見たとき、その下に自分の意見を共有したくなるでしょう。
次の記事では、フォーラムにインタラクティブな機能を追加します。投稿へのコメントと返信を実装し、ユーザーがそれらについて議論できるようにします。
Xでフォローする:@LeapcellJapan
関連記事:
