この記事は、Feiyuの「[翻訳]フロントエンド開発者向けのガイド、Node.js、Express、Jade、Mongodb Serverのゼロから変更されました。JadeがEJSに置き換えられた理由は、EJSがWebプログラマーの習慣に沿っていると思うか、むしろPHPとASPプログラマーの在職者の使用に沿っています。
パート1インストール15分
本当にゼロから学んだ場合は、まず環境を構築するために時間をかけてください。それは難しくありません、私はWin8を使用しているので、これはMacとubuntuまたは他の *nixシステムを使用したチュートリアルとは少し異なって見えますが、ほぼ同じです。
ステップ1 node.jsをインストールします
公式node.jsのWebサイトに簡単に移動し、グリーンビッグインストールボタンをクリックして、システムを自動的に検出し、正しいインストールファイルをダウンロードすることができます。 （そうでない場合は、ダウンロードボタンをクリックして、必要なダウンロードを選択します）。インストーラーを実行してください、それは問題ありません。 node.jsとnpm（ノードパッケージマネージャー）をインストールして、さまざまな便利なパッケージをノードに簡単にインストールします。
ステップ2エクスプレスをインストールします
Nodeを実行するようになったので、実際に利用可能なサイトを実際に作成できるようにするために、他の何かが必要です。次に、Expressをインストールする必要があります。これは、元のアプリケーションからノードを通常使用するより類似したWebサーバーに変えるフレームワークです。それが提供する足場機能が必要であるため、Expressから始める必要があります。このコマンドを入力しましょう。
コードコピーは次のとおりです。
c：/node> npmインストール-g Express
このようにして、Expressはノードに正しくインストールされ、グローバルに利用可能に設定されています。コマンドラインウィンドウ（主にHTTP 304）に大量の出力が表示され、リクエストを取得しますが、これは正常です。 Expressをインストールして利用可能にする必要があります。
ステップ3エクスプレスプロジェクトを作成します
ExpressおよびEJSを使用しますが、CSSの前処理には使用しません。いくつかのCSSを手書きします。 EJまたはその他のテンプレートエンジンを使用して、ノードを処理し、データを表現する必要があります。 HTMLを知っていれば、EJSは難しくありません。焦点を合わせる必要があるか、物事がエラーになりやすいことを覚えておいてください。
次に、同じコマンドラインウィンドウに入力します。
コードコピーは次のとおりです。
c：/node> expressセッションnodetest1
入力すると、このようなものがたくさん表示されます。
コードコピーは次のとおりです。
c：/node> express - セッションnodetest1
作成：nodetest1
作成：nodetest1/package.json
作成：nodetest1/app.js
作成：nodetest1/ルート
作成：nodetest1/routes/index.js
作成：nodetest1/routes/user.js
作成：nodetest1/views
作成：nodetest1/views/index.ejs
作成：nodetest1/public/images
作成：nodetest1/public/javascripts
作成：nodetest1/public
作成：nodetest1/public/styleSheets
作成：nodetest1/public/styleSheets/style.css
依存関係をインストールします：
$ cd nodetest1 && npmインストール
アプリを実行する：
$ノードアプリ
ステップ4依存関係を編集します
わかりました、現在いくつかの基本的なプロジェクト構造がありますが、まだ完成していません。 Expressのインストールプロセスにより、nodetest1ディレクトリにpackage.jsonというファイルが作成されていることがわかります。テキストエディターでファイルを開きます。このように見えるはずです。
コードコピーは次のとおりです。
{
「名前」：「アプリケーション名」、
「バージョン」：「0.0.1」、
「プライベート」：本当、
「スクリプト」：{
「start」：「node app.js」
}、
「依存関係」：{
「Express」：「3.4.8」、
「EJS」：「*」
}
}
これは、アプリケーションとその依存関係を示す標準のJSON形式ファイルです。何かを追加する必要があります。たとえば、MongodbとMonkへの呼び出し。これに依存関係の部分を変更します。
コードコピーは次のとおりです。
「依存関係」：{
「Express」：「3.4.8」、
「ejs」： "*"、
「mongodb」： "*"、
「修道士」：「*」
}
ステップ5依存関係をインストールします
これで、プロジェクトの依存関係を定義しました。 * NPMに「最新バージョンのインストール」を指示します。コマンドラインウィンドウに戻り、nodetest1ディレクトリを入力して、以下を入力します。
コードコピーは次のとおりです。
c：/node/nodetest1> npmインストール
それはたくさんのものを出力します。これは、変更されたJSONファイルを直接読み取り、その中の依存関係を認識し、必要なファイルをインストールするためです。 NPMのインストールが完了したら、プロジェクトに必要なすべての依存関係ファイルを含むnode_modulesディレクトリが必要です。
これで、フル機能のアプリがあり、実行する準備が整いました。試してみましょう！現在のディレクトリがnodetest1ディレクトリであることを確認してください。
コードコピーは次のとおりです。
c：/node/nodetest1> node app.js
車に入った後、あなたは見るでしょう：
コードコピーは次のとおりです。
ポート3000でリスニングサーバーを聴くエクスプレス
素晴らしい。ブラウザを開き、http：// localhost：3000を入力すると、Expressでウェルカムページを表示できるはずです。
これで、Express EngineとEJS HTMLテンプレートエンジンを備えた独自のノードJS WebServerの実行を開始しました。それほど難しくありませんよね？
パート2がここにあります。「こんにちは、世界！」と書いてみましょう。
一般的に使用されているテキストエディターまたはその他のIDEを開き、個人的には崇高なテキストを使用するのが好きです。 nodetest1ディレクトリでapp.jsを開くと、このファイルはアプリのコアです。あなたはこのようなものを見るはずです：
コードコピーは次のとおりです。
var Express = require（ 'Express'）;
var routes = require（ './ routes'）;
var user = require（ './ routes/user'）;
var http = require（ 'http'）;
var path = require（ 'path'）;
これは、多数のJavaScript変数を定義するだけで、一部のパッケージと依存関係、ノード関数、およびルートを指します。ルートは、MVCのモデルとコントローラーのコレクションに相当します。リクエストを転送する責任があり、いくつかの処理ロジックも含まれています。 Expressはこれらすべてのものを私たちのために作成しました、そして、私たちは今、ユーザールートを無視し、トップレベルのルート（Routes/Index.jsで制御）の書き込みを開始します。
上記のファイルの最後に：
コードコピーは次のとおりです。
var app = Express（）;
この文は非常に重要です。 Expressをインスタンス化し、アプリ変数に値を割り当てます。次のコンテンツは、この変数を使用して、明示的なパラメーターの束を構成する必要があります。引き続き入力します：
コードコピーは次のとおりです。
//すべての環境
app.set（ 'port'、process.env.port || 3000）;
app.set（ 'views'、path.join（__ dirname、 'Views'））;
app.set（ 'View Engine'、 'ejs'）;
app.use（express.favicon（））;
app.use（express.logger（ 'dev'））;
app.use（express.bodyParser（））;
app.use（express.methodoverride（））;
app.use（app.router）;
app.use（express.static（path.join（__ dirname、 'public'）））;
ここでは、ポートを設定し、ビューのディレクトリ、これらのビューを処理するために使用するテンプレートエンジン、その他のものを探します。また、The Expressに、パブリック/ディレクトリの静的ファイルをトップレベルディレクトリのファイルとしてホストするように指示する最後の行にも注意してください。たとえば、画像ディレクトリはc：/node/nodetest1/public/images/に保存されていますが、実際のアクセスアドレスはhttp：// localhost：3000/images/です。
注：この行を置く必要があります
コードコピーは次のとおりです。
app.use（express.bodyParser（））;
に変更します
コードコピーは次のとおりです。
app.use（express.urlencoded（））;
これは、一部のアプリの操作中にノードウィンドウの警告情報を無視することです。主にいくつかのExpressとそのプラグインは将来変更される可能性があります。この変更を行わないと、プログラムが実行されると特定の関数がすぐに期限切れになるという警告が頻繁に受けられます。
その後、追加：
コードコピーは次のとおりです。
//開発のみ
if（ 'development' == app.get（ 'env'））{
app.use（express.errorhandler（））;
}
これにより、開発中にいくつかのエラーチェックを行うことができます。
増加し続ける：
コードコピーは次のとおりです。
app.get（ '/'、routes.index）;
app.get（ '/users'、user.list）;
これにより、URIリクエストが到着したときに使用するルートがルートに表示されます。ユーザー変数は以前に定義され、/routes/user.jsにマッピングされることに注意してください。このファイルで定義されているリスト関数を呼び出します。ユーザーリストをここに表示できます。
増加し続ける：
コードコピーは次のとおりです。
http.createserver（app）.listen（app.get（ 'port'）、function（）{{
console.log（ 'ポートでリスニングするサーバーを聴く' + app.get（ 'port'））;
}）;
最後に、HTTPサーバーを作成して起動します。それについてです。
（上記のコンテンツは、新しいExpressによって生成されたテンプレートで完了し、自分で書く必要はありません）
さて、何か役に立つことを書きましょう。 「Hello World！」とは書きません。インデックスページに直接。この機会を利用して、ルーティングの使用方法を学び、EJSエンジンの仕組みを学びます。上記のapp.jsファイルのapp.get（）段落の後に行を追加します。
app.get（ '/helloworld'、routes.helloworld）;
コマンドラインウィンドウでCtrl+Cを押してApp.jsプロセスを終了して再起動し、ブラウザを使用してhttp：// localhost：3000/helloworldにアクセスすると、コマンドラインウィンドウでエキサイティングなノードエラーとクラッシュプロンプトが表示されます。これは、このパスを処理するためのルートを変更していないためです。来てこれをしてください。エディターで、Routesディレクトリに移動し、index.jsを見つけて開きます。このように見えるはずです：
コードコピーは次のとおりです。
/*
*ホームページを取得します。
*/
exports.index = function（req、res）{
res.Render（ 'index'、{title： 'Express'}）;
};
新しいページを追加しましょう。各レベルのディレクトリごとに独立したルートファイルを作成することを好みますが、今ではビューの下でHelloWorldの完全なディレクトリ構造を作成することを計画していないため、当面はインデックスルートを使用しています。このファイルの最後に追加します：
コードコピーは次のとおりです。
exports.helloworld = function（req、res）{
Res.Render（ 'Helloworld'、{title： 'hello、world！'}）;
};
このURIリクエストの処理を担当しますが、現在、res.Renderレンダリングを作成する実際のページはありません。ビューディレクトリ、Open Index.ejsに移動し、Helloworld.ejsファイルとして保存します。今、それは次のようになります：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title> <％= title％> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<body>
<h1> <％= title％> </h1>
<p> <％= title％> </p>へようこそ
</body>
</html>
理解しやすいはずです。
ファイルを保存します。コマンドラインウィンドウのCtrl+Cを押してApp.jsを割り当て、Node App.jsを入力して再起動します。ヒント：EJSテンプレートファイルを変更すると、サーバーを再起動する必要はありません。ただし、app.jsやルーティングJSファイルなどのJSファイルを変更する場合、効果を確認するにはサーバーを再起動する必要があります。
サーバーが起動すると、サーバーはhttp：// localhost：3000/helloworldを開き、この美しいインターフェイスを見ることができるはずです。
大丈夫！テンプレートを処理できるルートができたので、必要な効果がわかります。次に、いくつかのモデル（データレイヤー）を実行しましょう。
パート3データベースを作成し、データを読み取ります
ステップ1 mongodbをインストールします
最初にテキストエディターを閉じて、コマンドラインウィンドウに戻りましょう。最初にブラウザを使用して、http：//mongodb.org/を開き、Mongoをダウンロードします。メインメニューのダウンロードリンクをクリックして、自分に合ったバージョンを見つけます。 64ビットWin8については、64ビット *2008r2+バージョンをダウンロードします。ダウンロード後、それはzipファイルであり、C：/Mongo、C：/Program Files/Mongoなどに圧縮されていません。これは問題ではありません。 nodetest1ディレクトリにデータを保存します。
ステップ2モンゴッドとマンゴを実行します
nodetest1ディレクトリにサブディレクトリデータを作成し、コマンドラインウィンドウにmongodbディレクトリのbinディレクトリを入力し、以下を入力します。
コードコピーは次のとおりです。
Mongod dbpath C：/node/nodetest1/data
Mongoサーバーが開始され、最初のスタートアップには少し時間がかかります。これは、ハードディスクスペースやその他のタスクを事前に割り当てる必要があるためです。ポート27017で接続を待っている[in sandlisten]」を促すと、完了します。他に何もすることはありません。サーバーはすでに実行されています。次に、別のコマンドラインウィンドウを開き、Mongoディレクトリのビンディレクトリを入力して、入力する必要があります
コードコピーは次のとおりです。
マンゴ
このようなヒントが表示されます。
コードコピーは次のとおりです。
C：/Mongo> Mongo
Mongodbシェルバージョン：2.4.5
接続：テスト
この時点で、Mongodウィンドウを見ると、接続が接続されているプロンプトが表示されます。次に、このコマンドラインクライアントを使用してデータベースを手動で処理しますが、これは当社のWebサイトには必要ありません。
ステップ3データベースを作成します
テストに接続するための上記のプロンプトについて心配しないでください。これは、データベースを指定しないときにMongoがデフォルトであるデータベースであり、レコードを追加しない限り、テストと呼ばれるこのデータベースを作成しません。独自のデータベースを作成しましょう。 Mongoのコマンドラインウィンドウに、次を入力します。
コードコピーは次のとおりです。
nodetest1を使用します
いくつかのデータを挿入しない限り、このデータベースは作成されません。
ステップ4データを追加します
Mongodbの私のお気に入りの機能は、JSONをデータ構造として使用することです。つまり、私はそれを非常によく知っています。 JSONに慣れていない場合は、最初に関連する資料を読んでください。これは、このチュートリアルの範囲を超えています。
コレクションにいくつかのデータを追加します。このチュートリアルでは、単純なデータベース、2つのフィールドのみがあります。ユーザー名と電子メールです。私たちのデータは次のようになります：
コードコピーは次のとおりです。
{
「_id」：1234、
「ユーザー名」：「cwbuecheler」、
「電子メール」：「[email protected]」
}
_IDフィールドの独自の価値を作成できますが、Mongoにそれをさせた方が良いと思います。各レコードに一意の値を作成します。それがどのように機能するか見てみましょう。 Mongoウィンドウに、次のように入力します。
コードコピーは次のとおりです。
db.usercollection.insert（{"username"： "testuser1"、 "email"： "[email protected]"}）
重要なヒント：DBは上記で作成したnodetest1データベースであり、usercollectionはデータテーブルに相当するコレクションです。このコレクションを事前に作成する必要はなく、初めて使用されると自動的に作成されることに注意してください。わかりました、Enterを押します。すべてがうまくいけば、あなたは...何も見えません。これはあまり良くありません、入力してください。
コードコピーは次のとおりです。
db.usercollection.find（）。pretty（）
興味がある場合は、きれいな方法で出力コンテンツをフォーマットし、新しいラインインデントを追加します。表示する必要があります：
コードコピーは次のとおりです。
{
"_id"：objectid（ "5202b481d2184d390cbf6eca"）、
「ユーザー名」：「testuser1」、
「電子メール」：「[email protected]」
}
もちろん、あなたが得るObjectIDは異なるはずです、Mongoは自動的にそれを生成します。以前にJSONインターフェイスサービスを使用したことがある場合は、WoW、Webでこれを呼び出すのは非常に簡単だと思いますか！まあ、あなたは正しいです。
ヒント：正式なサービスとして、すべてのデータがトップレベルにあることを望んではいけません。 MongoDBデータ構造の設計については、Googleをご覧ください。
データができたので、さらにポイントを追加しましょう。入力：
コードコピーは次のとおりです。
newsStuff = [{"username"： "testuser2"、 "email"： "[email protected]"}、{"username"： "testuser3"、 "email"： "[email protected]"}]
db.usercollection.insert（newstuff）;
複数のデータを1つのデータから一度にコレクションに渡すことに注意してください。なんて簡単だ！次に、上記のFindコマンドを使用すると、これらの3つのデータが表示されます。
次に、以前に構築されたWebサーバーとデータベースを統合しましょう。
ステップ5マンゴをノードに接続します
次に、ページを作成し、データベース内のレコードを美しいテーブルに表示しましょう。これが私たちが生成する準備をしているHTMLコンテンツです。
コードコピーは次のとおりです。
<ul>
<li> <a href = "mailto：[email protected]"> testuser1 </a> </li>
<li> <a href = "mailto：[email protected]"> testuser2 </a> </li>
<li> <a href = "mailto：[email protected]"> testuser3 </a> </li>
</ul>
私はこれがそれほど科学的ではないことを知っていますが、あなたはそれを理解することができます。完全なWebサイトではなく、簡単なデータベースの読み取りプログラムを作成しようとしています。まず、mongodbをリンクできるように、app.js（プログラムの心と魂）に少しコンテンツを追加します。 C：/node/nodetest1/app.jsを開きます。上部に表示されます。
コードコピーは次のとおりです。
var Express = require（ 'Express'）;
var routes = require（ './ routes'）;
var user = require（ './ routes/user'）;
var http = require（ 'http'）;
var path = require（ 'path'）;
以下に追加します：
コードコピーは次のとおりです。
//新しいコード
var mongo = require（ 'mongodb'）;
var monk = require（ 'monk'）;
var db = monk（ 'localhost：27017/nodetest1'）;
これらの行は、Mongodbに接続する必要があることをアプリに指示します。この接続に責任を負うために修道士を使用します。データベースの場所はlocalhost：27017/nodetest1です。 27017はMongoDBのデフォルトポートであることに注意してください。何らかの理由でポートを変更する場合は、ここでレコードを変更する必要があります。次に、ファイルの下部を見てください。
コードコピーは次のとおりです。
app.get（ '/'、routes.index）;
app.get（ '/users'、user.list）;
app.get（ '/helloworld'、routes.helloworld）;
以下の行を追加します：
コードコピーは次のとおりです。
app.get（ '/userlist'、routes.userlist（db））;
この行は、ユーザーが /userlistパスにアクセスすると、DB変数をユーザーリストルートに渡す必要があることをアプリに伝えます。ただし、ユーザーリストルートはまだありませんので、今すぐ作成しましょう。
ステップ6マンゴのデータを読んで表示します
編集者を使用して、C：/node/nodetest1/routes/idnex.jsを開きます。それでは、3番目のものを追加しましょう。
コードコピーは次のとおりです。
exports.userlist = function（db）{
return function（req、res）{
var collection = db.get（ 'usercollection'）;
collection.find（{}、{}、function（e、docs）{
Res.Render（ 'userlist'、{
「ユーザーリスト」：ドキュメント
}）;
}）;
};
};
まあ、物事は少し複雑になります。ここでは、最初に関数を定義し、渡すDB変数を受信し、以前の2つのルートと同じページレンダリングを呼び出します。 UserCollectionを読み取り、検索を行う必要があることを伝え、返されたデータはDocs変数に保存されます。コンテンツを読み取ったら、レンダリングを呼び出してユーザーリストテンプレートページをレンダリングし、取得したドキュメント変数をテンプレートエンジンのユーザーリスト変数として渡します。
次に、EJSテンプレートを作成します。 [viewsディレクトリ]でindex.ejsを開き、userlist.ejsとして保存し、HTMLをこれに変更します。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title> userlist </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<body>
<h1> userlist </h1>
<ul>
<％
for（var i in userlist）{
％>
<li> <a href =” mailto：<％= userlist [i] .email％>”> <％= userlist [i] .username％> </a> </li>
<％}％>
</ul>
</body>
</html>
ファイルを保存して、ノードサーバーを再起動します。再起動方法を覚えていることを願っています。ブラウザを開き、http：// localhost：3000/userlistにアクセスすると、次のようなインターフェイスが表示されます。
[送信]ボタンをクリックすると、「 /adduserに投稿できない」というエラーが表示されます。修正しましょう。
ステップ2データベース処理機能を作成します
前と同様に、app.jsを変更し、次にファイルをルーティングし、次にEJSテンプレートを変更しました。ただし、後で投稿するためにジャンプするため、ここではEJSテンプレートの必要はありません。 app.jsのapp.get（）段落の後に行を追加します。
コードコピーは次のとおりです。
app.post（ '/adduser'、routes.adduser（db））;
これはapp.postであり、app.getではないことに注意してください。ルートを設定しましょう。ルート/index.jsに戻り、データベース挿入関数を作成します。これは非常に大きいので、良いコメントを書くことをお勧めします。
コードコピーは次のとおりです。
exports.adduser = function（db）{
return function（req、res）{
//フォーム値を取得します。これらは「名前」属性に依存しています
var username = req.body.username;
var useremail = req.body.useremail;
//コレクションを設定します
var collection = db.get（ 'usercollection'）;
// DBに送信します
collection.insert（{
「ユーザー名」：ユーザー名、
「電子メール」：ユーザーメール
}、function（err、doc）{
if（err）{
//失敗した場合、エラーを返します
res.send（ "データベースに情報を追加するのに問題がありました。"）;
}
それ以外 {
//それが機能した場合、アドレスバーがまだ発言しないようにヘッダーを設定します /adduser
res.location（ "userlist"）;
//サクセスページに転送します
res.redirect（ "userlist"）;
}
}）;
}
}
明らかに、実際のプロジェクトでは、ユーザー名や電子メールが複製を許可しないなど、多くの検証を行う必要があり、電子メールアドレスは特定の形式のルールに準拠する必要があります。しかし今、これらのことを気にしないでください。挿入データベースが完了したときに、ユーザーがユーザーリストページに戻って、新しく挿入されたデータが表示されるようにすることがわかります。
これは最良の方法ですか？
ステップ3データベースに接続してデータを書き込みます
Mongodが走っていることを確認してください！次に、ノードサーバーを再起動します。 http：// localhost：3000/newUserをブラウザで開きます。次に、いくつかのコンテンツを入力して、[送信]ボタンをクリックします。うまくいけば、ユーザーリストページに戻り、追加した新しいデータを表示する必要があります。
Node.js、Exress、およびEJSを使用して、MongoDBデータベースの読み取りと書き込みを正式に完了しました。私たちはすでにNIU Xのプログラマーです。
おめでとうございます。このチュートリアルを真剣に完成させ、コードをコピーするだけでなく学習に非常に真剣に考えている場合は、ルート、ビュー、データの読み取り、およびデータの作成の完全な概念が必要です。他の完全なWebサイトを開発するために使用する必要があるすべての知識があります！あなたが何を考えても、これは本当にクールだと思います。
パート5次のステップ
さて、あなたは無制限の可能性を持っています。 MongoDBデータベースを処理する別のノードパッケージであるMongooseをご覧ください。モンクよりも少し大きく、より多くの機能があります。 Express CSSエンジンであるStylusをご覧ください。 Google Node Express MongoチュートリアルをGoogleで検索して、次のものを確認できます。一生懸命勉強し、毎日改善してください。
このチュートリアルが役立つことを願っています。これを書きました。なぜなら、私は学び始めたとき、私は本当にこのようなものが必要だったからです。ここで見たことがあるなら、どうもありがとうございました！