Nodejsで複数のページジャンプを実装する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Nodejsで複数のページジャンプを実装する方法

PHPz

Apr 26, 2023 am 09:14 AM

近年、Node.js は、その効率的なパフォーマンス、豊富な機能、強力なエコシステムにより、フロントエンド開発者にとって強力なツールとなっています。 Node.js は、サーバー側の実行環境として、複雑な Web アプリケーションの実装に使用でき、複数ページのジャンプを実装する場合にも理想的な選択肢です。

この記事では、Node.js を使用して、リクエストの転送、ページのレンダリング、ルーティング管理など、複数ページのジャンプを実現する方法を詳しく説明します。

1. リクエストの転送

フロントエンドとバックエンドの分離の時代では、分離の目的を達成するために、通常、フロントエンドのコードとバックエンドのコードを別々に開発します。この場合、通常、フロントエンドコードは別のフォルダーに保存され、バックエンドコードは複数のファイルに分散されます。これには、処理のためにフロントエンド要求をバックエンドに転送する必要があります。

Node.js は、http や fs などのコアモジュールを通じて強力な Web アプリケーション開発機能を提供します。必要なのは、Node.js のバックエンドアプリケーションで HTTP リクエストを監視し、リクエストを対応する処理ロジックに転送することだけです。。ちょうどそれを打ちます。このようにして、リクエストをフロントエンドとバックエンドの間で内部的に転送できるため、フロントエンドコードがバックエンド API を呼び出してマルチページジャンプの効果を実現できるようになります。

Node.js でフロントエンドリクエストを転送する簡単な例を見てみましょう:

const http = require('http');

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  
  // 处理请求
  if (req.url === '/login') {
    // 获取参数
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const { username, password } = JSON.parse(body);
      // 处理登录逻辑
      if (username === 'admin' && password === '123456') {
        // 登录成功
        res.end(JSON.stringify({ code: 200, message: '登录成功' }));
      } else {
        // 登录失败
        res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
      }
    });
  } else {
    // 处理其他请求
    res.end('Hello World!');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

ログイン後にコピー

この例では、http モジュールの createServer メソッドを通じて HTTP サーバーインスタンスを作成します。、ポート 3000 でリッスンします。リクエストを処理する際に、リクエストされた URL が /login であるかどうかを判断し、そうである場合はログインロジックが処理され、そうでない場合は「Hello World!」が出力されます。

2. ページのレンダリング

通常、Web アプリケーションには多くのページがあり、開発効率を向上させるために、通常はテンプレートエンジンを使用してページをレンダリングします。 Node.js は、ejs、jade、ハンドルバーなどの多数のテンプレートエンジンを提供します。ejs を例として、ページのレンダリング方法を紹介します。

ejs は、HTML コードを迅速に生成できるシンプルなテンプレートエンジンです。 ejs を使用すると、HTML ページとデータソースを記述するだけで、ページをすばやくレンダリングできます。

まず、単純な HTML ページを定義し、 ejs のテンプレート構文を使用する次のコードを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <p><%= content %></p>
  </body>
</html>

ログイン後にコピー

このページでは、 ejs のテンプレート構文を使用します。たとえば、ページをレンダリングできるように、データソース内の変数を出力するには <%= %> を使用します。

ejs を使用してページをレンダリングする完全な例を以下で見てみましょう:

const http = require('http');
const fs = require('fs');
const ejs = require('ejs');

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  // 渲染页面
  if (req.url === '/') {
    fs.readFile('./template/index.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '首页', content: '欢迎访问首页' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else if (req.url === '/about') {
    fs.readFile('./template/about.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '关于我们', content: '我们是一家IT公司' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else {
    res.end('页面不存在');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

ログイン後にコピー

この例では、fs モジュールを通じて 2 つの ejs テンプレートファイルを読み取り、ejs を使用します。メソッドは、データソースからページにコンテンツをレンダリングします。最後に、レンダリングされた HTML コードをブラウザに出力します。

3. ルーティング管理

実際の開発では、対応するページをすぐに見つけられるように、複数のページのルーティングを管理する必要があります。 Node.js は、ルーティング管理をより便利かつ迅速に実装するのに役立つ Express などの Web フレームワークを提供します。

Express フレームワークを例として、ルーティング管理の実装方法を見てみましょう。

まず、Express モジュールをインストールする必要があります:

  npm install express --save

ログイン後にコピー

次に、Express を使用してルート管理を実装する方法を見てみましょう:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.get('/about', (req, res) => {
  res.send('About Us!');
});

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

ログイン後にコピー

この例では、最初に次のものを使用します。 require() 関数は Express モジュールを導入し、express() 関数を呼び出して新しい Express インスタンスを作成します。

次に、app.get() メソッドを使用して、各ルートに対応する処理メソッドを定義します。たとえば、ユーザーが「/」をリクエストすると、ブラウザに「Hello World!」を返します。ユーザーが「/about」をリクエストすると、ブラウザに「About Us!」を返します。

最後に、app.listen() メソッドを使用して、サービスがリッスンするポートを指定します。この例では、リスニングポート番号を 3000 に設定します。

4. マルチページジャンプの練習

Node.js がリクエスト転送、ページレンダリング、ルーティング管理をどのように実装するかをすでに理解しました。より深く理解するために、包括的な例を見てみましょう。複数ページのジャンプの実装の詳細。

この例は、主に 2 つの部分、つまりフロントエンドページとバックエンド Node.js コードに分かれています。

フロントエンドページでは、jQuery を使用してバックエンド Node.js API にリクエストを送信します。ユーザーが「ログイン」ボタンをクリックすると、ユーザーのアカウント名とパスワードがバックエンド API に送信され、API の応答結果に基づいてさまざまなジャンプ操作が行われます。

フロントエンドコードの主な実装プロセスは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>登录</title>
  </head>
  <body>
    <h1>登录</h1>
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button id="loginBtn">登录</button>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#loginBtn').click(function() {
        // 获取用户名和密码
        const username = $('input[name=username]').val();
        const password = $('input[name=password]').val();

        // 发送请求
        $.ajax({
          type: 'POST',
          url: 'http://localhost:3000/login',
          data: JSON.stringify({ username, password }),
          contentType: 'application/json',
          success: function(res) {
            if (res.code === 200) {
              // 登录成功，跳转到首页
              window.location.href = 'http://localhost:3000';
            } else {
              alert(res.message);
            }
          },
          error: function() {
            alert('请求出错');
          }
        });
      });
    });
  </script>
