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

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

PHPz

リリース： 2023-04-06 09:37:38

オリジナル

1015 人が閲覧しました

フロントエンド開発の急速な発展により、最新の Web アプリケーションはシングルページアプリケーション (SPA) ではなくなりました。その代わり、多くのページやコンポーネントが含まれ、より複雑になります。このような Web アプリケーションをサポートするには、複数のページのナビゲーションと応答性をサポートできる、柔軟で強力な Web フレームワークが必要です。 Node.js は、Express.js、Koa.js など、このための優れたフレームワークを多数提供しています。この記事では、Node.js フレームワークを使用して複数ページジャンプ機能を実装する方法を学びます。

新しい Node.js プロジェクトの作成

まず、新しい Node.js プロジェクトを作成する必要があります。すでに既存のプロジェクトがある場合は、この手順をスキップできます。コマンドラインで、次のコマンドを入力します。

mkdir myproject
cd myproject
npm init

ログイン後にコピー

このコマンドを実行すると、プロジェクト名、バージョン番号、説明、その他の情報の入力を求める一連のプロンプトが表示されます。完了すると、プロジェクト情報を保存するファイルである package.json ファイルを取得します。 package.json ファイルには、インストールしたすべての依存関係が表示されます。

Express.js のインストール

前述したように、Express.js は一般的に使用される Node.js Web アプリケーションフレームワークであり、Web アプリケーションを迅速かつ柔軟に作成する方法を提供します。。 Express.jsを使用して複数ページジャンプ機能を実装します。 Express.js のインストールは簡単です。次のコマンドを入力するだけです。

npm install express --save

ログイン後にコピー

このコマンドは Express.js をインストールし、プロジェクトの依存関係に追加します。

ページの作成

次に、複数ページのジャンプ機能をテストするための簡単なページを作成する必要があります。プロジェクトのルートディレクトリに、「index.html」というファイルを作成し、次の内容を追加します。

<!DOCTYPE html>
<html>
<head>
    <title>Express.js Multiple Pages</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to my Express.js app.</p>
</body>
</html>

ログイン後にコピー

これは、タイトルとテキストのみが含まれる非常に単純なページです。このページは次の手順で使用します。

Express.js アプリケーションの作成

プロジェクトのルートディレクトリに、アプリケーションを記述する「app.js」というファイルを作成します。

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

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

ログイン後にコピー

次に、ビューエンジンを指定する必要があります。ビューエンジンは、サーバー側で HTML ページをレンダリングするのに役立ちます。ビューエンジンとして EJS (Embedded JavaScript) を使用します。 EJS を使用する前に、EJS をインストールする必要があることに注意してください。 EJS は、次のコマンドを使用してインストールできます。

npm install ejs --save

ログイン後にコピー

完了したら、app.js の先頭に次のコードを追加します。

app.set('view engine', 'ejs')

ログイン後にコピー

次に、Express.js アプリケーションに次の方法を指示する必要があります。スタイルテーブルやスクリプトなどの静的ファイルを処理します。これを行うには、Express.js の組み込みミドルウェアを使用します。 app.js ファイルの先頭に次のコードを追加します。

app.use(express.static('public'))

ログイン後にコピー

このコードは、パブリックフォルダーを静的リソースフォルダーとして扱うように Express.js に指示します。そこに保存されているすべてのファイルは、HTTP サーバー経由でアクセスできます。

次に、最初のルートを作成する必要があります。ルーティングによって、特定の URL にアクセスしたときに何が起こるかが決まります。ユーザーがルート URL にアクセスしたときに、サーバー側でindex.html ページをレンダリングするルートを作成します。

次のコードを app.js に追加します。

app.get('/', (req, res) => {
  res.render('index')
})

ログイン後にコピー

このコードは、ユーザーがアクセスしたときにサーバー側で名前「index」をレンダリングする GET ルートを作成するように Express.js に指示します。ルート URL を表示します。

ページを追加

これで、最初のページと最初のルートが完了しました。次に、ページとルートを追加します。

アプリケーションに関する情報を含む「about.html」というファイルを作成します。次のコードを追加します:

<!DOCTYPE html>
<html>
<head>
    <title>About</title>
</head>
<body>
    <h1>About Us</h1>
    <p>We are a team of Node.js developers.</p>
</body>
</html>

ログイン後にコピー

次に、app.js に次のコードを追加します:

app.get('/about', (req, res) => {
  res.render('about')
})

ログイン後にコピー

このコードは、ユーザーが「/about」にアクセスしたときに GET ルートを作成するように Express.js に指示します。 URL 、サーバー側で「about」という名前のビューをレンダリングします。

さらにページを追加することもできます。各ページの HTML ファイルを作成し、各ページのルートを作成するだけです。

他のページへのリンク

複数のページとルートを作成したので、ユーザーが他のページに移動できるようにリンクを追加する必要があります。 Index.html で、テキストの前に次のコードを追加します。

<a href="/about">About Us</a>

ログイン後にコピー

このリンクにより、ユーザーは About Us ページに移動します。さらにページを追加し続けます。

これで複数ページジャンプ機能が実装されました。ユーザーがリンクをクリックすると、別のページに移動し、アプリケーションは HTML ページをサーバー側でレンダリングします。

概要

この記事では、Node.js フレームワーク (特に Express.js) を使用してマルチページジャンプ機能を実装する方法を学びました。複数のページとルートを作成し、ユーザーナビゲーションのためのリンクを提供しました。これは非常に基本的な実装ですが、複数ページのアプリケーションを迅速に構築するのに役立ちます。 Node.js フレームワークを使用して Web アプリケーションを開発する方法をより深く理解するには、このコードやその他のコードを試してください。

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