Day18 NodeJS-Express III

2021 iThome 鐵人賽

DAY 18

自我挑戰組

學習NodeJS的30天系列第 18 篇

13th鐵人賽 node.js express template ejs

chwk

2021-10-03 23:07:44

1186 瀏覽

分享至

Express的學習從安裝、Route和Middleware的概念開始，今天要進入前端實務面的部份：Template(樣板)。

Template

樣板在前面NodeJS的部份也有說明過，簡而言之就是可以透過placeholder或一些語法動態變更內容的HTML頁面。在Express中要使用樣板需要透過樣板引擎(Template Engine)，就如同其他的NPM套件，適用於Express的樣板引擎也不少，例如：受歡迎的Jade、與.NET Webform的FormView語法相似的ejs、與.NET MVC的Razor語法相似的vash等，開發人員可以選擇自己喜好的樣板引擎，這裡的範例是使用ejs練習。

實作靜態樣板檔

今天的練習要從之前做的Express練習開始修改，先確認一下原始的程式碼。

let express = require("express");
let app = express();
let port = process.env.PORT || 2000;

app.use("/assets", express.static(`${__dirname}/public`));

app.get('/', (req, res)=>{
    res.send("<html><head><link href=assets/style.css type=text/css rel=stylesheet /></head><body><h1>Hello</h1></body></html>");
});

app.get("/job/:type", (req, res)=>{
    res.send(`<html><head></head><body><h1>Job: ${req.params.type}</h1></body></html>`)
});

app.listen(port);

要使用ejs樣板引擎的話，一樣要先透過npm install安裝，然後在主程式中設定樣板引擎。由於樣板引擎與Express會自動產生關聯，在設定樣板引擎時，是用app.set()的方法，而不是require()。

app.set("view engine", "ejs");

再來是檔案的部份，可以在專案路徑下建立views的資料夾並在其中建立名為index.ejs的樣板檔案。

<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

將app.get()中回傳頁面的res.send()改成res.render(<樣板檔檔名>)，會令Express查詢並取得樣板檔，在render()裡面也不需要使用副檔名，Express會依據不同的樣板引擎查找不同副檔名的檔案。

// 原始程式碼 ------------------------
// app.get('/', (req, res)=>{
//    res.send("<html><head><link href=assets/style.css type=text/css rel=stylesheet /></head><body><h1>Hello</h1></body></html>");
// });

app.get('/', (req, res)=>{
  res.render("index");
});

執行後瀏覽器會顯示樣板頁面。

實作動態樣板檔

在views資料夾中再建立一個名為Job的樣板檔。

<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Job</h1>
    </body>
</html>

在樣板檔加入<% = TYPE%>可以加入動態變數ID。

<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Job: <%= TYPE %></h1>
    </body>
</html>

將app.get()中回傳頁面的res.send()改成res.render(<樣板檔檔名>)，並在Path後面加入樣板的變數名稱引入URL中的參數，變數名稱會對應到樣板檔中的對應名稱並將變數代入，成為動態樣板檔。

// 原始程式碼 ---------------------------------------
// app.get("/job/:type", (req, res)=>{
//    res.send(`<html><head></head><body><h1>Job: ${req.params.type}</h1></body></html>`)
// });

app.get("/job/:type", (req, res)=>{
  res.render("job", {TYPE: req.params.type})
});