_著者はhttps://www.brightfunds.org/organizations/software-in-the-public-interest-inc [公益事業会社のソフトウェア]を選択してhttps://do.co/の一部として寄付を受け取りましたw4do-cta [DOnationsの書き込み]プログラム。

前書き

Nest.jsは、TypeScriptで構築されたスケーラブルなサーバー側JavaScriptフレームワークであり、JavaScriptとの互換性を維持し、効率的で信頼性の高いバックエンドアプリケーションを構築するための効果的なツールです。 Node.js開発の世界に成熟した構造設計パターンを提供するモジュラーアーキテクチャを備えています。

Vue.jsは、ユーザーインターフェイスを構築するためのフロントエンドJavaScriptフレームワークです。 シンプルでありながら非常に強力なAPIと優れたパフォーマンスを備えています。 Vue.jsは、サイズに関係なく、Webアプリケーションのフロントエンドレイヤーとロジックを強化できます。 他のライブラリまたは既存のプロジェクトと簡単に統合できるため、ほとんどの最新のWebアプリケーションに最適です。

このチュートリアルでは、Nest.jsアプリケーションを構築して、そのビルディングブロックと最新のWebアプリケーションを構築するための基本原則を理解します。 このプロジェクトにアプローチするには、アプリケーションを2つの異なるセクション(フロントエンドとバックエンド)に分けます。 まず、Nest.jsで構築されたRESTfulバックエンドAPIに集中します。 次に、Vue.jsで構築するフロントエンドに焦点を当てます。 両方のアプリケーションは異なるポートで実行され、個別のドメインとして機能します。

ユーザーが新しい投稿を作成して保存し、ホームページで保存した投稿を表示し、投稿の編集や削除などの他のプロセスを実行できるブログアプリケーションを構築します。 さらに、アプリケーションを接続し、そのデータをhttps://www.mongodb.com/[MongoDB]で永続化します。これはJSONドキュメントを受信および保存できるスキーマレスのNoSQLデータベースです。 このチュートリアルは、開発環境でのアプリケーションの構築に焦点を当てています。 実稼働環境では、アプリケーションのユーザー認証も考慮する必要があります。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • Node.js(少なくともv6)およびhttps://www.npmjs.com/[npm](少なくともv5.2)のローカルインストール。 Node.jsは、ブラウザーの外部でコードを実行できるJavaScriptランタイム環境です。 `+ npm +`というプリインストールされたパッケージマネージャーが付属しており、パッケージのインストールと更新ができます。 これらをmacOSまたはUbuntu 18.04にインストールするには、https://www.digitalocean.com/community/tutorials/how-to-install-node-js-and-create-a-local-development-environment-onの手順に従います-macos [macOSでNode.jsをインストールしてローカル開発環境を作成する方法]またはhttps://www.digitalocean.com/community/tutorials/how-to-install-node-の「PPAを使用してインストールする」セクションjs-on-ubuntu-18-04 [Ubuntu 18.04にNode.jsをインストールする方法]。

  • マシンにインストールされたMongoDB。 指示https://www.mongodb.com/download-center/community [こちら]に従って、選択したオペレーティングシステム用にダウンロードしてインストールします。 MongoDBを正常にインストールするには、https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/?_gaでhttps://brew.sh/[Homebrew]を使用してインストールできます。 = 2.44532076.918654254.1550698665-2018226388.1550698665#create-the-data-directory [Mac]またはhttps://www.mongodb.com/download-center/community[MongoDB Webサイト]からダウンロードしてください。

  • TypeScriptとhttps://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript[JavaScript]の基本的な理解。

  • Visual Studio Code、https://atom.io [Atom]、またはhttps://www.sublimetext.com [Sublime Text]などのインストールされたテキストエディター。

ステップ1-Nest.jsおよびその他の依存関係のインストール

このセクションでは、アプリケーションと必要な依存関係をローカルマシンにインストールすることで、Nest.jsを使い始めます。 Nest.jsが提供するhttps://docs.nestjs.com/cli/overview[CLI]を使用するか、GitHubからスタータープロジェクトをインストールすることにより、Nest.jsを簡単にインストールできます。 このチュートリアルでは、CLIを使用してアプリケーションをセットアップします。 開始するには、ターミナルから次のコマンドを実行して、マシンにグローバルにインストールします。

npm i -g @nestjs/cli

次のような出力が表示されます。

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

Nest CLIのインストールを確認するには、ターミナルから次のコマンドを実行します。

nest --version

マシンにインストールされている現在のバージョンを示す出力が表示されます。

Output

`+ nest +`コマンドを使用してプロジェクトを管理し、それを使用して、コントローラー、モジュール、プロバイダーなどの関連ファイルを生成します。

このチュートリアルのプロジェクトを開始するには、ターミナルから次のコマンドを実行して、「+ nest 」コマンドを使用して「+」という名前の新しいNest.jsプロジェクトを作成します。

nest new

コマンドを実行した直後に、「+ nest 」は「」、「」、「+」などの基本的な情報を提供するように促します。 先に進み、適切な詳細を提供します。 各プロンプトに応答した後に続行するには、コンピューターで「+ ENTER +」を押します。

次に、パッケージマネージャーを選択します。 このチュートリアルの目的のために、「+ npm」を​​選択し、「+ ENTER」を押してNest.jsのインストールを開始します。

image:https://assets.digitalocean.com/articles/nest_vue_mongo/step1a.png [Nestプロジェクトの作成]

これにより、ローカル開発フォルダー内の「++」フォルダーに新しいNest.jsプロジェクトが生成されます。

次に、ターミナルから新しいプロジェクトフォルダーに移動します。

cd

次のコマンドを実行して、他のサーバーの依存関係をインストールします。

npm install --save @nestjs/mongoose mongoose

