Day 8 - 靜態檔案和樣板引擎：處理靜態資源和動態網頁(下) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 8

自我挑戰組

30 天架設 Node.js - Express 框架：快速學習之路系列第 8 篇

Day 8 - 靜態檔案和樣板引擎：處理靜態資源和動態網頁(下)

15th鐵人賽深入探索 express node.js express ejs

Abby

2023-09-09 10:34:14

796 瀏覽

分享至

昨天已經建立了一個樣板，今天就要讓樣板隨我們需求的文字做變化~
讓我們繼續看下去!

實作動態網頁

動態網頁中常常會出現模板一樣，但內容文字不一樣的網頁，
想要讓我們的畫面因應不同頁面進行渲染的話，
EJS 提供了 <%= 變數 %> 的方法，可以動態的出現的變數。

首先我們需要修改我們的 page.ejs 檔案，增加一個 text 的變數。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8"></meta>
        <title>圖書資訊</title>
      </head>
      <body>
        <h3> <%= text %> Page </h3>
      </body>
    </html>

接著，到我們各個路由的地方，將原本 res.send() 的地方，
修改為 → res.render('ejs檔案名', {'變數名': '想要顯示的文字'}) 。

以我們 res.render('page',{'text': 'Get a book'}) 為例 →
即為使用 page.ejs 檔案，並想要頁面顯示出 Get a book 。

完整修改可參考底下：

    // routes/modules/book.js

    // define the book page route by get method
    router.get('/', (req, res) => {
      res.render('page',{'text': 'Get a book'})
    })
    // define the book route by post method
    router.post('/', (req, res) => {
      res.render('page',{'text': 'Post a book'})
    })

    // define the book route by get method
    router.delete('/', (req, res) => {
      res.render('page',{'text': 'Delete the book'})
    })

接著我們來開啟伺服器試試看吧～
開啟瀏覽器 http://localhost:3000/book
我們想要顯示的文字就這麼輕鬆順利的出現了！

如果有 Postman 的話可以試試看我們剛剛建立的各種 book 路由方法的頁面。
POST

DELETE

還有判斷邏輯或是迴圈的用法，都可以很靈活的運用，
詳細可以參考 EJS 的 github。

做成 Template 樣板

另外還想提一下，假如你網頁每頁都有固定的 Header 或 Footer，
也可以將重複的程式碼拉出來做一個獨立的ejs 檔案，要使用時就可以直接引入。

首先先建立一個 footer.ejs 的檔案，並做一個簡易的 HTML。

    <footer>
      <div>This is Footer Area</div>
    </footer>

接著回到我們 page.ejs 檔案，使用 <%- include('檔案名'); %> 將檔案引入，
程式會變成

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8"></meta>
        <title>圖書資訊</title>
      </head>
      <body>
        <h3> <%= text %> Page </h3>
      </body>

      <!-- Footer -->
      <%- include('footer'); %>
      <!-- Footer -->
    </html>

接著再開啟瀏覽器輸入我們的 http://localhost:3000/book