浅谈 Node.js中Express框架中渲染模板引擎

Express的模板引擎经常使用的是ejs和jade。它预留了变量,res.render()就是将咱们的数据填充到模板后展现出完整的页面。css

 

渲染模板 res.render("渲染模板名称",{带过来的数据json格式 例如content:'31231',title:'dfdssd'})html

把数据填充进模板,通常数据是JSON,模板是views目录下的模板文件node

其中json数据不详细解释了能够是对象,数组对象...jquery

在模板中渲染数据(变量) <%= content %>就能够在模板中设置路由中的json数据的内容express

 

 

详细解释: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(模板)文件夹中ui

5.在views文件夹中的模板ejs文件中
经过<%=Key %>获取到框架中渲染设置的value值 (对象{Key:value})url

若是为数组按照上面方法一样获取到数组内容 只不过是数组的集合,若是要单独以数组的每一个数据显示须要遍历数组

遍历数组在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个页面时框架同样你只须要改变其中须要渲染的数据便可;

相关文章
相关标签/搜索