検索
ホームページウェブフロントエンドjsチュートリアルNode.js Express のインストールと使用方法の詳細な紹介

今回は、Node.js Express のインストールと使用方法について詳しくご紹介します。Node.js Express のインストールと使用に関する 注意事項 は何ですか?実際の事例を見てみましょう。

Express をインストールします

HelloWorld を書き直すには、Express モジュールをインストールする必要があります。 Express は、Node.js に基づく Web フレームワークです。公式 Web サイトは http://expressjs.com/ です。公式 Web サイトの Express の紹介は次のとおりです:

Node.js 用の高速で、固定観念にとらわれない、ミニマリストの Web フレームワーク

Express は非常に軽量で、通常は Web バックエンド開発に使用されます。おすすめの本がいくつかあります。http://www.jb51.net/books/470249.html を参照してください。

Express モジュールをインストールするには、npm コマンドを直接使用します。コマンドライン環境でパラメータを指定せずに npm コマンドを実行すると、npm のヘルプ情報が表示されます。 Node.js モジュールをインストールするには、install サブコマンドを使用します。 「npm install xxx」は現在のパスに xxx モジュールをインストールし、「npm install -g xxx」は現在のユーザーのグローバルな場所に xxx モジュールをインストールします。 「npm helo install」を使用して、install サブコマンドの詳細を表示します。モジュールをアンインストールするには、「npm uninstall xxx」を使用します。グローバルにインストールする場合は、「npm uninstall -g xxx」を使用します。

npm を使用してモジュールをインストールすると、依存関係が自動的に解決されます。

コマンドライン環境で次のコマンドを実行して、Express をインストールします。

npm install -g express –registry=https://registry.npm.taobao.org
より高速な Taobao イメージを指定したことに注意してください。

特記事項:

ここでチュートリアルを参照します: https://github.com/alotang/node-lessons

すぐに、次のインターフェイスが表示されるようになります (インストールした Express バージョンが 4.13.3 であることに注意してください)。

はい、Express がインストールされました。

-g コマンドを使用して Node.js モジュールをグローバルにインストールした後、

環境変数NODE_PATH を設定する必要があることに注意してください。そうしないと、node コマンドを使用してアプリケーションを起動するときにエラーが発生する可能性があります。指定されたモジュールが見つからないことを示します。私の Windows 7 環境では、グローバル インストール中の npm モジュールの場所は「C:UsersAdministratorAppDataRoamingnpmnode_modules」です (上の図を参照)。環境変数の設定については、[コンピューター] -> [システムの詳細設定] -> [詳細] -> [環境変数] に移動し、NODE_PATH という名前の環境変数を追加し、その値をグローバル モジュールのルート ディレクトリに設定します。設定完了後、再度コマンドライン環境に入ることで有効になります。

NODE_PATH に複数のモジュール パスを追加する場合は、それらを「;」で区切るだけであることに注意してください。具体的な意味については、コマンドラインで「node -h」を実行してヘルプを表示してください。

HelloWorld

コードは次のように単純です:

// 引入 express 模块
var express = require('express');
// 创建 express 实例
var app = express();
// 响应HTTP的GET方法
app.get('/', function (req, res) {
 res.send('Hello World!');
});
// 监听到8000端口
app.listen(8000, function () {
 console.log('Hello World is listening at port 8000');
});
HelloExpress.jsとして保存し、Node.jsコマンドライン環境で「node HelloExpress.js」コマンドを実行すると、Webサイトが実行されます。 。ブラウザでアクセスすると、最後の例と同じになります。

Expressを使用する場合の違いは何ですか

Expressを使用しないコードは紫色です:

// 引入http模块
var http = require("http"); 
// 创建server,指定处理客户端请求的函数
http.createServer(
  function(request, response) { 
    response.writeHead(200, {"Content-Type": "text/plain"}); 
    response.write("Hello World!"); 
    response.end(); 
  }
).listen(8000); 
console.log("Hello World is listening at port 8000");
上記のコードは、Node.jsのhttpモジュールを直接使用してHTTPサーバーを作成し、リクエストを処理します。実際のアプリケーションでは、この関数内の GET、HEAD、POST などのさまざまな HTTP リクエストを区別する必要があります。 HelloWorld の Express バージョンは、パスおよび HTTP リクエストごとに応答関数を指定できます。たとえば、HelloWorld インスタンスの Express バージョンは、ブラウザに「http://localhost:8000」と入力した場合にのみ応答します。 「HelloWorld」にアクセスする場合、ブラウザに「http://localhost:8000/abc」と入力すると、

エラー メッセージが表示されます (404ステータス コードを受け取ります。Express が自動的に処理します)。 。ここには URL ルーティングの概念があります。コードを次のように変更すると、

app.get('*', function (req, res) {
 res.send('Hello World!');
});
効果は http モジュールを使用したバージョンと同様になります。 「*」をワイルドカードとして使用したため、任意のパスに一致します。 Express の get メソッドのプロトタイプは次のとおりです:

app.METHOD(path, callback [, callback …])
詳細については、こちらを参照してください: http://expressjs.com/4x/api.html#app.METHOD。

express を使用して HelloExpress を作成する

express模块有一个命令行工具express,可以用来生成基于express模块的应用结构(网站结构)。

express 4.x之后,express命令被独立出来放在了express-generator模块中。我们用下面的命令全局安装express这个命令行工具:

npm install -g express-generator

安装完成后,在命令行环境下执行“express -V”,可以看到express的版本是4.13.1。

好了,现在我们使用express命令来创建一个默认的网站。

在命令行环境下导航到myprojects这个目录下,执行下面的命令:

express HelloExpress

然后可以看到:

