什么是模板引擎

海陽網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,海陽網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為海陽近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的海陽做網(wǎng)站的公司定做！

模板引擎（Template Engine）是一個將頁面模板和要顯示的數(shù)據(jù)結(jié)合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當(dāng)于 MVC 中的控制器的話，那模板引擎就相當(dāng)于 MVC 中的視圖。

模板引擎的功能是將頁面模板和要顯示的數(shù)據(jù)結(jié)合起來生成 HTML 頁面。它既可以運 行在服務(wù)器端又可以運行在客戶端，大多數(shù)時候它都在服務(wù)器端直接被解析為 HTML，解析完成后再傳輸給客戶端，因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以運行在客戶端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶端生成 HTML 頁面。但是由于瀏覽器兼容性問題，XSLT 并不是很流行。目前的主流還是由服務(wù)器運行模板引擎。

在 MVC 架構(gòu)中，模板引擎包含在服務(wù)器端。控制器得到用戶請求后，從模型獲取數(shù)據(jù)，調(diào)用模板引擎。模板引擎以數(shù)據(jù)和頁面模板為輸入，生成 HTML 頁面，然后返回給控制器，由控制器交回客戶端。

前端常用的有哪些模板引擎

一、jade

jade是超高性能的node JavaScript模板引擎，有著非常強大的API和大量杰出的特性。它主要針對node的服務(wù)端。

二、EJS

EJS是模板引擎的一種，也是我們這個教程中使用的模板引擎，因為它使用起來十分簡單，而且與 express 集成良好。

三、Handlebars

Handlebars 是 JavaScript 一個語義模板庫，通過對view和data的分離來快速構(gòu)建Web模板。它采用"Logic-less template"（無邏輯模版）的思路，在加載時被預(yù)編譯，而不是到了客戶端執(zhí)行到代碼時再去編譯， 這樣可以保證模板加載和運行的速度。Handlebars兼容Mustache，你可以在Handlebars中導(dǎo)入Mustache模板。

使用模板引擎

在app.js中通過以下兩行代碼設(shè)置了模板文件的存儲位置和使用的模板引擎：

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 

注意：我們通過  express -e blog 只是初始化了一個使用 ejs 模板引擎的工程而已，比如 node_modules 下添加了 ejs 模塊，views 文件夾下有 index.ejs 。并不是說強制該工程只能使用 ejs 不能使用其他的模板引擎比如 jade，真正指定使用哪個模板引擎的是  app.set('view engine', 'ejs'); 。

在 routes/index.js 中通過調(diào)用 res.render() 渲染模版，并將其產(chǎn)生的頁面直接返回給客戶端。它接受兩個參數(shù)，第一個是模板的名稱，即 views 目錄下的模板文件名，擴(kuò)展名 .ejs 可選。第二個參數(shù)是傳遞給模板的數(shù)據(jù)對象，用于模板翻譯。

打開 views/index.ejs ，內(nèi)容如下：

index.ejs

 
 
  
   
   
  
  
  
<%= title %>
 
  
Welcome to <%= title %>
 
  
 

當(dāng)我們 res.render('index', { title: 'Express' }); 時，模板引擎會把 <%= title %> 替換成 Express，然后把替換后的頁面顯示給用戶。

渲染后生成的頁面代碼為：

 
 
  
   
   
  
  
  
Express
 
  
Welcome to Express
 
  
 

注意：我們通過  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)非常簡單，它只有以下三種標(biāo)簽：

• <% code %>：  JavaScript 代碼。
• <%= code %>：顯示替換過 HTML 特殊字符的內(nèi)容。
• <%- code %>： 顯示原始 HTML 內(nèi)容。

注意：

<%= code %> 和  <%- code %> 的區(qū)別，當(dāng)變量 code 為普通字符串時，兩者沒有區(qū)別。當(dāng) code 比如為 

hello

hello

一個簡單的例子

通過命令新建一個ejs的項目: 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添加如下代碼:

 
 
  
  
   
   
  
  
  
 
    new article
 
     
     
  
 
  
<%=message%>
 
  
 

在index.ejs里添加如下代碼:

 
 
  
   
   
   
  
  
  
<%= title %>
 
  
發(fā)表新文章
 
  
 
    <%items.forEach(function(item){%> 
     
<%=item.title%>
 
     <%})%> 
  
 
  
 

運行項目: npm start

訪問:http://localhost:3000/

點擊發(fā)表新文章

點擊plus提交時,又回到首頁

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。