Nodejs は Web サイトのリソースパスを構築します-フロントエンドQ&A-php.cn

Nodejs は Web サイトのリソースパスを構築します

WBOY

リリース： 2023-05-18 10:38:07

オリジナル

599 人が閲覧しました

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');
});

ログイン後にコピー

コードでは、<img src="images を渡します。 /myimage.jpg" alt="My Image"> 画像 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 サイトの他の関連記事を参照してください。