0%

Node.js - EJS 介紹與起手式

node

EJS 簡介

EJS 是一個簡易的模板語法,又有高校的嵌入式 JavaScript 模板引擎,有點類似 ES6 的模板語法,只是這個是使用 ejs 的檔案格式中去撰寫 HTML 標籤,並且把一些迴圈的語法寫在模板上。

範例寫法

1
2
3
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>

如上方片段範例程式碼所示,在雙角括號會使用 % 作為模板,並且寫入 JavaScript 的判斷以及變數將資料渲染在模板上,有點類似 PHP 的語法。另外還有一個也是很多人用的模板語法 pug,本系列練習會以 EJS 為主,因比較貼近 HTML 的寫法。

安裝 EJS

輸入以下指令安裝 EJS:

1
npm install -D ejs

安裝完後會看到 package.json 安裝好此套件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "nodejs",
"version": "1.0.0",
"description": "node practice",
"main": "firebase.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"app": "node app.js"
},
"keywords": [],
"author": "hsuchihting",
"license": "MIT",
"dependencies": {
"express": "^4.18.1"
},
"devDependencies": {
"ejs": "^3.1.8", // 安裝完成
}
}

引入 EJS 核心

在 app.js 載入 EJS 核心以及設定要讀取 EJS 的資料夾位置,以及告訴 express 要用 EJS 引擎跑模板。

app.js

1
2
3
4
5
6
7
// EJS 核心
const engine = require("ejs-locals");
app.engine("ejs", engine);
// 讀取 EJS 檔案位置
app.set("views", "./views");
// 用 EJS 引擎跑模板
app.set("view engine", "ejs");

完成核心程式碼後,就在 /views 資料夾下新建一個 ejs 檔案,需要注意的地方是附檔名一定要打 ejs。

然後內容可以像在打 HTML 一樣建立頁面,程式碼如下。

index.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

res.render() 渲染 ejs 檔案

先前練習都是透過 res.send() 去渲染畫面,

app.js

1
2
3
app.get("/", (req, res) => {
res.send("<h1>這是主標題</h1>");
});

但透過 ejs 引擎選染,則是透過 render()index.ejs 檔案渲染出來,如下方程式碼,

app.js

1
2
3
app.get("/", (req, res) => {
res.render("index");
});

ejs-locals 安裝

此時輸入 node app.js 啟動專案會發現終端機一堆錯誤訊息,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
PS C:\Users\2206670\Desktop\side project\nodejs> node app.js
internal/modules/cjs/loader.js:883
throw err;
^

Error: Cannot find module 'ejs-locals'
Require stack:
- C:\Users\2206670\Desktop\side project\nodejs\app.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\2206670\Desktop\side project\nodejs\app.js:4:16)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ 'C:\\Users\\2206670\\Desktop\\side project\\nodejs\\app.js' ]
}

會提示說少了 ejs-locals 的套件,所以要在安裝此套件,

1
npm install -D ejs-locals

完成後在 index.ejs 輸入一串 p 標籤,

index.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>this is index.ejs file</p>
</body>
</html>

重新啟動專案 node app.js,輸入網址 localhost:3000 就會看到輸入的文字渲染在畫面上囉!

ejs render