Node.js 怎麼實作多頁跳轉
- PHPz原創
- 2023-04-06 08:53:16971瀏覽
隨著前端開發的快速發展，現代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：
npm install ejs --save
完成後，在app.js的頂部添加以下程式碼：
app.set('view engine', 'ejs')
現在我們需要告訴Express.js應用程式如何處理靜態文件，例如樣式表和腳本。為此，我們將使用Express.js的內建中間件。在app.js檔案的頂部加入以下程式碼：
app.use(express.static('public'))
程式碼將告訴Express.js將public資料夾作為靜態資源資料夾。在其中儲存的所有檔案將可以透過HTTP伺服器存取。
現在我們需要建立我們的第一個路由。路由將決定當我們訪問特定URL時，將發生什麼。我們將建立一個路由，當使用者造訪根URL時，在伺服器端呈現我們的index.html頁面。
在app.js中加入以下程式碼：
app.get('/', (req, res) => {
res.render('index')
})
程式碼將告訴Express.js建立一個GET路由，當使用者存取根URL時，在伺服器端呈現名為"index"的視圖。
- 新增更多頁面
現在我們已經完成了我們的第一個頁面和第一個路由。接下來，我們將新增更多頁面和路由。
建立一個名為「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')
})
程式碼將告訴Express.js建立一個GET路由，當使用者存取「/about」URL時，在伺服器端呈現名為“about”的視圖。
我們還可以新增更多頁面，只需要為每個頁面建立一個HTML文件，並為每個頁面建立一個路由。
- 連結到其他頁面
現在我們已經建立了多個頁面和路由，我們需要新增連結以便使用者能夠導航到其他頁面。在index.html中，將以下程式碼新增至文字之前：
<a href="/about">About Us</a>
該連結將帶使用者到關於我們頁面。繼續新增其他頁面。
現在我們已經實作了多頁面跳轉功能。當使用者點擊連結時，他們將導航到另一個頁面，應用程式將在伺服器端呈現HTML頁面。
總結
在本文中，我們學習如何使用Node.js框架（特別是Express.js）實作多頁面跳躍功能。我們創建了多個頁面和路由，並為用戶導航提供了連結。這是一個非常基礎的實現，但它可以幫助你快速建立多頁面應用程式。嘗試使用此程式碼，以及其他程式碼，以幫助您更好地理解如何使用Node.js框架開發網路應用程式。
以上是Node.js 怎麼實作多頁跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！