概述
在web項目中渲染頁面，我們很多時候，會用json或者拼接字符串的方式，不夠美觀，破壞原有html結構，大量的html拼接會使代碼難以閲讀。
ejs是一種nodejs模板引擎，通過數據和模板，可以生成HTML標記文本。可以説EJS是一個JavaScript庫，EJS可以同時運行在客户端和服務器端，客户端安裝直接引入文件即可，服務器端用npm包安裝。
ejs的特點：
1、快速編譯和渲染
2、簡單的模板標籤
3、自定義標記分隔符
4、支持文本包含
5、支持瀏覽器端和服務器端
6、模板靜態緩存
7、支持express視圖系統
簡單示例
npm install ejs命令安裝EJS-
ejs.js。將模板字符串和數據作為參數傳遞給 EJS，HTML 就出來了。
var ejs = require('ejs'), test = ['001', '002', '003'], html = ejs.render('<%= test.join(", "); %>', {test: test});
ejs模板文件後綴名 .ejs
ejs默認是開啓模版緩存。這樣在一個頁面中多次請求模版文件時，只會請求一次
可通過代碼設置是否開啓緩存：EJS.config({cache: false});//關閉緩存
基本語法
常用方法
-
ejs.compile(str,[option])
//str指需要解析的字符串模板 //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)。 */ var tpl = ejs.compile('<%=test %>'); var result = tpl(); console.log(result);//test -
ejs.render(ste,data,[option])
//str指需要解析的字符串模板 //data數據 //option同上 var result = ejs.render('<%=test %>'); console.log(result);//test常用標籤
<%'腳本' 標籤，用於流程控制，無輸出。<%_刪除其前面的空格符<%=輸出數據到模板（輸出是轉義 HTML 標籤）<%-輸出非轉義的數據到模板<%#註釋標籤，不執行、不輸出內容<%%輸出字符串 '<%'%>一般結束標籤-%>刪除緊隨其後的換行符_%>將結束標籤後面的空格符刪除
### 基本語法
- 變量
變量聲明：
<% title="My First Test" %>變量輸出：
<%= title %><!--特殊字符將進行轉義-->
<%- title %><!--不做轉義處理--> - html標籤屬性
變量定義標籤屬性：
<h1 style="<%= style %>"></h1> -
循環
<% users=["張三","李四","王五","趙六"] %> <ul> <% for(var item in users){ %> <li> <%= users[item] %> </li> <% } %> </ul> -
if
<% if(isLogin){ %> <div class="user"> <a href="">hello</a> <a href="">退出</a> </div> <% }else{ %> <div class="login"> <a href="">登錄</a> <a href="">註冊</a> </div> <% } %> -
include
通過
include指令將相對於模板路徑中的模板片段包含進來。(需要提供 'filename' 參數。)<% include 嵌套模板路徑 %> <% include ./header %>//head.ejs <meta charset="utf-8"/> <title><%= title %></title> <link rel="styleSheet" type="text/css" href="/css/index.css" /> //index.ejs <!DOCTYPE html> <html lang="en"> <head> <% include ./head %> </head> <body> <main> <div>main content</div> </main> </body> </html>
在express的應用
- 為express服務器，設置模板引擎類型
app.set("view engine","ejs"); - 配置ejs模板文件存放路徑
app.set('views', path.join(__dirname, 'views'));
- 將ejs模板渲染成html頁面後返回給瀏覽器
- res.render(path,data)
- path:模板文件路徑 字符串
- 渲染模板時需要使用的數據，對象
- res.render("404")
- res.render("login",{title:"用户登錄“})