仔细看上面的图哦,它告诉了我们三类非常重要的信息:

  1. express命令创建的网站的目录结构以及创建的文件

  2. 安装依赖(进入到HelloExpress下,执行npm install)

  3. 使用npm start启动网站(express 4.x后)

好啦,我们先安装依赖。这里要先提一下HelloExpress目录下的package.json文件,其内容如下:

{
 "name": "HelloExpress",
 "version": "0.0.0",
 "private": true,
 "scripts": {
  "start": "node ./bin/www"
 },
 "dependencies": {
  "body-parser": "~1.13.2",
  "cookie-parser": "~1.3.5",
  "debug": "~2.2.0",
  "express": "~4.13.1",
  "jade": "~1.11.0",
  "morgan": "~1.6.1",
  "serve-favicon": "~2.3.0"
 }
}

这个文件定义了一个Node.js应用的基本信息,我们这次注意的是 dependencies ,它定义了应用依赖的模块。

在HelloExpress下执行“npm install”命令,npm会自动找到package.json,分析它,安装所有依赖模块。这要花费一些时间,休息一下,去喝杯茶。

看看,下面是安装结果:

G:\nodejs\myprojects\HelloExpress>npm install
debug@2.2.0 node_modules\debug
└── ms@0.7.1
cookie-parser@1.3.5 node_modules\cookie-parser
├── cookie-signature@1.0.6
└── cookie@0.1.3
serve-favicon@2.3.0 node_modules\serve-favicon
├── fresh@0.3.0
├── etag@1.7.0
├── parseurl@1.3.0
└── ms@0.7.1
morgan@1.6.1 node_modules\morgan
├── basic-auth@1.0.3
├── on-headers@1.0.0
├── depd@1.0.1
└── on-finished@2.3.0 (ee-first@1.1.1)
body-parser@1.13.3 node_modules\body-parser
├── content-type@1.0.1
├── bytes@2.1.0
├── depd@1.0.1
├── on-finished@2.3.0 (ee-first@1.1.1)
├── qs@4.0.0
├── iconv-lite@0.4.11
├── http-errors@1.3.1 (inherits@2.0.1, statuses@1.2.1)
├── raw-body@2.1.2 (unpipe@1.0.0)
└── type-is@1.6.6 (media-typer@0.3.0, mime-types@2.1.4)
express@4.13.3 node_modules\express
├── escape-html@1.0.2
├── merge-descriptors@1.0.0
├── array-flatten@1.1.1
├── cookie@0.1.3
├── cookie-signature@1.0.6
├── methods@1.1.1
├── utils-merge@1.0.0
├── range-parser@1.0.2
├── fresh@0.3.0
├── path-to-regexp@0.1.7
├── vary@1.0.1
├── content-type@1.0.1
├── etag@1.7.0
├── parseurl@1.3.0
├── content-disposition@0.5.0
├── serve-static@1.10.0
├── depd@1.0.1
├── qs@4.0.0
├── finalhandler@0.4.0 (unpipe@1.0.0)
├── on-finished@2.3.0 (ee-first@1.1.1)
├── send@0.13.0 (destroy@1.0.3, statuses@1.2.1, ms@0.7.1, mime@1.3.4, http-er
rors@1.3.1)
├── accepts@1.2.12 (negotiator@0.5.3, mime-types@2.1.4)
├── type-is@1.6.6 (media-typer@0.3.0, mime-types@2.1.4)
└── proxy-addr@1.0.8 (forwarded@0.1.0, ipaddr.js@1.0.1)
jade@1.11.0 node_modules\jade
├── character-parser@1.2.1
├── void-elements@2.0.1
├── commander@2.6.0
├── constantinople@3.0.2 (acorn@2.1.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── clean-css@3.3.7 (commander@2.8.1, source-map@0.4.4)
├── uglify-js@2.4.24 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.
1.34, yargs@3.5.4)
├── with@4.0.3 (acorn@1.2.2, acorn-globals@1.0.5)
├── transformers@2.1.0 (css@1.0.8, uglify-js@2.2.5, promise@2.0.0)
└── jstransformer@0.0.2 (is-promise@2.0.0, promise@6.1.0)
G:\nodejs\myprojects\HelloExpress>

有兴趣的可以研究下各个依赖模块的信息,现在我们启动网站了。执行 npm start 命令,很快就可以看到下面的图:

看到上图,说明网站已正常运行。你可以在浏览器里访问http://localhost:3000,然后就可以看到这个页面:

OK,大功告成。

这个由express generator创建的HelloExpress和我们基于express手动写的HelloWorld又有一些不同,比如你在浏览器地址栏里输入http://localhost:3000/abc,就会看到一个默认的404页面,显示了具体的错误信息。而我们的HelloWorld,显示的则是“Cannot GET /abc”这个文本串。这就是模板的便利之处,有很多默认处理,可以为我们省很多麻烦。

Express版本的文件服务器

express是在Node.js的http的基础上实现的,相比http模块,封装更多更适用于web服务器场景的功能。之前我们在Node.js开发入门——HTTP文件服务器里使用http模块实现了一个简单的文件服务器。那个版本的文件服务器还有一个缺陷,就是没有根据文件名设置HTTP的Content-Type头部。如果我们使用express来实现文件服务器(用到了Request对象的sendFile方法),哈哈,就只有几行代码,还解决了Content-Type问题!

代码如下:

var express = require('express');
var app = express();
app.get('*', function(req, res){
  res.sendFile(req.path, {root: dirname+'/', dotfiles: 'deny'});
});
app.listen(3000);

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用node前端模板引擎Jade标签

怎样进行Vue拖拽组件开发

以上がNode.js Express のインストールと使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター