快捷導(dǎo)航

node+express+ejs使用模版引擎做的一個示例demo

更新時間：2017年09月18日 10:49:37 作者：lfendo

本篇文章主要介紹了node+express+ejs使用模版引擎做的一個示例demo，具有一定參考價值，有興趣的小伙伴可以了解一下

什么是模板引擎

模板引擎（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 目錄下的模板文件名，擴展名 .ejs 可選。第二個參數(shù)是傳遞給模板的數(shù)據(jù)對象，用于模板翻譯。

打開 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' }); 時，模板引擎會把 <%= title %> 替換成 Express，然后把替換后的頁面顯示給用戶。

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

<!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>

注意：我們通過 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 比如為 <h1>hello</h1> 這種字符串時， <%= code %> 會原樣輸出 <h1>hello</h1> ，而 <%- code %> 則會顯示 H1 大的 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添加如下代碼:

<!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" rel="external nofollow" >發(fā)表新文章</a></p> 
  <ul> 
    <%items.forEach(function(item){%> 
     <li><%=item.title%></li> 
     <%})%> 
  </ul> 
 </body> 
</html>

運行項目: npm start