將資料傳遞到 EJS 範本以及反之亦然 — 初學者指南

嘿??‍♂️！如果您剛開始使用 EJS（嵌入式 JavaScript） 並且想知道如何在 伺服器 和 EJS 模板 之間傳遞數據，那麼您來對地方了！我整整一周都在學習 EJS，我想分享我所學到的有關將數據傳遞到 EJS 以及如何使用數據的知識。

---

如何將資料從伺服器傳遞到 EJS 範本

因此，當您想要將資料從伺服器（Node.js + Express）傳送到 EJS 範本時，這非常簡單。您只需使用 res.render() 方法，它允許您將資料從伺服器傳送到您的 .ejs 檔案。

具體操作方法如下：

res.render("ejs_file_name", { data });

在此範例中，我們將渲染一個 EJS 檔案（例如 index.ejs）並將資料物件傳遞給範本。

然後，要在您的 EJS 範本中使用此資料，您只需像這樣存取它：

<%= data %>

這裡有一個快速細分：

• res.render() 負責將資料傳送到範本。
• EJS 中的 標籤是顯示傳遞過來的資料的地方。

只需確保兩個位置（在伺服器程式碼和 EJS 範本中）的資料名稱（如本例中的資料）相同。如果它們不匹配，事情就會變得很奇怪！

---

等等...如果沒有資料會發生什麼事？ ？

這裡是個棘手的部分：EJS 在使用資料之前不會檢查資料是否存在。它只是使用數據，就好像數據始終存在一樣。因此，如果您嘗試存取一些不存在（或未正確傳遞）的數據，EJS 可能會拋出錯誤並使您的應用程式崩潰。當您剛開始時，這可能會非常令人沮喪！

但是別擔心，有一個簡單的解決方法。您可以在嘗試使用資料之前檢查資料是否存在。您可以將資料包裝在 if 條件中，如下所示：

<% if (locals.data) { %>
  <%= data %>
<% } else { %>
  
No data available!
<% } %>

這樣，如果出現問題或資料未傳遞，您的應用程式就不會崩潰。相反，您可以顯示後備訊息或採取不同的操作。

？ 專業提示：在使用範本之前務必檢查您的資料是否存在於範本中 - 這可以為您省去很多麻煩！

---

挑戰時間：將資料從 EJS 傳遞到伺服器

為了讓這個學習之旅變得有趣，我決定建立一個簡單的項目，將使用者的名字作為輸入，然後告訴他們名字中有多少個字元。很簡單，對吧？我是這樣做的：

1. 取得輸入資料：
   我使用了一個 HTML 表單，該表單採用使用者的名字和姓氏。

2. 傳送資料到伺服器：
   使用 POST，我將輸入資料傳送到伺服器，然後計算全名的字元數。

3. 將處理後的資料傳回範本：
   我將字元計數傳遞回 EJS 模板以將其顯示在頁面上。

這是處理此問題的伺服器端程式碼：

app.post("/submit", (req, res) => {
  const charCnt = req.body["fName"].length + req.body["lName"].length;
  res.render("index.ejs", { charectercount: charCnt });
}); // I used body-parser to get the data from the form

• req.body 從使用者輸入取得表單資料。
• 我只是計算了名字和姓氏中的字元，並將該計數傳遞給 EJS 檔案。
• EJS 模板隨後會顯示字元數。

請隨時在我的 GitHub 上查看完整程式碼：專案程式碼

---

簡而言之？

這是如何將資料傳遞到 EJS 範本並從客戶端獲取資料的快速總結！ EJS 非常靈活，可以輕鬆地將 HTML 與 JavaScript 混合，學習如何有效管理資料傳遞將為您的專案帶來很多可能性。

以下是這篇文章的主要內容：

• 使用 res.render() 將資料從伺服器傳遞到 EJS 模板。
• 在範本中使用資料之前，請務必檢查資料是否存在，以避免崩潰。
• 您可以輕鬆地將資料傳回伺服器並使用 req.body 處理（對於 POST 請求）。

如果您像我一樣只是在學習，我希望這篇文章能讓事情變得更加清晰，並幫助您避免一些早期的陷阱。請隨時在下面留下任何問題或評論！ ？

以上是將資料傳遞到 EJS 範本以及反之亦然 — 初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！