</html>

ログイン後にコピー

Node.js で、HTTP サーバーインスタンスを作成し、3000 ポートをリッスンしました。リクエストが検出されると、最初にリクエストのタイプを決定します。GET リクエストの場合は、ejs テンプレートエンジンを使用してページをレンダリングします。POST リクエストの場合は、ログインロジックを処理し、JSON 形式で応答結果を返します。たとえば、ユーザーが「admin」と「123456」を入力すると、{ code: 200, message: 'Login success' } が JSON 形式で返されます。ユーザーが別のアカウント名またはパスワードを入力すると、JSON 形式で { code: 400, message: 'ユーザー名またはパスワードが間違っています' } が返されます。

バックエンド Node.js コードの主な実装プロセスは次のとおりです:

const http = require('http');
const fs = require('fs');
const ejs = require('ejs');

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  // 渲染页面
  if (req.url === '/') {
    fs.readFile('./template/index.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '首页', content: '欢迎访问首页' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else if (req.url === '/login') {
    // 获取参数
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const { username, password } = JSON.parse(body);
      // 处理登录逻辑
      if (username === 'admin' && password === '123456') {
        // 登录成功
        res.end(JSON.stringify({ code: 200, message: '登录成功' }));
      } else {
        // 登录失败
        res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
      }
    });
  } else {
    res.end('页面不存在');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

ログイン後にコピー

通过以上代码，我们可以在前后端相分离的情况下，使用Node.js来实现多页面跳转的功能。本文只是对于nodejs多页面跳转的简单介绍，还有很多要学习和了解的地方，相信有了这篇文章的帮助，你在学习和实践中也会有所收获。

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

このウェブサイトの声明

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