Expressプロジェクトファイルディレクトリの説明と詳細な機能の説明

app.js: スタートアップファイル、またはエントリファイル

package.json: プロジェクト情報とモジュールの依存関係を保存します。依存関係に依存モジュールを追加して npm install を実行すると、npm は現在のディレクトリの package.json をチェックし、指定されたすべてのモジュールを自動的にインストールします。

node_modules: package.json にインストールされたモジュールを保存します。依存モジュールを package.json に追加してインストールすると、このフォルダーに保存されます。

パブリック: 画像、CSS、JS、その他のファイルを保存します

ルート: ルーティングファイルを保存する

ビュー: ビューファイルまたはテンプレートファイルを保存する

bin: 実行可能ファイルを保存する

app.js を開いて、中身を見てみましょう。

var express = require('express');
var パス = require('パス');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
bodyParser を require('body-parser');

var ルート = require('./routes/index');
var users = require('./routes/users');

var app = express();

//エンジン設定を表示
app.set('views', path.join(__dirname, 'views'));
app.set('ビューエンジン', 'ejs');

// ファビコンを /public に配置した後はコメントを解除します
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(ロガー('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', ルート);
app.use('/users', ユーザー);

// 404 をキャッチしてエラー ハンドラに転送します
app.use(function(req, res, next) {
    var err = new Error('見つかりません');
    エラーステータス = 404;
    次へ(エラー);
});

// エラーハンドラ

// 開発エラーハンドラ
// スタックトレースを出力します
app.get('env') === 'development' の場合 {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('エラー', {
            メッセージ: err.message、
            エラー: エラー
        });
    });
}

// プロダクション エラー ハンドラー
// スタックトレースはユーザーには漏洩しない
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('エラー', {
        メッセージ: err.message、
        エラー： {}
    });
});


モジュールをエクスポートします。

ここでは、require() を使用して、express や path などのモジュールと、routes フォルダー内の index.js および users.js ルーティングファイルをロードします。コードの各行の意味を説明しましょう。

(1) var app = express(): expressインスタンスアプリを生成します。

(2)app.set('views', path.join(__dirname, 'views')): ビューファイルが格納されているディレクトリ、つまりテンプレートファイルが格納されているディレクトリをviewsフォルダに設定します。__dirnameは、現在実行中のスクリプトが配置されているディレクトリを格納するグローバル変数です。

(3)app.set('view engine', 'ejs'): ビューテンプレートエンジンをejsに設定します。

(4)app.use(favicon(__dirname + '/public/favicon.ico')): /public/favicon.icoをファビコンアイコンとして設定します。

(5)app.use(logger('dev')): ロギングミドルウェアをロードします。

(6)app.use(bodyParser.json()): JSONを解析するためのミドルウェアを読み込みます。

(7)app.use(bodyParser.urlencoded({extended: false })): urlエンコードされたリクエストボディを解析するミドルウェアを読み込みます。

(8)app.use(cookieParser()): クッキーを解析するためのミドルウェアを読み込みます。

(9)app.use(express.static(path.join(__dirname, 'public'))): 静的ファイルが保存されるディレクトリをpublicフォルダに設定します。

(10) app.use('/',routes); および app.use('/users', users): ルートコントローラ。

（11）

app.use(function(req, res, next) {
    var err = new Error('見つかりません');
    エラーステータス = 404;
    次へ(エラー);
});

404 エラーをキャプチャし、エラーハンドラーに転送します。

（12）

app.get('env') === 'development' の場合 {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('エラー', {
            メッセージ: err.message、
            エラー: エラー
        });
    });
}

開発環境のエラーハンドラーは、エラーメッセージをエラーテンプレートにレンダリングし、ブラウザーに表示します。

（13）

app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('エラー', {
        メッセージ: err.message、
        エラー： {}
    });
});

運用環境のエラーハンドラーは、ユーザーにエラー情報を漏らしません。

(14)module.exports = app:他のモジュールが呼び出すためのアプリインスタンスをエクスポートします。

bin/www ファイルをもう一度見てみましょう:

#!/usr/bin/env ノード
var debug = require('debug')('blog');
var app = require('../app');

app.set('ポート', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
  debug('Express サーバーはポート ' + server.address().port でリッスンしています);
});

(1)#!/usr/bin/env node: ノード実行ファイルであることを示します。

(2)var debug = require('debug')('blog'): デバッグモジュールをインポートし、デバッグログを出力します。

(3)var app = require('../app'): 上記でエクスポートしたアプリインスタンスをインポートします。

(4)app.set('port', process.env.PORT || 3000): ポート番号を設定します。

（５）

var server = app.listen(app.get('port'), function() {
  debug('Express サーバーはポート ' + server.address().port でリッスンしています);
});

プロジェクトを開始し、ポート 3000 をリッスンします。成功すると、Express サーバーがポート 3000 でリッスンしていることが出力されます。

もう一度、routes/index.js ファイルを見てみましょう。

var express = require('express');
var ルーター = express.Router();

/* ホームページを取得します。 */
router.get('/', 関数(req, res) {
  res.render('index', { title: 'Express' });
});

モジュール.exports = ルーター;

ホームページにアクセスするための GET リクエストをキャプチャするためのルーティングインスタンスを生成し、このルートをエクスポートして、app.use('/',routes); を通じて app.js に読み込みます。このように、ホームページにアクセスすると、 res.render('index', { title: 'Express' }); が呼び出され、 views/index.ejs テンプレートがレンダリングされ、ブラウザーに表示されます。

views/index.ejs ファイルを見てみましょう。

<!DOCTYPE html>
<html>
  <ヘッド>
    <タイトル><%= タイトル %></タイトル>
    <link rel='スタイルシート' href='/stylesheets/style.css' />
  </head>
  <本文>
    <h1><%= タイトル %></h1>
    <p><%= title % へようこそ</p>
  </本文>
</html>

テンプレートをレンダリングするときに、値が express 文字列である変数 title を渡しました。テンプレートエンジンはすべての <%= title %> を express に置き換え、上の図に示すように、レンダリングされた HTML をブラウザーに表示します。

このセクションでは、プロジェクトを作成して起動する方法を学び、プロジェクトの全体的な構造と操作プロセスを理解しました。次のセクションでは、エクスプレスとルート制御の基本的な使い方を学習します。

要約する

Expressプロジェクトファイルディレクトリの説明と機能の説明に関するこの記事はこれで終わりです。Expressプロジェクトファイルディレクトリの関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません: