[ Day 11]
說明:
前端頁面終究離不開頁面的呈現,當寫要做幾個簡單的頁面,呈現由後端取回的資料時,使用回傳res.send裡面寫html顯然是不科學的作法,使用模板來將資料和頁面模板分開是較為適當的作法(大部分已由框架取代)。
一、安裝與引入ejs
npm i ejs --save
建立views資料夾
由於ejs預設是在views資料夾底下找到對應的模板檔案,因此需要在專案底下建立views資料夾
並且在資料夾裡新增一個名為homepage.ejs的檔案
(或是也可以指定特定資料夾)
app.set('views', './views');
express 設定模板引擎,express支援的模板引擎有非常多種,需要指定我們的模板為ejs
app.set('view engine', 'ejs')
二、使用ejs模板,傳遞物件
先使用簡單的路徑操作
app.get('/', (req, res) => {
// res.send('Hello World!')
res.render('homePage',{
message: 'Hello World'
})
})
將原本的Hello world改為res.render方法,指定homePage這個模板檔案,第二個參數帶入的則是可在頁面中取得的物件。
homePage.ejs檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homePage</title>
</head>
<body>
<h1 style="color: greenyellow; font-size:20px"><%= message %></h1>
</body>
</html>
對於物件的拿取,使用<%= %> 這個符號決定,可直接取得傳過來的物件value值
index.js
var express = require('express');
const app = express()
const port = 3310
app.set('view engine', 'ejs')
app.use('/api/user', require('./expressUser'));
app.use('/api/product', require('./expressProduct'));
app.get('/', (req, res) => {
// res.send('Hello World!')
res.render('homePage',{
message: 'Hello World'
})
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
成功取得message物件,並且顯示
這是最基礎的顯示方式
三、for迴圈
<body>
<h1 style="color: greenyellow; font-size:20px"><%= message %></h1>
<br>
fibonacci sequence
<div>
<ul>
<% for(var i=0; i< countList.length; i++) { %>
<li><%= countList[i] %></li>
<% } %>
</ul>
</div>
<%-button%>
</body>
這裡使用的是 <% %> 與 <%- %>
<% %> 表示將角括號內的內容當作javascript來執行
<%- %> 則是將內容當作html dom元件執行
四、都2020,不要再用網頁模板了
ejs之於node js 就項jsp之於java ee,
使用他們來做簡單server render頁面是挺不錯的
但是現在的大型網站,大部分都是數據雙向綁定的,
並且網頁模板的方式在頁面轉導的很繁瑣,又不好做到模組化的頁面功能
所以都2020了,真要做頁面的話還是使用react, vue, angular之類的前端框架吧
[ Day 11結束]