Einen großartigen Nest.js-Blog erstellen: Filtern nach Schlagwörtern

Im vorherigen Tutorial haben wir die Funktionalität zum Erstellen und Anzeigen von Schlagwörtern für unseren Blog hinzugefügt.

Als Nächstes werden wir den restlichen Teil der Schlagwort-Funktionalität vervollständigen: das Filtern von Beiträgen nach Schlagwörtern.

Wenn ein Benutzer auf einen Schlagwort-Link auf der Detailseite eines Beitrags klickt, müssen wir ihn zu einer Liste weiterleiten, die nur alle Beiträge zu diesem Schlagwort anzeigt. Dazu müssen wir neue Routen und eine entsprechende Logik im Backend erstellen und die entsprechende Ansicht im Frontend aufbauen.

Schritt 1: Service-Logik erweitern

Zuerst fügen wir unseren Diensten neue Methoden hinzu, um Beiträge nach Schlagwort-ID zu finden.

Öffnen Sie die Datei src/posts/posts.service.ts und fügen Sie den folgenden Inhalt hinzu:

// src/posts/posts.service.ts

// ... (andere Importe und Konstruktor)

async findByTag(tagId: string): Promise<Post[]> {
  return this.postsRepository
    .createQueryBuilder('post')
    .leftJoinAndSelect('post.tags', 'tag')
    .where('tag.id = :tagId', { tagId })
    .orderBy('post.createdAt', 'DESC')
    .getMany();
}

// ... (Rest der Datei)

Da findByTag eine Many-to-Many-Beziehung beinhaltet, verwenden wir createQueryBuilder, um die Zwischentabelle von Beiträgen und Schlagwörtern zu JOINen und nach tagId zu filtern.

Um den Namen des Schlagworts auf der Filterseite anzuzeigen, müssen wir TagsService eine einfache findOne-Methode hinzufügen.

// src/tags/tags.service.ts
async findOne(id: string): Promise<Tag | null> {
  return this.tagsRepository.findOneBy({ id });
}

Schritt 2: Controller und Route erstellen

Nun implementieren wir den Controller, der Anfragen an /tags/:id behandelt.

Controller-Logik schreiben

Erstellen Sie die entsprechende Controller-Datei:

nest generate controller tags

Öffnen Sie src/tags/tags.controller.ts und fügen Sie den folgenden Code hinzu:

// src/tags/tags.controller.ts
import { Controller, Get, Param, Render, Request } from '@nestjs/common';
import { TagsService } from './tags.service';
import { PostsService } from '../posts/posts.service';

@Controller('tags')
export class TagsController {
  constructor(private readonly tagsService: TagsService, private readonly postsService: PostsService) {}

  @Get(':id')
  @Render('posts-by-filter')
  async findPostsByTag(@Param('id') id: string, @Request() req) {
    const posts = await this.postsService.findByTag(id);
    const tag = await this.tagsService.findOne(id);
    return {
      posts,
      user: req.session.user,
      filterType: 'Tag',
      filterName: tag ? tag.name : 'Unknown',
    };
  }
}

Modulabhängigkeiten aktualisieren

Damit der obige Code korrekt funktioniert, müssen wir die Moduldateien aktualisieren, um die Abhängigkeiten zwischen den Diensten zu verwalten.

Da PostsService und TagsService voneinander abhängen, müssen wir forwardRef verwenden, um das Problem der zirkulären Abhängigkeit zu lösen.

Exportieren Sie zuerst PostsService, damit andere Module ihn verwenden können. Ändern Sie gleichzeitig, wie PostsModule auf TagsModule verweist.

// src/posts/posts.module.ts
import { Module, forwardRef } from '@nestjs/common';

// ...

@Module({
  imports: [
    TypeOrmModule.forFeature([Post]),
    CommentsModule,
    TrackingModule,
    forwardRef(() => TagsModule), // Verwenden Sie forwardRef, um zirkuläre Abhängigkeiten zu vermeiden
  ],
  // ...,
  exports: [PostsService], // PostsService exportieren
})
export class PostsModule {}

Importieren Sie dann PostsModule in TagsModule.

// src/tags/tags.module.ts
import { Module, forwardRef } from '@nestjs/common';
import { PostsModule } from '../posts/posts.module'; // importieren
//...

@Module({
  imports: [TypeOrmModule.forFeature([Tag]), forwardRef(() => PostsModule)], // Zu Imports hinzufügen
  controllers: [TagsController],
  providers: [TagsService],
})
export class TagsModule {}

Schritt 3: Frontend-Ansicht erstellen

Schließlich erstellen wir eine posts-by-filter.ejs-Ansichtsdatei im Ordner views. Diese Datei wird verwendet, um die Liste der nach Schlagwörtern gefilterten Beiträge anzuzeigen. Ihr Inhalt ist index.ejs sehr ähnlich.

Erstellen Sie die Datei views/posts-by-filter.ejs:

<%- include('_header', { title: `Posts in ${filterName}` }) %>

<div class="filter-header">
  <h2>Posts in Tag: <strong><%= filterName %></strong></h2>
</div>

<% if (posts.length > 0) { %>
<div class="post-list">
  <% posts.forEach(post => { %>
  <article class="post-item">
    <h2><a href="/posts/<%= post.id %>"><%= post.title %></a></h2>
    <p><%= post.content.substring(0, 150) %>...</p>
    <small><%= new Date(post.createdAt).toLocaleDateString() %></small>
  </article>
  <% })
  %>
</div>
<% } else { %>
<p>Keine Beiträge in diesem Schlagwort gefunden.</p>
<% }
%>

<a href="/" class="back-link" style="margin-top: 2rem;">&larr; Zurück zur Startseite</a>

<%- include('_footer') %>

Diese Vorlage zeigt dynamisch den Titel (z. B. „Beiträge im Schlagwort: Tutorial“) und die Liste der Beiträge an. Wenn keine Beiträge zu einem Schlagwort vorhanden sind, wird eine Meldung angezeigt.

Nun ist der gesamte Filtervorgang abgeschlossen. Wenn Sie die Anwendung neu starten und auf einen Schlagwort-Link auf der Detailseite eines Beitrags klicken, werden Sie zu der entsprechenden Filterseite weitergeleitet.

Ausführen und Testen

Starten Sie Ihre Anwendung neu:

npm run start:dev

Öffnen Sie Ihren Browser und besuchen Sie: http://localhost:3000/

Besuchen Sie einen Beitrag, der Schlagwörter enthält, und klicken Sie auf ein beliebiges Schlagwort.

Sie werden zur entsprechenden Filterseite des Schlagworts weitergeleitet und sehen eine Liste aller Beiträge zu diesem Schlagwort.

Durch diese beiden Tutorials haben wir unserem Blog ein vollständiges Schlagwortsystem hinzugefügt.

An dieser Stelle hat unser Blog-Projekt alles abgedeckt, von der grundlegenden Architektur über Kernfunktionalitäten bis hin zur Organisation von Inhalten und Datenanalyse.

Die detaillierten Funktionen eines Blogs sind endlos. Basierend auf dem aktuellen Framework können Sie weiterhin weitere Funktionen hinzufügen. Der Rest liegt Ihrer Vorstellungskraft!

Frühere Tutorials: