ExpressJSで完全なMVC Webサイトを構築する

NB：これは、node.jsの理論的基礎に既に精通しており、言うように、すぐにこのツールを使用して開発に突入したい人のための資料です。 控除なし、コーディングのみ。 興味があるなら、恥ずかしがらずに、猫の下を通り過ぎる。





翻訳者から：私自身、ごく最近node.jsを学び始めました。 間違いなく、インターネット上には、初心者向けの多くの優れた（！）マニュアルがあります（特にここやハブなど）。 しかし、著者Krasimir Tsonevのこのマニュアル （彼のマルチトピックブログを参照することもお勧めします）は、MVCパターンとベースを使用してExpressモジュールに基づいた本格的なnode.jsアプリケーションを構築するプロセスについて説明しているため、特に注目に値するように思えました。 MongoDBデータ。 著者はまた、テストなどの重要なことに注意を払っています。

翻訳

この記事では、クライアント部分を備えた本格的なWebサイトと、サイトのコンテンツ用のコントロールパネルを構築します。 ご想像のとおり、プログラムの最終バージョンには多数の異なるファイルが含まれています。 このガイドを段階的に作成し、プロセスの開発を完全に監視しましたが、すべてのファイルをその中に含めることは始めませんでした。 ただし、ソースコードはGitHubで入手できます。チェックアウトすることを強くお勧めします。

エントリー

Expressは、最高のNodeフレームワークの1つです。 優れた開発者サポートと多数の便利な機能を備えています。 Expressには、それを扱うためのすべての基本事項を網羅した素晴らしい記事がたくさんあります。 しかし、今はもう少し掘り下げて、本格的なWebサイトを作成した経験を共有したいと思います。 一般に、この記事はExpress自体に関するだけでなく、開発者が利用できる他の劣らない素晴らしいツールとの組み合わせについても説明しています。

Node.jsに精通し、システムにインストールしたこと、およびその上にいくつかのアプリケーションを既に作成していることを信じています。

ExpressフレームワークはConnectに基づいています 。 これは、多くの便利な機能を備えたミドルウェア機能のセットです。 ミドルウェア関数とは何かに興味があるなら、ここに小さな例があります：

var connect = require('connect'), http = require('http'); var app = connect() .use(function(req, res, next) { console.log("That's my first middleware"); next(); }) .use(function(req, res, next) { console.log("That's my second middleware"); next(); }) .use(function(req, res, next) { console.log("end"); res.end("hello world"); }); http.createServer(app).listen(3000);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ミドルウェア関数は、基本的に、リクエストオブジェクトと応答オブジェクトをパラメーターとして受け入れる関数であり、次に呼び出されるコールバック関数でもあります。 各ミドルウェア関数は、応答オブジェクトを使用して応答するか、ストリームを次のコールバック関数に渡すかを決定します。 上記の例では、2番目の関数でnext（）メソッド呼び出しを削除すると、文字列「hello world」はクライアントに送信されません。 一般的に、これがExpressの仕組みです。 それは間違いなくあなたの時間を節約するいくつかの定義済みのミドルウェア機能を備えています。 たとえば、リクエストボディを解析し、コンテンツタイプapplication / json 、 application / x-www-form-urlencodedおよびmultipart / form-dataをサポートするボディパーサーです。 または、 Cookieヘッダーを解析し、キーがCookieの名前であるオブジェクトをreq.cookiesフィールドに入力するCookieパーサー。

実際、Expressはそれ自体をConnectフレームワークでラップし、ルーティングロジックなどのいくつかの機能で補完して、ルーティングプロセスをスムーズに進めます。 以下は、GET要求を処理する例です。

 app.get('/hello.txt', function(req, res){ var body = 'Hello World'; res.setHeader('Content-Type', 'text/plain'); res.setHeader('Content-Length', body.length); res.end(body); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設置

Expressのインストールには2つのオプションがあります。 1つ目は、その説明をpackage.jsonファイルに配置してnpm installコマンドを実行することです（このパッケージマネージャーの名前は「no problem man」を表しているようなジョークがあります:)）。

 { "name": "MyWebSite", "description": "My website", "version": "0.0.1", "dependencies": { "express": "3.x" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フレームワークコードはnode_modulesディレクトリに配置され、インスタンスを作成できます。 私は代替手段を好みます：コマンドライン。 npm install -g expressを実行してExpressをインストールするだけです。 これにより、新しいCLIツールが作成されます。 たとえば、次の場合：

 express --sessions --css less --hogan app
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Expressは、構成済みのアプリケーションフレームワークを生成します。 以下は、 エクスプレス（1）コマンドオプションのリストです。

 Usage: express [options] Options: -h, --help output usage information -V, --version output the version number -s, --sessions add session support -e, --ejs add ejs engine support (defaults to jade) -J, --jshtml add jshtml engine support (defaults to jade) -H, --hogan add hogan.js engine support -c, --css add stylesheet support (less|stylus) (defaults to plain css) -f, --force force on non-empty directory
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、使用可能なオプションのリストは小さいですが、これで十分です。 通常、 lessライブラリをCSSプリプロセッサとして使用し、 hoganテンプレートエンジンも使用します。 この例では、セッションのサポートが必要です。--sessionsオプションはこの問題を解決します。 チームが完了すると、プロジェクトの構造は次のようになります。

 /public /images /javascripts /stylesheets /routes /index.js /user.js /views /index.hjs /app.js /package.json
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

package.jsonファイルを見ると、必要なすべての依存関係がここに追加されていることがわかります。 しかし、まだインストールされていません。 これを行うには、npm installコマンドを実行します 。その後、 node_modulesディレクトリが表示されます 。

上記のアプローチは、ユニバーサルと呼ぶに値しないことを理解しています。 たとえば、ルートハンドラを別のディレクトリなどに配置する必要がある場合があります。 しかし、次のいくつかの章で示されるように、生成された構造に変更を加えます。これは非常に簡単です。 これに基づいて、 express（1）コマンドを単にテンプレートジェネレータとして使用することをお勧めします。

高速配信

このチュートリアルでは、FastDeliveryという架空の会社の簡単なWebサイトを作成しました。 完成したデザインのスクリーンショットを次に示します。





このガイドの最後に、機能するコントロールパネルを備えた既製のWebアプリケーションがあります。 アイデアは、サイトの各部分を各部分の別々の領域で管理する機能を作成することです。 レイアウトはPhotoshopで作成され、CSS（less）およびHTML（hogan）ファイルにカットされました。 ここではスライスプロセスについては説明しません。これは、この記事での議論の主題ではないためですが、この部分に関して質問がある場合は、お気軽に質問してください。 スライスが終了すると、アプリケーションファイルの次の構造が得られます。

 /public /images (there are several images exported from Photoshop) /javascripts /stylesheets /home.less /inner.less /style.css /style.less (imports home.less and inner.less) /routes /index.js /views /index.hjs (home page) /inner.hjs (template for every other page of the site) /app.js /package.json
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下に、管理できるサイト要素のリストを示します。

• ホームページ（中央のバナー-タイトルとテキスト）
• ブログ（記事の追加、削除、編集）
• サービスページ
• 採石場ページ（砂場ではなく専門的な成長:)）
• お問い合わせページ

構成

始める前にやらなければならないことがいくつかあります。 構成のセットアップはそのようなものの1つです。 小規模なサーバーが、ローカル、中間、戦闘の3つの異なるサーバーに展開されることを想像してみましょう。 当然、3つの環境すべての設定は異なるため、このような状況に十分に柔軟なメカニズムを実装する必要があります。 ご存知のように、各nodejsスクリプトはコンソールアプリケーションとして実行されます。 つまり、現在の環境を決定するコマンドにパラメーターを簡単に割り当てることができます。 後でテストを書くのが便利になるように、この部分を別のモジュールにラップしました。 /config/index.jsファイル：

 var config = { local: { mode: 'local', port: 3000 }, staging: { mode: 'staging', port: 4000 }, production: { mode: 'production', port: 5000 } } module.exports = function(mode) { return config[mode || process.argv[2] || 'local'] || config.local; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現時点では、モード（モード）とポート（ポート）の2つのパラメーターしかありません。 ご想像のとおり、アプリケーションは異なるサーバー上の異なるポートを使用します。 そのため、 app.jsファイルでサイトのエントリポイントを更新する必要があります。

 ... var config = require('./config')(); ... http.createServer(app).listen(config.port, function(){ console.log('Express server listening on port ' + config.port); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

構成を切り替えるには、環境の名前をコマンドの最初のパラメーターに追加するだけです。 例：

 node app.js staging
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出力されます：

 Express server listening on port 4000
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、すべての設定は1か所に保存されており、管理が容易です。

テスト

私はTDDの大ファンです。 この記事で取り上げるすべての基本クラスをテストでカバーするようにします。 絶対にすべてのテストを作成するのには多くの時間がかかることに同意しますが、一般に、これがアプリケーションの作成方法です。 私のお気に入りのテストフレームワークの1つはジャスミンです。 もちろん、 npmパッケージマネージャーで利用できます。

 npm install -g jasmine-node
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テストを保存するディレクトリを作成しましょう。 最初にテストするのは、構成ファイルです。 テストファイルの名前は.spec.jsで終わる必要があるため、ファイルconfig.spec.jsを呼び出します。

 describe("Configuration setup", function() { it("should load local configurations", function(next) { var config = require('../config')(); expect(config.mode).toBe('local'); next(); }); it("should load staging configurations", function(next) { var config = require('../config')('staging'); expect(config.mode).toBe('staging'); next(); }); it("should load production configurations", function(next) { var config = require('../config')('production'); expect(config.mode).toBe('production'); next(); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jasmine-node ./testsコマンドを実行すると、次のように表示されます。

 Finished in 0.008 seconds 3 tests, 6 assertions, 0 failures, 0 skipped
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今、私は最初に実装を書き、次にテストを書きました。 これはTDDアプローチではありませんが、次の章では反対のことを行います。



テストを書くのに十分な時間をかけることを強くお勧めします。 完全にテストされたアプリケーションに勝るものはありません。

数年前、私は非常に重要な何か、より良いアプリケーションを作成するのに役立つ何かに気付きました。 新しいクラス、新しいモジュール、または単なるロジックの作成を開始するたびに、次のことを自問してください。

これをどのようにテストできますか？

この質問に対する答えは、コードをより効率的に記述し、優れたAPIを作成し、すべてを適切に分離されたブロックに分割するのに役立ちます。 スパゲッティコードのテストは作成できません。 たとえば、上記の構成ファイル（ /config/index.js ）で、モジュールコンストラクターにモードを送信する機能を追加しました。 あなたは驚くかもしれません：主なアイデアはコマンドライン引数からモードの値を取得することなので、なぜ私はこれをしたのですか？ 簡単です。テストする必要があるからです。 1か月後に戦闘サーバーの構成を使用して何かをテストする必要があり、ノードスクリプトが代替パラメーターで実行されることを想像してみましょう。 そして、この小さな改善がなければ変更を加えることはできません。 この前の小さなステップは、将来のアプリケーションの展開で起こりうる問題を防ぎます。

データベース

動的なWebサイトを構築する場合、情報を保存するデータベースが必要です。 このため、私はこの指示のためにmongodbを選択しました 。 MongoはNoSQLデータベースです。 ここにインストール手順があります 。私はWindowsユーザーなので、Windows のインストール手順に従いました 。 インストールが完了したら、デフォルトでポート27017をリッスンするMongoDBデーモンを起動します。したがって、理論的には、このポートに接続してmongodbサーバーとメッセージを交換する機会があります。 ノードスクリプトを介してこれを行うには、 mongodb module / driverが必要です 。 この手順のソースファイルをダウンロードした場合、モジュールは既にpackage.jsonファイルに追加されています。 そうでない場合は、 依存関係プロパティに「mongodb」：「1.3.10」を追加し、 npm installコマンドを実行します。 次に、mongodbサーバーが実行されているかどうかを確認するテストを作成します。



/tests/mongodb.spec.jsファイル：

 describe("MongoDB", function() { it("is there a server running", function(next) { var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://127.0.0.1:27017/fastdelivery', function(err, db) { expect(err).toBe(null); next(); }); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

mongodbクライアントメソッド.connectのコールバック関数は、 dbオブジェクトを受け取ります。 後でデータの管理に使用します。 これは、モデル内でアクセスする必要があることを意味します。 データベースを照会するたびに新しいMongoClientオブジェクトを作成することはお勧めできません。 そのため、Expressサーバーの起動をデータベースに接続するコールバック関数に転送しました。

 MongoClient.connect('mongodb://127.0.0.1:27017/fastdelivery', function(err, db) { if(err) { console.log('Sorry, there is no mongo db server running.'); } else { var attachDB = function(req, res, next) { req.db = db; next(); }; http.createServer(app).listen(config.port, function(){ console.log('Express server listening on port ' + config.port); }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

環境構成設定ファイルがあるため、mongodbサーバーのホスト名とポートをここに配置し、接続URLを次のように変更することをお勧めします。



'mongodb：//' + config.mongo.host + '：' + config.mongo.port + '/ fastdelivery'



http.createServer関数の呼び出しの直前に追加したミドルウェア関数attachDBに特に注意してください 。 この小さな追加のおかげで、リクエストオブジェクトの.dbプロパティを入力します。 良いニュースは、ルート決定中にいくつかの機能を設定できることです。 例：

 app.get('/', attachDB, function(req, res, next) { ... })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、ExpressはあらかじめattachDB関数を呼び出して、ルートハンドラーに入るようにします。 これが発生すると、リクエストオブジェクトに.dbプロパティが設定され、それを使用してデータベースにアクセスできます。

MVC

私たちはすべてMVCパターンに精通しています 。 問題は、Expressでそれを適用する方法です。 いずれにせよ、それは解釈の問題です。 次のいくつかの章では、モデル、ビュー、コントローラーとして機能するモジュールを作成します。

モデル

モデルは、アプリケーションのデータを処理するものです。 MongoClientオブジェクトによって返されるdbオブジェクトへのアクセス権が必要です。 さまざまなタイプのモデルが必要になる可能性があるため、モデルにはそれを拡張する方法も必要です。 たとえば、 BlogModelまたはContactsModelモデルを作成する場合があります。 これを行うには、最初にテスト/tests/base.model.spec.jsを作成する必要があります。 そして、これらのテストを作成することにより、モデルが必要なことだけを行い、それ以外は何もしないことを保証できます。

 var Model = require("../models/Base"), dbMockup = {}; describe("Models", function() { it("should create a new model", function(next) { var model = new Model(dbMockup); expect(model.db).toBeDefined(); expect(model.extend).toBeDefined(); next(); }); it("should be extendable", function(next) { var model = new Model(dbMockup); var OtherTypeOfModel = model.extend({ myCustomModelMethod: function() { } }); var model2 = new OtherTypeOfModel(dbMockup); expect(model2.db).toBeDefined(); expect(model2.myCustomModelMethod).toBeDefined(); next(); }) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際のdbオブジェクトの代わりに、モックオブジェクトを渡すことにしました。 これは、後で特定の何かをテストしたい場合に行われます。これは、データベースからのデータに依存します。 このデータを手動で定義する方がはるかに簡単です。

プロトタイプmodule.exportsを変更する必要がありますが、元のコンストラクターはそのままにしておく必要があるため、メソッド拡張の実装は少し難しいです。 幸いなことに、コードのパフォーマンスをチェックするテストをすでに作成しています。 上記のコードスニペットのバージョンは次のようになります。

 module.exports = function(db) { this.db = db; }; module.exports.prototype = { extend: function(properties) { var Child = module.exports; Child.prototype = module.exports.prototype; for(var key in properties) { Child.prototype[key] = properties[key]; } return Child; }, setDB: function(db) { this.db = db; }, collection: function() { if(this._collection) return this._collection; return this._collection = this.db.collection('fastdelivery-content'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、2つのヘルパーメソッドが定義されています。 データベースからのコレクションのdbオブジェクトとゲッターのセッター。

提出

ビューは画面に情報を表示します。 簡単に言えば、ビューはブラウザーに応答を送信するクラスです。 Expressは、これを行う簡単な方法を提供します。

 res.render('index', { title: 'Express' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

応答オブジェクトは、生活を楽にする優れたAPIを備えたラッパーです。 ただし、独自のモジュールを作成して、その機能に組み込むことを好みます。 ビューの標準ディレクトリはテンプレートに置き換えられ、ビューの古いディレクトリはベースビュークラスを提供します。

この小さな変更には、別の変更が必要です。 テンプレートファイルが別のディレクトリにあることをExpressに通知する必要があります。

 app.set('views', __dirname + '/templates');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、必要なものをすべて決定し、テストを作成します。その後、実装を開始します。 次の要件を満たすモジュールが必要です。

• そのコンストラクターは、応答オブジェクトとテンプレート名を受け取る必要があります
• データオブジェクトを受け入れるテンプレート出力メソッドが必要です。
• 拡張可能でなければなりません。

驚くかもしれません：なぜプレゼンテーションクラスを拡張する必要があったのですか？ 彼はresponse.renderメソッドを呼び出すだけではありませんか？ 実際、実際には、別のヘッダーを送信したり、応答オブジェクトを操作したりする必要がある場合があります。 たとえば、JSONで送信されたデータを処理します。

 var data = {"developer": "Krasimir Tsonev"}; response.contentType('application/json'); response.send(JSON.stringify(data));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これを毎回行う代わりに、 HTMLView クラスとJSONViewクラスを用意することは素晴らしいことです。 または、XMLデータをブラウザに送信するXMLViewクラス。 同じコードを繰り返しコピーして貼り付けるよりも、そのような機能が既に実装されている大きなWebアプリケーションを作成する方が簡単です。

以下は、 / views / Base.jsクラスのテストです。

 var View = require("../views/Base"); describe("Base view", function() { it("create and render new view", function(next) { var responseMockup = { render: function(template, data) { expect(data.myProperty).toBe('value'); expect(template).toBe('template-file'); next(); } } var v = new View(responseMockup, 'template-file'); v.render({myProperty: 'value'}); }); it("should be extendable", function(next) { var v = new View(); var OtherView = v.extend({ render: function(data) { expect(data.prop).toBe('yes'); next(); } }); var otherViewInstance = new OtherView(); expect(otherViewInstance.render).toBeDefined(); otherViewInstance.render({prop: 'yes'}); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レンダリング（視覚化）をテストするには、レイアウトを作成する必要がありました。 この場合、テストの最初の部分で、Expressフレームワークの応答オブジェクトをシミュレートするオブジェクトを作成しました。 テストの2番目の部分では、基本クラスを継承し、独自のレンダリングメソッドを使用する別のViewクラスを作成しました。

クラスコード/views/Base.js ：

 module.exports = function(response, template) { this.response = response; this.template = template; }; module.exports.prototype = { extend: function(properties) { var Child = module.exports; Child.prototype = module.exports.prototype; for(var key in properties) { Child.prototype[key] = properties[key]; } return Child; }, render: function(data) { if(this.response && this.template) { this.response.render(this.template, data); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、テスト用のディレクトリに3つのテストがあり、 jasmine-node ./testsコマンドを実行すると、結果は次のようになります。

 Finished in 0.009 seconds 7 tests, 18 assertions, 0 failures, 0 skipped
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラー

ルートについて話し、どのように決定したのか覚えていますか？

 app.get('/', routes.index);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記の例のルートの後にある記号「/」はコントローラーです。 これは、 リクエスト 、 レスポンス 、コールバック関数next（）を受け取るミドルウェア関数です。

 exports.index = function(req, res, next) { res.render('index', { title: 'Express' }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記は、Expressを使用する場合のコントローラーの外観を説明しています。 express（1）コマンドは、 routesという名前でディレクトリを作成しますが、私たちの場合は、 controllersと呼ばれる方が良いでしょう。 ファイル構造がこのパターンに一致するように名前を変更しました。

単なる小さなアプリケーション以上のものを構築しているため、拡張可能な基本クラスを作成することをお勧めします。 すべてのコントローラーに機能を追加する必要がある場合、この基本クラスはアドオンを実装するのに最適な場所です。 繰り返しますが、私は最初にテストを書いているので、基本クラスに必要なものを定義しましょう：

• オブジェクトを取得して新しい子インスタンスを返す拡張可能なメソッドが必要です
• 子インスタンスにはrunメソッドが必要です。これは古き良きミドルウェア関数です
• コントローラを識別する名前プロパティが必要です
• 基本クラスから継承された独立したオブジェクトを作成できるはずです。

ほんの数点ですが、後で機能を追加することができます。

テストは次のようになります。

 var BaseController = require("../controllers/Base"); describe("Base controller", function() { it("should have a method extend which returns a child instance", function(next) { expect(BaseController.extend).toBeDefined(); var child = BaseController.extend({ name: "my child controller" }); expect(child.run).toBeDefined(); expect(child.name).toBe("my child controller"); next(); }); it("should be able to create different childs", function(next) { var childA = BaseController.extend({ name: "child A", customProperty: 'value' }); var childB = BaseController.extend({ name: "child B" }); expect(childA.name).not.toBe(childB.name); expect(childB.customProperty).not.toBeDefined(); next(); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下は/controllers/Base.jsの実装です：

 var _ = require("underscore"); module.exports = { name: "base", extend: function(child) { return _.extend({}, this, child); }, run: function(req, res, next) { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、各子孫クラスには、独自のロジックを実装する独自のrunメソッドが必要です。

FastDelivery Webサイト

まあ、MVCアーキテクチャに適したクラスのセットがあり、すべてのモジュールをテストでカバーしました。 これで、架空の会社FastDeliveryのサイトを引き続き扱う準備ができました。 サイトが2つの部分（ユーザー部分と管理パネル）で構成されることを想像してみましょう。 ユーザー部分は、データベースに保存されている情報をエンドユーザーに提示するためのものです。管理パネルは、この情報を管理するためのものです。最後から始めましょう。

制御盤

最初に、管理パネルページを提供するシンプルなコントローラーを作成しましょう。

ファイル/controllers/Admin.js：

 var BaseController = require("./Base"), View = require("../views/Base"); module.exports = BaseController.extend({ name: "Admin", run: function(req, res, next) { var v = new View(res, 'admin'); v.render({ title: 'Administration', content: 'Welcome to the control panel' }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラーとビューの事前に作成された基本クラスを使用して、管理パネルのエントリポイントを簡単に作成できます。Viewクラスは、テンプレートファイルの名前を受け入れます。上記のコードによると、ファイルはadmin.hjsという名前で、/ templatesディレクトリに配置する必要があります。その内容は次のようになります。

 <!DOCTYPE html> <html> <head> <title>{{ title }}</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="container"> <h1>{{ content }}</h1> </div> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（この指示を短く読みやすくするために、ここでは各テンプレートのコードを提供しません。GitHubからソースコードをダウンロードすることを強くお勧めします。）

次に、コントローラーを表示するために、アプリにルートを追加する必要があります。.js：

 var Admin = require('./controllers/Admin'); ... var attachDB = function(req, res, next) { req.db = db; next(); }; ... app.all('/admin*', attachDB, function(req, res, next) { Admin.run(req, res, next); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Admin.runメソッドをミドルウェア関数として直接送信しないことに注意してください。これは、コンテキストを保持するためです。これを行う場合：

 app.all('/admin*', Admin.run);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Adminオブジェクトのthisという単語は、まったく別の場所を指します。

管理パネルの保護

/ adminで始まる各ページは保護する必要があります。これを実現するために、組み込みのExpressミドルウェア機能であるSessionsを使用します。セッションと呼ばれるリクエストにオブジェクトを追加するだけです。次の2つのことを行うように、管理コントローラーを変更する必要があります。

• セッションが利用可能かどうかを確認する必要があります。そうでない場合は、認証フォームを表示します
• ユーザー名とパスワードがデータベースのユーザー名とパスワードと一致する場合、承認フォームから送信されたデータを受け入れ、ユーザーを承認する必要があります

以下は、上記の要件を満たす小さなヘルパー関数です。

 authorize: function(req) { return ( req.session && req.session.fastdelivery && req.session.fastdelivery === true ) || ( req.body && req.body.username === this.username && req.body.password === this.password ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に、セッションオブジェクトを介してユーザーを認識しようとするスクリプトが実行されます。次に、フォームからのデータが送信されたかどうかを確認します。その場合、ミドルウェア関数bodyParserが用意したrequest.bodyオブジェクトからフォームのデータを利用できます。次に、ユーザー名とパスワードが一致するかどうかを確認します。そして、コントローラーからrunメソッドを実行するときが来ました。このメソッドは、新しく作成されたヘルパー（すべてのコントローラーの基本ラッパー）を使用します。チェック：ユーザーが承認されている場合、コントロールパネルを表示し、そうでない場合は承認ページを表示します。

 run: function(req, res, next) { if(this.authorize(req)) { req.session.fastdelivery = true; req.session.save(function(err) { var v = new View(res, 'admin'); v.render({ title: 'Administration', content: 'Welcome to the control panel' }); }); } else { var v = new View(res, 'admin-login'); v.render({ title: 'Please login' }); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテンツ管理

この記事の冒頭で述べたように、管理するものがたくさんあります。プロセスを簡素化するために、1つのコレクションにすべてのデータを保持しましょう。各エントリには、タイトル、テキスト、画像、およびタイプのプロパティがあります。後者がレコードの所有者を決定します。たとえば、連絡先ページには「連絡先」タイプのエントリが1つだけ必要ですが、ブログページにはさらに多くのエントリが必要です。そのため、エントリを追加、削除、編集するには、3つの新しいページを追加する必要があります。新しいテンプレートの作成、スタイリング、およびコントローラーへの新しいものの追加を開始する前に、MongoDBサーバーとアプリケーションの間にあるモデルのクラスを作成する必要があります。もちろん、便利なAPIを提供します。

 // /models/ContentModel.js var Model = require("./Base"), crypto = require("crypto"), model = new Model(); var ContentModel = model.extend({ insert: function(data, callback) { data.ID = crypto.randomBytes(20).toString('hex'); this.collection().insert(data, {}, callback || function(){ }); }, update: function(data, callback) { this.collection().update({ID: data.ID}, data, {}, callback || function(){ }); }, getlist: function(callback, query) { this.collection().find(query || {}).toArray(callback); }, remove: function(ID, callback) { this.collection().findAndModify({ID: ID}, [], {}, {remove: true}, callback); } }); module.exports = ContentModel;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モデルは、各レコードに一意のIDを生成します。後で情報を更新するために必要になります。

連絡先ページに新しいエントリを追加する必要がある場合、次のように記述できます。

 var model = new (require("../models/ContentModel")); model.insert({ title: "Contacts", text: "...", type: "contacts" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、mongodbコレクションには非常に優れたデータ管理APIがあります。これで、このすべての機能を使用するUIを作成する準備ができました。今回は、管理コントローラーがかなり変更されます。タスクを簡素化するために、追加したレコードのリストと、レコードを追加/編集するためのフォームを組み合わせることにしました。下のスクリーンショットでわかるように、ページの左側はリスト用に、右側はフォーム用に予約されています。



すべてのコントロールを1ページに表示するということは、このページをレンダリングする部分に焦点を合わせる必要があることを意味します。具体的には、テンプレートに送信するデータに焦点を合わせる必要があります。したがって、次のようないくつかの統合されたヘルパー関数を作成しました。

 var self = this; ... var v = new View(res, 'admin'); self.del(req, function() { self.form(req, res, function(formMarkup) { self.list(function(listMarkup) { v.render({ title: 'Administration', content: 'Welcome to the control panel', list: listMarkup, form: formMarkup }); }); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

はい、それは少しlooksいですが、それは私が望むように正確に動作します。最初のヘルパーはdelメソッドで、現在のGETパラメーターをチェックし、action = delete＆id = [レコードのID]の組み合わせを見つけた場合、対応するデータをコレクションから削除します。2番目の関数はformと呼ばれ、主にページの右側にフォームを表示します。この関数は、フォームがサーバーに到着したかどうかを確認し、データベース内のレコードを適切に更新または作成します。最後に、listメソッドは情報を取得し、後でテンプレートに送信されるHTMLテーブルを準備します。これら3つのヘルパーの実装は、この命令のソースコードにあります。

以下は、ファイルのアップロードを処理する関数です。

 handleFileUpload: function(req) { if(!req.files || !req.files.picture || !req.files.picture.name) { return req.body.currentPicture || ''; } var data = fs.readFileSync(req.files.picture.path); var fileName = req.files.picture.name; var uid = crypto.randomBytes(10).toString('hex'); var dir = __dirname + "/../public/uploads/" + uid; fs.mkdirSync(dir, '0777'); fs.writeFileSync(dir + "/" + fileName, data); return '/uploads/' + uid + "/" + fileName; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルがサーバーに送信されると、要求オブジェクトの.filesプロパティに対応するデータが入力されます。この場合、次のHTML要素があります。

 <input type="file" name="picture" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、req.files.pictureを介して送信されたデータにアクセスできることを意味します。上記の例に示すように、req.files.picture.pathを使用して、ファイルの未加工（未加工）コンテンツを取得します。さらに、送信されたファイルはダウンロード用に作成されたディレクトリに保存され、最後に、このファイルに対応するURLが返されます。これらの操作はすべて同期ですが、非同期バージョンのreadFileSync、mkdirSync、およびwriteFileSyncメソッドを使用することをお勧めします。

ユーザー部

最も難しい部分の準備ができました。管理パネルが動作し、データベースに保存されている情報にアクセスできるContentModelクラスがあります。ここで必要なのは、ユーザー部分のコントローラーを作成し、保存されたコンテンツにバインドすることです。これがホームページのコントローラーです- /controllers/Home.js

 module.exports = BaseController.extend({ name: "Home", content: null, run: function(req, res, next) { model.setDB(req.db); var self = this; this.getContent(function() { var v = new View(res, 'home'); v.render(self.content); }) }, getContent: function(callback) { var self = this; this.content = {}; model.getlist(function(err, records) { ... storing data to content object model.getlist(function(err, records) { ... storing data to content object callback(); }, { type: 'blog' }); }, { type: 'home' }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ホームページには、タイプが「home」の1つのエントリと、タイプが「blog」の4つのエントリが必要です。

コントローラーの準備ができたら、app.jsでコントローラーへのルートを追加する必要があります。

 app.all('/', attachDB, function(req, res, next) { Home.run(req, res, next); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

再度dbオブジェクトをリクエストオブジェクトにアタッチします。ほとんどの場合、管理パネルの作成時に実行したプロセスと同じです。

ユーザーパーツの他のページは、モデルクラスを使用してデータを受信するコントローラーがあり、もちろんルートがあるという点で、ほとんど同じです。さらに詳しく説明したい2つの興味深い側面があります。最初はブログページにリンクされています。このページには、すべての記事と1つの記事が表示されます。ルートのペアを定義します。

 app.all('/blog/:id', attachDB, function(req, res, next) { Blog.runArticle(req, res, next); }); app.all('/blog', attachDB, function(req, res, next) { Blog.run(req, res, next); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

両方とも同じコントローラー：Blogを使用しますが、2つの異なるrunメソッドを呼び出します。行/ blog /：idに注意してください。このルートは、/ blog / 4e3455635b4a6f6dccfaa1e50ee71f1cde75222bなどのURLに一致します。この長いハッシュには、req.params.idプロパティからアクセスできます。つまり、動的パラメーターを定義できます。私たちの場合、これはエントリ（記事）のIDになります。これについて学習したので、記事ごとに一意のページを生成できます。

2番目の興味深い側面は、サービス、キャリア、連絡先のページをどのように作成するかです。それらのすべてがデータベースの1つのレコードのみを使用することは明らかです。各ページにコントローラーを作成する必要がある場合は、同じコードをコピーして貼り付け、その中のtypeフィールドを変更するだけです。runメソッドでレコードタイプを受け入れる単一のコントローラーを使用して、これを行うより良い方法があります。ルートは次のとおりです。

 app.all('/services', attachDB, function(req, res, next) { Page.run('services', req, res, next); }); app.all('/careers', attachDB, function(req, res, next) { Page.run('careers', req, res, next); }); app.all('/contacts', attachDB, function(req, res, next) { Page.run('contacts', req, res, next); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、コントローラーは次のようになります。

 module.exports = BaseController.extend({ name: "Page", content: null, run: function(type, req, res, next) { model.setDB(req.db); var self = this; this.getContent(type, function() { var v = new View(res, 'inner'); v.render(self.content); }); }, getContent: function(type, callback) { var self = this; this.content = {} model.getlist(function(err, records) { if(records.length > 0) { self.content = records[0]; } callback(); }, { type: type }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

展開

Express Webサイトをデプロイすることは、Node.jsに他のアプリケーションをデプロイすることと本質的に違いはありません。

• ファイルはサーバーにアップロードされます
• ノードプロセスを停止する必要があります（実行中の場合）
• 必要な依存関係をすべてインストールするには、npm installコマンドを実行します
• メインノードスクリプトが再度実行されます

Nodeは非常に新しい製品であり、すべてが期待どおりに機能するわけではありませんが、常に改善が行われていることに注意してください。たとえば、foreverモジュールはNode.jsの継続的な動作を保証します。次のコマンドを実行して実行できます。

 forever start yourapp.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはサーバーで使用するものです。この小さなツールは、1つの大きな問題を解決します。node yourapp.jsコマンドを使用してアプリケーションを起動すると、スクリプトが失敗するとすぐにサーバーがクラッシュしますが、永久にアプリケーションを再起動するだけです。

私はシステム管理者ではありませんが、ApacheとNginxでノードアプリケーションを統合した経験を共有したいと思います。統合は開発プロセスの一部だと考えているからです。ご存じのように、Apacheは通常ポート80で実行されます。つまり、localhostまたはlocalhostのブラウザーにアクセスすると：80、Apacheサーバーが提供するページが表示されます。おそらく、ノードスクリプトは別のポートでリッスンしています。したがって、要求を受信して​​目的のポートに送信する仮想ホストを追加する必要があります。たとえば、アドレスexpresscompletewebsite.devの下で、ローカルのApacheサーバーで作成したばかりのサイトをホストする必要があります。最初に行う必要があるのは、ホストファイルにドメインを追加することです。

 127.0.0.1 expresscompletewebsite.dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、Apacheサーバーの構成ディレクトリにあるhttpd-vhosts.confファイルを変更する必要があります。

 # expresscompletewebsite.dev <VirtualHost *:80> ServerName expresscompletewebsite.dev ServerAlias www.expresscompletewebsite.dev ProxyRequests off <Proxy *> Order deny,allow Allow from all </Proxy> <Location /> ProxyPass http://localhost:3000/ ProxyPassReverse http://localhost:3000/ </Location> </VirtualHost>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サーバーはポート80からの要求を受け入れますが、ノードスクリプトをリッスンするポート3000に要求を転送します。

Nginxの構成ははるかに簡単で、率直に言って、Node.jsベースのアプリケーションをホストするための最良の選択です。 Apache構成と同様に、hostsファイルにドメインを追加する必要があります。その後、Nginxがインストールされている場所にある/ sites-enabledディレクトリに新しいファイルを作成します。ファイルの内容は次のようになります。

 server { listen 80; server_name expresscompletewebsite.dev location / { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $http_host; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同じホスト構成でApacheとNginxを同時に起動することはできないことに注意してください。これは、どちらもポート80でリッスンするためです。さらに、戦闘サーバーで上記のコードスニペットを使用する場合は、インターネットでより詳細なサーバー構成情報を検索できます。私が言ったように、私はこの分野の専門家ではありません。

おわりに

Expressは、Webアプリケーションを構築するための優れた基盤を提供する優れたフレームワークです。あなた自身が見ることができるように、それは選択の問題、それをどのように拡張するか、そしてそれで何を使うかだけです。いくつかの素晴らしいミドルウェアを使用してルーチンタスクを簡素化し、開発者にとって最もおいしいものを実装するプロセスを残します。

ソースコード

GitHubのこの記事で作成したWebサイトのソースコードはhttps://github.com/tutsplus/build-complete-website-expressjsです。分岐してアップグレードしてください。ウェブサイトを立ち上げるための段階的なガイドは次のとおりです。

• ソースコードをダウンロードする
• ダウンロードしたアプリケーションのディレクトリに移動します
• npm installを実行する
• mongodbデーモンを実行する
• ノードapp.jsを実行します