ホームページ > 記事 > ウェブフロントエンド > Nodejs は Web サイトのリソース パスを構築します
Nodejs は Web サイトのリソース パスを構築します
- WBOYオリジナル
- 2023-05-18 10:38:07625ブラウズ
Node.js は、効率的で安定した Web アプリケーションを迅速に構築するために使用できるバックエンド開発言語です。 Node.js では、Web サイトのリソース パスの構築は習得しなければならないスキルの 1 つです。この記事では、Node.js を使用して Web サイトのリソース パスを構築する方法を紹介します。
1. 基本的な HTTP サーバーを構築する
Node.js リソース パスの構築を開始する前に、まず基本的な HTTP サーバーを構築する必要があります。開発者は、Node.js の組み込みモジュール http を使用して、この HTTP サーバーを構築できます。コードは次のとおりです:
const http = require('http');
const server = http.createServer((req, res) => {
res.end('Hello World!');
});
server.listen(3000, () => {
console.log('Server is listening on port 3000');
});コードでは、http.createServer() を通じて HTTP サーバーを作成し、res を渡します.end( ) メソッドは、テキスト「Hello World!」をブラウザに返します。このうち、req はリクエストオブジェクト、res はレスポンスオブジェクトです。さらに、サーバーをこのポートで起動できるように、server.listen() メソッドを通じてポート 3000 もリッスンします。
HTTP サーバーが正常に構築されたかどうかを確認するには、コマンド ラインに node app.js と入力し (ファイルの名前が app.js であると仮定します)、次のように入力します。ブラウザ http://localhost:3000 では、ページに「Hello World!」が表示されることがわかります。
2. 静的リソース パスの構成
Web サイトを構築するとき、通常、画像、CSS、JavaScript などの多くの静的リソースが含まれます。これらのリソースのパスも構成する必要があります。 Node.js では、静的リソース パスは Express フレームワークを介して実装できます。コードは次のとおりです:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server is listening on port 3000');
});コードでは、まず Express フレームワークをインポートし、アプリを使用することを Express フレームワークに伝えます。 .use() メソッド。静的リソースはユーザーに提供する必要があります。このうち、public は静的リソースのフォルダー名で、静的リソースが格納されているローカルパスです。
もちろん、開発者は必要に応じてこのフォルダー名を変更でき、コード内の public を定義したフォルダー名に変更するだけです。この例では、静的リソースをパブリック フォルダーに保存します。
3. 静的リソース パスをテストする
静的リソース パスを設定した後、テスト用にいくつかのファイルをパブリック フォルダーに配置できます。たとえば、画像 myimage.jpg をパブリック フォルダーに配置し、それをコードで使用します。コードは次のようになります。
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', function(req, res) {
res.send(`
<html>
<head>
<title>Node.js Resource Path Test</title>
</head>
<body>
<h1>Welcome to the Node.js Resource Path Test</h1>
<img src="images/myimage.jpg" alt="My Image">
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is listening on port 3000');
}); コードでは、3525be7ebdfc8238b898bdc174b1fee9 画像 myimage.jpg を参照します。ここで注意する必要があるのは、静的リソース パスの処理に Express フレームワークを使用しているため、それを保持する必要があることです。コード内で画像を参照する場合の public フォルダーへのパス、つまり、画像を参照するには相対パス「images/myimage.jpg」を使用します。
画像が正常に参照されているかどうかを確認したい場合は、ブラウザで「http://localhost:3000/」にアクセスすると、画像「myimage.jpg」が表示されていることがわかります。ページ。
4. 結論
上記の手順により、静的リソース サービスを提供できる Node.js Web サイトを迅速に構築できます。同時に、このプロセスでは、Node.js の組み込み http モジュールを使用して基本的な HTTP サーバーを構築する方法と、Express フレームワークを使用して静的ファイル パスを構成する方法も学びました。最後に、静的リソース パスの構成手順もテストし、図を引用して構成が期待した効果を達成したかどうかを確認しました。
以上がNodejs は Web サイトのリソース パスを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。