提姆寫程式

0%

Node.js - EJS 介紹與起手式

發表於 分類於 Disqus：
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