node+express+ejs使用模版引擎做的一個示例demo
1 回答
函數式編程
TA貢獻1807條經驗 獲得超9個贊
什么是模板引擎
模板引擎（Template Engine）是一個將頁面模板和要顯示的數據結合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當于 MVC 中的控制器的話，那模板引擎就相當于 MVC 中的視圖。
模板引擎的功能是將頁面模板和要顯示的數據結合起來生成 HTML 頁面。它既可以運 行在服務器端又可以運行在客戶端，大多數時候它都在服務器端直接被解析為 HTML，解析完成后再傳輸給客戶端，因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以運行在客戶端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶端生成 HTML 頁面。但是由于瀏覽器兼容性問題，XSLT 并不是很流行。目前的主流還是由服務器運行模板引擎。
在 MVC 架構中，模板引擎包含在服務器端?？刂破鞯玫接脩粽埱蠛?，從模型獲取數據，調用模板引擎。模板引擎以數據和頁面模板為輸入，生成 HTML 頁面，然后返回給控制器，由控制器交回客戶端。
前端常用的有哪些模板引擎
一、jade
jade是超高性能的node JavaScript模板引擎，有著非常強大的API和大量杰出的特性。它主要針對node的服務端。
二、EJS
EJS是模板引擎的一種，也是我們這個教程中使用的模板引擎，因為它使用起來十分簡單，而且與 express 集成良好。
三、Handlebars
Handlebars 是 JavaScript 一個語義模板庫，通過對view和data的分離來快速構建Web模板。它采用"Logic-less template"（無邏輯模版）的思路，在加載時被預編譯，而不是到了客戶端執行到代碼時再去編譯， 這樣可以保證模板加載和運行的速度。Handlebars兼容Mustache，你可以在Handlebars中導入Mustache模板。
使用模板引擎
在app.js中通過以下兩行代碼設置了模板文件的存儲位置和使用的模板引擎：
// 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 中通過調用 res.render() 渲染模版，并將其產生的頁面直接返回給客戶端。它接受兩個參數，第一個是模板的名稱，即 views 目錄下的模板文件名，擴展名 .ejs 可選。第二個參數是傳遞給模板的數據對象，用于模板翻譯。
打開 views/index.ejs ，內容如下：
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>
當我們 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'))) 設置了靜態文件目錄為 public 文件夾，所以上面代碼中的 href='/stylesheets/style.css' 就相當于 href='public/stylesheets/style.css' 。
ejs 的標簽系統非常簡單，它只有以下三種標簽：
<% code %>： JavaScript 代碼。 <%= code %>：顯示替換過 HTML 特殊字符的內容。 <%- code %>： 顯示原始 HTML 內容。
注意：
<%= code %> 和 <%- code %> 的區別，當變量 code 為普通字符串時，兩者沒有區別。當 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" >發表新文章</a></p> <ul> <%items.forEach(function(item){%> <li><%=item.title%></li> <%})%> </ul> </body> </html>
運行項目: npm start
訪問:http://localhost:3000/
點擊發表新文章
點擊plus提交時,又回到首頁
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- 1 回答
- 0 關注
- 982 瀏覽
添加回答
舉報
0/150
提交
取消