如果我們今天要把後端的資料輸出給前端的話,那我們會需要一個渲染模板,那EJS就會是一個很好的選擇
EJS介紹:
EJS (Embedded JavaScript) 是一個在 Node.js 和瀏覽器中使用的模板引擎。它允許我們在 HTML 文件中嵌入 JavaScript 代碼,以動態生成內容。
我們沿用我們之前的API project,先在終端機打上npm install ejs
下載完我們會需要創建一個資料夾叫做views,裡面幫我創一個檔案叫做index.ejs,
因為EJS文件規定需要放在views內部。
在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,並將結果作為回應傳送給瀏覽器。
我們後端的部分就完成了,明天來介紹怎麼讓前端連結後端。