一、簡介
相比於jade模板引擎,ejs對原HTML語言就未作出結構上的改變,只不過在其交互數據方面做出了些許修改,相比於jade更加簡單易用。因此其學習成本是很低的。您也可參考ejs官網:https://ejs.bootcss.com/
二、ejs基本使用
這里我們使用如下配置文件:
我們啊可以通過下面的方式實現基本的ejs操作:
app.js文件:
const express=require("express"); const ejs=require("ejs"); const fs=require("fs"); var app=express(); //引用ejs app.set('views',"public"); //設置視圖的對應目錄 app.set("view engine","ejs"); //設置默認的模板引擎 app.engine('ejs', ejs.__express); //定義模板引擎 app.get("/",function(req,res){ res.render("index.ejs",{title: "<h4>express</h4>"}); }); app.listen(8080);
ejs文件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <% for(var i=0;i<10;i++){ %> <%= i %> <% } %> <!-- 獲取變量 --> <div class="datas"> <p>獲取變量:</p> <%- title %> <%= title %> </div> </body> </html>
這時我們會得到如下圖的結果:
由此可以知道:
<% xxx %>:里面寫入的是js語法,
<%= xxx %>:里面是服務端發送給ejs模板轉義后的變量,輸出為原html
<%- xxx %>:里面也是服務端發送給ejs模板后的變量,不過他會把html輸出來
同理res.render()函數也是支持回調的:
res.render('user', { name: 'Tobi' }, function(err, html) { console.log(html); });
這樣我們即可將看到heml的內容。另外值得說明的是ejs模塊也有ejs.render()和ejs.renderFile()方法,他在這里與res.render()作用類似,如下:
ejs.render(str, data, options); ejs.renderFile(filename, data, options, function(err, str){ // str => 輸出繪制后的 HTML });
三、ejs標簽各種含義
<% '腳本' 標簽,用於流程控制,無輸出。
<%_ 刪除其前面的空格符
<%= 輸出數據到模板(輸出是轉義 HTML 標簽)
<%- 輸出非轉義的數據到模板
<%# 注釋標簽,不執行、不輸出內容
<%% 輸出字符串 '<%'
%> 一般結束標簽
-%> 刪除緊隨其后的換行符
_%> 將結束標簽后面的空格符刪除
四、option的配置:
cache 緩存編譯后的函數,需要提供 filename filename 被 cache 參數用做鍵值,同時也用於 include 語句 context 函數執行時的上下文環境 compileDebug 當為 false 時不編譯調試語句 client 返回獨立的編譯后的函數 delimiter 放在角括號中的字符,用於標記標簽的開與閉 debug 將生成的函數體輸出 _with 是否使用 with() {} 結構。如果為 false,所有局部數據將存儲在 locals 對象上。 localsName 如果不使用 with ,localsName 將作為存儲局部變量的對象的名稱。默認名稱是 locals rmWhitespace 刪除所有可安全刪除的空白字符,包括開始與結尾處的空格。對於所有標簽來說,它提供了一個更安全版本的 -%> (在一行的中間並不會剔除標簽后面的換行符)。 escape 為 <%= 結構設置對應的轉義(escape)函數。它被用於輸出結果以及在生成的客戶端函數中通過 .toString() 輸出。(默認轉義 XML)。
以上就為ejs基本用法,往后對數據庫操作就直接把json數據從服務器返送給模板引擎就行;