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

最新推荐文章于 2024-04-25 23:17:03 发布

转载最新推荐文章于 2024-04-25 23:17:03 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AzukiAzusa/p/7161244.html

文章标签：

#json #javascript #ViewUI

本文介绍Express框架中模板引擎的使用方法，重点讲解如何利用EJS模板引擎渲染数据并展示完整页面。通过具体示例，展示了如何传递JSON数据到模板文件并在模板中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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个页面时框架一样你只需要改变其中需要渲染的数据即可；

转载于:https://www.cnblogs.com/AzukiAzusa/p/7161244.html