MongoDBのオブジェクトモデリングツール用のNest.js専用パッケージである `+ @ nestjs / mongoose `と、Mongooseのパッケージである ` mongoose +`をインストールしました。

次に、次のコマンドを使用してアプリケーションを起動します。

npm run start

これで、お気に入りのブラウザから `+ http:// localhost:3000 +`に移動すると、アプリケーションが実行されていることがわかります。

image:https://assets.digitalocean.com/articles/nest_vue_mongo/step1b.png [Nest.jsアプリケーションの新規インストールの[ようこそ]ページ]

Nest CLIコマンドの可用性を活用して、プロジェクトを正常に生成しました。 その後、アプリケーションの実行に進み、ローカルマシンのデフォルトのポート「3000」でアクセスしました。 次のセクションでは、データベース接続の構成を設定して、アプリケーションをさらに詳しく説明します。

手順2-データベースの構成と接続

このステップでは、MongoDBを構成してNest.jsアプリケーションに統合します。 MongoDBを使用して、アプリケーションのデータを保存します。 MongoDBは、そのデータを_fields:value_のペアとして_documents_に保存します。 このデータ構造にアクセスするには、https://mongoosejs.com/ [Mongoose]を使用します。これは、MongoDBデータベースが保存するデータのタイプを表すスキーマを定義できるオブジェクトドキュメントモデリング(ODM)です。

MongoDBを起動するには、アプリケーションが実行を継続できるように別のターミナルウィンドウを開き、次のコマンドを実行します。

sudo mongod

これにより、MongoDBサービスが開始され、マシンのバックグラウンドでデータベースが実行されます。

テキストエディターでプロジェクト「+」を開き、「。/ src / app.module.ts 」に移動します。 インストールされた ` MongooseModule `をルート ` ApplicationModule `に含めることで、データベースへの接続を設定できます。 これを実現するには、次の強調表示された行で ` app.module.ts +`のコンテンツを更新します。

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

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


@Module({
 imports: [

 ],
 controllers: [AppController],
 providers: [AppService],
})
export class AppModule { }

このファイルでは、 `+ forRoot()+`メソッドを使用してデータベースへの接続を提供します。 編集が終了したら、ファイルを保存して閉じます。

これで、MongoDB用のMongooseモジュールを使用してデータベース接続をセットアップしました。 次のセクションでは、Mongooseライブラリ、TypeScriptインターフェイス、およびデータ転送オブジェクト(DTO)スキーマを使用してデータベーススキーマを作成します。

手順3-データベーススキーマ、インターフェイス、およびDTOの作成

この手順では、Mongooseを使用して、データベースのスキーマ、インターフェイス、およびデータ転送object_を作成します。 Mongooseは、データ間の関係の管理に役立ち、データ型のスキーマ検証を提供します。 アプリケーションのデータベース内のデータの構造とデータ型を定義しやすくするために、以下を決定するファイルを作成します。

  • database schema:これは、データベースが格納する必要があるデータの構造とタイプを定義するための青写真としてのデータの組織です。

  • interfaces:TypeScriptインターフェイスは、タイプチェックに使用されます。 アプリケーションに渡す必要のあるデータのタイプを定義するために使用できます。

  • データ転送オブジェクト:これは、ネットワークを介したデータの送信方法を定義し、プロセス間でデータを伝送するオブジェクトです。

開始するには、アプリケーションが現在実行されているターミナルに戻り、 `+ CTRL + C `でプロセスを停止し、 `。/ src / +`フォルダーに移動します。

cd ./src/

次に、 `+ blog `という名前のディレクトリと、その中に ` schemas +`フォルダーを作成します。

mkdir -p blog/schemas

`+ schemas `フォルダーで、 ` blog.schema.ts +`という新しいファイルを作成し、テキストエディターを使用して開きます。 次に、次のコンテンツを追加します。

〜/ 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
})

ここでは、Mongooseを使用して、データベースに保存するデータのタイプを定義しました。 すべてのフィールドに文字列値のみが格納され、受け入れられるように指定しました。 編集が終了したら、ファイルを保存して閉じます。

これで、データベーススキーマが決定されたので、インターフェイスの作成に進むことができます。

まず、 `+ blog +`フォルダーに戻ります:

cd ~//src/blog/

`+ interfaces +`という名前の新しいフォルダーを作成し、そこに移動します。

mkdir interfaces

`+ interfaces `フォルダーで、 ` post.interface.ts `という新しいファイルを作成し、テキストエディターを使用して開きます。 次のコンテンツを追加して、 ` Post`のデータのタイプを定義します。

〜/ 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
}

このファイルでは、 `+ Post +`タイプのデータタイプを文字列値として正常に定義しました。 ファイルを保存して終了します。

アプリケーションはデータベースにデータを送信する機能を実行するため、ネットワークを介してデータを送信する方法を定義するデータ転送オブジェクトを作成します。

これを実現するには、 `。/ src / blog +`フォルダー内にフォルダー ` dto `を作成します。 新しく作成したフォルダー内で、 ` create-post.dto.ts +`という名前の別のファイルを作成します

`+ blog +`フォルダーに戻ります:

cd ~//src/blog/

次に、「+ dto +」という名前のフォルダーを作成して移動します。

mkdir dto

`+ dto `フォルダーで、 ` create-post.dto.ts +`という新しいファイルを作成し、テキストエディターを使用してそれを開き、次のコンテンツを追加します。

〜/ 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
}

`+ CreatePostDTO `クラスの個々のプロパティには、データ型が ` string `であり、不要な変更を避けるために ` readonly +`としてマークされています。 編集が終了したら、ファイルを保存して終了します。

この手順では、データベースのデータベーススキーマ、インターフェイス、およびデータベースに保存するデータのデータ転送オブジェクトを作成しました。 次に、ブログ用のモジュール、コントローラー、およびサービスを生成します。

ステップ4-ブログ用のモジュール、コントローラー、およびサービスの作成

このステップでは、ブログ用のモジュールを作成して、アプリケーションの既存の構造を改善します。 このモジュールは、アプリケーションのファイル構造を整理します。 次に、ルートを処理し、クライアントからのHTTPリクエストを処理するコントローラーを作成します。 最後に、アプリケーションのコントローラーが処理するには複雑すぎるビジネスロジックをすべて処理するサービスを設定します。

モジュールの生成

AngularフロントエンドWebフレームワークと同様に、Nest.jsはモジュラー構文を使用します。 Nest.jsアプリケーションにはモジュール設計があります。単一のルートモジュールがインストールされているため、小規模なアプリケーションには十分です。 しかし、アプリケーションが成長し始めると、Nest.jsはコードを関連機能に分割する複数モジュールの組織を推奨します。

Nest.jsの_module_は、 `+ @ Module()`デコレータによって識別され、 ` controllers `や ` providers `などのプロパティを持つオブジェクトを受け取ります。 これらの各プロパティは、それぞれ「 controllers 」と「 providers +」の配列を取ります。

構造をより整理するために、このブログアプリケーション用の新しいモジュールを生成します。 開始するには、まだ `+〜/ +`フォルダで、次のコマンドを実行します:

nest generate module

次のような出力が表示されます。

OutputCREATE /src/blog/blog.module.ts

UPDATE /src/app.module.ts

コマンドは、アプリケーション用の `+ blog.module.ts +`という名前の新しいモジュールを生成し、新しく作成されたモジュールをアプリケーションのルートモジュールにインポートしました。 これにより、Nest.jsはルートモジュール以外の別のモジュールを認識することができます。

このファイルには、次のコードが表示されます。

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

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

@Module({})
export class BlogModule {}

チュートリアルの後半で、この `+ BlogModule +`を必要なプロパティで更新します。 ファイルを保存して終了します。

サービスの生成

Nest.jsでプロバイダーとも呼ばれる_service_は、HTTP要求のみを処理し、より複雑なタスクをサービスにリダイレクトすることを目的としたコントローラーからロジックを削除するように設計されました。 サービスは、その上に `+ @ Injectable()+`デコレータが付いたプレーンなJavaScriptクラスです。 新しいサービスを生成するには、プロジェクトディレクトリ内にいる間にターミナルから次のコマンドを実行します。

nest generate service

次のような出力が表示されます。

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)

ここで使用する `+ nest `コマンドは、テストに使用できる ` blog.service.spec.ts `ファイルを作成しました。 また、このアプリケーションのすべてのロジックを保持し、MongoDBデータベースへのドキュメントの追加と取得を処理する新しい「 blog.service.ts +」ファイルを作成しました。 また、新しく作成されたサービスを自動的にインポートし、blog.module.tsに追加しました。

サービスは、アプリケーション内のすべてのロジックを処理し、データベースとの対話を担当し、適切な応答をコントローラーに返します。 これを実現するには、テキストエディターで `+ blog.service.ts +`ファイルを開き、内容を次のように置き換えます。

〜/ 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<Post>) { }

   async getPosts(): Promise<Post[]> {
       const posts = await this.postModel.find().exec();
       return posts;
   }

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

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

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

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

}

このファイルでは、最初に必要なモジュールを + @ nestjs / common ++ mongoose +、および `+ @ nestjs / mongoose `からインポートしました。 また、「 Post 」という名前のインターフェースと「 CreatePostDTO +」というデータ転送オブジェクトをインポートしました。

+ constructor +`で、 `+ @ InjectModel(+ + '+ + Post` ‘ +` `)`を追加しました。これにより、この ` Blogに` + Post + `モデルが挿入されます。サービスクラス。 これで、この注入されたモデルを使用して、すべての投稿を取得し、単一の投稿を取得し、他のデータベース関連のアクティビティを実行できます。

次に、次のメソッドを作成しました。

  • + getPosts()+:データベースからすべての投稿を取得します。

  • + getPost()+:データベースから単一の投稿を取得します。

  • + addPost()+:新しい投稿を追加します。

  • + editPost()+:単一の投稿を更新します。

  • + deletePost()+:特定の投稿を削除します。

完了したら、ファイルを保存して終了します。

バックエンドAPIからMongoDBデータベースとの適切な対話を処理するいくつかのメソッドのセットアップと作成が完了しました。 次に、フロントエンドクライアントからのHTTP呼び出しを処理する必要なルートを作成します。

コントローラーの生成

巣の中。 js、_controllers_は、アプリケーションのクライアント側からの着信要求を処理し、適切な応答を返す責任があります。 他のほとんどのWebフレームワークと同様に、アプリケーションがリクエストをリッスンし、それに応答することが重要です。

ブログアプリケーションのすべてのHTTPリクエストに対応するには、 `+ nest `コマンドを利用して新しいコントローラーファイルを生成します。 プロジェクトディレクトリ `+`にいることを確認し、次のコマンドを実行します。

nest generate controller

次のような出力が表示されます。

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)

出力は、このコマンドが `+ src / blog `ディレクトリ内に2つの新しいファイルを作成したことを示しています。 それらは ` blog.controller.spec.ts `と ` blog.controller.ts `です。 前者は、新しく作成されたコントローラーの自動テストを作成するために使用できるファイルです。 後者はコントローラーファイル自体です。 Nest.jsのコントローラーは、 ` @ Controller +`メタデータで装飾されたTypeScriptファイルです。 このコマンドは、新しく作成されたコントローラーもインポートし、ブログモジュールに追加しました。

次に、テキストエディターで `+ blog.controller.ts +`ファイルを開き、次の内容で更新します。

〜/ 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
       })
   }
}

