TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊
什么是模板引擎
模板引擎（Template Engine）是一個(gè)將頁(yè)面模板和要顯示的數(shù)據(jù)結(jié)合起來(lái)生成 HTML 頁(yè)面的工具。如果說(shuō)上面講到的 express 中的路由控制方法相當(dāng)于 MVC 中的控制器的話(huà)，那模板引擎就相當(dāng)于 MVC 中的視圖。
模板引擎的功能是將頁(yè)面模板和要顯示的數(shù)據(jù)結(jié)合起來(lái)生成 HTML 頁(yè)面。它既可以運(yùn) 行在服務(wù)器端又可以運(yùn)行在客戶(hù)端，大多數(shù)時(shí)候它都在服務(wù)器端直接被解析為 HTML，解析完成后再傳輸給客戶(hù)端，因此客戶(hù)端甚至無(wú)法判斷頁(yè)面是否是模板引擎生成的。有時(shí)候模板引擎也可以運(yùn)行在客戶(hù)端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶(hù)端生成 HTML 頁(yè)面。但是由于瀏覽器兼容性問(wèn)題，XSLT 并不是很流行。目前的主流還是由服務(wù)器運(yùn)行模板引擎。
在 MVC 架構(gòu)中，模板引擎包含在服務(wù)器端。控制器得到用戶(hù)請(qǐng)求后，從模型獲取數(shù)據(jù)，調(diào)用模板引擎。模板引擎以數(shù)據(jù)和頁(yè)面模板為輸入，生成 HTML 頁(yè)面，然后返回給控制器，由控制器交回客戶(hù)端。
前端常用的有哪些模板引擎
一、jade
jade是超高性能的node JavaScript模板引擎，有著非常強(qiáng)大的API和大量杰出的特性。它主要針對(duì)node的服務(wù)端。
二、EJS
EJS是模板引擎的一種，也是我們這個(gè)教程中使用的模板引擎，因?yàn)樗褂闷饋?lái)十分簡(jiǎn)單，而且與 express 集成良好。
三、Handlebars
Handlebars 是 JavaScript 一個(gè)語(yǔ)義模板庫(kù)，通過(guò)對(duì)view和data的分離來(lái)快速構(gòu)建Web模板。它采用"Logic-less template"（無(wú)邏輯模版）的思路，在加載時(shí)被預(yù)編譯，而不是到了客戶(hù)端執(zhí)行到代碼時(shí)再去編譯， 這樣可以保證模板加載和運(yùn)行的速度。Handlebars兼容Mustache，你可以在Handlebars中導(dǎo)入Mustache模板。
使用模板引擎
在app.js中通過(guò)以下兩行代碼設(shè)置了模板文件的存儲(chǔ)位置和使用的模板引擎：
// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs');
注意：我們通過(guò) express -e blog 只是初始化了一個(gè)使用 ejs 模板引擎的工程而已，比如 node_modules 下添加了 ejs 模塊，views 文件夾下有 index.ejs 。并不是說(shuō)強(qiáng)制該工程只能使用 ejs 不能使用其他的模板引擎比如 jade，真正指定使用哪個(gè)模板引擎的是 app.set('view engine', 'ejs'); 。
在 routes/index.js 中通過(guò)調(diào)用 res.render() 渲染模版，并將其產(chǎn)生的頁(yè)面直接返回給客戶(hù)端。它接受兩個(gè)參數(shù)，第一個(gè)是模板的名稱(chēng)，即 views 目錄下的模板文件名，擴(kuò)展名 .ejs 可選。第二個(gè)參數(shù)是傳遞給模板的數(shù)據(jù)對(duì)象，用于模板翻譯。
打開(kāi) views/index.ejs ，內(nèi)容如下：
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>
當(dāng)我們 res.render('index', { title: 'Express' }); 時(shí)，模板引擎會(huì)把 <%= title %> 替換成 Express，然后把替換后的頁(yè)面顯示給用戶(hù)。
渲染后生成的頁(yè)面代碼為：
<!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>
注意：我們通過(guò) app.use(express.static(path.join(__dirname, 'public'))) 設(shè)置了靜態(tài)文件目錄為 public 文件夾，所以上面代碼中的 href='/stylesheets/style.css' 就相當(dāng)于 href='public/stylesheets/style.css' 。
ejs 的標(biāo)簽系統(tǒng)非常簡(jiǎn)單，它只有以下三種標(biāo)簽：
<% code %>： JavaScript 代碼。 <%= code %>：顯示替換過(guò) HTML 特殊字符的內(nèi)容。 <%- code %>： 顯示原始 HTML 內(nèi)容。
注意：
<%= code %> 和 <%- code %> 的區(qū)別，當(dāng)變量 code 為普通字符串時(shí)，兩者沒(méi)有區(qū)別。當(dāng) code 比如為 <h1>hello</h1> 這種字符串時(shí)， <%= code %> 會(huì)原樣輸出 <h1>hello</h1> ，而 <%- code %> 則會(huì)顯示 H1 大的 hello 字符串。
一個(gè)簡(jiǎn)單的例子
通過(guò)命令新建一個(gè)ejs的項(xiàng)目: express -e demo
在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;
在views下新建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>文章列表頁(yè)</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p><a href="/form" rel="external nofollow" >發(fā)表新文章</a></p> <ul> <%items.forEach(function(item){%> <li><%=item.title%></li> <%})%> </ul> </body> </html>
運(yùn)行項(xiàng)目: npm start
訪問(wèn):http://localhost:3000/
點(diǎn)擊發(fā)表新文章
點(diǎn)擊plus提交時(shí),又回到首頁(yè)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
舉報(bào)