So erstellen Sie ein Blog mit Nest.js, MongoDB und Vue.js

Der Autor hatSoftware in the Public Interest Inc ausgewählt, um eine Spende im Rahmen desWrite for DOnations-Programms zu erhalten.

Einführung

Nest.js ist ein skalierbares, serverseitiges JavaScript-Framework, das mit TypeScript erstellt wurde und die Kompatibilität mit JavaScript beibehält. Dies macht es zu einem effektiven Tool zum Erstellen effizienter und zuverlässiger Back-End-Anwendungen. Es verfügt über eine modulare Architektur, die der Entwicklungswelt von Node.j ein ausgereiftes, strukturelles Entwurfsmuster bietet.

Vue.js ist ein Front-End-JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es verfügt über eine einfache, aber sehr leistungsstarke API bei hervorragender Leistung. Vue.js is capable of powering the front-end layer and logic of any web application irrespective of the size. Die einfache Integration in andere Bibliotheken oder bestehende Projekte macht es zur perfekten Wahl für die meisten modernen Webanwendungen.

In diesem Lernprogramm erstellen Sie eine Nest.js-Anwendung, um sich mit den Bausteinen und den Grundprinzipien der Erstellung moderner Webanwendungen vertraut zu machen. Sie nähern sich diesem Projekt, indem Sie die Anwendung in zwei verschiedene Abschnitte unterteilen: das Frontend und das Backend. Zunächst konzentrieren Sie sich auf die mit Nest.js erstellte RESTful-Back-End-API. Sie konzentrieren sich dann auf das Frontend, das Sie mit Vue.js erstellen. Beide Anwendungen werden auf verschiedenen Ports ausgeführt und fungieren als separate Domänen.

Sie erstellen eine Blog-Anwendung, mit der Benutzer einen neuen Beitrag erstellen und speichern, die gespeicherten Beiträge auf der Startseite anzeigen und andere Vorgänge wie das Bearbeiten und Löschen von Beiträgen ausführen können. Darüber hinaus verbinden Sie Ihre Anwendung und speichern ihre Daten mitMongoDB, einer schemalosen NoSQL-Datenbank, die JSON-Dokumente empfangen und speichern kann. Dieses Tutorial konzentriert sich auf die Erstellung Ihrer Anwendung in einer Entwicklungsumgebung. In einer Produktionsumgebung sollten Sie auch die Benutzerauthentifizierung für Ihre Anwendung in Betracht ziehen.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie:

Eine lokale Installation vonNode.js (mindestens v6) undnpm (mindestens v5.2). Node.js is a JavaScript run-time environment that allows you to run your code outside of the browser. Es wird mit einem vorinstallierten Paketmanager namensnpm geliefert, mit dem Sie Pakete installieren und aktualisieren können. Um diese unter macOS oder Ubuntu 18.04 zu installieren, befolgen Sie die Schritte inHow to Install Node.js and Create a Local Development Environment on macOS oder den Abschnitt „Installieren mit einem PPA“ inHow To Install Node.js on Ubuntu 18.04.
MongoDB auf Ihrem Computer installiert. Befolgen Sie die Anweisungenhere, um es herunterzuladen und für das von Ihnen gewählte Betriebssystem zu installieren. Um MongoDB erfolgreich zu installieren, können Sie es entweder mithilfe vonHomebrew aufMac installieren oder vonMongoDB website. herunterladen
Grundlegendes Verständnis von TypeScript undJavaScript.
Ein installierter Texteditor, z. B.Visual Studio Code,Atom oderSublime Text.

[.note] #Note: In diesem Lernprogramm wird ein MacOS-Computer für die Entwicklung verwendet. Wenn Sie ein anderes Betriebssystem verwenden, müssen Sie möglicherweisesudo fürnpm-Befehle im gesamten Lernprogramm verwenden.
#

[[Schritt-1 - Installieren von Nest-js-und-anderen-Abhängigkeiten]] == Schritt 1 - Installieren von Nest.js und anderen Abhängigkeiten

In diesem Abschnitt werden Sie mit Nest.js beginnen, indem Sie die Anwendung und die erforderlichen Abhängigkeiten von Ihrem lokalen Computer installieren. Sie können Nest.js einfach installieren, indem Sie entweder die von Nest.js bereitgestelltenCLI verwenden oder das Starterprojekt von GitHub installieren. In diesem Lernprogramm richten Sie die Anwendung über die CLI ein. Führen Sie zunächst den folgenden Befehl auf dem Terminal aus, um es global auf Ihrem Computer zu installieren:

npm i -g @nestjs/cli

Sie sehen eine Ausgabe ähnlich der folgenden:

Output@nestjs/[email protected]
added 220 packages from 163 contributors in 49.104s

Führen Sie den folgenden Befehl auf Ihrem Terminal aus, um die Installation der Nest-CLI zu bestätigen:

nest --version

Sie erhalten eine Ausgabe mit der aktuellen Version, die auf Ihrem Computer installiert ist:

Output5.8.0

Sie verwenden den Befehlnest, um Ihr Projekt zu verwalten und relevante Dateien zu generieren - wie den Controller, die Module und die Anbieter.

Um das Projekt für dieses Lernprogramm zu starten, erstellen Sie mit dem Befehlnest ein neues Nest.js-Projekt mit dem Namenblog-backend, indem Sie den folgenden Befehl von Ihrem Terminal aus ausführen:

nest new blog-backend

Unmittelbar nach dem Ausführen des Befehls werden Sie vonnest aufgefordert, einige grundlegende Informationen wiedescription,version undauthor anzugeben. Machen Sie weiter und geben Sie die entsprechenden Details an. Drücken SieENTER auf Ihrem Computer, um fortzufahren, nachdem Sie auf jede Eingabeaufforderung reagiert haben.

Als Nächstes wählen Sie einen Paketmanager. Wählen Sie für dieses Lernprogrammnpm aus und drücken SieENTER, um die Installation von Nest.js zu starten.

Alt Creating a Nest project

Dadurch wird ein neues Nest.js-Projekt in einemblog-backend-Ordner in Ihrem lokalen Entwicklungsordner generiert.

Navigieren Sie anschließend von Ihrem Terminal zum neuen Projektordner:

cd blog-backend

Führen Sie den folgenden Befehl aus, um andere Serverabhängigkeiten zu installieren:

