ホームページ > 記事 > ウェブフロントエンド > nodejs セットのホームページ
nodejs セットのホームページ
- 王林オリジナル
- 2023-05-17 09:49:36592ブラウズ
Node.js は、高性能ネットワーク アプリケーションおよびサーバーの構築に使用できるオープン ソースの JavaScript ランタイム環境です。 Web アプリケーションを開発する場合、ユーザーがサイトにアクセスしたときに最初に表示されるようにホームページを設定する必要があります。この記事では、Node.js を使用してホームページを設定する方法について説明します。
ステップ 1: 基本的な Node.js アプリケーションを作成する
まず、Node.js をコンピューターにインストールします (インストール方法については公式ドキュメントを参照してください)。
次に、新しいフォルダーを作成し、次のコマンドを入力します:
mkdir node-app cd node-app
次に、コマンド ライン コマンドを使用して、新しい Node.js アプリケーションを初期化します:
npm init
プロンプトに従いますアプリケーションの情報を取得すると、package.json ファイルが作成されます。このファイルには、アプリケーションに関する基本情報とすべての依存パッケージのリストが含まれています。
ステップ 2: 必要な依存関係パッケージをインストールする
Node.js には、選択できるサードパーティのモジュールとフレームワークが多数あり、そのうちの 1 つを使用してホームページを設定できます。 。
ここでは、例として Express フレームワークを使用して簡単なホームページをセットアップします。
次のコマンドを使用して、Express フレームワークをインストールします。
npm install express --save
--save オプションは、この依存関係パッケージを package.json ファイルの依存関係リストに追加します。
ステップ 3: 簡単なホームページを作成する
新しいフォルダーを作成し、その中にindex.html という名前のファイルを作成し、次の基本的な HTML コードを入力します。
<!DOCTYPE html>
<html>
<head>
<title>我的主页</title>
</head>
<body>
<h1>欢迎来到我的主页！</h1>
<p>这是我的个人主页，谢谢您的访问！</p>
</body>
</html>これを保存します。プロジェクト内のindex.htmlファイル。
ステップ 4: HTTP リクエストに応答するように Express アプリケーションを設定する
app.js ファイルを開いて次のコードを入力します:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
const server = app.listen(3000, () => {
console.log('应用程序已经启动并运行在 http://localhost:3000');
});このコードは Express フレームワークを使用します新しいアプリケーションを作成するには、静的ファイル ディレクトリをパブリック ディレクトリに設定し、ルート パスの HTTP リクエストに応答するルートを設定します。アプリケーションはルート パスの要求を受信すると、index.html ファイルで応答します。
最後に、コマンド ライン コマンドを使用してアプリケーションを実行します:
node app.js
次に、Web ブラウザを開いて http://localhost:3000 と入力します。すべてがうまくいけば、 が表示されます。ホームページ。
概要
この記事では、Node.js と Express フレームワークを使用して基本的なホームページを設定する方法を紹介します。この記事で提供されているチュートリアルを使用して、それを拡張して、よりリッチな Web アプリケーションを作成できます。 Node.js には、Web アプリケーションのパフォーマンスの向上に役立つ強力なツールがあります。 Node.js コミュニティと開発者コミュニティは非常に活発で、ドキュメントを読んだり、コミュニティに参加したりすることで、より多くのヘルプやリソースを得ることができます。
以上がnodejs セットのホームページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。