このファイルでは、最初に `+ @ nestjs / common `モジュールからのHTTPリクエストを処理するために必要なモジュールをインポートしました。 次に、3つの新しいモジュール、つまり「 BlogService 」、「 CreatePostDTO 」、および「 ValidateObjectId 」をインポートしました。 その後、コンストラクターを介してコントローラーに ` BlogService `を挿入し、 ` BlogService +`ファイル内で既に定義されている関数にアクセスして利用するようにしました。 これは、効率を高め、アプリケーションのモジュール性を強化するためにNest.jsで使用される_dependency injection_と見なされるパターンです。

最後に、次の非同期メソッドを作成しました。

  • + getPosts()+:このメソッドは、クライアントからHTTP GETリクエストを受信する機能を実行して、データベースからすべての投稿を取得し、適切な応答を返します。 + @ Get(+ + '+ + posts + +' + `)`で装飾されています。

  • + getPost()+:これはパラメーターとして `+ postID `を取り、データベースから単一の投稿を取得します。 このメソッドに渡される ` postID `パラメーターに加えて、 ` ValidateObjectId()`という名前の追加メソッドが追加されたことに気付きました。 このメソッドは、Nest.jsの ` PipeTransform `インターフェースを実装します。 その目的は、データベースで ` postID +`パラメータが見つかることを検証して保証することです。 このメソッドは次のセクションで定義します。

  • + addPost()+:このメソッドは、データベースに新しい投稿を追加するPOST HTTPリクエストを処理します。

特定の投稿を編集および削除できるようにするには、 `+ blog.controller.ts `ファイルにさらに2つのメソッドを追加する必要があります。 そのためには、以前に ` blog.controller.ts `に追加した ` addPost()`メソッドの直後に、次の ` editPost()`および ` deletePost()+`メソッドを含めます。

〜/ 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
       })
   }
}

ここに追加しました:

  • + editPost()+:このメソッドは、 `+ postID `のクエリパラメータを受け入れ、単一の投稿を更新する機能を実行します。 また、 ` ValidateObjectId +`メソッドを使用して、編集する必要のある投稿に適切な検証を提供しました。

  • + deletePost()+:このメソッドは、 `+ postID +`のクエリパラメータを受け入れ、データベースから特定の投稿を削除します。

`+ BlogController +`と同様に、ここで定義した各非同期メソッドにはメタデータデコレータがあり、Nest.jsがルーティングメカニズムとして使用するプレフィックスを受け取ります。 どのコントローラーがどのリクエストを受信するかを制御し、リクエストを処理してレスポンスを返すメソッドをそれぞれポイントします。

たとえば、このセクションで作成した + BlogController +`のプレフィックスは `+ blog +`であり、 `+ getPosts()+`という名前のメソッドは `+ posts +`のプレフィックスを受け取ります。 これは、 `+ blog / posts ++ http:localhost:3000 / blog / posts +)のエンドポイントに送信されたGETリクエストはすべて、 `+ getPosts()+`メソッドによって処理されることを意味します。 この例は、他のメソッドがHTTP要求を処理する方法に似ています。

ファイルを保存して終了します。

完全な `+ blog.controller.ts +`ファイルについては、https://github.com/do-community/nest-vue-project/blob/master/blog-backend/src/blog/blog.blog.controller.tsにアクセスしてください。このアプリケーションの[DOコミュニティリポジトリ]。

このセクションでは、アプリケーションをより整理した状態に保つためのモジュールを作成しました。 また、データベースと対話して適切な応答を返すことにより、アプリケーションのビジネスロジックを処理するサービスを作成しました。 最後に、コントローラーを生成し、クライアント側からの「+ GET 」、「 POST 」、「 PUT 」、「 DELETE +」などのHTTPリクエストを処理するために必要なメソッドを作成しました。 次のステップでは、バックエンドのセットアップを完了します。

ステップ5-Mongooseの追加検証の作成

ブログアプリケーション内の各投稿は、「+ PostID 」とも呼ばれる一意のIDで識別できます。 つまり、投稿を取得するには、このIDをクエリパラメータとして渡す必要があります。 この ` postID `パラメーターを検証し、投稿がデータベースで利用できることを確認するには、 ` BlogController +`内の任意のメソッドから初期化できる再利用可能な関数を作成する必要があります。

これを設定するには、 `+。/ src / blog +`フォルダーに移動します:

cd ./src/blog/

次に、 `+ shared +`という名前の新しいフォルダーを作成します。

mkdir -p shared/pipes

テキストエディターを使用して、 `+ pipes `フォルダーで、 ` validate-object-id.pipes.ts `という新しいファイルを作成して開きます。 次のコンテンツを追加して、受け入れられた ` postID +`データを定義します。

〜/ 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<string> {
   async transform(value: string, metadata: ArgumentMetadata) {
       const isValid = mongoose.Types.ObjectId.isValid(value);
       if (!isValid) throw new BadRequestException('Invalid ID!');
       return value;
   }
}

`+ ValidateObjectId()`クラスは、 ` @ nestjs / common `モジュールの ` PipeTransform `メソッドを実装します。 パラメータとして値を受け取る ` transform()`という名前の単一のメソッドがあります。この場合は ` postID `です。 上記の方法を使用すると、データベースに見つからない「 postID +」を持つこのアプリケーションのフロントエンドからのHTTPリクエストは無効と見なされます。 ファイルを保存して閉じます。

サービスとコントローラーの両方を作成したら、 + Blog Schema`に基づく + Post Of`モデルを設定する必要があります。 この設定はルート「+ ApplicationModule 」内で設定できますが、この例では「 BlogModule 」でモデルを構築するとアプリケーションの組織が維持されます。 `。/ src / blog / blog.module.ts +`を開き、次の強調表示された行で更新します。

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

import { Module } from '@nestjs/common';
import { BlogController } from './blog.controller';
import { BlogService } from './blog.service';