npm install --save @nestjs/mongoose mongoose

Sie haben@nestjs/mongoose installiert, ein spezielles Nest.js-Paket für ein Objektmodellierungswerkzeug für MongoDB, undmongoose, ein Paket für Mongoose.

Jetzt starten Sie die Anwendung mit dem folgenden Befehl:

npm run start

Wenn Sie nun von Ihrem bevorzugten Browser zuhttp://localhost:3000 navigieren, wird Ihre Anwendung ausgeführt.

Alt Welcome page of the fresh installation of Nest.js application

Sie haben das Projekt erfolgreich generiert, indem Sie die Verfügbarkeit des Befehls Nest CLI genutzt haben. Anschließend haben Sie die Anwendung ausgeführt und über den Standardport3000 auf Ihrem lokalen Computer darauf zugegriffen. Im nächsten Abschnitt werden Sie die Anwendung weiterentwickeln, indem Sie die Konfiguration für die Datenbankverbindung einrichten.

[[Schritt 2 - Konfigurieren und Verbinden mit der Datenbank]] == Schritt 2 - Konfigurieren und Verbinden mit der Datenbank

In diesem Schritt konfigurieren und integrieren Sie MongoDB in Ihre Nest.js-Anwendung. Sie werden MongoDB verwenden, um Daten für Ihre Anwendung zu speichern. MongoDB speichert seine Daten indocuments alsfield : value Paare. Für den Zugriff auf diese Datenstruktur verwenden SieMongoose. Hierbei handelt es sich um eine Objektdokumentmodellierung (ODM), mit der Sie Schemas definieren können, die die Datentypen darstellen, die in einer MongoDB-Datenbank gespeichert sind.

Öffnen Sie zum Starten von MongoDB ein separates Terminalfenster, damit die Anwendung weiter ausgeführt werden kann, und führen Sie dann den folgenden Befehl aus:

sudo mongod

Dadurch wird der MongoDB-Dienst gestartet und die Datenbank im Hintergrund Ihres Computers ausgeführt.

Öffnen Sie das Projektblog-backend in Ihrem Texteditor und navigieren Sie zu./src/app.module.ts. Sie können eine Verbindung zur Datenbank herstellen, indem Sie die installiertenMongooseModule in den StammApplicationModule aufnehmen. Aktualisieren Sie dazu den Inhalt inapp.module.ts mit den folgenden hervorgehobenen Zeilen:

~/blog-backend/src/app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { MongooseModule } from '@nestjs/mongoose';

