提姆寫程式

0%

Node.js - EJS 路由切換、參數導入模板以及網頁上跑迴圈渲染資料

發表於 分類於 Disqus：
EJS 基礎使用

node

路由切換

前篇知道如何把 ejs 檔案渲染在畫面上，如果現在有多個頁面也可以依樣畫葫蘆，

這是首頁，
app.js

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

加上 about 跟 user 頁面在 views 資料夾內，

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// index
app.get("/", (req, res) => {
  res.render("index");
});

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

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

這樣就可以輸入網址切換想要呈現的路由內容！

輸入參數 ejs 的內容種類

來到 app.js 找到根目錄路徑片段程式碼，然後在 render 檔案中帶入一個物件當做參數，

app.js

1
2
3
4
5
6
7
8
app.get("/", (req, res) => {
  res.render("index", {
    title: "tim home",
    man: "tim",
    render: "<p>渲染 HTML 標籤</p>",
    show: true,
  });
});

這邊用物件帶了四個參數，然後到 index.ejs 帶入參數，

index.ejs

1
2
<h2><%= title %></h2>
<p>成員為：<%= man %></p>

這樣就可以把 app.js 的參數，透過 index.ejs 渲染在畫面上囉！

另外也介紹可帶入的內容種類 (使用上方新增的物件當作資料)：

<%= params %> 字串

index.ejs

1
<h2><%= title %></h2>

<%- params %> 網頁標籤

index.ejs

1
<p><%- render %></p>

<%><%> 可帶入判斷式

1
2
3
<% if(show){ %>
     <span>show text</span>
   <% } %>

在模板上跑迴圈

這邊建立一筆資料：

app.js

1
2
3
4
5
app.get("/", (req, res) => {
  res.render("index", {
    transportation: ["air plane", "cars", "train", "ship"],
  });
});

可以使用迴圈把資料渲染在畫面上，

index.ejs

1
2
3
4
5
<ul>
      <% for(var i = 0; transportation.length > i; i++){ %>
      <li><%- transportation[i] %></li>
      <% } %>
    </ul>

因為本次練習使用列表呈現，並且要在 li 渲染資料，故在 li 外面包一層模板語法，使用 for 迴圈去跑資料，並且要選染出 HTML 的標籤，如果直接使用 <li> transportation[i] </li> 的話會印出四個 transportation[i]。