iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

學習NodeJS的30天系列 第 18

Day18 NodeJS-Express III

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

Template

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

實作靜態樣板檔

  1. 今天的練習要從之前做的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);
  1. 要使用ejs樣板引擎的話,一樣要先透過npm install安裝,然後在主程式中設定樣板引擎。由於樣板引擎與Express會自動產生關聯,在設定樣板引擎時,是用app.set()的方法,而不是require()
app.set("view engine", "ejs");
  1. 再來是檔案的部份,可以在專案路徑下建立views的資料夾並在其中建立名為index.ejs的樣板檔案。
<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>
  1. 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");
});
  1. 執行後瀏覽器會顯示樣板頁面。

https://ithelp.ithome.com.tw/upload/images/20211003/20139980LseDPUxGEf.png

實作動態樣板檔

  1. 在views資料夾中再建立一個名為Job的樣板檔。
<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Job</h1>
    </body>
</html>
  1. 在樣板檔加入<% = TYPE%>可以加入動態變數ID。
<html>
    <head>
        <link href="/assets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <h1>Job: <%= TYPE %></h1>
    </body>
</html>
  1. 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})
});
  1. 在瀏覽器中以job為Path請求,頁面內容會依據請求URL中的參數改變。

https://ithelp.ithome.com.tw/upload/images/20211003/20139980L9uVng7veG.png

小結

作為一個網頁應用系統的框架,Express提供多樣的樣板引擎可供選擇,讓前端頁面的變化可以更多樣,同時也讓資料的呈現更方便,像是變數的傳遞以及更新。

參考資料

https://www.npmjs.com/package/ejs

Learn and Understand NodeJS [課程]


上一篇
Day17 NodeJS-Express II
下一篇
Day19 NodeJS-Express IV
系列文
學習NodeJS的30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言