ホームページ > 記事 > ウェブフロントエンド > Node.js で複数のページ ジャンプを実装する方法
Node.js で複数のページ ジャンプを実装する方法
- PHPzオリジナル
- 2023-04-06 08:53:16970ブラウズ
フロントエンド開発の急速な発展により、最新の 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 サイトの他の関連記事を参照してください。