day29 - EJS 語法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 29

Modern Web

一起進入網頁後端的世界吧 Restful Api 啟動 !系列第 29 篇

day29 - EJS 語法

15th鐵人賽

小酌

團隊原神啟動！

2023-10-14 00:01:19

344 瀏覽

分享至

昨天完成了後端把資料傳送到前端的部分，今天就來處理前端怎麼接收資料，並且呈現出來。

以下是一些常見的 EJS 語法：

<% %>：用於執行 JavaScript 程式碼，如條件判斷和迴圈。
<%= %>：用於輸出 JavaScript 表達式的結果到 HTML 中。
<%- %>：與 <%= %> 類似，但會對 HTML 進行安全轉義，避免 XSS 攻擊。
<%# %>：用於註釋，不會出現在渲染後的 HTML 中。
<% include filename %>：用於包含其他 EJS 文件。
<% for/in/while/do while %>：用於迴圈操作。
這邊我直接在index.html示範

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>學生首頁</title>
  </head>
  <body>
    <h1>動物頁面</h1>
    <ul>
      <% animalData.forEach(animal => { %>
      <li><%= animal.name %></li>
      <% }) %>
    </ul>
  </body>
</html>

我們在標籤中，使用了 EJS 的語法 <% %> 和 <%= %> 來動態生成動物名稱的清單。以下是說明：

<% animalData.forEach(animal => { %>：這是一個 JavaScript 的迴圈語句，用於遍歷 animalData 陣列中的每個動物，因為我們傳過來的資料是所有動物，它用陣列來包裝。
<li><%= animal.name %></li>：在迴圈中，使用 <%= %> 語法來輸出 animal.name 的值，將動物名稱放入 <li> 標籤中。
<% }) %>：迴圈結束的標記。

最後看到這個畫面，你就完成了。