Node.js_express_伺服器渲染頁面 ejs
阿新 • • 發佈：2018-12-22
伺服器渲染頁面 ejs
高效的 js 模版引擎
將資料提前渲染到頁面上， 再將渲染好的頁面返回響應給瀏覽器
- 下載 ejs 包
npm install ejs
無需引用，但是要配置模板資源目錄
// app.set('views', '模板資源目錄');
app.set('views', 'views'); // 通常資料夾 也叫 views
- 基本使用
1. 配置模板資源目錄
app.set('views', 'views'); // 通常資料夾 也叫 views
2. 配置要使用的模板引擎
app.set('views engine', 'ejs');
3. 將 後臺資料 渲染到 模板資源 上
-
app.get('/ejs', (request, response)=>{ const data = [{ "name": '孫悟空'. "age": 555 },{
"name": '白骨精',
"age": 18
}]; response.render('test.ejs', {data}); // .ejs 可以省略 });
4. views/test.ejs
模板語法
1. <% %> 其中可以寫任意 js 程式碼
2. <%= %>
3. <%- %>
原始碼測試
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> </head> <body> <% console.log("哈哈"); %>不會顯示到頁面上 <%= data[0].name %> 輸出指定資料到頁面上 不會解析標籤，轉義 HTML 相關原始碼後輸出
安全性更高 <%- data[1].name %> 輸出指定資料到頁面上 解析 HTML 原始碼 一般結合使用： <% for(var i=0; i<10; i++){ %> <%= data[i].name %> <% }; %> </body> </html>
凡是經過使用者輸入的東西，都需要進行特殊處理。
5
55
5
5
5
5
5
5
5
55
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5