Nest.js、MongoDB、Vue.jsでブログを作成する方法
著者は、 Write for DOnations プログラムの一環として寄付を受け取るために、 Software in the Public InterestIncを選択しました。
序章
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で構築するフロントエンドに焦点を当てます。 両方のアプリケーションは異なるポートで実行され、別々のドメインとして機能します。
ユーザーが新しい投稿を作成して保存したり、保存した投稿をホームページに表示したり、投稿の編集や削除などの他のプロセスを実行したりできるブログアプリケーションを作成します。 さらに、アプリケーションを接続し、そのデータを MongoDB で永続化します。これは、JSONドキュメントを受信および保存できるスキーマレスのNoSQLデータベースです。 このチュートリアルは、開発環境でのアプリケーションの構築に焦点を当てています。 実稼働環境では、アプリケーションのユーザー認証も検討する必要があります。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.js (少なくともv6)および npm (少なくともv5.2)のローカルインストール。 Node.jsは、ブラウザの外部でコードを実行できるJavaScriptランタイム環境です。
npm
と呼ばれるパッケージマネージャーがプリインストールされており、パッケージをインストールおよび更新できます。 これらをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはノードをインストールする方法の「PPAを使用してインストールする」セクションの手順に従います。 Ubuntu18.04の.js。 - マシンにインストールされているMongoDB。 こちらの手順に従って、選択したオペレーティングシステム用にダウンロードしてインストールします。 MongoDBを正常にインストールするには、MacでHomebrewを使用するか、MongoDBWebサイトからダウンロードしてインストールします。
- TypeScriptとJavaScriptの基本的な理解。
- Visual Studio Code 、 Atom 、 SublimeTextなどのテキストエディターがインストールされています。
注:このチュートリアルでは、開発にmacOSマシンを使用します。 別のオペレーティングシステムを使用している場合は、チュートリアル全体でnpm
コマンドにsudo
を使用する必要がある場合があります。
ステップ1—Nest.jsおよびその他の依存関係のインストール
このセクションでは、アプリケーションとその必要な依存関係をローカルマシンにインストールすることにより、Nest.jsの使用を開始します。 Nest.jsが提供するCLIを使用するか、GitHubからスタータープロジェクトをインストールすることで、Nest.jsを簡単にインストールできます。 このチュートリアルでは、CLIを使用してアプリケーションをセットアップします。 まず、ターミナルから次のコマンドを実行して、マシンにグローバルにインストールします。
npm i -g @nestjs/cli
次のような出力が表示されます。
Output@nestjs/[email protected] added 220 packages from 163 contributors in 49.104s
Nest CLIのインストールを確認するには、ターミナルから次のコマンドを実行します。
nest --version
マシンにインストールされている現在のバージョンを示す出力が表示されます。
Output5.8.0
nest
コマンドを使用してプロジェクトを管理し、それを使用して、コントローラー、モジュール、プロバイダーなどの関連ファイルを生成します。
このチュートリアルのプロジェクトを開始するには、nest
コマンドを使用して、ターミナルから次のコマンドを実行し、blog-backend
という名前の新しいNest.jsプロジェクトを作成します。
nest new blog-backend
コマンドを実行した直後に、nest
は、description
、version
、author
などの基本情報を入力するように求めます。 先に進み、適切な詳細を提供します。 各プロンプトに応答した後、続行するには、コンピューターでENTER
を押します。
次に、パッケージマネージャーを選択します。 このチュートリアルでは、npm
を選択し、ENTER
を押してNest.jsのインストールを開始します。
これにより、ローカル開発フォルダー内のblog-backend
フォルダーに新しいNest.jsプロジェクトが生成されます。
次に、ターミナルから新しいプロジェクトのフォルダに移動します。
cd blog-backend
次のコマンドを実行して、他のサーバーの依存関係をインストールします。
npm install --save @nestjs/mongoose mongoose
MongoDBのオブジェクトモデリングツール用のNest.js専用パッケージである@nestjs/mongoose
と、Mongoose用のパッケージであるmongoose
をインストールしました。
次に、次のコマンドを使用してアプリケーションを起動します。
npm run start
これで、お気に入りのブラウザからhttp://localhost:3000
に移動すると、アプリケーションが実行されていることがわかります。
Nest CLIコマンドの可用性を活用して、プロジェクトを正常に生成しました。 その後、アプリケーションの実行に進み、ローカルマシンのデフォルトポート3000
でアクセスしました。 次のセクションでは、データベース接続の構成をセットアップすることにより、アプリケーションをさらに進めます。
ステップ2—データベースの構成と接続
このステップでは、MongoDBを構成してNest.jsアプリケーションに統合します。 MongoDBを使用して、アプリケーションのデータを保存します。 MongoDBは、データをドキュメントにフィールド:値のペアとして格納します。 このデータ構造にアクセスするには、 Mongoose を使用します。これは、MongoDBデータベースが格納するデータのタイプを表すスキーマを定義できるオブジェクトドキュメントモデリング(ODM)です。
MongoDBを起動するには、アプリケーションが実行を継続できるように別のターミナルウィンドウを開き、次のコマンドを実行します。
sudo mongod
これにより、MongoDBサービスが開始され、マシンのバックグラウンドでデータベースが実行されます。
テキストエディタでプロジェクトblog-backend
を開き、./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'; import { MongooseModule } from '@nestjs/mongoose'; @Module({ imports: [ MongooseModule.forRoot('mongodb://localhost/nest-blog', { useNewUrlParser: true }), ], controllers: [AppController], providers: [AppService], }) export class AppModule { }
このファイルでは、forRoot()
メソッドを使用して、データベースへの接続を提供します。 編集が終了したら、ファイルを保存して閉じます。
これで、MongoDB用のMongooseモジュールを使用してデータベース接続をセットアップしました。 次のセクションでは、Mongooseライブラリ、TypeScriptインターフェイス、およびデータ転送オブジェクト(DTO)スキーマを使用してデータベーススキーマを作成します。
ステップ3—データベーススキーマ、インターフェイス、およびDTOを作成する
このステップでは、Mongooseを使用して、データベース用の schema 、 interface 、および data transferobjectを作成します。 Mongooseは、データ間の関係を管理するのに役立ち、データ型のスキーマ検証を提供します。 アプリケーションのデータベース内のデータの構造とデータ型を定義しやすくするために、以下を決定するファイルを作成します。
- データベーススキーマ:これは、データベースに格納する必要のあるデータの構造とタイプを定義するための青写真としてのデータの編成です。
- 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 ~/blog-backend/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 ~/blog-backend/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
の配列を取ります。
構造をより整理された状態に保つために、このブログアプリケーション用の新しいモジュールを生成します。 まず、 ~/blog-backend
フォルダーで、次のコマンドを実行します。
nest generate module blog
次のような出力が表示されます。
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
は、チュートリアルの後半で必要なプロパティで更新します。 ファイルを保存して終了します。
サービスの生成
service は、Nest.jsではプロバイダーとも呼ばれ、コントローラーからロジックを削除するように設計されています。これは、HTTP要求のみを処理し、より複雑なタスクをサービスにリダイレクトすることを目的としています。 サービスはプレーンなJavaScriptクラスであり、その上に@Injectable()
デコレータがあります。 新しいサービスを生成するには、プロジェクトディレクトリ内にいる間に、ターミナルから次のコマンドを実行します。
nest generate service blog
次のような出力が表示されます。
[secondary_label 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
ファイルを作成しました。 また、新しいblog.service.ts
ファイルを作成しました。このファイルは、このアプリケーションのすべてのロジックを保持し、MongoDBデータベースへのドキュメントの追加と取得を処理します。 また、新しく作成されたサービスが自動的にインポートされ、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``'``)
を追加しました。これにより、Post
モデルがこのBlogService
クラスに挿入されます。 これで、この挿入されたモデルを使用して、すべての投稿を取得したり、1つの投稿を取得したり、その他のデータベース関連のアクティビティを実行したりできるようになります。
次に、次のメソッドを作成しました。
getPosts()
:データベースからすべての投稿をフェッチします。getPost()
:データベースから単一の投稿を取得します。addPost()
:新しい投稿を追加します。editPost()
:単一の投稿を更新します。deletePost()
:特定の投稿を削除します。
終了したら、ファイルを保存して終了します。
これで、バックエンドAPIからのMongoDBデータベースとの適切な相互作用を処理するいくつかのメソッドの設定と作成が完了しました。 次に、フロントエンドクライアントからのHTTP呼び出しを処理する必要なルートを作成します。
コントローラーの生成
巣の中。 js、 controllers は、アプリケーションのクライアント側からの着信要求を処理し、適切な応答を返す責任があります。 他のほとんどのWebフレームワークと同様に、アプリケーションが要求をリッスンしてそれに応答することが重要です。
ブログアプリケーションのすべてのHTTPリクエストに対応するには、nest
コマンドを使用して新しいコントローラーファイルを生成します。 プロジェクトディレクトリblog-backend
にいることを確認し、次のコマンドを実行します。
nest generate controller blog
次のような出力が表示されます。
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リクエストを処理するために必要なモジュールをインポートしました。 次に、BlogService
、CreatePostDTO
、およびValidateObjectId
の3つの新しいモジュールをインポートしました。 その後、BlogService
ファイル内ですでに定義されている関数にアクセスして利用するために、コンストラクターを介してBlogService
をコントローラーに挿入しました。 これは、Nest.jsで使用される依存性注入と見なされるパターンであり、効率を高め、アプリケーションのモジュール性を強化します。
最後に、次の非同期メソッドを作成しました。
getPosts()
:このメソッドは、クライアントからHTTP GET要求を受信してデータベースからすべての投稿をフェッチし、適切な応答を返す機能を実行します。@Get(``'``posts``'``)
で飾られています。getPost()
:これはpostID
をパラメーターとして受け取り、データベースから単一の投稿をフェッチします。 このメソッドに渡されるpostID
パラメーターに加えて、ValidateObjectId()
という名前の追加のメソッドが追加されていることに気づきました。 このメソッドは、Nest.jsのPipeTransform
インターフェイスを実装します。 その目的は、postID
パラメーターがデータベースで検出されることを検証および確認することです。 このメソッドは次のセクションで定義します。addPost()
:このメソッドは、データベースに新しい投稿を追加するためのPOSTHTTPリクエストを処理します。
特定の投稿を編集および削除できるようにするには、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
と、プレフィックスposts
を受け取るgetPosts()
という名前のメソッドがあります。 これは、blog/posts
(http:localhost:3000/blog/posts
)のエンドポイントに送信されたGET要求は、getPosts()
メソッドによって処理されることを意味します。 この例は、他のメソッドがHTTP要求を処理する方法と似ています。
ファイルを保存して終了します。
完全なblog.controller.ts
ファイルについては、このアプリケーションのDOコミュニティリポジトリにアクセスしてください。
このセクションでは、アプリケーションをより整理された状態に保つためのモジュールを作成しました。 また、データベースと対話して適切な応答を返すことにより、アプリケーションのビジネスロジックを処理するサービスを作成しました。 最後に、コントローラーを生成し、クライアント側からGET
、POST
、PUT
、DELETE
などのHTTPリクエストを処理するために必要なメソッドを作成しました。 次のステップでは、バックエンドのセットアップを完了します。
ステップ5—マングースの追加の検証を作成する
ブログアプリケーションの各投稿は、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リクエストは、無効と見なされます。 ファイルを保存して閉じます。
サービスとコントローラーの両方を作成したら、BlogSchema
に基づくPost
モデルをセットアップする必要があります。 この構成はルート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'; 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 { }
このモジュールは、MongooseModule.forFeature()
メソッドを使用して、モジュールに登録するモデルを定義します。 これがないと、@injectModel()
デコレータを使用してBlogService
内にPostModel
を挿入することはできません。 コンテンツの追加が完了したら、ファイルを保存して閉じます。
このステップでは、Nest.jsを使用して完全なバックエンドRESTful APIを作成し、MongoDBと統合しました。 次のセクションでは、フロントエンドアプリケーションが別のポートで実行されるため、別のサーバーからのHTTPリクエストを許可するようにサーバーを構成します。
ステップ6—CORSを有効にする
あるドメインから別のドメインへのHTTPリクエストは、サーバーによって許可するように指定されている場合を除いて、デフォルトでブロックされることがよくあります。 フロントエンドアプリケーションがバックエンドサーバーにリクエストを送信するには、クロスオリジンリソースシェアリング(CORS)を有効にする必要があります。これは、ウェブページで制限されたリソースのリクエストを許可する手法です。
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); app.enableCors(); await app.listen(3000); } bootstrap();
ファイルを保存して終了します。
バックエンドのセットアップが完了したので、フォーカスをフロントエンドに移し、Vue.jsを使用してこれまでに構築されたAPIを使用します。
ステップ7—Vue.jsフロントエンドを作成する
このセクションでは、Vue.jsを使用してフロントエンドアプリケーションを作成します。 Vue CLI は、手間をかけずに新しいVue.jsプロジェクトをすばやく生成してインストールできる標準ツールです。
まず、マシンにVueCLIをグローバルにインストールする必要があります。 別のターミナルを開き、blog-backend
フォルダーから作業する代わりに、ローカルプロジェクトの開発フォルダーに移動して次のコマンドを実行します。
npm install -g @vue/cli
インストールプロセスが完了したら、vue
コマンドを使用して新しいVue.jsプロジェクトを作成します。
vue create blog-frontend
このコマンドを入力すると、短いプロンプトが表示されます。 manually select features
オプションを選択し、コンピューターでSPACE
を押して複数の機能を強調表示することにより、このプロジェクトに必要な機能を選択します。 Babel
、Router
、Linter / Formatter
を選択します。
次の手順については、y
と入力して、ルーターの履歴モードを使用します。 これにより、ルーターファイル内で履歴モードが有効になり、このプロジェクト用に自動的に生成されます。 さらに、ESLint with error prevention only
を選択して、リンター/フォーマッター構成を選択します。 次に、Lint on save
を選択して、追加のLint機能を表示します。 次に、将来のプロジェクトのために構成をdedicated config file
に保存することを選択します。 vueconfig
のようにプリセットの名前を入力します。
その後、Vue.jsは、blog-frontend
という名前のディレクトリにアプリケーションとそれに必要なすべての依存関係の作成を開始します。
インストールプロセスが完了したら、Vue.jsアプリケーション内を移動します。
cd blog-frontend
次に、次のコマンドで開発サーバーを起動します。
npm run serve
アプリケーションはhttp://localhost:8080
で実行されます。
このアプリケーション内でHTTPリクエストを実行するため、ブラウザ用のPromiseベースのHTTPクライアントであるAxiosをインストールする必要があります。 ここではAxiosを使用して、アプリケーション内のさまざまなコンポーネントからHTTPリクエストを実行します。 コンピューターの端末からCTRL + C
を押してフロントエンドアプリケーションを停止し、次のコマンドを実行します。
npm install axios --save
フロントエンドアプリケーションは、アプリケーション内のさまざまなコンポーネントから特定のドメインのバックエンドAPIへのAPI呼び出しを行います。 このアプリケーションの適切な構造を確保するために、helper
ファイルを作成し、サーバーbaseURL
を定義できます。
まず、blog-frontend
内にある端末から、./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アプリケーションを作成するためのツールであるVueCLIをインストールしました。 このツールを使用して、blog-frontend
アプリケーションを作成しました。 さらに、アプリケーションを実行し、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>
ここでは、createPost()
という名前のメソッドを追加して、新しい投稿を作成し、Axiosを使用してサーバーに送信します。 ユーザーが新しい投稿を作成すると、アプリケーションはホームページにリダイレクトされ、そこでユーザーは作成された投稿のリストを表示できます。
このチュートリアルの後半で、リダイレクトを実装するようにvue-routerを構成します。
編集が終了したら、ファイルを保存して閉じます。 完全な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()
メソッドを作成して、編集した投稿をPUTHTTPリクエストでバックエンドサーバーに送信します。
ファイルを保存して終了します。 完全な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
ファイルについては、このアプリケーションの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
ファイルについては、このアプリケーションのDOコミュニティリポジトリにアクセスしてください。
ここで、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"> <router-link to="/">Home</router-link> | <router-link to="/create">Create</router-link> </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
パラメーターを渡してインスタンス化しました。 vue-router
のデフォルトモードはハッシュモードです。このモードでは、URLハッシュを使用して完全なURLをシミュレートし、URLが変更されたときにページが再読み込みされないようにします。 ハッシュを不要にするために、ここでは履歴モードを使用して、ページをリロードせずにURLナビゲーションを実現しました。 最後に、routes
オプション内で、エンドポイントのパスを指定しました。これは、ルートの名前と、アプリケーション内でルートが呼び出されたときにレンダリングされるコンポーネントです。 ファイルを保存して終了します。
アプリケーションへのルーティングを設定したので、アプリケーションのユーザーインターフェイスの事前に作成されたスタイル設定に役立つBootstrapファイルを含める必要があります。 これを実現するには、テキストエディタで./public/index.html
ファイルを開き、ファイルに次のコンテンツを追加して、ブートストラップ用のCDNファイルを含めます。
〜blog-frontend / public / index.html
<!DOCTYPE html> <html lang="en"> <head> ... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <title>blog-frontend</title> </head> <body> ... </body> </html>
ファイルを保存して終了し、blog-frontend
が現在実行されていない場合は、npm run serve
を使用してアプリケーションを再起動します。
注:バックエンドサーバーとMongoDBインスタンスの両方が実行されていることを確認してください。 それ以外の場合は、別の端末からblog-backend
に移動し、npm run start
を実行します。 また、新しい端末からもsudo mongod
を実行して、MongoDBサービスを開始します。
http://localhost:8080
でアプリケーションに移動します。 これで、投稿を作成および編集してブログをテストできます。
アプリケーションでCreateをクリックすると、 Create Post 画面が表示されます。この画面は、CreateComponent
ファイルに関連してレンダリングされます。 入力フィールドに値を入力し、投稿の作成ボタンをクリックして投稿を送信します。 完了すると、アプリケーションはホームページにリダイレクトします。
アプリケーションのホームページはHomeComponent
をレンダリングします。 このコンポーネントには、データベースからすべての投稿をフェッチしてユーザーに表示するHTTP呼び出しを送信するメソッドがあります。
特定の投稿の投稿の編集ボタンをクリックすると、編集ページに移動し、変更を組み込んで投稿を保存できます。
このセクションでは、アプリケーションのルーティングを構成および設定しました。 これで、ブログアプリケーションの準備が整いました。
結論
このチュートリアルでは、Nest.jsを使用してNode.jsアプリケーションを構築する新しい方法を検討しました。 Nest.jsを使用してバックエンドRESTfulAPIを構築する簡単なブログアプリケーションを作成し、Vue.jsを使用してすべてのフロントエンドロジックを処理しました。 さらに、MongoDBをNest.jsアプリケーションのデータベースとして統合しました。
アプリケーションに認証を追加する方法の詳細については、人気のあるNode.js認証ライブラリであるPassport.jsを利用できます。 Passport.jsの統合については、Nest.jsのドキュメントで学ぶことができます。
このプロジェクトの完全なソースコードは、GitHubにあります。 Nest.jsの詳細については、公式ドキュメントにアクセスしてください。