ページへのジャンプと前のページへ戻る機能をnodejsで実装する方法-フロントエンドQ&A-php.cn

ページへのジャンプと前のページへ戻る機能をnodejsで実装する方法

PHPz

リリース： 2023-04-06 10:41:37

オリジナル

957 人が閲覧しました

Web 開発では、ページジャンプは非常に一般的な操作であり、ページジャンプの問題は Node.js Web アプリケーションにも関係します。この記事では、Node.jsでページにジャンプしたり、前のページに戻る機能を実装する方法を紹介します。

ページジャンプとは何ですか?

ページジャンプとは、ユーザーが Web アプリケーション内のあるページから別のページに移動するプロセスを指します。ページジャンプは非常に一般的な操作であり、ほとんどの Web アプリケーションは異なるページ間をジャンプする必要があります。

一般的なページジャンプ方法は 2 つあります。

クライアント側ジャンプ: クライアント側ジャンプとは、ブラウザでのページジャンプを指します。このメソッドを実装するには、ページ内で JavaScript を使用する必要があります。通常は window.location オブジェクトを変更します。
サーバー側ジャンプ: サーバー側ジャンプとは、サーバー側でのページジャンプを指します。このメソッドの実装にはサーバー側での応答処理が必要であり、ページジャンプはクライアントにリダイレクト応答を送信することで実装されます。

Node.js でのページジャンプ

Node.js は、開発者が効率的な Web アプリケーションを構築するのに役立つ、非常に人気のある JavaScript ランタイム環境です。 Node.js では、ページジャンプを実装するには 2 つの方法があります:

クライアント側ジャンプを使用する: Node.js では、Express.js などのいくつかの Web 開発フレームワークを使用して実装できます。クライアントのジャンプ。クライアント側のリダイレクトは通常、バックエンドコードでリダイレクト URL を指定することによって実装されます。
サーバー側ジャンプを使用する: サーバー側ジャンプも Node.js では非常に一般的です。 Node.js では、http モジュールと https モジュールを使用してサーバー側ジャンプを実装できます。サーバー側のジャンプは通常、3xx ステータスコードと Location ヘッダー情報を送信することによって実装されます。

Node.js で前のページに戻るジャンプを実装する方法

Web 開発では、前のページに戻るジャンプ関数を実装する必要がある場合があります。たとえば、ユーザーが間違ったログイン情報を入力した後、ユーザーが入力した情報を保持したまま、ユーザーをログインページにリダイレクトする必要があります。

Node.js では、前のページに戻るジャンプ関数を実装する方法は 2 つあります。

クライアントジャンプを使用する: クライアントジャンプを使用する方が実装が簡単です。。ページのリダイレクトされた URL に、ユーザーが入力したログイン情報などのパラメーター情報を追加し、JavaScript を使用して次のページでこれらのパラメーター情報を取得し、対応する入力ボックスにロードできます。この方法は実装が比較的簡単ですが、データのセキュリティに注意する必要があります。
サーバー側ジャンプを使用する: サーバー側ジャンプを使用するのがより安全な方法です。ユーザーが入力したログイン情報をサーバー側に保存し、サーバー側のジャンプを使用してユーザーをログインページにリダイレクトできます。ユーザーがログインページに戻ると、サーバーは以前に保存されたユーザーログイン情報に基づいて、対応する入力ボックスに自動的に入力します。

次は、サーバー側ジャンプを使用して前のページに戻るサンプルコードです。

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/login') {
    // 处理用户登录请求
    // 保存用户输入的登录信息
    const username = req.query.username;
    const password = req.query.password;
    // 重定向到首页
    res.writeHead(302, {'Location': '/'});
    res.end();
  } else {
    // 处理首页请求
    // 返回登录页面，并填充之前保存的用户登录信息
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(`<html><body><form action="/login" method="POST">
      <label for="username">Username:</label>
      <input type="text" name="username" value="${username || &#39;&#39;}">
      <br>
      <label for="password">Password:</label>
      <input type="password" name="password" value="${password || &#39;&#39;}">
      <br>
      <input type="submit" value="Submit">
      </form></body></html>`);
    res.end();
  }
});

server.listen(3000, () => console.log('Server is running on port 3000'));

ログイン後にコピー

上記のサンプルコードでは、ユーザーがログインページにアクセスすると、サーバーはログインフォームを含むページを返します。ユーザーがログイン情報を入力してフォームを送信すると、サーバーはユーザーが入力したログイン情報を保存し、ホームページにリダイレクトします。ユーザーがホームページにアクセスすると、サーバーはログインフォームを含むページを返し、以前に保存したユーザーのログイン情報を自動的に入力します。