@Module({



 controllers: [BlogController],
 providers: [BlogService]
})
export class BlogModule { }

このモジュールは、 `+ MongooseModule.forFeature()`メソッドを使用して、モジュールに登録するモデルを定義します。 これがないと、 ` @ injectModel()`デコレータを使用して ` BlogService `内に ` PostModel +`を挿入できません。 コンテンツの追加が終了したら、ファイルを保存して閉じます。

このステップでは、Nest.jsを使用して完全なバックエンドRESTful APIを作成し、MongoDBと統合しました。 次のセクションでは、フロントエンドアプリケーションが別のポートで実行されるため、別のサーバーからのHTTPリクエストを許可するようにサーバーを構成します。

ステップ6-CORSを有効にする

1つのドメインから別のドメインへのHTTP要求は、サーバーによって許可されるように指定されている場合を除き、多くの場合デフォルトでブロックされます。 フロントエンドアプリケーションがバックエンドサーバーに要求を行うには、Cross-origin resource sharing(CORS)を有効にする必要があります。これは、Webページ上の制限されたリソースの要求を許可する手法です。

Nest.jsでCORSを有効にするには、単一のメソッドを `+ main.ts `ファイルに追加する必要があります。 `。/ src / main.ts +`にあるテキストエディターでこのファイルを開き、次の強調表示されたコンテンツで更新します。

〜/ blog-backend / src / main.ts

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

async function bootstrap() {
 const app = await NestFactory.create(AppModule);

 await app.listen(3000);
}
bootstrap();

ファイルを保存して終了します。

バックエンドのセットアップが完了したので、フロントエンドに焦点を移し、Vue.jsを使用して、これまでに構築されたAPIを使用します。

ステップ7-Vue.jsフロントエンドの作成

このセクションでは、Vue.jsを使用してフロントエンドアプリケーションを作成します。 Vue CLIは、手間をかけずに新しいVue.jsプロジェクトを迅速に生成およびインストールできる標準ツールです。

まず、Vue CLIをマシンにグローバルにインストールする必要があります。 別のターミナルを開き、 `++`フォルダーから作業する代わりに、ローカルプロジェクトの開発フォルダーに移動して実行します。

npm install -g @vue/cli

インストールプロセスが完了したら、「+ vue +」コマンドを使用して新しいVue.jsプロジェクトを作成します。

vue create

このコマンドを入力すると、短いプロンプトが表示されます。 「手動で機能を選択」オプションを選択し、コンピューターで「+ SPACE 」を押して複数の機能を強調表示して、このプロジェクトに必要な機能を選択します。 「 Babel」、「+ Router」、および「+ Linter / Formatter」を選択します。

image:https://assets.digitalocean.com/articles/nest_vue_mongo/step7a.png [Alt VueプロジェクトのCLI設定]

次の手順では、ルーターに履歴モードを使用するには「+ y 」と入力します。これにより、ルーターファイル内で履歴モードが有効になり、このプロジェクト用に自動的に生成されます。 さらに、リンター/フォーマッター構成を選択するには、「 ESLint with error prevent only 」を選択します。 次に、追加のLint機能のために ` Lint on save `を選択します。 次に、将来のプロジェクトのために設定を「+専用の設定ファイル」に保存することを選択します。 `+`のようなプリセットの名前を入力します。

image:https://assets.digitalocean.com/articles/nest_vue_mongo/step7b.png [Alt Vue.js最終CLI設定]

Vue.jsは、 `++`という名前のディレクトリにアプリケーションとそのすべての必要な依存関係の作成を開始します。

インストールプロセスが完了したら、Vue.jsアプリケーション内をナビゲートします。

cd

次に、次を使用して開発サーバーを起動します。

npm run serve

アプリケーションは `+ http:// localhost:8080 +`で実行されます。

画像:https://assets.digitalocean.com/articles/nest_vue_mongo/step7c.png [Alt Vue.jsホームビュー]

このアプリケーション内でHTTPリクエストを実行するので、Axiosをインストールする必要があります。Axiosは、ブラウザ用の約束ベースのHTTPクライアントです。 ここでAxiosを使用して、アプリケーション内のさまざまなコンポーネントからHTTPリクエストを実行します。 コンピューターのターミナルから「+ CTRL + C +」を押してフロントエンドアプリケーションを停止し、次のコマンドを実行します。

npm install axios --save

フロントエンドアプリケーションは、アプリケーション内のさまざまなコンポーネントから特定のドメインのバックエンドAPIに対してAPI呼び出しを行います。 このアプリケーションの適切な構造を確保するために、 `+ helper `ファイルを作成し、サーバーの ` baseURL +`を定義できます。

開始するには、まだ `+`内にあるターミナルから、 `。/ src / +`フォルダーに移動します。

cd ./src/

`+ utils +`という名前の別のフォルダーを作成します。

mkdir utils

テキストエディターを使用して、 + utils`フォルダーで、 + helper.js`という新しいファイルを作成して開きます。 次のコンテンツを追加して、バックエンドNest.jsプロジェクトの `+ baseURL +`を定義します。

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

export const server = {

baseURL: 'http://localhost:3000'

}

`+ baseURL `を定義することにより、Vue.jsコンポーネントファイル内のどこからでも呼び出すことができます。 URLを変更する必要がある場合は、アプリケーション全体ではなく、このファイルの ` baseURL +`を更新する方が簡単です。

このセクションでは、新しいVue.jsアプリケーションを作成するためのツールであるVue CLIをインストールしました。 このツールを使用して、「++」アプリケーションを作成しました。 さらに、アプリケーションを実行し、Axiosという名前のライブラリをインストールしました。これは、アプリケーション内でHTTP呼び出しが行われるたびに使用します。 次に、アプリケーションのコンポーネントを作成します。

ステップ8-再利用可能なコンポーネントの作成

