全端勇士之路 Node.js 基礎學習-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');
0%