Expressを使用して完全なMVC Webサイトを構築します

---

Expressとは何ですか？

Expressは、node.jsに最適なフレームワークの1つです。それは素晴らしいサポートと多くの役立つ機能を持っています。すべての基本をカバーする素晴らしい記事がたくさんあります。ただし、今回は少し深く掘り下げて、完全なWebサイトを作成するためのワークフローを共有したいと思います。一般に、この記事はExpressだけでなく、ノード開発者が利用できる他の優れたツールと組み合わせて使用​​するためのものです。

このチュートリアルをフォローするために、私はあなたがノードに多少精通していると仮定しており、すでにシステムにインストールしています。

Expressのミドルウェアの理解

Expressの中心にはConnectがあります。これはミドルウェアフレームワークであり、多くの便利なものが付属しています。ミドルウェアが何であるか疑問に思っているなら、簡単な例を次に示します。

 const connect = require（ 'connect'）、<br> http = require（ 'http'）;<br><br> const app = connect（）<br> .use（function（req、res、next）{<br> console.log（ "これが私の最初のミドルウェア"）;<br> 次（）;<br> }）<br> .use（function（req、res、next）{<br> console.log（ "これが私の2番目のミドルウェア"）;<br> 次（）;<br> }）<br> .use（function（req、res、next）{<br> console.log（ "end"）;<br> res.End（ "Hello World"）;<br> }）;<br><br> http.createserver（app）.listen（3000）;<br>

ミドルウェアは基本的に、応答オブジェクトと応答オブジェクトを受け入れる関数であるか、2番目のミドルウェアで次（）メソッドコールを呼び出し、ボディパーサーはアプリケーション/JSON、アプリケーション/x-www-form-urlencoded、およびmultipart/form-dataをサポートすることにより、次の関数にフローを渡します。 Cookieの名前でキーにされたオブジェクトを持つReq.Cookies。

Expressは実際にConnectをラップし、ルーティングロジックのようないくつかの新しい機能を追加します。これにより、プロセスがはるかにスムーズになります。 ExpressでGETリクエストを処理する例は次のとおりです。

 app.get（ '/hello.txt'、function（req、res）{<br> var body = 'hello world';<br> res.setheader（ 'content-type'、 'text/plain'）;<br> res.setheader（ 'content-length'、body.length）;<br> res.End（body）;<br> }）;<br>

ソースコード

私たちが構築したこのサンプルサイトのソースコードは、GitHubで利用可能です。お気軽にフォークして遊んでください。サイトを実行するための手順は次のとおりです。