@Module({
  imports: [
    MongooseModule.forRoot('mongodb://localhost/nest-blog', { useNewUrlParser: true }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

In dieser Datei verwenden Sie die MethodeforRoot(), um die Verbindung zur Datenbank herzustellen. Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Damit haben Sie die Datenbankverbindung mit dem Mongoose-Modul für MongoDB eingerichtet. Im nächsten Abschnitt erstellen Sie ein Datenbankschema mit der Mongoose-Bibliothek, einer TypeScript-Schnittstelle und einem DTO-Schema (Data Transfer Object).

[[Schritt 3 - Erstellen eines Datenbankschemas - Schnittstellen und dto]] == Schritt 3 - Erstellen eines Datenbankschemas, von Schnittstellen und eines DTO

In diesem Schritt erstellen Sie mit Mongooseschema,interface unddata transfer object für Ihre Datenbank. Mongoose hilft bei der Verwaltung der Beziehungen zwischen Daten und bietet eine Schemaüberprüfung für Datentypen. Um die Struktur und den Datentyp der Daten in der Datenbank Ihrer Anwendung zu definieren, erstellen Sie Dateien, die Folgendes bestimmen:

database schema: Dies ist eine Organisation von Daten als Blaupause zum Definieren der Struktur und der Datentypen, die die Datenbank speichern muss.
interfaces: TypeScript-Schnittstellen werden zur Typprüfung verwendet. Hiermit können Sie die Datentypen definieren, die für eine Anwendung übergeben werden sollen.
data transfer object: Dies ist ein Objekt, das definiert, wie Daten über das Netzwerk gesendet werden und die Daten zwischen Prozessen übertragen.

Kehren Sie zunächst zu Ihrem Terminal zurück, auf dem die Anwendung gerade ausgeführt wird, und stoppen Sie den Vorgang mitCTRL + C. Navigieren Sie dann zum Ordner./src/:

cd ./src/

Erstellen Sie dann ein Verzeichnis mit dem Namenblog und einen Ordnerschemas darin:

mkdir -p blog/schemas

Erstellen Sie im Ordnerschemas eine neue Datei mit dem Namenblog.schema.ts und öffnen Sie sie mit Ihrem Texteditor. Fügen Sie dann den folgenden Inhalt hinzu:

~/blog-backend/src/blog/schemas/blog.schema.ts

import * as mongoose from 'mongoose';

export const BlogSchema = new mongoose.Schema({
    title: String,
    description: String,
    body: String,
    author: String,
    date_posted: String
})

Hier haben Sie Mongoose verwendet, um den Datentyp zu definieren, den Sie in der Datenbank speichern. Sie haben festgelegt, dass in allen Feldern nur Zeichenfolgenwerte gespeichert und akzeptiert werden. Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

Nachdem Sie das Datenbankschema festgelegt haben, können Sie mit dem Erstellen der Schnittstellen fortfahren.

Navigieren Sie zunächst zurück in den Ordnerblog:

cd ~/blog-backend/src/blog/

Erstellen Sie einen neuen Ordner mit dem Nameninterfaces und verschieben Sie ihn:

mkdir interfaces

Erstellen Sie im Ordnerinterfaces eine neue Datei mit dem Namenpost.interface.ts und öffnen Sie sie mit Ihrem Texteditor. Fügen Sie den folgenden Inhalt hinzu, um die Datentypen fürPost zu definieren:

~/blog-backend/src/blog/interfaces/post.interface.ts

import { Document } from 'mongoose';

export interface Post extends Document {
    readonly title: string;
    readonly description: string;
    readonly body: string;
    readonly author: string;
    readonly date_posted: string
}

In dieser Datei haben Sie die Datentypen für einenPost-Typ erfolgreich als Zeichenfolgenwerte definiert. Speichern und schließen Sie die Datei.

Da Ihre Anwendung die Funktion zum Posten von Daten in der Datenbank ausführt, erstellen Sie ein Datenübertragungsobjekt, das definiert, wie Daten über das Netzwerk gesendet werden.

Erstellen Sie dazu einen Ordnerdto im Ordner./src/blog. Erstellen Sie im neu erstellten Ordner eine weitere Datei mit dem Namencreate-post.dto.ts

Navigieren Sie zurück in den Ordnerblog:

cd ~/blog-backend/src/blog/

Erstellen Sie dann einen Ordner mit dem Namendto und verschieben Sie ihn:

mkdir dto

Erstellen Sie im Ordnerdto eine neue Datei mit dem Namencreate-post.dto.ts und öffnen Sie sie mit Ihrem Texteditor, um den folgenden Inhalt hinzuzufügen:

~/blog-backend/src/blog/dto/create-post.dto.ts

export class CreatePostDTO {
    readonly title: string;
    readonly description: string;
    readonly body: string;
    readonly author: string;
    readonly date_posted: string
}

Sie haben jede der einzelnen Eigenschaften in der KlasseCreatePostDTOmit einem Datentyp vonstringund alsreadonlymarkiert, um unnötige Mutationen zu vermeiden. Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.

In diesem Schritt haben Sie ein Datenbankschema für die Datenbank, eine Schnittstelle und ein Datenübertragungsobjekt für die Daten erstellt, die in Ihrer Datenbank gespeichert werden. Als Nächstes generieren Sie ein Modul, einen Controller und einen Service für Ihr Blog.

[[Schritt 4 - Erstellen des Modul-Controllers und -Dienstes für das Blog]] == Schritt 4 - Erstellen des Moduls, des Controllers und des Dienstes für das Blog

In diesem Schritt werden Sie die vorhandene Struktur der Anwendung verbessern, indem Sie ein Modul für Ihr Blog erstellen. Dieses Modul organisiert die Dateistruktur Ihrer Anwendung. Als Nächstes erstellen Sie einen Controller, der Routen verarbeitet und HTTP-Anforderungen vom Client verarbeitet. Zum Abschluss richten Sie einen Service ein, der die gesamte Geschäftslogik verarbeitet, die für den Controller der Anwendung zu komplex ist, um sie zu verarbeiten.

Modul generieren

Ähnlich wie das Angular-Front-End-Webframework verwendet Nest.js eine modulare Syntax. Nest.js applications have a modular design; it comes installed with a single root module, which is often sufficient for a small application. Wenn eine Anwendung jedoch wächst, empfiehlt Nest.js eine Organisation mit mehreren Modulen, bei der der Code in verwandte Funktionen aufgeteilt wird.

Einmodule in Nest.js wird vom Dekorator@Module()identifiziert und nimmt ein Objekt mit Eigenschaften wiecontrollers undproviders auf. Jede dieser Eigenschaften benötigt ein Array voncontrollers bzw.providers.

Sie generieren ein neues Modul für diese Blog-Anwendung, um die Struktur übersichtlicher zu gestalten. Führen Sie zunächst den folgenden Befehl aus, der sich noch im Ordner~/blog-backendbefindet:

nest generate module blog

Sie sehen eine Ausgabe ähnlich der folgenden:

OutputCREATE /src/blog/blog.module.ts

UPDATE /src/app.module.ts

Der Befehl hat ein neues Modul mit dem Namenblog.module.ts für die Anwendung generiert und das neu erstellte Modul in das Stammmodul für die Anwendung importiert. Auf diese Weise erkennt Nest.js neben dem Root-Modul noch ein weiteres Modul.

In dieser Datei sehen Sie den folgenden Code:

~/blog-backend/src/blog/blog.module.ts

import { Module } from '@nestjs/common';

@Module({})
export class BlogModule {}

Sie werden dieseBlogModule später im Lernprogramm mit den erforderlichen Eigenschaften aktualisieren. Speichern und schließen Sie die Datei.

Service generieren

Einservice, das in Nest.js auch als Anbieter bezeichnet werden kann, wurde entwickelt, um Logik von Controllern zu entfernen, die nur HTTP-Anforderungen verarbeiten und komplexere Aufgaben an Dienste umleiten sollen. Services sind einfache JavaScript-Klassen mit einem@Injectable()-Dekorator darüber. Führen Sie zum Generieren eines neuen Dienstes den folgenden Befehl vom Terminal aus aus, während Sie sich noch im Projektverzeichnis befinden:

nest generate service blog

Sie sehen eine Ausgabe ähnlich der folgenden:

Output  CREATE /src/blog/blog.service.spec.ts (445 bytes)

CREATE /src/blog/blog.service.ts (88 bytes)

UPDATE /src/blog/blog.module.ts (529 bytes)

Der hier verwendete Befehlnest hat eineblog.service.spec.ts-Datei erstellt, die Sie zum Testen verwenden können. Außerdem wurde eine neueblog.service.ts-Datei erstellt, die die gesamte Logik für diese Anwendung enthält und das Hinzufügen und Abrufen von Dokumenten zur MongoDB-Datenbank übernimmt. Außerdem wurde der neu erstellte Dienst automatisch importiert und zu blog.module.ts hinzugefügt.

Der Service verarbeitet die gesamte Logik in der Anwendung, ist für die Interaktion mit der Datenbank verantwortlich und gibt die entsprechenden Antworten an den Controller zurück. Öffnen Sie dazu die Dateiblog.service.tsin Ihrem Texteditor und ersetzen Sie den Inhalt durch den folgenden:

~/blog-backend/src/blog/blog.service.ts

import { Injectable } from '@nestjs/common';
import { Model } from 'mongoose';
import { InjectModel } from '@nestjs/mongoose';
import { Post } from './interfaces/post.interface';
import { CreatePostDTO } from './dto/create-post.dto';

@Injectable()
export class BlogService {

    constructor(@InjectModel('Post') private readonly postModel: Model) { }

    async getPosts(): Promise {
        const posts = await this.postModel.find().exec();
        return posts;
    }

    async getPost(postID): Promise {
        const post = await this.postModel
            .findById(postID)
            .exec();
        return post;
    }

    async addPost(createPostDTO: CreatePostDTO): Promise {
        const newPost = await this.postModel(createPostDTO);
        return newPost.save();
    }

    async editPost(postID, createPostDTO: CreatePostDTO): Promise {
        const editedPost = await this.postModel
            .findByIdAndUpdate(postID, createPostDTO, { new: true });
        return editedPost;
    }

    async deletePost(postID): Promise {
        const deletedPost = await this.postModel
            .findByIdAndRemove(postID);
        return deletedPost;
    }

}

In dieser Datei haben Sie zuerst das erforderliche Modul aus@nestjs/common,mongoose und@nestjs/mongoose importiert. Sie haben auch eine Schnittstelle mit dem NamenPost und ein DatenübertragungsobjektCreatePostDTO importiert.

Inconstructor haben Sie@InjectModel('Post') hinzugefügt, wodurch dasPost-Modell in dieseBlogService-Klasse eingefügt wird. Mit diesem injizierten Modell können Sie jetzt alle Posts abrufen, einen einzelnen Post abrufen und andere datenbankbezogene Aktivitäten ausführen.

Als Nächstes haben Sie die folgenden Methoden erstellt:

getPosts(): Zum Abrufen aller Beiträge aus der Datenbank.
getPost(): Zum Abrufen eines einzelnen Beitrags aus der Datenbank.
addPost(): um einen neuen Beitrag hinzuzufügen.
editPost(): um einen einzelnen Beitrag zu aktualisieren.
deletePost(): um einen bestimmten Beitrag zu löschen.

Speichern und beenden Sie die Datei, wenn Sie fertig sind.

Sie haben mehrere Methoden eingerichtet und erstellt, die für die ordnungsgemäße Interaktion mit der MongoDB-Datenbank über die Back-End-API zuständig sind. Jetzt erstellen Sie die erforderlichen Routen, die HTTP-Aufrufe von einem Front-End-Client verarbeiten.

Controller generieren

Im Nest. js,controllers sind dafür verantwortlich, eingehende Anforderungen von der Clientseite einer Anwendung zu verarbeiten und die entsprechende Antwort zurückzugeben. Ähnlich wie bei den meisten anderen Webframeworks ist es wichtig, dass die Anwendung auf eine Anfrage wartet und darauf reagiert.

Um alle HTTP-Anforderungen für Ihre Blog-Anwendung zu erfüllen, verwenden Sie den Befehlnest, um eine neue Controller-Datei zu generieren. Stellen Sie sicher, dass Sie sich noch im Projektverzeichnisblog-backend befinden, und führen Sie den folgenden Befehl aus:

nest generate controller blog

Sie sehen eine Ausgabe ähnlich der folgenden:

OutputCREATE /src/blog/blog.controller.spec.ts (474 bytes)

CREATE /src/blog/blog.controller.ts (97 bytes)

UPDATE /src/blog/blog.module.ts (483 bytes)

Die Ausgabe gibt an, dass dieser Befehl zwei neue Dateien im Verzeichnissrc/blogerstellt hat. Sie sindblog.controller.spec.ts undblog.controller.ts. Ersteres ist eine Datei, mit der Sie automatisierte Tests für den neu erstellten Controller schreiben können. Letzteres ist die Controller-Datei selbst. Controller in Nest.js sind TypeScript-Dateien, die mit@Controller Metadaten dekoriert sind. Der Befehl importierte auch den neu erstellten Controller und fügte ihn dem Blog-Modul hinzu.

Öffnen Sie anschließend die Dateiblog.controller.tsmit Ihrem Texteditor und aktualisieren Sie sie mit folgendem Inhalt:

~/blog-backend/src/blog/blog.controller.ts

import { Controller, Get, Res, HttpStatus, Param, NotFoundException, Post, Body, Query, Put, Delete } from '@nestjs/common';
import { BlogService } from './blog.service';
import { CreatePostDTO } from './dto/create-post.dto';
import { ValidateObjectId } from '../shared/pipes/validate-object-id.pipes';


@Controller('blog')
export class BlogController {

    constructor(private blogService: BlogService) { }

    @Get('posts')
    async getPosts(@Res() res) {
        const posts = await this.blogService.getPosts();
        return res.status(HttpStatus.OK).json(posts);
    }

    @Get('post/:postID')
    async getPost(@Res() res, @Param('postID', new ValidateObjectId()) postID) {
        const post = await this.blogService.getPost(postID);
        if (!post) throw new NotFoundException('Post does not exist!');
        return res.status(HttpStatus.OK).json(post);

    }

    @Post('/post')
    async addPost(@Res() res, @Body() createPostDTO: CreatePostDTO) {
        const newPost = await this.blogService.addPost(createPostDTO);
        return res.status(HttpStatus.OK).json({
            message: "Post has been submitted successfully!",
            post: newPost
        })
    }
}

In dieser Datei haben Sie zuerst die erforderlichen Module importiert, um HTTP-Anforderungen aus dem Modul von@nestjs/commonzu verarbeiten. Anschließend haben Sie drei neue Module importiert:BlogService,CreatePostDTO undValidateObjectId. Danach haben Sie dieBlogService über einen Konstruktor in die Steuerung eingefügt, um Zugriff zu erhalten und die Funktionen zu nutzen, die bereits in derBlogService-Datei definiert sind. Dies ist ein Muster, das alsdependency injection angesehen wird und in Nest.js verwendet wird, um die Effizienz zu erhöhen und die Modularität der Anwendung zu verbessern.

Schließlich haben Sie die folgenden asynchronen Methoden erstellt:

getPosts(): Diese Methode führt die Funktionalität aus, eine HTTP-GET-Anforderung vom Client zu empfangen, um alle Beiträge aus der Datenbank abzurufen und dann die entsprechende Antwort zurückzugeben. Es ist mit einem@Get('posts') verziert.
getPost(): Dies nimmtpostID als Parameter und ruft einen einzelnen Beitrag aus der Datenbank ab. Zusätzlich zu dem an diese Methode übergebenen ParameterpostID haben Sie die Hinzufügung einer zusätzlichen Methode mit dem NamenValidateObjectId() realisiert. Diese Methode implementiert diePipeTransform-Schnittstelle von Nest.js. Der Zweck besteht darin, zu validieren und sicherzustellen, dass der ParameterpostIDin der Datenbank gefunden wird. Diese Methode definieren Sie im nächsten Abschnitt.
addPost(): Diese Methode verarbeitet eine POST-HTTP-Anforderung, um der Datenbank einen neuen Beitrag hinzuzufügen.

Um einen bestimmten Beitrag bearbeiten und löschen zu können, müssen Sie der Dateiblog.controller.tszwei weitere Methoden hinzufügen. Fügen Sie dazu die folgenden MethodeneditPost() unddeletePost() direkt nach der MethodeaddPost() ein, die Sie zuvor zublog.controller.ts hinzugefügt haben:

~/blog-backend/src/blog/blog.controller.ts

...
@Controller('blog')
export class BlogController {
    ...
    @Put('/edit')
    async editPost(
        @Res() res,
        @Query('postID', new ValidateObjectId()) postID,
        @Body() createPostDTO: CreatePostDTO
    ) {
        const editedPost = await this.blogService.editPost(postID, createPostDTO);
        if (!editedPost) throw new NotFoundException('Post does not exist!');
        return res.status(HttpStatus.OK).json({
            message: 'Post has been successfully updated',
            post: editedPost
        })
    }


    @Delete('/delete')
    async deletePost(@Res() res, @Query('postID', new ValidateObjectId()) postID) {
        const deletedPost = await this.blogService.deletePost(postID);
        if (!deletedPost) throw new NotFoundException('Post does not exist!');
        return res.status(HttpStatus.OK).json({
            message: 'Post has been deleted!',
            post: deletedPost
        })
    }
}

Hier haben Sie hinzugefügt:

editPost(): Diese Methode akzeptiert einen Abfrageparameter vonpostID und führt die Funktionalität zum Aktualisieren eines einzelnen Beitrags aus. Es wurde auch die MethodeValidateObjectIdverwendet, um eine ordnungsgemäße Validierung für den Beitrag bereitzustellen, den Sie bearbeiten müssen.
deletePost(): Diese Methode akzeptiert einen Abfrageparameter vonpostID und löscht einen bestimmten Beitrag aus der Datenbank.

Ähnlich wie beiBlogController verfügt jede der hier definierten asynchronen Methoden über einen Metadatendekorator und verwendet ein Präfix, das Nest.js als Routing-Mechanismus verwendet. Sie steuert, welcher Controller welche Anforderungen empfängt, und verweist auf die Methoden, die die Anforderung verarbeiten und eine Antwort zurückgeben sollen.

Beispielsweise haben dieBlogController, die Sie in diesem Abschnitt erstellt haben, ein Präfix vonblog und eine Methode namensgetPosts(), die ein Präfix vonposts verwendet. Dies bedeutet, dass jede GET-Anforderung, die an einen Endpunkt vonblog/posts (http:localhost:3000/blog/posts) gesendet wird, von der Methode "getPosts ()" verarbeitet wird. Dieses Beispiel ähnelt der Behandlung von HTTP-Anforderungen durch andere Methoden.

Speichern und schließen Sie die Datei.

Die vollständigeblog.controller.ts-Datei finden Sie unterDO Community repository für diese Anwendung.

In diesem Abschnitt haben Sie ein Modul erstellt, um die Anwendung übersichtlicher zu gestalten. Sie haben auch einen Service erstellt, der die Geschäftslogik für die Anwendung verwaltet, indem Sie mit der Datenbank interagiert und die entsprechende Antwort zurückgegeben haben. Schließlich haben Sie einen Controller generiert und die erforderlichen Methoden zur Verarbeitung von HTTP-Anforderungen wieGET,POST,PUT undDELETE auf der Clientseite erstellt. Im nächsten Schritt schließen Sie das Back-End-Setup ab.

[[Schritt-5 - Erstellen einer zusätzlichen Validierung für Mungo]] == Schritt 5 - Erstellen einer zusätzlichen Validierung für Mungo

Sie können jeden Beitrag in Ihrer Blog-Anwendung anhand einer eindeutigen ID identifizieren, die auch alsPostID bezeichnet wird. Das bedeutet, dass Sie zum Abrufen eines Posts diese ID als Abfrageparameter übergeben müssen. Um diesenpostID-Parameter zu validieren und sicherzustellen, dass der Beitrag in der Datenbank verfügbar ist, müssen Sie eine wiederverwendbare Funktion erstellen, die mit jeder Methode innerhalb vonBlogController initialisiert werden kann.

Navigieren Sie zum Konfigurieren zum Ordner./src/blog:

cd ./src/blog/

Erstellen Sie dann einen neuen Ordner mit dem Namenshared:

mkdir -p shared/pipes

Erstellen Sie im Ordnerpipes mit Ihrem Texteditor eine neue Datei mit dem Namenvalidate-object-id.pipes.ts und öffnen Sie sie. Fügen Sie den folgenden Inhalt hinzu, um die akzeptiertenpostID-Daten zu definieren:

~/blog-backend/src/blog/shared/pipes/validate-object-id.pipes.ts

import { PipeTransform, Injectable, ArgumentMetadata, BadRequestException } from '@nestjs/common';
import * as mongoose from 'mongoose';

@Injectable()
export class ValidateObjectId implements PipeTransform {
    async transform(value: string, metadata: ArgumentMetadata) {
        const isValid = mongoose.Types.ObjectId.isValid(value);
        if (!isValid) throw new BadRequestException('Invalid ID!');
        return value;
    }
}

Die KlasseValidateObjectId() implementiert die MethodePipeTransform aus dem Modul@nestjs/common. Es gibt eine einzige Methode namenstransform(), die den Wert als Parameter annimmt - in diesem FallpostID. Bei der oben beschriebenen Methode wird jede HTTP-Anforderung vom Frontend dieser Anwendung mit einempostID, die nicht in der Datenbank gefunden werden kann, als ungültig angesehen. Speichern und schließen Sie die Datei.

Nachdem Sie sowohl den Service als auch den Controller erstellt haben, müssen Sie das ModellPosteinrichten, das aufBlogSchemabasiert. Diese Konfiguration kann innerhalb des StammsApplicationModule eingerichtet werden. In diesem Fall wird jedoch durch das Erstellen des Modells inBlogModule die Organisation Ihrer Anwendung beibehalten. Öffnen Sie die./src/blog/blog.module.ts und aktualisieren Sie sie mit den folgenden hervorgehobenen Zeilen:

~/blog-backend/src/blog/blog.module.ts

import { Module } from '@nestjs/common';
import { BlogController } from './blog.controller';
import { BlogService } from './blog.service';
import { MongooseModule } from '@nestjs/mongoose';
import { BlogSchema } from './schemas/blog.schema';

@Module({
  imports: [
    MongooseModule.forFeature([{ name: 'Post', schema: BlogSchema }])
 ],
  controllers: [BlogController],
  providers: [BlogService]
})
export class BlogModule { }

Dieses Modul verwendet die MethodeMongooseModule.forFeature(), um zu definieren, welche Modelle im Modul registriert werden sollen. Ohne dies würde das Injizieren derPostModel innerhalb derBlogService mit dem Dekorator von@injectModel()nicht funktionieren. Speichern und schließen Sie die Datei, wenn Sie den Inhalt hinzugefügt haben.

In diesem Schritt haben Sie die vollständige RESTful-API für das Back-End mit Nest.js erstellt und in MongoDB integriert. Im nächsten Abschnitt konfigurieren Sie den Server so, dass HTTP-Anforderungen von einem anderen Server zugelassen werden, da Ihre Frontend-Anwendung auf einem anderen Port ausgeführt wird.

[[Schritt-6 -—- Aktivieren von Cors]] == Schritt 6 - Aktivieren von CORS

Eine HTTP-Anforderung von einer Domäne zu einer anderen wird häufig standardmäßig blockiert, es sei denn, der Server gibt dies an. Damit Ihre Front-End-Anwendung eine Anforderung an den Back-End-Server senden kann, müssen SieCross-origin resource sharing (CORS) aktivieren. Hierbei handelt es sich um eine Technik, mit der Anforderungen für eingeschränkte Ressourcen auf einer Webseite zugelassen werden.

In Nest.js müssen Sie zur Aktivierung von CORS eine einzige Methode zur Dateimain.tshinzufügen. Öffnen Sie diese Datei in Ihrem Texteditor, der sich bei./src/main.ts befindet, und aktualisieren Sie sie mit dem folgenden hervorgehobenen Inhalt:

~/blog-backend/src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

Speichern und schließen Sie die Datei.

Nachdem Sie das Back-End-Setup abgeschlossen haben, konzentrieren Sie sich auf das Frontend und verwenden Vue.js, um die bisher erstellten APIs zu verwenden.

[[Schritt-7 -—- Erstellen des-vue-js-Frontends]] == Schritt 7 - Erstellen des Vue.js-Frontends

In diesem Abschnitt erstellen Sie Ihre Front-End-Anwendung mit Vue.js. Vue CLI ist ein Standardtool, mit dem Sie schnell und ohne großen Aufwand ein neues Vue.js-Projekt erstellen und installieren können.

Zunächst müssen Sie die Vue CLI global auf Ihrem Computer installieren. Öffnen Sie ein anderes Terminal und navigieren Sie nicht im Ordnerblog-backend, sondern zum Entwicklungsordner Ihres lokalen Projekts und führen Sie Folgendes aus:

npm install -g @vue/cli

Nach Abschluss des Installationsvorgangs verwenden Sie den Befehlvue, um ein neues Vue.js-Projekt zu erstellen:

vue create blog-frontend

Nach Eingabe dieses Befehls wird eine kurze Eingabeaufforderung angezeigt. Wählen Sie die Optionmanually select features und dann die Funktionen, die Sie für dieses Projekt benötigen, indem SieSPACE auf Ihrem Computer drücken, um mehrere Funktionen hervorzuheben. Sie wählenBabel,Router undLinter / Formatter aus.

Alt Vue project CLI set up

Geben Sie für die nächsten Anweisungeny ein, um den Verlaufsmodus für einen Router zu verwenden. Dadurch wird sichergestellt, dass der Verlaufsmodus in der Router-Datei aktiviert ist, die automatisch für dieses Projekt generiert wird. Wählen Sie außerdemESLint with error prevention only aus, um eine Linter / Formatierer-Konfiguration auszuwählen. Wählen Sie als NächstesLint on save für zusätzliche Flusenfunktionen. Wählen Sie dann, um Ihre Konfiguration für zukünftige Projekte indedicated config file zu speichern. Geben Sie einen Namen für Ihre Voreinstellung ein, z. B.vueconfig.

Alt Vue.js final CLI set up

Vue.js will then start creating the application and all its required dependencies in a directory named blog-frontend.

Navigieren Sie nach Abschluss des Installationsvorgangs in der Anwendung Vue.js:

cd blog-frontend

Starten Sie dann den Entwicklungsserver mit:

npm run serve

Ihre Anwendung wird aufhttp://localhost:8080 ausgeführt.

Alt Vue.js home view

Da Sie in dieser Anwendung HTTP-Anforderungen ausführen, müssen Sie Axios installieren, einen auf Versprechen basierenden HTTP-Client für den Browser. Hier verwenden Sie Axios, um HTTP-Anforderungen von den verschiedenen Komponenten in der Anwendung auszuführen. Stoppen Sie die Front-End-Anwendung, indem Sie auf dem Terminal Ihres ComputersCTRL + C drücken und dann den folgenden Befehl ausführen:

npm install axios --save

Ihre Front-End-Anwendung ruft die Back-End-API in einer bestimmten Domäne von verschiedenen Komponenten in der Anwendung aus auf. Um die richtige Struktur für diese Anwendung sicherzustellen, können Sie einehelper-Datei erstellen und den ServerbaseURL definieren.

Navigieren Sie zunächst von Ihrem Terminal, das sich noch innerhalb vonblog-frontend befindet, zum Ordner./src/:

cd ./src/

Erstellen Sie einen weiteren Ordner mit dem Namenutils:

mkdir utils

Erstellen Sie im Ordnerutils mit Ihrem Texteditor eine neue Datei mit dem Namenhelper.js und öffnen Sie sie. Fügen Sie den folgenden Inhalt hinzu, umbaseURL für das Back-End-Projekt Nest.js zu definieren:

~blog-frontend/src/utils/helper.js

export const server = {

baseURL: 'http://localhost:3000'

}

Durch Definieren einesbaseURL können Sie es von überall in Ihren Vue.js-Komponentendateien aufrufen. Falls Sie die URL ändern müssen, ist es einfacher, diebaseURLin dieser Datei zu aktualisieren, als in Ihrer Anwendung.

In diesem Abschnitt haben Sie die Vue CLI installiert, ein Tool zum Erstellen einer neuen Vue.js-Anwendung. Mit diesem Tool haben Sie die Anwendungblog-frontenderstellt. Darüber hinaus haben Sie die Anwendung ausgeführt und eine Bibliothek mit dem Namen Axios installiert, die Sie bei jedem HTTP-Aufruf innerhalb der App verwenden. Als Nächstes erstellen Sie Komponenten für die Anwendung.

[[Schritt-8 - Erstellen wiederverwendbarer Komponenten]] == Schritt 8 - Erstellen wiederverwendbarer Komponenten

Jetzt erstellen Sie wiederverwendbare Komponenten für Ihre Anwendung. Dies ist die Standardstruktur für Vue.js-Anwendungen. Das Komponentensystem in Vue.js ermöglicht es Entwicklern, eine einzelne, unabhängige Einheit einer Schnittstelle zu erstellen, die einen eigenen Status, ein eigenes Markup und einen eigenen Stil haben kann. Dies macht es angemessen, dass Komponenten in Vue.js wiederverwendbar sind.

Jede Vue.js-Komponente enthält drei verschiedene Abschnitte:

<template>: enthält den HTML-Inhalt
<script>: Enthält die gesamte grundlegende Frontend-Logik und definiert die Funktionen
<style>: Das Stylesheet für jede einzelne Komponente

Zunächst erstellen Sie eine Komponente, um einen neuen Beitrag zu erstellen. Erstellen Sie dazu einen neuen Ordner mit dem Namenpost im Ordner./src/components, in dem die erforderlichen wiederverwendbaren Komponenten für Posts gespeichert sind. Erstellen Sie dann mit Ihrem Texteditor im neu erstellten Ordnerpost eine weitere Datei und nennen Sie sieCreate.vue. Öffnen Sie die neue Datei und fügen Sie den folgenden Code hinzu, der die erforderlichen Eingabefelder zum Senden eines Beitrags enthält:

~blog-frontend/src/components/post/Create.vue

Dies ist der Abschnitt<template> der KomponenteCreatePost. Es enthält die HTML-Eingabeelemente, die zum Erstellen eines neuen Posts erforderlich sind. Jedes der Eingabefelder hat einev-model-Direktive als Eingabeattribut. Dies dient dazu, bidirektionale Datenbindungen für jede Formulareingabe sicherzustellen, damit Vue.js die Benutzereingabe problemlos abrufen kann.

Fügen Sie als Nächstes den Abschnitt<script> derselben Datei direkt nach dem vorhergehenden Inhalt hinzu:

~blog-frontend/src/components/post/Create.vue

...

Hier haben Sie eine Methode namenscreatePost() hinzugefügt, um einen neuen Beitrag zu erstellen und ihn mit Axios an den Server zu senden. Sobald ein Benutzer einen neuen Beitrag erstellt, leitet die Anwendung zurück zur Startseite, auf der Benutzer die Liste der erstellten Beiträge anzeigen können.

Sie werden vue-router so konfigurieren, dass die Umleitung später in diesem Lernprogramm implementiert wird.

Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind. Die vollständigeCreate.vue-Datei finden Sie unterDO Community repository für diese Anwendung.

Jetzt müssen Sie eine weitere Komponente erstellen, um einen bestimmten Beitrag zu bearbeiten. Navigieren Sie zum Ordner./src/components/post, erstellen Sie eine andere Datei und nennen Sie sieEdit.vue. Fügen Sie den folgenden Code hinzu, der den Abschnitt<template>enthält:

~blog-frontend/src/components/post/Edit.vue

Dieser Vorlagenabschnitt enthält einen ähnlichen Inhalt wie dieCreatePost()-Komponente. Der einzige Unterschied besteht darin, dass es die Details des jeweiligen Beitrags enthält, der bearbeitet werden muss.

Fügen Sie als Nächstes den Abschnitt `

Hier haben Sie den Routenparameterid erhalten, um einen bestimmten Beitrag zu identifizieren. Anschließend haben Sie eine Methode mit dem NamengetPost() erstellt, um die Details dieses Beitrags aus der Datenbank abzurufen und die Seite damit zu aktualisieren. Schließlich haben Sie eineeditPost()-Methode erstellt, um den bearbeiteten Beitrag mit einer PUT-HTTP-Anforderung an den Back-End-Server zurückzusenden.

Speichern und schließen Sie die Datei. Die vollständigeEdit.vue-Datei finden Sie unterDO Community repository für diese Anwendung.

Jetzt erstellen Sie eine neue Komponente im Ordner./src/components/post und nennen siePost.vue. Auf diese Weise können Sie die Details eines bestimmten Posts auf der Homepage anzeigen. Fügen SiePost.vue den folgenden Inhalt hinzu:

~blog-frontend/src/components/post/Post.vue

Dieser Code rendert die Details eines Beitrags, dertitle,author und den Beitragbody enthält.

Fügen Sie nun direkt nach</template> den folgenden Code zur Datei hinzu:

~blog-frontend/src/components/post/Post.vue

...

Ähnlich wie im Abschnitt<script> der Komponente "Beitrag bearbeiten" haben Sie den Routenparameterid erhalten und damit die Details eines bestimmten Beitrags abgerufen.

Speichern und schließen Sie die Datei, wenn Sie mit dem Hinzufügen des Inhalts fertig sind. Die vollständigePost.vue-Datei finden Sie unterDO Community repository für diese Anwendung.

Als Nächstes erstellen Sie eine neue Komponente, um alle erstellten Posts für Benutzer anzuzeigen. Wenn Sie insrc/views zum Ordnerviews navigieren, wird eineHome.vue-Komponente angezeigt. Wenn diese Datei nicht vorhanden ist, erstellen Sie sie mit Ihrem Texteditor und fügen Sie den folgenden Code hinzu:

~blog-frontend/src/views/Home.vue

Hier haben Sie im Abschnitt<template> die<router-link> verwendet, um einen Link zum Bearbeiten sowie zum Anzeigen eines Beitrags zu erstellen, indem Sie diepost._id als Abfrageparameter übergeben haben. Sie haben auch die Anweisungv-if verwendet, um den Beitrag für Benutzer bedingt zu rendern. Wenn kein Beitrag aus der Datenbank vorhanden ist, wird einem Benutzer nur der folgende Text angezeigt:No post found at the moment.

Speichern und schließen Sie die Datei. Die vollständigeHome.vue-Datei finden Sie unterDO Community repository für diese Anwendung.

Fügen Sie nun direkt nach dem Abschnitt</template> inHome.vue den folgenden Abschnitt</script> hinzu:

~blog-frontend/src/views/Home.vue

...

Im Abschnitt<script> dieser Datei haben Sie eine Methode mit dem NamenfetchPosts() erstellt, um alle Beiträge aus der Datenbank abzurufen, und Sie haben die Seite mit den vom Server zurückgegebenen Daten aktualisiert.

Jetzt aktualisieren Sie dieApp-Komponente der Front-End-Anwendung, um Links zu denHome- undCreate-Komponenten zu erstellen. Öffnen Siesrc/App.vue und aktualisieren Sie es wie folgt:

~blog-frontend/src/App.vue

Neben den Links zu den KomponentenHome undCreate haben Sie auch den Abschnitt<Style> eingefügt, der das Stylesheet für diese Komponente darstellt und die Definition der Stile für einige der Elemente enthält die Seite. Speichern und schließen Sie die Datei.

In diesem Schritt haben Sie alle erforderlichen Komponenten für Ihre Anwendung erstellt. Als nächstes konfigurieren Sie die Router-Datei.

[[Schritt 9 - Einrichten des Routings]] == Schritt 9 - Einrichten des Routings

Nachdem Sie alle erforderlichen wiederverwendbaren Komponenten erstellt haben, können Sie die Router-Datei jetzt ordnungsgemäß konfigurieren, indem Sie ihren Inhalt mit Links zu allen von Ihnen erstellten Komponenten aktualisieren. Auf diese Weise wird sichergestellt, dass alle Endpunkte in der Front-End-Anwendung einer bestimmten Komponente zugeordnet werden, damit die entsprechenden Aktionen ausgeführt werden können. Navigieren Sie zu./src/router.js und ersetzen Sie den Inhalt durch den folgenden:

~blog-frontend/src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import HomeComponent from '@/views/Home';
import EditComponent from '@/components/post/Edit';
import CreateComponent from '@/components/post/Create';
import PostComponent from '@/components/post/Post';

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', redirect: { name: 'home' } },
    { path: '/home', name: 'home', component: HomeComponent },
    { path: '/create', name: 'Create', component: CreateComponent },
    { path: '/edit/:id', name: 'Edit', component: EditComponent },
    { path: '/post/:id', name: 'Post', component: PostComponent }
  ]
});

Sie habenRouter aus dem Modulvue-router importiert und durch Übergeben der Parametermode undroutesinstanziiert. Der Standardmodus fürvue-router ist ein Hash-Modus, der den URL-Hash verwendet, um eine vollständige URL zu simulieren, damit die Seite nicht neu geladen wird, wenn sich die URL ändert. Um den Hash unnötig zu machen, haben Sie hier den Verlaufsmodus verwendet, um die URL-Navigation ohne erneutes Laden der Seite zu erreichen. Schließlich haben Sie in der Optionroutes den Pfad für den Endpunkt angegeben - einen Namen für die Route und die Komponente, die beim Aufrufen der Route in der Anwendung gerendert werden soll. Speichern und schließen Sie die Datei.

Nachdem Sie das Routing für die Anwendung eingerichtet haben, müssen Sie die Bootstrap-Datei einbeziehen, um das vorgefertigte Styling für die Benutzeroberfläche der Anwendung zu unterstützen. Öffnen Sie dazu die Datei./public/index.htmlin Ihrem Texteditor und fügen Sie die CDN-Datei für Bootstrap hinzu, indem Sie der Datei den folgenden Inhalt hinzufügen:

~blog-frontend/public/index.html




  ...
  
  blog-frontend


   ...

Speichern und beenden Sie die Datei und starten Sie die Anwendung mitnpm run serve fürblog-frontend neu, falls sie derzeit nicht ausgeführt wird.

[.note] #Note: Stellen Sie sicher, dass sowohl der Back-End-Server als auch die MongoDB-Instanz ausgeführt werden. Wenn nicht, navigieren Sie von einem anderen Terminal zublog-backend und führen Sienpm run start aus. Starten Sie den MongoDB-Dienst auch, indem Siesudo mongod auch von einem neuen Terminal aus ausführen.
#

Navigieren Sie zu Ihrer Anwendung unter:http://localhost:8080. Jetzt können Sie Ihr Blog testen, indem Sie Beiträge erstellen und bearbeiten.

Alt Create a new post

Klicken Sie in Ihrer Anwendung aufCreate, um den BildschirmCreate Post anzuzeigen, der sich auf die DateiCreateComponentbezieht und diese rendert. Geben Sie Werte in die Eingabefelder ein und klicken Sie auf die SchaltflächeCreate Post, um einen Beitrag zu senden. Sobald Sie fertig sind, werden Sie von der Anwendung zurück zur Startseite geleitet.

Die Homepage der Anwendung rendertHomeComponent. Diese Komponente verfügt über eine Methode, die einen HTTP-Aufruf sendet, um alle Posts aus der Datenbank abzurufen und sie den Benutzern anzuzeigen.

Alt View all posts from the database

Durch Klicken auf die SchaltflächeEdit Post für einen bestimmten Beitrag gelangen Sie zu einer Bearbeitungsseite, auf der Sie Änderungen vornehmen und Ihren Beitrag speichern können.

Alt Edit a new post

In diesem Abschnitt haben Sie das Routing für die Anwendung konfiguriert und eingerichtet. Damit ist Ihre Blog-Anwendung fertig.

TOC

So erstellen Sie ein Blog mit Nest.js, MongoDB und Vue.js

Einführung

Voraussetzungen

Modul generieren

Service generieren

Controller generieren

Create Post

Edit Post

{{ post.title }}

Post by {{post.author}}, {{post.date_posted}}.

Nest Blog Tutorial

No post found at the moment

{{ post.title }}

Fazit

Related

TOC

So erstellen Sie ein Blog mit Nest.js, MongoDB und Vue.js

Einführung

Voraussetzungen

Modul generieren

Service generieren

Controller generieren

Create Post

View All Posts

Edit Post

View All Posts

{{ post.title }}

Post by {{post.author}}, {{post.date_posted}}.

Nest Blog Tutorial

No post found at the moment

{{ post.title }}

Fazit

Related