優れたNest.jsブログを構築する：タグでフィルタリング

前のチュートリアルでは、ブログのタグを作成および表示する機能を追加しました。

次に、タグ機能の残りの部分、つまりタグによる投稿のフィルタリングを完了します。

ユーザーが投稿詳細ページでタグリンクをクリックしたときに、そのタグの投稿のみを表示するリストページにユーザーをリダイレクトする必要があります。これを行うには、バックエンドに新しいルートと処理ロジックを作成し、フロントエンドに対応するビューを作成する必要があります。

ステップ1：サービスロジックの拡張

まず、タグIDで投稿を検索するための新しいメソッドをサービスに追加します。

src/posts/posts.service.tsファイルを開き、次のコンテンツを追加します：

findByTagは多対多の関係を伴うため、createQueryBuilderを使用して投稿とタグの中間テーブルをJOINし、tagIdでフィルタリングします。

フィルタリングページにタグ名を表示するには、TagsServiceに簡単なfindOneメソッドを追加する必要があります。

次に、/tags/:idリクエストを処理するコントローラーを実装します。

対応するコントローラーファイルを作成します：

src/tags/tags.controller.tsを開き、次のコードを追加します：

上記のコードが正しく機能するには、サービス間の依存関係を処理するためにモジュールファイルを更新する必要があります。

PostsServiceとTagsServiceは互いに依存しているため、循環依存の問題を解決するためにforwardRefを使用する必要があります。

まず、PostsServiceをエクスポートして、他のモジュールが使用できるようにします。同時に、PostsModuleがTagsModuleを参照する方法を変更します。

次に、TagsModuleにPostsModuleをインポートします。

最後に、viewsフォルダにposts-by-filter.ejsビューファイルを作成します。このファイルは、タグでフィルタリングされた投稿のリストを表示するために使用されます。その内容はindex.ejsと非常によく似ています。

views/posts-by-filter.ejsファイルを作成します：

このテンプレートは、タイトル（例：「Posts in Tag: Tutorial」）と投稿のリストを動的に表示します。タグの下に投稿がない場合は、メッセージが表示されます。

これで、フィルタリングプロセス全体が完了しました。アプリケーションを再起動して、投稿の詳細ページにあるタグリンクをクリックすると、対応するフィルタリングページにリダイレクトされます。

アプリケーションを再起動します：

ブラウザを開いて、にアクセスします。

タグが含まれている投稿にアクセスし、いずれかのタグをクリックします。

対応するタグのフィルタリングページにリダイレクトされ、そのタグの下にあるすべての投稿のリストが表示されます。

これらの2つのチュートリアルを通じて、ブログに完全なタギングシステムを追加しました。

この時点で、ブログプロジェクトは基本的なアーキテクチャからコア機能、コンテンツ編成、データ分析まで、すべてをカバーしています。

ブログの詳細機能は無限です。現在のフレームワークに基づいて、さらに機能を追加し続けることができます。残りはあなたの想像力次第です！

Leapcellへのデプロイをお忘れなく。Nest.jsのサポート、PostgreSQLデータベース、Redis、ウェブアナリティクスなど、ウェブアプリ開発に必要なツールがすべて揃っています。

過去のチュートリアル:

Xでフォローする：@LeapcellJP

関連記事：