iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0

如果我們今天要把後端的資料輸出給前端的話,那我們會需要一個渲染模板,那EJS就會是一個很好的選擇

EJS介紹:
EJS (Embedded JavaScript) 是一個在 Node.js 和瀏覽器中使用的模板引擎。它允許我們在 HTML 文件中嵌入 JavaScript 代碼,以動態生成內容。

我們沿用我們之前的API project,先在終端機打上npm install ejs

https://ithelp.ithome.com.tw/upload/images/20230916/20161799XeJZt7dpHn.png
下載完我們會需要創建一個資料夾叫做views,裡面幫我創一個檔案叫做index.ejs,
因為EJS文件規定需要放在views內部。
https://ithelp.ithome.com.tw/upload/images/20230916/20161799imyv5xQ8Qw.png
在app.js 中最上面加入const ejs = require(''ejs'');
之後加這一行 app.set(''view engine'', ''ejs'');
這樣我們使用res.render()的時候,就不須指定文件類別。

我們那get animal這個route來作範例。

app.get("/animals", async (req, res) => {
  try {
    let animalData = await Animal.find({}).exec();
    return res.render("index", { animalData });
  } catch (e) {
    return res.status(500).send("搜尋資料發生錯誤");
  }
});

解說:
res.render("index", { animalData }) 第一個參數放模板,第二個參數放物件,它作用是將 index 模板與動物資料結合,渲染成 HTML,並將結果作為回應傳送給瀏覽器。

我們後端的部分就完成了,明天來介紹怎麼讓前端連結後端。


上一篇
day27 - DELETE
下一篇
day29 - EJS 語法
系列文
一起進入網頁後端的世界吧 Restful Api 啟動 !30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言