次に、アプリケーションの再利用可能なコンポーネントを作成します。これは、Vue.jsアプリケーションの標準構造です。 Vue.jsのコンポーネントシステムにより、開発者は独自の状態、マークアップ、スタイルを持つことができるインターフェイスの単一の独立したユニットを構築できます。 これにより、Vue.jsのコンポーネントが再利用可能になります。

すべてのVue.jsコンポーネントには、3つの異なるセクションが含まれています。

  • + <template> +:HTMLコンテンツが含まれています

  • + <script> +:すべての基本的なフロントエンドロジックを保持し、関数を定義します

  • + <style> +:個別のコンポーネントのスタイルシート

最初に、コンポーネントを作成して新しい投稿を作成します。 そのためには、 +。/ src / components`フォルダー内に + post + `という名前の新しいフォルダーを作成します。このフォルダーには、投稿に必要な再利用可能なコンポーネントが格納されます。 次に、テキストエディターを使用して、新しく作成した「+ post 」フォルダー内に別のファイルを作成し、「 Create.vue +」という名前を付けます。 新しいファイルを開き、次のコードを追加します。このコードには、投稿を送信するために必要な入力フィールドが含まれています。

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

<template>
  <div>
       <div class="col-md-12 form-wrapper">
         <h2> Create Post </h2>
         <form id="create-post-form" @submit.prevent="createPost">
              <div class="form-group col-md-12">
               <label for="title"> Title </label>
               <input type="text" id="title" v-model="title" name="title" class="form-control" placeholder="Enter title">
              </div>
             <div class="form-group col-md-12">
                 <label for="description"> Description </label>
                 <input type="text" id="description" v-model="description" name="description" class="form-control" placeholder="Enter Description">
             </div>
             <div class="form-group col-md-12">
                 <label for="body"> Write Content </label>
                 <textarea id="body" cols="30" rows="5" v-model="body" class="form-control"></textarea>
             </div>
             <div class="form-group col-md-12">
                 <label for="author"> Author </label>
                 <input type="text" id="author" v-model="author" name="author" class="form-control">
             </div>

             <div class="form-group col-md-4 pull-right">
                 <button class="btn btn-success" type="submit"> Create Post </button>
             </div>
         </form>
       </div>
   </div>
</template>

これは、 `+ CreatePost `コンポーネントの ` <template> `セクションです。 新しい投稿を作成するために必要なHTML入力要素が含まれています。 各入力フィールドには、入力属性として ` v-model +`ディレクティブがあります。 これは、Vue.jsがユーザーの入力を簡単に取得できるように、各フォーム入力で双方向のデータバインディングを確保するためです。

次に、前述のコンテンツの直後にある同じファイルに `+ <script> +`セクションを追加します。

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

...
<script>
import axios from "axios";
import { server } from "../../utils/helper";
import router from "../../router";
export default {
 data() {
   return {
     title: "",
     description: "",
     body: "",
     author: "",
     date_posted: ""
   };
 },
 created() {
   this.date_posted = new Date().toLocaleDateString();
 },
 methods: {
   createPost() {
     let postData = {
       title: this.title,
       description: this.description,
       body: this.body,
       author: this.author,
       date_posted: this.date_posted
     };
     this.__submitToServer(postData);
   },
   __submitToServer(data) {
     axios.post(`${server.baseURL}/blog/post`, data).then(data => {
       router.push({ name: "home" });
     });
   }
 }
};
</script>

ここでは、新しい投稿を作成し、Axiosを使用してサーバーに送信するために、 `+ createPost()+`という名前のメソッドを追加しました。 ユーザーが新しい投稿を作成すると、アプリケーションはホームページにリダイレクトされ、ユーザーは作成された投稿のリストを表示できます。

このチュートリアルの後半でリダイレクトを実装するようにvue-routerを構成します。

編集が終了したら、ファイルを保存して閉じます。 完全な `+ Create.vue +`ファイルについては、https://github.com/do-community/nest-vue-project/blob/master/blog-frontend/src/components/post/Create.vue [DOこのアプリケーションのコミュニティリポジトリ]。

次に、特定の投稿を編集するための別のコンポーネントを作成する必要があります。 `。/ src / components / post +`フォルダーに移動し、別のファイルを作成して、 ` Edit.vue `という名前を付けます。 ` <template> +`セクションを含む次のコードを追加します。

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

<template>
<div>
     <h4 class="text-center mt-20">
      <small>
        <button class="btn btn-success" v-on:click="navigate()"> View All Posts </button>
      </small>
   </h4>
       <div class="col-md-12 form-wrapper">
         <h2> Edit Post </h2>
         <form id="edit-post-form" @submit.prevent="editPost">
           <div class="form-group col-md-12">
               <label for="title"> Title </label>
               <input type="text" id="title" v-model="post.title" name="title" class="form-control" placeholder="Enter title">
           </div>
           <div class="form-group col-md-12">
               <label for="description"> Description </label>
               <input type="text" id="description" v-model="post.description" name="description" class="form-control" placeholder="Enter Description">
           </div>
           <div class="form-group col-md-12">
               <label for="body"> Write Content </label>
               <textarea id="body" cols="30" rows="5" v-model="post.body" class="form-control"></textarea>
           </div>
           <div class="form-group col-md-12">
               <label for="author"> Author </label>
               <input type="text" id="author" v-model="post.author" name="author" class="form-control">
           </div>

           <div class="form-group col-md-4 pull-right">
               <button class="btn btn-success" type="submit"> Edit Post </button>
           </div>
         </form>
       </div>
   </div>
</template>

このテンプレートセクションには、 `+ CreatePost()+`コンポーネントと同様のコンテンツが含まれています。唯一の違いは、編集する必要がある特定の投稿の詳細が含まれていることです。

次に、 `+ Edit.vue `の ` </ template> `セクションの直後に ` <script> +`セクションを追加します。

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

...
<script>
import { server } from "../../utils/helper";
import axios from "axios";
import router from "../../router";
export default {
 data() {
   return {
     id: 0,
     post: {}
   };
 },
 created() {
   this.id = this.$route.params.id;
   this.getPost();
 },
 methods: {
   editPost() {
     let postData = {
       title: this.post.title,
       description: this.post.description,
       body: this.post.body,
       author: this.post.author,
       date_posted: this.post.date_posted
     };

     axios
       .put(`${server.baseURL}/blog/edit?postID=${this.id}`, postData)
       .then(data => {
         router.push({ name: "home" });
       });
   },
   getPost() {
     axios
       .get(`${server.baseURL}/blog/post/${this.id}`)
       .then(data => (this.post = data.data));
   },
   navigate() {
     router.go(-1);
   }
 }
};
</script>

ここでは、特定の投稿を識別するためのルートパラメーター「+ id 」を取得しました。 次に、 ` getPost()`という名前のメソッドを作成して、データベースからこの投稿の詳細を取得し、それでページを更新しました。 最後に、 ` editPost()+`メソッドを作成して、PUT HTTPリクエストで編集済みの投稿をバックエンドサーバーに送信します。

ファイルを保存して終了します。 完全な `+ Edit.vue +`ファイルについては、https://github.com/do-community/nest-vue-project/blob/master/blog-frontend/src/components/post/Edit.vue [DOこのアプリケーションのコミュニティリポジトリ]。

次に、 `。/ src / components / post +`フォルダー内に新しいコンポーネントを作成し、 ` Post.vue `という名前を付けます。 これにより、ホームページから特定の投稿の詳細を表示できます。 次のコンテンツを ` Post.vue +`に追加します。

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

<template>
   <div class="text-center">
       <div class="col-sm-12">
     <h4 style="margin-top: 30px;"><small><button class="btn btn-success" v-on:click="navigate()"> View All Posts </button></small></h4>
     <hr>
     <h2>{{ post.title }}</h2>
     <h5><span class="glyphicon glyphicon-time"></span> Post by {{post.author}}, {{post.date_posted}}.</h5>
     <p> {{ post.body }} </p>

   </div>
   </div>
</template>

このコードは、「+ title」、「+ author」、および投稿「+ body +」を含む投稿の詳細をレンダリングします。

次に、 `+ </ template> +`の直後に、次のコードをファイルに追加します。

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

...
<script>
import { server } from "../../utils/helper";
import axios from "axios";
import router from "../../router";
export default {
 data() {
   return {
     id: 0,
     post: {}
   };
 },
 created() {
   this.id = this.$route.params.id;
   this.getPost();
 },
 methods: {
   getPost() {
     axios
       .get(`${server.baseURL}/blog/post/${this.id}`)
       .then(data => (this.post = data.data));
   },
   navigate() {
     router.go(-1);
   }
 }
};
</script>

編集投稿コンポーネントの「+ <script> 」セクションと同様に、ルートパラメータ「 id +」を取得し、特定の投稿の詳細を取得するために使用しました。

コンテンツの追加が終了したら、ファイルを保存して閉じます。 完全な `+ Post.vue +`ファイルについては、https://github.com/do-community/nest-vue-project/blob/master/blog-frontend/src/components/post/Post.vue [DOこのアプリケーションのコミュニティリポジトリ]。

次に、作成されたすべての投稿をユーザーに表示するには、新しいコンポーネントを作成します。 `+ src / views `の ` views `フォルダーに移動すると、 ` Home.vue +`コンポーネントが表示されます。このファイルが存在しない場合は、テキストエディターを使用して作成し、次のコードを追加します。

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

<template>
   <div>

     <div class="text-center">
       <h1>Nest Blog Tutorial</h1>
      <p> This is the description of the blog built with Nest.js, Vue.js and MongoDB</p>

      <div v-if="posts.length === 0">
           <h2> No post found at the moment </h2>
       </div>
     </div>

       <div class="row">
          <div class="col-md-4" v-for="post in posts" :key="post._id">
             <div class="card mb-4 shadow-sm">
               <div class="card-body">
                  <h2 class="card-img-top">{{ post.title }}</h2>
                 <p class="card-text">{{ post.body }}</p>
                 <div class="d-flex justify-content-between align-items-center">
                   <div class="btn-group" style="margin-bottom: 20px;">
                     <router-link :to="{name: 'Post', params: {id: post._id}}" class="btn btn-sm btn-outline-secondary">View Post </router-link>
                      <router-link :to="{name: 'Edit', params: {id: post._id}}" class="btn btn-sm btn-outline-secondary">Edit Post </router-link>
                      <button class="btn btn-sm btn-outline-secondary" v-on:click="deletePost(post._id)">Delete Post</button>
                   </div>
                 </div>

                 <div class="card-footer">
                   <small class="text-muted">Posted on: {{ post.date_posted}}</small><br/>
                   <small class="text-muted">by: {{ post.author}}</small>
                 </div>

               </div>
             </div>
           </div>
     </div>
   </div>
</template>

ここでは、 `+ <template> `セクション内で、 ` <router-link> `を使用して、クエリとして ` post._id `を渡すことで、投稿を表示するためだけでなく編集用のリンクを作成しましたパラメータ。 また、ユーザーに対して投稿を条件付きでレンダリングするために、 ` v-if +`ディレクティブを使用しました。 データベースから投稿がない場合、ユーザーには次のテキストのみが表示されます:現時点では投稿が見つかりません

ファイルを保存して終了します。 完全な `+ Home.vue +`ファイルについては、https://github.com/do-community/nest-vue-project/blob/master/blog-frontend/src/views/Home.vue [DO Community repository ]このアプリケーション用。

