[Day-11] Node.js [使用Ejs建立server render頁面]

第 12 屆 iThome 鐵人賽

DAY 11

自我挑戰組

後端工程師自我練習，使用Node.js來做後端server系列第 11 篇

12th鐵人賽

jaime_chang

2020-09-24 16:41:13

4469 瀏覽

分享至

[ 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元件執行