淺談 Node.js中Express框架中渲染模板引擎

Express的模板引擎常用的是ejs和jade。它預留了變量，res.render()就是將我們的數據填充到模板后展示出完整的頁面。

 

渲染模板 res.render（"渲染模板名稱",{帶過來的數據json格式 例如content:'31231',title:'dfdssd'}）

把數據填充進模板，一般數據是JSON，模板是views目錄下的模板文件

其中json數據不詳細解釋了可以是對象，數組對象...

在模板中渲染數據（變量） <%= content %>就可以在模板中設置路由中的json數據的內容

 

 

詳細解釋：

舉個例子：
1.首先 這個方法是基於res對象的用法渲染模板  res.render();
2.內部參數（"渲染模板名稱（一般為ejs后綴名的模板）",{帶過來的數據json格式 例如content:'31231',title:'dfdssd'}）
3.在自定義框架中設置，並且拋出

在自定義框架index.js中：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/index', function(req, res, next) {


var arr=["1111111","2222222","3333333"];	
res.render('index', { title: 'Express' ,list:arr});
});

module.exports = router;

　　

4.ejs后綴名與html並無異同 按照html書寫即可 他們都存在於views（模板）文件夾中

5.在views文件夾中的模板ejs文件中
通過<%=Key %>獲取到框架中渲染設置的value值 （對象{Key：value}）

如果為數組按照上面方法同樣獲取到數組內容 只不過是數組的集合，如果要單獨以數組的每個數據顯示需要遍歷數組

遍歷數組在ejs模板文件中以js代碼書寫，應置於<% %>中而數組中的數據應在<%= %>渲染

如果為數組對象：

在index.js 自定義框架中

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/index', function(req, res, next) {

 var aa=[
{title:"hello html",url:"http:www.baidu.com",time:"2017.7.13"},
{title:"hello css",url:"http:www.taobao.com",time:"2017.7.13"},
{title:"hello jquery",url:"http:www.jquery22.com",time:"2017.7.13"},
{title:"hello node.js",url:"http://www.runoob.com/",time:"2017.7.13"},

 ];    
  res.render('index', { title: 'Express' ,data:aa});
});

module.exports = router;

 

 

 

在ejs模板中：

<ul>
<% for(var i=0;i<數組.length;i++){%>
<li>
<a href="<%= data[i].url %>"> <%= data[i].title %></a><%= data[i].time %></li>
<% }%>
</ul>

 

它的好處就是你在寫1000個頁面時框架一樣你只需要改變其中需要渲染的數據即可；