ここで、 `+ Home.vue `の ` </ template> `セクションに直接続いて、次の ` </ script> +`セクションを追加します。

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

...
<script>
// @ is an alias to /src
import { server } from "@/utils/helper";
import axios from "axios";

export default {
 data() {
   return {
     posts: []
   };
 },
 created() {
   this.fetchPosts();
 },
 methods: {
   fetchPosts() {
     axios
       .get(`${server.baseURL}/blog/posts`)
       .then(data => (this.posts = data.data));
   },
   deletePost(id) {
     axios.delete(`${server.baseURL}/blog/delete?postID=${id}`).then(data => {
       console.log(data);
       window.location.reload();
     });
   }
 }
};
</script>

このファイルの「+ <script> 」セクション内で、データベースからすべての投稿を取得する「 fetchPosts()+」という名前のメソッドを作成し、サーバーから返されたデータでページを更新しました。

次に、フロントエンドアプリケーションの「+ App 」コンポーネントを更新して、「 Home 」および「 Create 」コンポーネントへのリンクを作成します。 ` src / App.vue +`を開き、次のように更新します。

〜blog-frontend / src / App.vue

<template>
 <div id="app">
   <div id="nav">


   </div>
   <router-view/>
 </div>
</template>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #2c3e50;
}
#nav {
 padding: 30px;
 text-align: center;
}

#nav a {
 font-weight: bold;
 color: #2c3e50;
}

#nav a.router-link-exact-active {
 color: #42b983;
}
</style>

`+ Home `と ` Create `コンポーネントの両方へのリンクを含めることとは別に、 ` <Style> +`セクションも含めました。このセクションは、このコンポーネントのスタイルシートで、上の要素の一部のスタイルの定義ページ。 ファイルを保存して終了します。

このステップでは、アプリケーションに必要なすべてのコンポーネントを作成しました。 次に、ルーターファイルを構成します。

ステップ9-ルーティングのセットアップ

必要なすべての再利用可能なコンポーネントを作成した後、作成したすべてのコンポーネントへのリンクでコンテンツを更新することにより、ルーターファイルを適切に構成できるようになりました。 これにより、フロントエンドアプリケーション内のすべてのエンドポイントが適切なアクションのために特定のコンポーネントにマップされます。 `+。/ src / router.js`に移動し、そのコンテンツを次のものに置き換えます。

〜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 }
 ]
});

`+ vue-router `モジュールから ` Router `をインポートし、 ` mode `および ` routes `パラメーターを渡すことでインスタンス化しました。 「+」のデフォルトモードはハッシュモードで、URLハッシュを使用して完全なURLをシミュレートし、URLが変更されたときにページがリロードされないようにします。 ハッシュを不要にするために、ここでは履歴モードを使用して、ページをリロードすることなくURLナビゲーションを実現しています。 最後に、 `+ routes +`オプション内で、エンドポイントのパス(ルートの名前と、アプリケーション内でルートが呼び出されたときにレンダリングされるコンポーネント)を指定しました。 ファイルを保存して終了します。

アプリケーションへのルーティングを設定したので、Bootstrapファイルを含めて、アプリケーションのユーザーインターフェイスの事前に構築されたスタイル設定を支援する必要があります。 それを実現するには、テキストエディタで `+。/ public / index.html`ファイルを開き、次のコンテンツをファイルに追加してBootstrapのCSSファイルを含めます。

〜blog-frontend / public / index.html

<!DOCTYPE html>
<html lang="en">
<head>
 ...

 <title>blog-frontend</title>
</head>
<body>
  ...
</body>
</html>

ファイルを保存して終了し、現在実行されていない場合は、 `+`に対して ` npm run serve +`でアプリケーションを再起動します。

アプリケーションの `+ http:// localhost:8080 +`に移動します。 これで、投稿を作成および編集してブログをテストできます。

image:https://assets.digitalocean.com/articles/nest_vue_mongo/step9a.png [Alt新しい投稿を作成]

アプリケーションの* Create をクリックして、 CreatePost *画面を表示します。この画面は、 `+ CreateComponent +`ファイルに関連し、レンダリングします。 入力フィールドに値を入力し、[投稿を作成]ボタンをクリックして投稿を送信します。 完了すると、アプリケーションはホームページにリダイレクトします。

アプリケーションのホームページは `+ HomeComponent +`をレンダリングします。 このコンポーネントには、データベースからすべての投稿を取得してユーザーに表示するHTTP呼び出しを送信するメソッドがあります。

image:https://assets.digitalocean.com/articles/nest_vue_mongo/step9b.png [Altデータベースのすべての投稿を表示]

特定の投稿の[投稿の編集]ボタンをクリックすると、編集ページが表示され、変更を組み込んで投稿を保存できます。

image:https://assets.digitalocean.com/articles/nest_vue_mongo/step9c.png [新しい投稿の編集]

このセクションでは、アプリケーションのルーティングを構成および設定しました。 これで、ブログアプリケーションの準備が整いました。

結論

このチュートリアルでは、Nest.jsを使用してNode.jsアプリケーションを構築する新しい方法を検討しました。 Nest.jsを使用してバックエンドRESTful APIを構築するシンプルなブログアプリケーションを作成し、Vue.jsを使用してすべてのフロントエンドロジックを処理しました。 さらに、MongoDBをNest.jsアプリケーションのデータベースとして統合しました。

アプリケーションに認証を追加する方法の詳細については、一般的なNode.js認証ライブラリであるhttp://www.passportjs.org/[Passport.js]を利用できます。 Passport.jsの統合については、https://docs.nestjs.com/techniques/authentication [Nest.js documentation]で学習できます。

このプロジェクトの完全なソースコードは、https://github.com/do-community/nest-vue-project [GitHub]で確認できます。 Nest.jsの詳細については、https://docs.nestjs.com/ [公式ドキュメント]をご覧ください。