ホームページ > 記事 > ウェブフロントエンド > Nodejsチュートリアル環境のインストールとoperation_node.js
nodeJS を実行させます
最初のステップは、もちろん、nodeJS 環境をインストールすることです。今では、nodeJS を Windows に直接ダウンロードする方が速いです。
http://www.nodejs.org/download/
必要に応じてここからダウンロードしてください。ダウンロードが完了したら、次のステップに進みます。
2 番目のステップでは、その後の操作を容易にするために、D ドライブにフォルダー ブログを直接作成しました
次に、Windows コマンド ライン ツールを開き、d ドライブに入り、次のように入力します。
内部に依存パッケージが存在する可能性がありますので、インストールするにはブログ ディレクトリを入力する必要があります (インストール構成は package.json によって提供されます)。
現時点で、プログラムを実行する準備ができています:
ここでは、Express (人気のある NodeJS Web 開発フレームワーク) と ejs テンプレート エンジンを使用しています
ファイル構造
初期化ファイルのディレクトリ構造は次のとおりです:
app.js はエントリ ファイルです
package.json はモジュールの依存関係ファイルです。npm install を使用すると、その構成に基づいて関連するパッケージがインターネットからダウンロードされます。
node_modules はダウンロードされたモジュール ファイル (package.json) です
パブリックストア静的リソースファイル
routes にはルーティング ファイルが保存されます
ビューには、関連するビュー テンプレート ファイルが保存されます
このようにして、基本的なディレクトリ構造が明らかになります。node_modules ディレクトリについて簡単に説明します。
node_modules/ejs
先ほども述べたように、ダウンロードしたモジュールはここに保存されます。簡単に言うと、これは js ファイルの集合です。
buf = 'var buf = [];';
if (false !== options._with) buf = 'nwith (locals || {}) { (function(){ ';
buf = 'n buf.push('';
var lineno = 1;
varconsumEOL = false;
for (var i = 0, len = str.length; i
var stri = str[i];
if (str.slice(i, open.length i) == open) {
i = open.length
var prefix、postfix、line = (compileDebug ? '__stack.lineno=' : '') lineno;
switch (str[i]) {
case '=':
prefix = "',escape((" line ', ';
postfix = ")), '";
私;
休憩;
ケース '-':
prefix = "', (" line ', ';
postfix = "), '";
私;
休憩;
デフォルト:
プレフィックス = "');" 行 ';';
postfix = "; buf.push('";
}
var end = str.indexOf(close, i)
、js = str.substring(i, end)
、開始 = i
、インクルード = null
、n = 0;
if ('-' == js[js.length-1]){
js = js.substring(0, js.length - 2);
ConsumerEOL = true;
}
if (0 == js.trim().indexOf('include')) {
変数名 = js.trim().slice(7).trim();
if (!filename) throw new Error('インクルードにはファイル名オプションが必要です');
var path =solveInclude(name, filename);
include = read(path, 'utf8');
include =exports.parse(include, { filename: path, _with: false, open: open, close: close,compileDebug:compileDebug });
buf = "' (function(){" include "})() '";
js = '';
}
while (~(n = js.indexOf("n", n))) n , lineno ;
if (js.substr(0, 1) == ':') js = filtered(js);
if (js) {
if (js.lastIndexOf('//') > js.lastIndexOf('n')) js = 'n';
buf = プレフィックス;
buf = js;
buf = 後置;
}
i = 終了 - 開始 close.length - 1;
} else if (stri == "\") {
buf = "\\";
} else if (str == "'") {
buf = "\'";
} else if (str == "r") {
// 無視します
} else if (str == "n") {
If (消費EOL) {
consumEOL = false;
} else {
buf = "\n";
lineno ;
}
} else {
buf = stri;
}
}
if (false !== options._with) buf = "'); })();n} nreturn buf.join('');";
else buf = "');nreturn buf.join('');";
戻りバフ;
};
たとえば、ここでは ejs テンプレートと Express モジュールを使用しましたが、その違いを確認するために興味深く ejs プログラムに入りました
ejs.js を開いたら、いくつかのコードを見てみましょう。このコードは、テンプレートを文字列に解析するアンダースコアのテンプレート エンジン コードと同じ考え方を持っています。
その後、eval メソッドまたは new Function メソッドを通じてそれを関数に変換し、分析を容易にするために独自のデータ オブジェクトを渡します具体的なワークフローについては、まだわかりません。後で勉強するだけです。
app.js
エントリ ファイルとして、app.js は重要な役割を果たします。
var Routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
// すべての環境
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('ビューエンジン', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
if ('開発' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/users', user.list);
console.log('Express サーバーがポートでリッスンしています ' app.get('port'));
});
app.set('port', process.env.PORT || 3000) は起動時にポートを設定します
app.set('views', __dirname '/views') は、テンプレート ファイルを保存するパスを設定します。__dirname は、現在のスクリプトが配置されているディレクトリを保存するグローバル変数です。このように:
app.set('view Engine', 'ejs') はテンプレート エンジンを ejs に設定します
app.use(express.favicon()) はアイコンを設定するためのもので、変更したい場合は、public
の下にある画像ファイルに移動するだけです。
app.use(express.logger('dev')); Express は接続に依存しているため、組み込みミドルウェアがログを出力しますapp.use(express.json()); はリクエストの本文を解析するために使用され、文字列は動的に json オブジェクトに変換されます
app.use(express.methodOverride()); connect にはポストリクエストを処理するための組み込みミドルウェアがあり、put
などの http メソッドを偽装できます。
app.use(app.router); 呼び出しルーターの解析ルールapp.use(express.static(path.join(__dirname, 'public'))); 組み込みミドルウェアを接続し、静的ファイルを保存するためにルート ディレクトリに public を設定します
この文は、開発中にエラーメッセージが出力されるべきであることを意味します
この2文はアクセス時の具体的な処理ファイルです。例えばここに直接アクセスする場合、デフォルトのアクセスはroutes.index
です。次に、テンプレート データが実際に内部で解析されます。
最後に、上記のコードを呼び出して http サーバーを作成し、ポート 3000 をリッスンします。成功すると、Web ページからアクセスできるようになります
ルーティング
以前にルーティングを構築するためにこの方法を使用しました
上記のコードは、このコード (アプリ内で記述) に置き換えることができます
このコードは、ホームページにアクセスすると、ejs テンプレート エンジンが呼び出されて、index.ejs テンプレート ファイルをレンダリングすることを意味します
ここで、いくつかの変更を加えます。上記のコードはルーティング機能を実装していますが、ルートが多すぎるとアプリが肥大化するため、関連する設定をインデックスに追加します。
そのため、アプリ内の関連するルーティング関数を削除し、アプリの最後にコードを追加します。
次に、index.js を変更します
このコードがどのように構成されているかはまだ明らかではないので、後で見ていきます。
ルーティング ルール
Express はさまざまな http リクエストをカプセル化します。通常は get/post の 2 種類を使用します
最初のパラメータはリクエスト パス、2 番目のパラメータはコールバック関数、または 2 つのパラメータはリクエストとレスポンスです
次に、req(リクエスト)には次のようなルールがあります
req.query は取得リクエストを処理し、取得リクエストのパラメータを取得します
req.params は、/:xxx
の形式で取得リクエストまたは投稿リクエストを処理します。req.body は投稿リクエストを処理し、投稿リクエストの本文を取得します
req.params は get リクエストと post リクエストを処理しますが、検索の優先順位は req.params->req.body->req.query
パスルールは正規表現もサポートしています。詳細については後ほど説明します...
ルーティング ルールを追加します
存在しないリンクにアクセスした場合:
/y にはルーティング ルールがなく、公開されているファイルについては言及されていないため、404
ここで、index.js に関連するルートを追加します。
ここで私のページが文字化けしています:
その理由は、ダウンロード後にファイルが utf-8 に変更されるだけなので、次のセクションに進みます。
登録機能
ここではオリジナルのブロガーに従って簡単な登録機能を作成します。ここではデータベースとして mongo db を使用し、後で順次機能を改善していきます。新しい登録ルートを作成し、そのための新しい登録テンプレートを作成します。それでは始めてみましょう
①インデックスに新規ルートを作成
Res.send('イェシャオチャイ');
});
res.render('登録', { title: '登録ページ' });