Expressとは何ですか？

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

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

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>

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

Expressは実際にConnectをラップし、ルーティングロジックのようないくつかの新しい機(jī)能を追加します。これにより、プロセスがはるかにスムーズになります。 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>

ソースコード

私たちが構(gòu)築したこのサンプルサイトのソースコードは、GitHubで利用可能です。お?dú)葺Xにフォークして遊んでください。サイトを?qū)g行するための手順は次のとおりです。

• ソースコードをダウンロードします
• NPMインストールに移動(dòng)します
• Mongodbデーモンを?qū)g行します
• NPMインストールを?qū)g行します。

   {<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バージョン番號(hào)を出力します<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、 - 非空白ディレクトリに強(qiáng)制力<br> -H、 - ヘルプ出力使用情報(bào)<br></engine></engine></engine>

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

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

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

  ステップ2。構(gòu)成

  次に、構(gòu)成をセットアップする必要があります。私たちの小さなサイトは、ローカルサーバー、ステージングサーバー、および生産サーバーの3つの異なる場所に展開する必要があると想像してみましょう。もちろん、すべての環(huán)境の設(shè)定は異なり、十分な柔軟性のあるメカニズムを?qū)g裝する必要があります。ご存知のように、すべてのノードスクリプトはコンソールプログラムとして実行されます。そのため、現(xiàn)在の環(huán)境を定義するコマンドライン引數(shù)を簡単に送信できます。後でテストを作成するために、その部分を別のモジュールに巻き付けました。これは/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つの設(shè)定のみがあります（今のところ）。ご想像のとおり、アプリケーションはさまざまなサーバーに異なるポートを使用します。そのため、 app.jsのサイトのエントリポイントを更新する必要があります。

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

  構(gòu)成を切り替えるには、最後に環(huán)境を追加するだけです。例えば：

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

  ポート4000でサーバーを?qū)g行します。

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

  ---

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

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

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

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

   config.js<br> ???（3/3）<br><br> 合計(jì)：3<br> 合格：3<br> スキップ：0<br> 期間：0.81ms<br>

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

  テストを書くのにかなりの時(shí)間を費(fèi)やすことを強(qiáng)くお?jiǎng)幛幛筏蓼?。完全にテストされたアプリケーションに勝るものはありません。

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

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

  この質(zhì)問に対する答えは、より効率的にコーディングし、より良いAPIを作成し、すべてをうまく分離したブロックに入れます。 Spaghettiコードのテストを書くことはできません。たとえば、上記の構(gòu)成ファイル（ /config/index.js ）で、生産構(gòu)成を送信する可能性を追加しましたが、ノードスクリプトは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オブジェクトが受信されます。そのため、最初のサーバー作成のデータベースに接続する必要があります。これを行うには、各リクエストの前に自動(dòng)的にミドルウェアが実行されるため、REQ.DBプロパティで利用可能です。

  ---

  4. ExpressでMVCパターンを設(shè)定します

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

  ステップ1。モデル

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

   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クラス、またはテストディレクトリを持っていると、上記の例では実際にはコントローラーであるルートの後に「/」を?qū)g行すると、応答を受け入れるミドルウェア関數(shù)であり、（1）コマンドラインツールは、古いミドルウェア関數(shù)である「run method」という名前のディレクトリを作成するだけです。

  • 獨(dú)自のロジックとともに、実行方法が必要です。

    ---

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

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

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

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

    最初に、管理ページとして機(jī)能するシンプルなコントローラーを作成しましょう。これが/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>

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

    管理パネルの保護(hù)

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

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

    これを達(dá)成するために使用できる小さなヘルパー関數(shù)は次のとおりです。

     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>

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

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

    

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

     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>

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

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

     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。フロントエンド

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

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

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

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

  永遠(yuǎn)にYourApp.jsを開始します<br>

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

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

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

   127.0.0.1 ExpressCompleTeweBeSite.dev<br>

  その後、apache構(gòu)成ディレクトリの下で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の両方を?qū)g行できないことに注意してください。それは、どちらもポート80を必要とするためです。また、生産環(huán)境で上記のコードスニペットを使用する予定がある場合は、サーバー構(gòu)成の改善に関する追加の調(diào)査を少し追加することができます。私が言ったように、私はこの分野の専門家ではありません。

  ---

  結(jié)論

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

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

以上がExpressを使用して完全なMVC Webサイトを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。