模板引擎ejs
模板引擎（Template Engine）是一個將頁面模板和要顯示的資料結合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當於 MVC 中的控制器的話，那模板引擎就相當於 MVC 中的檢視。 模板引擎的功能是將頁面模板和要顯示的資料結合起來生成 HTML 頁面。它既可以運 行在伺服器端又可以執行在客戶端，大多數時候它都在伺服器端直接被解析為 HTML，解析完成後再傳輸給客戶端，因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以執行在客戶端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶端生成 HTML 頁面。但是由於瀏覽器相容性問題，XSLT 並不是很流行。目前的主流還是由伺服器執行模板引擎。
在 MVC 架構中，模板引擎包含在伺服器端。控制器得到使用者請求後，從模型獲取資料，呼叫模板引擎。模板引擎以資料和頁面模板為輸入，生成 HTML 頁面，然後返回給控制器，由控制器交回客戶端。
注意：當前express預設使用jade模板，如果需要支援ejs或其他模板，需要指定
命令列建立ejs模板專案
express --view=ejs HelloWorld //命令列建立支援ejs模板引擎的express web專案
該命令在 node_modules 下添加了 ejs 模組，views 資料夾下有 index.ejs
注意：專案中指定使用哪個模板引擎的是 app.set('view engine', 'ejs')
生成的ejs檔案views/index.ejs
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </body> </html>
Index.js將資料繫結到模板上
執行res.render('index', { title: 'Express' }); 時，模板引擎會把 <%= title %> 替換成 Express，然後把替換後的頁面顯示給使用者
解釋：兩個引數，第一個是模板的名稱，即 views 目錄下的模板檔名，副檔名 .ejs 可選。第二個引數是傳遞給模板的資料物件，用於模板翻譯
渲染後生成的檔案為：
<!DOCTYPE html> <html> <head> <title>Express</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1>Express</h1> <p>Welcome to Express</p> </body> </html>
ejs標籤系統：
● <% code %>： JavaScript 程式碼。 ● <%= code %>：顯示替換過 HTML 特殊字元的內容。 ● <%- code %>： 顯示原始 HTML 內容。
當 code 比如為 <h1>hello</h1> 這種字串時， <%= code %> 會原樣輸出 <h1>hello</h1> ，而 <%- code %> 則會顯示 H1 大的 hello 字串。
擴充樣例, 該示例Post方法沒有真正儲存新增的資料（需要在後臺讀寫資料庫或檔案來持久化）：
index.js
var express = require('express'); var router = express.Router(); var items=[{title:'文章1'},{title:'文章2'}]; /* GET home page. */ router.get('/', function(req, res, next) { res.render('index',{title:'文章列表',items:items}); }); router.get('/form', function(req, res, next) { res.render('form',{title:'文章列表',message:'fendo8888'}); }); router.post('/form', function(req, res, next) { res.redirect('/'); }); module.exports = router;
新增模板form.ejs
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <form method="post" action="/form"> <label>new article</label><br> <textarea name="text" cols="100" row="5"></textarea> <input type="submit" value="pus"></input> </form> <div><%=message%></div> </body> </html>
index.ejs
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文章列表頁</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p><a href="/form">發表新文章</a></p> <ul> <%items.forEach(function(item){%> <li><%=item.title%></li> <%})%> </ul> </body> </html>
另外：使用ejs模板引擎時後綴換成
step1： 修改 app.js 的引擎設定檔案：.html
app.engine('html', require('ejs').renderFile);app.set('view engine', 'html');或
Step2: 將views下面的所有.ejs檔案字尾名改為.html