nodejs express ejs 安裝-前端問答-PHP中文網

nodejs express ejs 安裝

WBOY

發布： 2023-05-11 18:35:07

原創

695 人瀏覽過

Node.js 是一個流行的 JavaScript 運行環境，可以讓開發者使用 JavaScript 語言開發高效能的後端應用程式。 Node.js 自帶了一個簡單、靈活的 web 應用程式框架 Express.js，同時也提供了一個強大的模板引擎 EJS，可以幫助開發者創建出美觀、易於維護的 web 應用程式。

在本文中，我們將討論如何安裝 Node.js、Express.js 和 EJS，並了解如何將它們組合使用來建立一個簡單的 web 應用程式。

安裝 Node.js

在開始之前，請確保您的電腦已經安裝了 Node.js 運行環境。如果您尚未安裝它，請按照以下步驟進行安裝：

開啟[Node.js 官網](https://nodejs.org/)，點擊「下載」按鈕，選擇適合您操作系統的版本進行下載。
下載完成後，雙擊安裝套件進行安裝。請按照安裝精靈的步驟進行操作即可。
安裝完成後，開啟終端機（或命令列視窗），輸入以下指令檢查Node.js 是否正確安裝：
```
node -v
```
登入後複製
如果Node.js 安裝成功，將會顯示出Node.js 的版本資訊。

安裝Express.js

安裝完Node.js 後，就可以使用npm 指令（Node.js 自帶的套件管理器）來安裝Express.js 。請參考以下步驟進行安裝：

開啟終端機（或命令列視窗），輸入以下命令：
```
npm init
```
登入後複製
這個指令將會引導您建立一個新的Node .js 專案。依照提示一步一步進行輸入。
初始化完成後，輸入以下指令來安裝Express.js：
```
npm install express --save
```
登入後複製
這個指令將會從npm 倉庫安裝最新版本的Express.js，並將其作為依賴關係添加到您的專案中。
安裝成功後，在專案的根目錄下，建立一個名為 app.js 的新檔案。這是您的 Express.js 應用程式的主要入口點。
在app.js 檔案中，輸入以下程式碼來建立一個簡單的Express.js 應用程式：
```
const express = require('express');
const app = express();

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

app.listen(3000, () => {
  console.log('Server listening on port 3000!');
});
```
登入後複製
這個應用程式將會回應來自用戶端瀏覽器的所有HTTP GET 請求，並傳回一個包含「Hello World!」的字串。
儲存app.js 檔案後，切換到終端機（或命令列視窗），將工作目錄切換到app.js 文件所在的目錄，並執行以下命令：
```
node app.js
```
登入後複製
登入後複製
如果一切正常，您應該可以看到終端輸出「Server listening on port 3000!」的資訊。這表示您的 Express.js 應用程式正在運行，並可以透過造訪 http://localhost:3000/ 來存取它。

安裝 EJS

EJS 是一個簡單、易用的範本引擎，可以幫助您在 Express.js 應用程式中建立具有動態內容的網頁。請依照下列步驟進行安裝：

開啟終端機（或命令列視窗），輸入下列指令：
```
npm install ejs --save
```
登入後複製
這個指令將會從npm 倉庫安裝最新版本的EJS，並將其作為依賴關係添加到您的專案中。
在應用程式的根目錄下，建立一個名為 views 的新資料夾。這將是您的 Express.js 應用程式用來存放 EJS 範本檔案的地方。
在 views 資料夾中，建立一個名為 index.ejs 的新檔案。這將是您的網頁的主要範本文件。
在index.ejs 檔案中，輸入以下程式碼來建立一個簡單的網頁：
```
<!DOCTYPE html>
<html>
<head>
  <title>EJS Example</title>
</head>
<body>
  <h1>Welcome to the EJS Example!</h1>
  <p>The current date and time is <%= new Date().toString() %>.</p>
</body>
</html>
```
登入後複製
這個範本將會顯示一個標題，「Welcome to the EJS Example!”，以及一個包含當前日期和時間的段落。
回到app.js 檔案中，在頭部加入以下程式碼來告訴Express.js 應用程式在哪裡可以找到EJS 範本檔案：
```
app.set('views', './views');
app.set('view engine', 'ejs');
```
登入後複製
在app.js 檔案中，用以下程式碼取代app.get 方法：
```
app.get('/', (req, res) => {
  res.render('index');
});
```
登入後複製
這個方法會透過EJS模板引擎來呈現views/index.ejs 文件，並將其發送回客戶端瀏覽器。
儲存app.js 和index.ejs 檔案後，切換到終端機（或命令列視窗），將工作目錄切換到app.js 檔案所在的目錄，並執行以下命令：
```
node app.js
```
登入後複製
登入後複製
如果一切正常，您應該可以看到終端輸出「Server listening on port 3000!」的資訊。這表示您的 Express.js 應用程式正在運行，並可以透過造訪 http://localhost:3000/ 來存取它。

點擊鏈接，您應該可以看到一個包含當前日期和時間的網頁。