Node、Bootstrap、MongoDB を使用して簡単な初心者アプリを構築する

Node.jsを使い始めたばかりで、Webアプリの作成を試してみたい場合は、多くの場合、少し圧倒されることがあります。「Hello、World！」を超えたらチュートリアルでは、そこにある資料の多くに、コピーして貼り付けるコードがあり、何をしているのか、またはその理由についてほとんどまたはまったく説明がありません。

これは、完成するまでに素晴らしいものを作成したことを意味しますが、次のプロジェクトに適用できる要点も比較的少ないことを意味します。

このチュートリアルでは、少し異なるアプローチをとります。最初から、Node.jsを使用して飾り気のないWebアプリを構築する方法を示しますが、最終結果に焦点を当てるのではなく、構築時に遭遇する可能性のあるさまざまなことに焦点を当てます現実のアプリ。これらには、ルーティング、テンプレート、フォームの処理、データベースとの対話、さらには基本認証が含まれます。

これはJavaScript 101にはなりません。それがあなたが望んでいるようなものなら、ここを見て。ただし、JavaScript言語にある程度の自信があり、次のことを望んでいる人には適しています。 Node.jsで最初の一歩を踏み出す.

構築するもの

私たちは使っているよ Node.js と Expressフレームワーク基本的な検証を備えた単純な登録フォームを作成し、そのデータを MongoDBデータベース。成功した登録を一覧表示するビューを追加します。これは、基本的なHTTP認証で保護し、以下を使用します。ブートストラップスタイリングを追加します。チュートリアルは、段階的に進むことができるように構成されています。ただし、先にジャンプして最終結果を確認したい場合は、このチュートリアルのコードはGitHubでも入手できます.

基本設定

コーディングを開始する前に、Node、npm、MongoDBをマシンにインストールする必要があります。さまざまなインストール手順については詳しく説明しませんが、セットアップに問題がある場合は、フォーラムにアクセスそこで助けを求めます。

Node.js

多くのウェブサイトはあなたに向かうことを勧めます公式ノードダウンロードページシステムのノードバイナリを取得します。これは機能しますが、代わりにバージョンマネージャを使用することをお勧めします。これは、Nodeの複数のバージョンをインストールして、それらを自由に切り替えることができるプログラムです。バージョンマネージャを使用することには、さまざまな利点があります。たとえば、管理者権限でパッケージをインストールしている場合に発生する可能性のある、潜在的な権限の問題を無効にします。

バージョンマネージャーのルートに興味がある場合は、簡単なヒントを参照してください。 nvmを使用してNode.jsの複数のバージョンをインストールする。それ以外の場合は、上記のリンクからシステムに適したバイナリを取得し、それらをインストールしてください。

npm

npmは、NodeにバンドルされているJavaScriptパッケージマネージャーであるため、追加のインストールは必要ありません。このチュートリアルではnpmをかなり広範囲に使用するため、復習が必要な場合は、相談してください npmの初心者向けガイド— Node Package Manager.

MongoDBの

MongoDBは、JSONのような柔軟なドキュメントにデータを保存するドキュメントデータベースです。これまでにMongoを使用したことがない場合は、 MongoDBの初心者フレンドリーな紹介.

Mongoを使い始める最も速い方法は、mLabsなどのサービスを使用することです。彼らは、共有仮想マシン上で実行されている0.5GBのストレージを備えた単一のデータベースを提供する無料のサンドボックスプランを持っています。これは、少数のユーザーを持つ単純なアプリには十分すぎるほどです。これがあなたにとって最良の選択肢のように思えるなら、彼らに相談してくださいクイックスタートガイド.

Mongoをローカルにインストールすることもできます。これを行うには、公式ダウンロードページご使用のオペレーティングシステムに対応するコミュニティサーバーの正しいバージョンをダウンロードします。すべてのダウンロードリンクの下に、OS固有の詳細なインストール手順へのリンクがあり、問題が発生した場合に参照できます。

MongoDB GUI

このチュートリアルに従うのに厳密には必要ではありませんが、インストールすることもできます MongoDBの公式GUIであるCompass。このツールは、データを視覚化して操作するのに役立ち、完全なCRUD機能を使用してドキュメントを操作できます。

すべてが正しくインストールされていることを確認する

Nodeとnpmが正しくインストールされていることを確認するには、ターミナルを開いて次のように入力します。

node -v

に続く：

npm -v

これにより、各プログラムのバージョン番号が出力されます（12.14.1 および 6.13.6 それぞれ執筆時）。

Mongoをローカルにインストールした場合は、次を使用してバージョン番号を確認できます。

mongo --version

これにより、バージョン番号（4.2.2 執筆時）。

コンパスを使用してデータベース接続を確認する

Mongoをローカルにインストールした場合は、ターミナルに次のコマンドを入力してサーバーを起動します。

mongod

次に、コンパスを開きます。デフォルトを受け入れることができるはずです（サーバー： localhost、ポート：27017）、 CONNECT ボタンをクリックして、データベースサーバーへの接続を確立します。

localhost：27107に接続されたMongoDB Compass

ローカルホストに接続されたMongoDBコンパス

データベースに注意してください admin, config および local 自動的に作成されます。

クラウドでホストされるソリューションの使用

mLabsを使用している場合は、データベースサブスクリプションを作成します（クイックスタートガイド）、接続の詳細を書き留めます。

コンパスを開き、クリック 新しい接続をタップし、その後、 接続フィールドを個別に入力します。選択する ユーザー名パスワード 認証方法として、残りの詳細を入力します。最後に、 CONNECT そして、あなたはレースに出かける必要があります。

注：接続文字列を使用する場合は、次のようになります。 mongodb://<dbuser>:<dbpassword>@ds211709.mlab.com:11709/?authSource=<dbname>.

mLabに接続されたMongoDB Compass

mLabに接続されたMongoDB Compass

データベースに電話したことに注意してください sp-node-article。あなたはあなたの好きなものを呼び出すことができます。

アプリケーションを初期化する

すべてが正しくセットアップされたら、最初に行う必要があるのは、新しいプロジェクトを初期化することです。これを行うには、次の名前のフォルダを作成します demo-node-app、そのディレクトリに入り、ターミナルで次のように入力します。

npm init -y

これにより、 package.json プロジェクトルートのファイル。このファイルを使用して、依存関係を指定し、さまざまなファイルを作成できます。 npmスクリプト、開発ワークフローを支援します。

Expressをインストールする

ExpressはNode.js用の軽量なWebアプリケーションフレームワークであり、Webアプリを作成するための堅牢な機能セットを提供します。これらの機能には、ルート処理、テンプレートエンジンの統合、ミドルウェアフレームワークなどが含まれ、リクエストオブジェクトとレスポンスオブジェクトで追加のタスクを実行できます。単純なNode.jsではできなかったことがExpressでできることは何もありませんが、Expressを使用すると、ホイールを再発明する必要がなく、ボイラープレートが削減されます。

インストールしましょうエクスプレス。これを行うには、ターミナルで次のコマンドを実行します。

npm install express

これにより、Expressが dependencies のセクション package.json ファイル。これは、Expressがアプリが適切に機能するために必要なパッケージであることを、コードを実行している他のユーザーに通知します。

nodemonをインストールする

ノードモン便利なツールです。起動されたディレクトリ内のファイルを監視し、変更を検出した場合は、自動的にノードアプリケーションを再起動します（必要はありません）。 Expressとは対照的に、nodemonはアプリが正しく機能するために必要なものではありません（開発に役立つだけです）。

npm install --save-dev nodemon

これにより、nodemonが dev-dependencies のセクション package.json ファイルにソフトウェアを指定する必要があります。

いくつかの初期ファイルを作成する

セットアップはほぼ完了です。ここで必要なのは、アプリを開始する前にいくつかの初期ファイルを作成することだけです。

demo-node-app フォルダー作成 app.js ファイルと start.js ファイル。また、 routes フォルダ、 index.js 内部ファイル。完了すると、次のようになります。

.
├── app.js
├── node_modules
│ └── ...
├── package.json
├── package-lock.json
├── routes
│ └── index.js
└── start.js

次に、これらのファイルにコードを追加します。

In app.js:

const express = require('express');
const routes = require('./routes/index'); const app = express();
app.use('/', routes); module.exports = app;

ここでは、両方をインポートしています express モジュールとルートファイル（のエクスポート値）をアプリケーションに送信します。の require これを行うために使用している関数は、別のファイルまたはモジュールからオブジェクトをインポートする組み込みのNode関数です。モジュールのインポートとエクスポートについて復習したい場合は、 Node.jsでのmodule.exportsとexportsについて.

その後、新しいExpressアプリを作成します。表現します関数とそれを app 変数。次に、フォワードスラッシュからのリクエストを受信するときは常に、ルートファイルを使用する必要があることをアプリに伝えます。

最後に、アプリ変数をエクスポートして、他のファイルでインポートして使用できるようにします。

In start.js:

const app = require('./app'); const server = app.listen(3000, () => { console.log(`Express is running on port ${server.address().port}`);
});

ここでは、作成したExpressアプリをインポートしています app.js。（私たちは残すことができることに注意してください .js のファイル名から require 次に、ポート3000で着信接続をリッスンし、サーバーが実行中であることを示すメッセージをターミナルに出力するようにアプリに指示します。

そして、中 routes/index.js:

const express = require('express'); const router = express.Router(); router.get('/', (req, res) => { res.send('It works!');
}); module.exports = router;

ここでは、Expressをルートファイルにインポートし、そこからルーターを取得しています。次にルーターを使用して、ルートURLへのリクエストに応答します（この場合は http://localhost:3000）「うまくいく！」メッセージ。

アプリのキックオフ

最後に、npmスクリプトを追加して、nodemonがアプリの監視を開始できるようにします。変更 scripts のセクション package.json このように見えるファイル：

"scripts": { "watch": "nodemon ./start.js"
},

　 scripts のプロパティ package.json ファイルは、さまざまなシナリオで実行する任意のスクリプトを指定できるため、非常に便利です。つまり、覚えにくい構文を使用して、長々としたコマンドを繰り返し入力する必要がありません。 npmスクリプトで何ができるかについて詳しく知りたい場合は、 Grunt the Boot！ npmをビルドツールとして使用するためのガイド.

今すぐ入力してください npm run watch ターミナルから訪問 http://localhost:3000.

「うまくいく」と表示されます。

Pugによる基本的なテンプレート

ルートハンドラー内からインラインレスポンスを返すことはすべてうまくいきますが、あまり拡張性がなく、これがテンプレートエンジンの出番です。エクスプレスドキュメント状態：

テンプレートエンジンを使用すると、アプリケーションで静的テンプレートファイルを使用できます。実行時に、テンプレートエンジンはテンプレートファイルの変数を実際の値に置き換え、テンプレートをクライアントに送信されるHTMLファイルに変換します。

実際には、これは、テンプレートファイルを定義し、すべてをインラインで記述する代わりに、それらを使用するようにルートに指示できることを意味します。今それをしましょう。

名前付きのフォルダを作成する views そしてそのフォルダーに form.pug。この新しいファイルに次のコードを追加します。

form(action="." method="POST") label(for="name") Name: input( type="text" id="name" name="name" ) label(for="email") Email: input( type="email" id="email" name="email" ) input(type="submit" value="Submit")

ファイルの末尾から推測できるため、ここではパグテンプレートエンジン私たちのアプリで。 Pug（旧称Jade）には、動的で再利用可能なHTMLを作成するための独自のインデント依存の構文が付属しています。うまくいけば、上の例は簡単に理解できますが、それが何であるかを理解するのが難しい場合は、ブラウザでこれが表示されるまで待ってから、ページのソースを調べて、生成されたマークアップを確認してください。

続行する前にPugについてもう少し詳しく知りたい場合は、チュートリアルを読んでくださいパグの初心者向けガイド.

PugをインストールしてExpressアプリに統合する

次に、pugをインストールして、依存関係として保存する必要があります。

npm install pug

次に設定します app.js Pugをレイアウトエンジンとして使用し、内部でテンプレートを探す views フォルダ：

const express = require('express');
const path = require('path');
const routes = require('./routes/index'); const app = express(); app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug'); app.use('/', routes); module.exports = app;

Nodeのネイティブも必要であることにお気づきでしょうか。パスモジュール、ファイルとディレクトリのパスを操作するためのユーティリティを提供します。このモジュールを使用すると、 views そのを使用してフォルダ結合方法および __ディレクトリ名（現在実行中のスクリプトが存在するディレクトリを返します）。

ルートを変更してテンプレートを使用する

最後に、新しいテンプレートを使用するようにルートを指定する必要があります。に routes/index.js:

router.get('/', (req, res) => { res.render('form');
});

これはレンダリング方法 Expressの応答オブジェクトで、レンダリングされたビューをクライアントに送信します。

それがうまくいったかどうか見てみましょう。 nodemonを使用してアプリの変更を監視しているので、ブラウザーを更新して、ブルータリストの傑作を見ることができます。

Pugのレイアウトファイルを定義する

ブラウザーを開いてページのソースを調べると、ExpressがフォームのHTMLのみを送信していることがわかります。ページには、doctype宣言と、headおよびbodyセクションがありません。使用するすべてのテンプレートのマスターレイアウトを作成して、問題を修正しましょう。

これを行うには、 layout.pug 内のファイル views フォルダに次のコードを追加します。

doctype html
html head title= `${title}` body h1 My Amazing App block content

ここで最初に気づくのは行の始まりです title=。等号を属性に追加することは、Pugが補間に使用する方法のXNUMXつです。あなたはそれについてもっと読むことができますこちら。これを使用して、各テンプレートに動的にタイトルを渡します。

次に気づくのは、 block キーワード。テンプレートでは、ブロックは子テンプレートが置き換えることができるPugの単なる「ブロック」です。すぐに使用方法を確認しますが、詳細を知りたい場合は、パグのウェブサイトのこのページ.

子テンプレートのレイアウトファイルを使用する

やらなければならないことは、 form.pug レイアウトファイルを使用するテンプレート。これを行うには、 views/form.pug、そのように：

extends layout block content form(action="." method="POST") label(for="name") Name: input( type="text" id="name" name="name" ) label(for="email") Email: input( type="email" id="email" name="email" ) input(type="submit" value="Submit")

そして、中 routes/index.js、テンプレートを表示するには、適切なタイトルを渡す必要があります。

router.get('/', (req, res) => { res.render('form', { title: 'Registration form' });
});

これで、ページを更新してソースを調べると、見栄えがよくなります。

Expressでのフォームの処理

現在、フォームの送信ボタンをクリックすると、「Cannot POST /」というメッセージのあるページにリダイレクトされます。これは、送信されると、フォームがその内容をPOSTに戻すためです。 /、それを処理するルートはまだ定義していません。

今それをしましょう。以下を追加 routes/index.js:

router.post('/', (req, res) => { res.render('form', { title: 'Registration form' });
});

これは、使用しているという事実を除いて、GETルートと同じです。 router.post 別のHTTP動詞に応答します。

これでフォームを送信すると、エラーメッセージは表示されなくなり、フォームは再レンダリングされるだけです。

フォーム入力の処理

次のタスクは、ユーザーがフォームを介して送信したデータを取得することです。これを行うには、次の名前のパッケージをインストールする必要がありますボディパーサー、フォームのデータをリクエストの本文で使用できるようにします。

npm install body-parser

また、アプリにこのパッケージを使用するように指示する必要があるため、以下を追加します app.js:

const bodyParser = require('body-parser');
...
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/', routes); module.exports = app;

サーバーにPOSTするデータをフォーマットするさまざまな方法があることに注意してください。コード化されたメソッドを使用すると、送信されたデータを application/x-www-form-urlencoded.

次に、送信されたデータを端末にロギングしてみることができます。ルートハンドラーを次のように変更します。

router.post('/', (req, res) => { console.log(req.body); res.render('form', { title: 'Registration form' });
});

これでフォームを送信すると、次の行に沿って何かが表示されます。

{name: 'Jim', email: 'jim@example.com'}

端末に記録されるフォーム出力

端末に記録されるフォーム出力

リクエストおよびレスポンスオブジェクトに関する注意

これで、Expressでルートを処理するために使用しているパターンに気付くはずです。

router.METHOD(route, (req, res) => { // callback function
});

コールバック関数は、指定されたルートと一致するURLに誰かがアクセスするたびに実行されます。コールバックは req および res パラメータ、場所 req 入ってくる情報（フォームデータやクエリパラメーターなど）でいっぱいのオブジェクトであり、 res データをユーザーに送り返すためのメソッドが満載のオブジェクトです。オプションもあります next パラメータ。これは、実際にデータを送り返さない場合や、処理する他の何かにリクエストを渡す場合に便利です。

雑草に深く入り込むことなく、これはミドルウェア（具体的にはルーターレベルのミドルウェア）と呼ばれる概念であり、Expressで非常に重要です。 Expressがミドルウェアを使用する方法について詳しく知りたい場合は、エクスプレスドキュメント.

フォーム入力の検証

次に、ユーザーが両方のフィールドに入力したことを確認します。これを使用してこれを行うことができますエクスプレスバリデーターモジュール、ユーザー入力のサニタイズと検証のためのいくつかの便利なメソッドを提供するミドルウェア。

次のようにインストールできます。

npm install express-validator

そして、私たちが必要とする機能を必要とします routes/index.js:

const { check, validationResult } = require('express-validator');

次のようにルートハンドラーに含めることができます。

router.post('/', [ check('name') .isLength({ min: 1 }) .withMessage('Please enter a name'), check('email') .isLength({ min: 1 }) .withMessage('Please enter an email'), ], (req, res) => { ... });

ご覧のとおり、私たちは check XNUMXつのプロパティを検証するメソッド req.body —つまり、 name および email。私たちのケースでは、これらのプロパティが存在すること（つまり、プロパティの長さがXNUMXより大きいこと）を確認するだけで十分ですが、バリデーターの全範囲をここでチェックできます.

XNUMX番目のステップでは、検証結果検証が成功したか失敗したかを確認するメソッド。エラーがない場合は、先に進み、「登録ありがとうございます」というメッセージを表示します。それ以外の場合は、これらのエラーをテンプレートに返して、何かが間違っていることをユーザーに通知する必要があります。

検証が失敗した場合は、 req.body テンプレートに戻り、有効なフォーム入力がリセットされないようにします。

router.post( '/', [ ... ], (req, res) => { const errors = validationResult(req); if (errors.isEmpty()) { res.send('Thank you for your registration!'); } else { res.render('form', { title: 'Registration form', errors: errors.array(), data: req.body, }); } }
);

今、私たちは私たちにいくつかの変更を加える必要があります form.pug テンプレート。最初に、 errors プロパティ、およびそれが存在する場合は、エラーをループしてリストに表示します。

extends layout block content if errors ul for error in errors li= error.msg ...

Status li= 奇妙に見えますが、Pugはタグ名の後に等号を付けることで補間を行うことに注意してください。

最後に、 data 属性が存在し、存在する場合は、それを使用してそれぞれのフィールドの値を設定します。存在しない場合は、空のオブジェクトに初期化して、初めてロードしたときにフォームが正しくレンダリングされるようにします。これは、Pugではマイナス記号で示されるJavaScriptを使用して行うことができます。

-data = data || {}

次に、その属性を参照してフィールドの値を設定します。

input( type="text" id="name" name="name" value=data.name
)

注：Pugでは、デフォルトですべての属性がエスケープされます。つまり、特殊文字は攻撃（クロスサイトスクリプティングなど）を防ぐためにエスケープシーケンスに置き換えられます。

これにより、次のようになります。

extends layout block content -data = data || {} if errors ul for error in errors li= error.msg form(action="." method="POST") label(for="name") Name: input( type="text" id="name" name="name" value=data.name ) label(for="email") Email: input( type="email" id="email" name="email" value=data.email ) input(type="submit" value="Submit")

これで、登録が正常に送信されると、お礼のメッセージが表示され、両方のフィールドに入力せずにフォームを送信すると、テンプレートがエラーメッセージとともに再表示されます。

データベースを操作する

次に、フォームをデータベースに接続して、ユーザーが入力したデータを保存できるようにします。 Mongoをローカルで実行している場合は、次のコマンドでサーバーを起動することを忘れないでください。 mongod.

接続の詳細を指定する

データベース接続の詳細を指定する場所が必要になります。このために、設定ファイル（これは いけません バージョン管理にチェックインされます）と dotenvパッケージ。 Dotenvは構成ファイルからノードの接続に接続の詳細をロードしますプロセス.env.

次のようにインストールします。

npm install dotenv

そしてそれを上に要求する start.js:

require('dotenv').config();

次に、という名前のファイルを作成します .env プロジェクトのルート（ドットでファイル名を開始すると、特定のオペレーティングシステムで非表示になる可能性があることに注意してください）で、最初の行にMongo接続の詳細を入力します。

ローカルでMongoを実行している場合：

DATABASE=mongodb://localhost:27017/<dbname>

mLabsを使用している場合：

DATABASE=mongodb://<dbuser>:<dbpassword>@ds211709.mlab.com:11709/<dbname>?authSource=<dbname>

MongoDBのローカルインストールには、デフォルトのユーザーまたはパスワードがないことに注意してください。これは、セキュリティ上のリスクがあるため、本番環境で変更することをお勧めします。

データベースに接続する

データベースへの接続を確立し、データベース上で操作を実行するために、マングース。 Mongooseは、MongoDBのODM（オブジェクトドキュメントマッパー）です。プロジェクトのホームページ:

Mongooseは、アプリケーションデータをモデル化するための簡単なスキーマベースのソリューションを提供します。組み込みの型キャスト、検証、クエリ構築、ビジネスロジックフックなどが含まれています。

これが実際に意味するところは、Mongoを介してさまざまな抽象化を作成することです。これにより、データベースとのやり取りが容易になり、記述する必要のある定型文の量が減ります。 Mongoが内部でどのように機能するかについて詳しく知りたい場合は、 MongoDBの概要.

Mongooseをインストールするには：

npm install mongoose

次に、それを必要とします start.js:

const mongoose = require('mongoose');

接続は次のように行われます：

mongoose.connect(process.env.DATABASE, { useNewUrlParser: true, useUnifiedTopology: true
}); mongoose.connection .on('open', () => { console.log('Mongoose connection open'); }) .on('error', (err) => { console.log(`Connection error: ${err.message}`); });

使用方法に注意してください DATABASE で宣言した変数 .env データベースURLを指定するファイル。

これは何 start.js これで次のようになります。

require('dotenv').config();
const mongoose = require('mongoose'); mongoose.connect(process.env.DATABASE, { useNewUrlParser: true, useUnifiedTopology: true
}); mongoose.connection .on('open', () => { console.log('Mongoose connection open'); }) .on('error', (err) => { console.log(`Connection error: ${err.message}`); }); const app = require('./app');
const server = app.listen(3000, () => { console.log(`Express is running on port ${server.address().port}`);
});

ファイルを保存すると、nodemonがアプリを再起動し、問題がなければ、「Mongoose connection open」というメッセージが表示されます。

Mongooseスキーマを定義する

MongoDBの できる 緩やかなデータベースとして使用できます。つまり、事前にどのようなデータになるかを説明する必要はありません。ただし、Mongooseを使用して操作しているため、Mongooseのすべての操作はスキーマ。 Mongooseでは、各スキーマがMongoDBコレクションにマップされ、そのコレクション内のドキュメントの形状を定義します。

このために、 models プロジェクトルートのフォルダー、およびそのフォルダー内の新しいファイル Registration.js.

次のコードを追加します Registration.js:

const mongoose = require('mongoose'); const registrationSchema = new mongoose.Schema({ name: { type: String, trim: true, }, email: { type: String, trim: true, },
}); module.exports = mongoose.model('Registration', registrationSchema);

ここでは、型を定義しているだけで（既に検証が行われているため）、トリムヘルパーメソッドユーザー入力から余分な空白を削除します。それからモデルをコンパイルするスキーマ定義からエクスポートし、アプリの別の場所で使用するためにエクスポートします。

ボイラープレートの最後の部分は、モデルを start.js:

... require('./models/Registration');
const app = require('./app'); const server = app.listen(3000, () => { console.log(`Express is running on port ${server.address().port}`);
});

データベースにデータを保存する

これで、ユーザーデータをデータベースに保存する準備ができました。まず、Mongooseを要求してモデルをインポートします。 routes/index.js ファイル：

const express = require('express');
const mongoose = require('mongoose');
const { check, validationResult } = require('express-validator'); const router = express.Router();
const Registration = mongoose.model('Registration');
...

これで、ユーザーがデータをサーバーに投稿したときに、検証に合格した場合、先に進んで新しい Registration オブジェクトとそれを保存しようとします。データベース操作は、Promiseを返す非同期操作であるため、 .then() 正常な挿入と .catch() エラーに対処するには：

if (errors.isEmpty()) { const registration = new Registration(req.body); registration.save() .then(() => { res.send('Thank you for your registration!'); }) .catch((err) => { console.log(err); res.send('Sorry! Something went wrong.'); });
} else { ...
} ...

これで、詳細を登録フォームに入力すると、データベースに保持されるはずです。これはコンパスを使用して確認できます（まだ実行中の場合は、左上の更新ボタンを押してください）。

コンパスを使用して、データがMongoDBに保存されたことを確認する

コンパスを使用して、データがMongoDBに保存されたことを確認する

データベースからデータを取得する

アプリを完成させるために、すべての登録をリストアップした最終ルートを作成しましょう。うまくいけば、あなたは今までにプロセスの合理的な考えを持っているはずです。

に新しいルートを追加 routes/index.js、次のように：

router.get('/registrations', (req, res) => { res.render('index', { title: 'Listing registrations' });
});

つまり、対応するビューテンプレート（views/index.pug):

extends layout block content p No registrations yet :(

今あなたが訪れるとき http://localhost:3000/registrations、登録がないことを通知するメッセージが表示されます。

データベースから登録を取得してビューに渡すことで、これを修正しましょう。「登録はまだありません」というメッセージが表示されますが、本当にない場合のみです。

In routes/index.js:

router.get('/registrations', (req, res) => { Registration.find() .then((registrations) => { res.render('index', { title: 'Listing registrations', registrations }); }) .catch(() => { res.send('Sorry! Something went wrong.'); });
});

ここでは、Mongoの Collection＃findメソッドパラメータなしで呼び出された場合、コレクション内のすべてのレコードを返します。データベースのルックアップは非同期であるため、ビューをレンダリングする前にデータベースのルックアップが完了するのを待っています。返されたレコードがある場合、これらのレコードはビューテンプレートに渡されます。 registrations プロパティ。レコードが返されなかった場合、 registrations 空の配列になります。

In views/index.pug次に、渡されたものの長さをチェックし、ループしてレコードを画面に出力するか、「登録なし」メッセージを表示します。

extends layout block content if registrations.length table tr th Name th Email each registration in registrations tr td= registration.name td= registration.email else p No registrations yet :(

HTTP認証を追加する

アプリに追加する最後の機能は HTTP認証、成功した登録のリストを詮索好きな目から締め出します。

これを行うには、 http-authモジュールを使用してインストールできます。

npm install http-auth

次に、それを要求する必要があります routes/index.js、以前に会ったPathモジュールとともに：

const path = require('path');
const auth = require('http-auth');

次に、ユーザーとパスワードをリストするファイルの場所を知らせます（この場合は、 users.htpasswd プロジェクトルート）：

const basic = auth.basic({ file: path.join(__dirname, '../users.htpasswd'),
});

これを作成 users.htpasswd 次に、コロンで区切られたユーザー名とパスワードを追加します。これはプレーンテキストでもかまいませんが、http-authモジュールはハッシュされたパスワードもサポートしているため、次のようなサービスを介してパスワードを実行することもできます。 Htpasswdジェネレータ.

私にとっては、 users.htpasswd 次のようになります。

jim:$apr1$FhFmamtz$PgXfrNI95HFCuXIm30Q4V0

これはユーザーに変換されます： jim、パスワード： password.

最後に、それを保護したいルートに追加してください。

router.get('/registrations', auth.connect(basic), (req, res) => { ...
});

Expressで静的アセットを提供する

アプリに磨きをかけ、スタイリングを追加してみましょうブートストラップ。組み込みのExpressを使用して、画像、JavaScriptファイル、CSSファイルなどの静的ファイルを提供できます。 express.staticミドルウェア機能.

設定は簡単です。次の行を追加するだけです app.js:

app.use(express.static('public'));

これで、 public ディレクトリにあります。

ブートストラップを使用してアプリのスタイルを設定する

作る public プロジェクトのルート、および public ディレクトリ作成 css ディレクトリ。ダウンロード Bootstrap v4の縮小版このディレクトリに、名前が付けられていることを確認します bootstrap.min.css.

次に、パグテンプレートにマークアップを追加する必要があります。

In layout.pug:

doctype html
html head title= `${title}` link(rel='stylesheet', href='/css/bootstrap.min.css') link(rel='stylesheet', href='/css/styles.css') body div.container.listing-reg h1 My Amazing App block content

ここには、以前に作成したXNUMXつのファイルが含まれています。 css フォルダーとラッパーdivを追加します。

In form.pug エラーメッセージとフォーム要素にいくつかのクラス名を追加します。

extends layout block content -data = data || {} if errors ul.my-errors for error in errors li= error.msg form(action="." method="POST" class="form-registration") label(for="name") Name: input( type="text" id="name" name="name" class="form-control" value=data.name ) label(for="email") Email: input( type="email" id="email" name="email" class="form-control" value=data.email ) input( type="submit" value="Submit" class="btn btn-lg btn-primary btn-block" )

そして、中 index.pug、もっと同じ：

extends layout block content if registrations.length table.listing-table.table-dark.table-striped tr th Name th Email each registration in registrations tr td= registration.name td= registration.email else p No registrations yet :(

最後に、というファイルを作成します styles.css セクションに css フォルダーを追加し、以下を追加します。

body { padding: 40px 10px; background-color: #eee;
}
.listing-reg h1 { text-align: center; margin: 0 0 2rem;
} /* css for registration form and errors*/
.form-registration { max-width: 330px; padding: 15px; margin: 0 auto;
}
.form-registration { display: flex; flex-wrap: wrap;
}
.form-registration input { width: 100%; margin: 0px 0 10px;
}
.form-registration .btn { flex: 1 0 100%;
}
.my-errors { margin: 0 auto; padding: 0; list-style: none; color: #333; font-size: 1.2rem; display: table;
}
.my-errors li { margin: 0 0 1rem;
}
.my-errors li:before { content: "! Error : "; color: #f00; font-weight: bold;
} /* Styles for listing table */
.listing-table { width: 100%;
}
.listing-table th,
.listing-table td { padding: 10px; border-bottom: 1px solid #666;
}
.listing-table th { background: #000; color: #fff;
}
.listing-table td:first-child,
.listing-table th:first-child { border-right: 1px solid #666;
}

これでページを更新すると、Bootstrapの栄光がすべて表示されます。

まとめ

このチュートリアルがお役に立てば幸いです。私たちは次のFacebookを構築しませんでしたが、それでもノードベースのWebアプリの世界での開始を支援し、その過程で次のプロジェクトにいくつかの確かな要点を提供できるようになったことを願っています。

もちろん、XNUMXつのチュートリアルですべてをカバーすることは困難です。ここで作成したものについて詳しく説明する方法はたくさんあります。たとえば、チェックアウトできます Nodeアプリのデプロイに関する記事それを起動するのにあなたの手を試してくださいヘロク or 今。または、登録を削除する機能でCRUD機能を強化したり、アプリの機能をテストするためのテストをいくつか作成したりすることもできます。

ここからどこへ行っても、質問やコメントを自由に撮ってください Twitterで.

ソース：https://www.sitepoint.com/build-simple-beginner-app-node-bootstrap-mongodb/?utm_source=rss

Node、Bootstrap、MongoDBを使用してシンプルな初心者向けアプリを作成する