ホームページ > 記事 > ウェブフロントエンド > Nodejs開発ページへジャンプ

Nodejs開発ページへジャンプ

PHPzオリジナル: 2023-05-25 11:31:11789ブラウズ

フロントエンドテクノロジの発展に伴い、ますます多くの Web サイトやアプリケーションがシングルページアプリケーション (SPA) アーキテクチャを採用し始めており、ページジャンプやデータの読み込みはフロントエンドフレームワークによって処理されます。ただし、一部の従来の Web サイトアプリケーションでは、ページジャンプをバックエンド経由で実装する必要があります。この記事ではNode.jsを使ってページジャンプを実装する方法を紹介します。

1. Node.js の予備調査

Node.js はサーバーサイドで動作する JavaScript 実行環境であり、Google V8 JavaScript エンジンをベースに構築されています。 Node.js の登場により、JavaScript はブラウザ側でのみ実行できるという束縛が打ち破られ、JavaScript がサーバー側で実行できるようになり、フルスタック開発において JavaScript が重要なプログラミング言語になりました。

Node.js の主な利点は次のとおりです。

シングルスレッドの非同期 I/O モデル: 同時実行性の高いネットワークアプリケーションに特に適しており、パフォーマンスを大幅に向上させることができます。
モジュール開発: Node.js には多数の組み込みモジュールがあり、require 関数を通じて導入した後に使用できます。モジュールを自分で記述することもできます。
軽量: ノード.js は、リアルタイムメッセージング、メッセージプッシュなどの軽量ネットワークアプリケーションの処理に非常に適しています。

したがって、Node.js は、一部の Web アプリケーションのバックエンドの開発に非常に適しています。

2. ページジャンプの実装

Node.js でページジャンプを実装するには、「http」と呼ばれる HTTP モジュールを使用する必要があります。これを使用して Web サーバーを作成し、クライアントのリクエストをリッスンし、対応するコンテンツを返すことができます。以下は、Node.js に基づく簡単な Web サーバーコードの例です:

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World!');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

上記のコードは、HTTP サーバーを作成し、ポート 3000 をリッスンし、http://localhost にアクセスすると「Hello World!」を返します。 3000/。」次に、サーバー側でページジャンプを実装する必要があります。

1. リダイレクトジャンプ

HTTP プロトコルでは、サーバーは「リダイレクト」と呼ばれる特別な応答ヘッダーを送信して、別の URL にジャンプする必要があることをクライアントに伝えることができます。 Node.js 応答オブジェクトのリダイレクトメソッドを使用して、リダイレクトを実装できます。サンプルコードは次のとおりです。

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/') {
    res.statusCode = 302;
    res.setHeader('Location', '/login');
    res.end();
  } else if (req.url === '/login') {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html');
    res.end('<html><body><h1>Login Page</h1></body></html>');
  } else {
    res.statusCode = 404;
    res.end('Not Found');
  }
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

上記のコードでは、ルートパス「/」をリクエストするときに、応答ステータスコードを 302 に設定し、リダイレクトが必要であることを示します。次に、応答ヘッダーの Location フィールドを「/login」に設定します。応答を受信した後、クライアントは自動的に「/login」ページにジャンプします。「/login」がリクエストされると、「ログインページ」のレンダリングに使用される HTML コードが返されます。応答ヘッダーを設定するときに、データを文字列に変換する必要がある場合は、JSON.stringify() メソッドを使用できることに注意してください。

2. フォーム送信ジャンプ

フォーム送信は一般的なページジャンプ方法であり、ユーザーが入力したデータを処理のためにサーバーに送信できます。フォームの送信は、HTTP の POST メソッドまたは GET メソッドを使用して実行できます。 Node.js では、クライアントの POST または GET リクエストを監視し、リクエストの内容に基づいて対応する論理処理を実行することもできます。サンプルコードは次のとおりです。

const http = require('http');
const url = require('url');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/login') {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html');
    res.end(`
      <html>
        <body>
          <h1>Login</h1>
          <form method="post" action="/login">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <br>
            <button type="submit">Login</button>
          </form>
        </body>
      </html>
    `);
  } else if (req.method === 'POST' && req.url === '/login') {
    let body = '';

    req.on('data', chunk => {
      body += chunk;
    });

    req.on('end', () => {
      const {username, password} = querystring.parse(body);
      res.setHeader('Content-Type', 'text/html');
      if (username === 'admin' && password === '123456') {
        res.statusCode = 302;
        res.setHeader('Location', '/home');
        res.end();
      } else {
        res.statusCode = 401;
        res.end(`
          <html>
            <body>
              <h1>Invalid Credentials</h1>
            </body>
          </html>
        `);
      }
    });
  } else if (req.method === 'GET' && req.url === '/home') {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html');
    res.end(`
      <html>
        <body>
          <h1>Welcome to Home</h1>
        </body>
      </html>
    `);
  } else {
    res.statusCode = 404;
    res.end('Not Found');
  }
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

上記のコードでは、リクエストパスが「/login」でリクエストメソッドが GET の場合、ユーザーがユーザー名とパスワードを入力するためのログインフォームページを返します。ログインします。ユーザーがログインボタンをクリックしてフォームを送信すると、フォームは POST モードでサーバーに送信されます。Node.js のネイティブモジュールのクエリ文字列を使用して、POST リクエストのリクエスト本文を解析し、入力されたユーザー名とパスワードが正しいかどうかを判断します。ユーザーが正しいです。正しい場合はリダイレクト応答が返され、ブラウザは自動的に「/home」ページにジャンプしますが、そうでない場合は、不正アクセスを示す 401 ステータスコードが返されます。

3. 概要

この記事では、Node.js を使用して、リダイレクトジャンプやフォーム送信ジャンプなどのページジャンプを実装する方法を紹介します。 Node.js は、軽量、高い同時実行性、モジュール開発という利点を持ち、Web アプリケーションのバックエンド開発に非常に適しており、近年非常に注目され、愛用されている技術の 1 つです。この記事の知識ポイントを学習することで、Node.js をベースにしたページジャンプの方法を習得できたと思います。皆さんの楽しい勉強を祈っています！

以上がNodejs開発ページへジャンプの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript node.js 架构 json html 前端框架 require 字符串栈线程并发 JS 对象异步 location http

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vueサーバーを開けません次の記事：Vueサーバーを開けません

続きを見る