全端勇士之路 Node.js 基礎學習-Express EJS 撰寫篇

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
前面稍微介紹了 Template 後這邊就要來將 Express 加入 ejs，但是加入之前還是有一些起手式要先做一下

前言

前面稍微介紹了 Template 後這邊就要來將 Express 加入 ejs，但是加入之前還是有一些起手式要先做一下

起手式

首先要先來安裝 EJS 套件進入專案

1
npm install --save ejs

替 Express 加入 EJS

替專案加入 EJS 套件後，就要來修改一下 app.js 增加兩段內容

1
2
router.set('views', './views') // 可以看成設定 Express 一些設定的東西，那這段就是要設定 EJS 的資料夾位子在哪裡，簡單來講就是跟 Express 說我樣板放在哪裡
router.set('view engine', 'ejs') // 告訴 Express 要用哪一個引擎去 Run

所以這邊要建立一個 views 資料夾，並建立 index.ejs

Image

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 name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>Hellow!EJS!</p>
</body>
</html>

接下來還要修改一個地方，我們要將樣板回傳給使用者，所以要使用一個語法 res.render()

1
2
3
4
5
router.get('/',login ,function(req, res) {
  // req → request
  // res → response
  res.render('index'); // 使用了 render，這樣就會去抓 views 資料夾下的 index 檔案，可以看成我設定哪一個檔案
})

寫完後就可以來輸入 node app.js 來看結果哩~

node app.js

Express 參數傳入 EJS

那透過後端整理之後傳送資料給 EJS 呢?那麼就這樣寫

1
2
3
4
5
6
7
8
router.get('/',login ,function(req, res) {
  // req → request
  // res → response
  res.render('index',{
    title: '這是一段話',
    sayhi: 'HelloWorld Ray'
  });
})

然後再回到 index.ejs 上面這樣寫

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

  <%= title %>
  <%= sayhi %>
</body>
</html>

裡面 <%= 等於的意思是要將這裡面的資料變成字串的意思，最後再輸入 node app.js

node app.js

如果傳入的不希望是字串而是 HTML 的話，那就要寫 <%- title %>，那如果要在裡面寫判斷或迴圈呢?那就要這樣子撰寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>Hellow!EJS!</p>

  <%- title %>
  <% if(sayhi) { %>
    Hi
  <% } %>

  <% for (var i=0; i< 10; i++>) {%>
      <span><%- i %></span>
  <% } %>
</body>
</html>

EJS Layout

前面有講到我們使用 EJS 的原因，也就是擁有 Layout，可以統一的管理 header 及 footer

首先先建立兩個檔案分別叫 header.ejs、footer.ejs

header.ejs 內容

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

footer.ejs 內容

1
2
</body>
</html>

接下來開啟 index.ejs 將裡面內容刪除，改成以下

1
2
3
4
5
6
<%- include('header') %>
  <p>Hellow!EJS!</p>

  <%= title %>
  <%= sayhi %>
<%- include('footer') %>

這樣就成功哩~

Image

補充

我個人推薦使用 ejs-locals 套件而不是使用 ejs 就是了，因為部分功能 ejs 就沒有支援，例如 layout()

如果使用 ejs-locals 的話就要做引入的動作，所以 app.js 就要改成這樣

1
2
3
4
var engine = require('ejs-locals');
router.engine('ejs', engine);
router.set('views', './views');
router.set('view engine', 'ejs');