• ソースコードをダウンロードします
• NPMインストールに移動します
• Mongodbデーモンを実行します
• NPMインストールを実行します。

   {<br> 「名前」：「mywebsite」、<br> 「説明」：「私のウェブサイト」、<br> 「バージョン」：「0.0.1」、<br> 「依存関係」：{<br> 「エクスプレス」：「5.x」<br> }<br> }<br>

  フレームワークのコードはnode_modulesに配置され、そのインスタンスを作成できます。ただし、コマンドラインツールを使用して、代替オプションを好みます。 NPX Express-Generatorコマンドを使用して：

   使用法：Express [options] [dir]<br><br> オプション：<br><br> -versionバージョン番号を出力します<br> -e、-ejsはEJSエンジンサポートを追加します<br>  - パグエンジンサポートを追加します<br> -hbsは、ハンドルバーのエンジンサポートを追加します<br> -H、 - ホーガンはHogan.jsエンジンサポートを追加します<br> -v、-view <engine> add view <engine> support（dust | ejs | hbs | hjs | jade | pug | twig | vash）（デフォルトにJade）<br> -no-viewビューエンジンの代わりに静的HTMLを使用します<br> -c、 -  css  styleSheet <engine>サポートを追加（Less | Stylus | Compass | Sass）（デフォルトはプレーンCSSにデフォルト）<br> -git add .gitignore<br> -f、 - 非空白ディレクトリに強制力<br> -H、 - ヘルプ出力使用情報<br></engine></engine></engine>

  ご覧のとおり、利用可能なオプションはいくつかありますが、私にとっては十分です。通常、私はCSSプリプロセッサとして使用し、ハンドルバーをテンプレートエンジンとして使用します。この例では、セッションサポートも必要なので、NPMインストールとnode_modulesフォルダーがポップアップします。

  上記のアプローチが必ずしも適切ではないことを理解しています。ルートハンドラーを別のディレクトリなどに配置することをお勧めします。しかし、次のいくつかのセクションでわかるように、私はすでに生成されている構造に変更を加えますが、それは非常に簡単です。したがって、新しいファイル構造で動作するapp.jsについて考える必要があります。これら2つの行を削除する必要があります。

   const usersRouter = require（ "./ routes/users"）;<br> ...<br> app.use（ "/users"、usersrouter）;<br>

  ステップ2。構成

  次に、構成をセットアップする必要があります。私たちの小さなサイトは、ローカルサーバー、ステージングサーバー、および生産サーバーの3つの異なる場所に展開する必要があると想像してみましょう。もちろん、すべての環境の設定は異なり、十分な柔軟性のあるメカニズムを実装する必要があります。ご存知のように、すべてのノードスクリプトはコンソールプログラムとして実行されます。そのため、現在の環境を定義するコマンドライン引数を簡単に送信できます。後でテストを作成するために、その部分を別のモジュールに巻き付けました。これは/config/index.jsファイルです：

   const config = {<br> 地元： {<br> モード：「ローカル」、<br> ポート：3000<br> }、<br> ステージング：{<br> モード：「ステージング」、<br> ポート：4000<br> }、<br> 生産： {<br> モード：「生産」、<br> ポート：5000<br> }<br> }<br> module.exports = function（mode）{<br> config [モード||を返しますprocess.argv [2] || 「ローカル」] || config.local;<br> }<br>

  ポートの2つの設定のみがあります（今のところ）。ご想像のとおり、アプリケーションはさまざまなサーバーに異なるポートを使用します。そのため、 app.jsのサイトのエントリポイントを更新する必要があります。

   const config = require（ './ config'）（）;<br> process.env.port = config.port;<br>

  構成を切り替えるには、最後に環境を追加するだけです。例えば：

   NPM開始ステージング<br>

  ポート4000でサーバーを実行します。

  これで、すべての設定が1か所にあり、それらは簡単に管理できます。

  ---

  ステップ3。テストフレームワークを作成します

  私はテスト駆動型開発（TDD）の大ファンです。この記事で使用されているすべての基本クラスをカバーしようとします。もちろん、絶対にすべてのテストを行うと、この書き込みが長くなりすぎますが、一般的に、それが独自のアプリを作成するときに進める方法です。テスト用の私のお気に入りのフレームワークの1つはUVUです。これは非常に使いやすく高速であるためです。もちろん、NPMレジストリで利用できます。

   npmインストール -  save-dev uvu<br>

  次に、NPMテスト内に新しいスクリプトを作成すると、次のように表示されます。

   config.js<br> •••（3/3）<br><br> 合計：3<br> 合格：3<br> スキップ：0<br> 期間：0.81ms<br>

  今回は、最初に実装とテストを2番目に書きました。それはまさに物事を行うTDDの方法ではありませんが、次のいくつかのセクションでは反対のことをします。

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

  数年前、私はあなたがより良いプログラムを作成するのに役立つかもしれない非常に重要なことを実感しました。新しいクラス、新しいモジュール、または単なる新しいロジックの作成を開始するたびに、自問してください。

  これをテストするにはどうすればよいですか？

  この質問に対する答えは、より効率的にコーディングし、より良いAPIを作成し、すべてをうまく分離したブロックに入れます。 Spaghettiコードのテストを書くことはできません。たとえば、上記の構成ファイル（ /config/index.js ）で、生産構成を送信する可能性を追加しましたが、ノードスクリプトはnpmインストールMongodbで実行されます。

  次に、MongoDBサーバーが実行されているかどうかをチェックするテストを作成します。これは/tests/mongodb.jsファイルです：

   const {test} = require（ "uvu"）;<br> const {mongoclient} = require（ "mongodb"）;<br><br> test（ "mongodb server Active"、async function（）{<br> const client = new mongoclient（ "mongodb：//127.0.0.1：27017/fastdelivery"）;<br> client.connect（）;<br> }）;<br><br> test.run（）;<br><br>

  MongoDBクライアントの。接続メソッドを追加する必要はありません。データベースにリクエストを行う必要があるたびにMongoClientオブジェクトが受信されます。そのため、最初のサーバー作成のデータベースに接続する必要があります。これを行うには、各リクエストの前に自動的にミドルウェアが実行されるため、REQ.DBプロパティで利用可能です。

  ---

  4. ExpressでMVCパターンを設定します

  私たちは皆、MVCパターンを知っています。問題は、これがどのように表現するかということです。多かれ少なかれ、それは解釈の問題です。次のいくつかのステップでは、モデル、ビュー、コントローラーとして機能するモジュールを作成します。

  ステップ1。モデル

  モデルは、アプリケーションにあるデータを処理するものです。 mongoclientにアクセスできるはずです。モデルには、さまざまな種類のモデルを作成したい場合があるため、モデルに拡張する方法もあります。たとえば、ContactSmodelが必要になる場合があります。したがって、これらの2つのモデル機能をテストするには、新しいSpec、 /tests/ base.model.jsを作成する必要があります。また、実装のコーディングを開始する前にこれらの機能を定義することで、モジュールがやりたいことのみを実行することを保証できます。

   const {test} = require（ "uvu"）;<br> const assert = require（ "uvu/assert"）;<br> const modelclass = require（ "../ models/base"）;<br> const dbmockup = {};<br> test（ "モジュール作成"、async function（）{<br> const model = new ModelClass（dbmockup）;<br> assert.ok（model.db）;<br> assert.ok（model.setdb）;<br> assert.ok（model.collection）;<br> }）;<br> test.run（）;<br>

  実際のDBオブジェクトとデータベースビューのゲッターの代わりに、ディレクトリがベースビュークラスに変更されます。この小さな変更には、別の変更が必要です。テンプレートファイルが別のディレクトリに配置されていることを表明する必要があります。

   app.set（ "Views"、path.join（__ dirname、 "Templates"））;<br>

  まず、必要なものを定義し、テストを書き、実装を書きます。次のルールに一致するモジュールが必要です。

  • そのコンストラクターは、応答オブジェクトとテンプレート名を受信する必要があります。
  • ビュークラスが必要です。どういうわけか、応答オブジェクトを呼び出すだけではありませんか？たとえば、JSONデータを提供します。

     const data = {developer： "Krasimir tsonev"};<br> Response.ContentType（ "Application/JSON"）;<br> Response.send（json.stringify（data））;<br>

    毎回これを行う代わりに、JSonViewクラス、またはテストディレクトリを持っていると、上記の例では実際にはコントローラーであるルートの後に「/」を実行すると、応答を受け入れるミドルウェア関数であり、（1）コマンドラインツールは、古いミドルウェア関数である「run method」という名前のディレクトリを作成するだけです。

  • 独自のロジックとともに、実行方法が必要です。

    ---

    5. FastDelivery Webサイトを作成します

    OK、MVCアーキテクチャ用のクラスの良いセットがあり、新しく作成されたモジュールをテストでカバーしました。これで、偽の会社FastDeliveryのサイトを継続する準備ができています。

    このサイトには、フロントエンドと管理パネルの2つの部分があると想像してみましょう。フロントエンドは、データベースに記載されている情報をエンドユーザーに表示するために使用されます。管理パネルは、そのデータを管理するために使用されます。管理者（管理）パネルから始めましょう。

    ステップ1。コントロールパネル

    最初に、管理ページとして機能するシンプルなコントローラーを作成しましょう。これが/routes/admin.jsファイルです：

     const basecontroller = require（ "./ base"）、<br> view = require（ "../ views/base"）;<br> module.exports = new（class admincontrollerはbasecontrollerを拡張します{<br> constructor（）{<br> super（ "admin"）;<br> }<br> run（req、res、next）{<br> if（this.authorize（req））{<br> req.session.fastdelivery = true;<br> req.session.save（function（err）{<br> var v = new View（res、 "admin"）;<br> v.render（{<br> タイトル：「管理」、<br> コンテンツ：「コントロールパネルへようこそ」、<br> }）;<br> }）;<br> } それ以外 {<br> const v = new View（res、 "admin-login"）;<br> v.render（{<br> タイトル：「ログインしてください」、<br> }）;<br> }<br> }<br> Authorize（req）{<br> 戻る （<br> （req.session &&<br> req.session.fastdelivery &&<br> req.session.fastdelivery === true）||<br> （req.body &&<br> req.body.username === this.username &&<br> req.body.password === this.password）<br> ）;<br> }<br> }）（）;<br>

    コントローラーとビューに事前に書かれたベースクラスを使用することにより、コントロールパネルのエントリポイントを簡単に作成できます。 admin.runメソッドはミドルウェアとして直接。それは、私たちがコンテキストを維持したいからです。これを行う場合：

     app.all（ '/admin*'、admin.run）;<br>

    管理者という言葉は何か他のものを指します。

    管理パネルの保護

    /管理者から始まるすべてのページは保護する必要があります。これを達成するために、Expressのミドルウェア：セッションを使用します。 Admin Controllerと呼ばれるオブジェクトをリクエストに添付して、2つの追加のことを行うだけです。

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

    これを達成するために使用できる小さなヘルパー関数は次のとおりです。

     Authorize（req）{<br> 戻る （<br> （req.session &&<br> req.session.fastdelivery &&<br> req.session.fastdelivery === true）||<br> （req.body &&<br> req.body.username === this.username &&<br> req.body.password === this.password）<br> ）;<br> }<br>

    まず、セッションオブジェクトを介してユーザーを認識しようとするステートメントがあります。第二に、フォームが提出されているかどうかを確認します。その場合、フォームからのデータはBodyParserミドルウェアで使用できます。次に、ユーザー名とパスワードが一致するかどうかを確認します。

    そして今、ここにタイトル、写真、およびタイププロパティがレコードの所有者を決定します。たとえば、連絡先ページには、管理者コントローラーを使用して1つのレコードが必要になる必要がある場合は、かなり変更する必要があります。タスクを簡素化するために、追加されたレコードのリストとそれらを追加/編集するためのフォームを組み合わせることにしました。以下のスクリーンショットで見ることができるように、ページの左側はリスト用に予約されており、フォームの右側の部分が予約されています。

    

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

     this.del（req、function（）{<br> this.form（req、res、function（formmarkup）{<br> this.list（function（listmarkup）{<br> v.render（{<br> タイトル：「管理」、<br> コンテンツ：「コントロールパネルへようこそ」、<br> リスト：listmarkup、<br> フォーム：formmarkup、<br> }）;<br> }）;<br> }）;<br> }）;<br> const v = new View（res、 "admin"）;<br>

    少し醜いように見えますが、私が望んでいた通りに機能します。最初のヘルパーはアクション= delete＆id = [レコードのid]で、コレクションからデータを削除します。 2番目の関数はリストメソッドと呼ばれ、情報を取得し、HTMLテーブルを準備します。HTMLテーブルは後でテンプレートに送信されます。これら3つのヘルパーの実装は、このチュートリアルのソースコードに記載されています。

    ここでは、 admin.jsのファイルアップロードを処理する関数を表示することにしました。

     handlefileupload（req）{<br> if（！req.files ||！req.files.picture ||！req.files.picture.name）{<br> Req.Body.CurrentPicture ||を返します"";<br> }<br> const data = fs.readfilesync（req.files.picture.path）;<br> const filename = req.files.picture.name;<br> const uid = crypto.randombytes（10）.toString（ "hex"）;<br> const dir = __dirname "/..//public/uploads/" uid;<br> fs.mkdirsync（dir、 "0777"）;<br> fs.writefilesync（dir "/" filename、data）;<br> return "/uploads/" uid "/" filename;<br> }<br>

    ファイルが送信された場合、ノードスクリプトreq.files.picture。上記のコードスニペットでは、readfilesync、writefilesync。

    ステップ3。フロントエンド

    努力が完了しました。管理パネルは機能しており、ブログにDBオブジェクトの種類を備えたホームと4つのレコードがありますが、別の /ブログ /：ID文字列に電話してください。このルートは、req.params.idのようなURLと一致します。つまり、動的なパラメーターを定義することができます。私たちの場合、それがレコードのIDです。この情報を取得したら、すべての記事に一意のページを作成できます。

    2番目の興味深い部分は、サービス、キャリア、連絡先ページを構築する方法です。データベースから1つのレコードのみを使用していることは明らかです。すべてのページに対して別のコントローラーを作成する必要がある場合は、新しい依存関係をインストールするために同じコードをコピー/貼り付け、NPMインストールコマンドのタイプを変更する必要があります。

  • メインスクリプトを再度実行する必要があります。

  ノードはまだかなり若いので、すべてが期待どおりに機能するわけではありませんが、常に改善が行われています。たとえば、node.jsプログラムが継続的に実行されることを永遠に保証します。次のコマンドを発行することでこれを行うことができます。

  永遠にYourApp.jsを開始します<br>

  これは私のサーバーでも使用しているものです。それは素晴らしい小さなツールですが、大きな問題を解決します。永遠にアプリでアプリを実行すると、アプリケーションを再起動するだけです。

  今、私はシステム管理者ではありませんが、ノードアプリをApacheまたはNginxと統合した経験を共有したかったのです。

  ご存知のように、Apacheは通常ポート80で実行されます。つまり、http：// localhost：80を開くと、Apacheサーバーが提供するページが表示され、おそらくノードスクリプトが別のポートで聞いています。そのため、リクエストを受け入れ、適切なポートに送信する仮想ホストを追加する必要があります。たとえば、ホストファイルの下でローカルApacheサーバーに基づいて構築したサイトをホストしたいとします。

   127.0.0.1 ExpressCompleTeweBeSite.dev<br>

  その後、apache構成ディレクトリの下でhttpd-vhosts.confファイルを編集して追加する必要があります。

   ＃ExpressCompleTeweBsite.dev<br> <virtualhost><br> Servername ExpressCompleteweBsite.dev<br> ServerAlias www.expresscompletewebsite.dev<br> プロキシレクエストオフ<br> <br> 注文拒否、許可<br> すべてから許可します<br> <br> <location></location><br> proxypass http：// localhost：3000/<br> proxypassReverse http：// localhost：3000/<br> <br> </virtualhost><br>

  サーバーはまだポート80のリクエストを受け入れますが、ノードがリスニングされているポート3000に転送します。

  NGINXのセットアップははるかに簡単で、正直なところ、node.jsベースのアプリをホストするためのより良い選択です。ホストファイルにドメイン名を追加する必要があります。その後、NGINXインストールの下にある/sites対応ディレクトリに新しいファイルを作成するだけです。ファイルのコンテンツは次のようになります：

  サーバー{<br> 聞く80;<br> server_name expresscompletewebsite.dev<br> 位置 / {<br> proxy_pass http://127.0.0.1:3000;<br> proxy_set_headerホスト$ http_host;<br> }<br> }<br>

  上記のホストセットアップでは、ApacheとNginxの両方を実行できないことに注意してください。それは、どちらもポート80を必要とするためです。また、生産環境で上記のコードスニペットを使用する予定がある場合は、サーバー構成の改善に関する追加の調査を少し追加することができます。私が言ったように、私はこの分野の専門家ではありません。

  ---

  結論

  Expressは素晴らしいフレームワークであり、アプリケーションの構築を開始するための優れた出発点を提供します。ご覧のとおり、それはあなたがそれをどのように拡張するか、そしてあなたがそれで構築するために何を使用するかについての選択の問題です。優れたミドルウェアを使用して退屈なタスクを簡素化し、楽しいパーツを開発者に残します。

  この投稿は、ジェイコブジャクソンからの貢献により更新されました。ジェイコブは、ウェブ開発者、テクニカルライター、フリーランサー、オープンソースの寄稿者です。

以上がExpressを使用して完全なMVC Webサイトを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。