nodejs模板引擎ejs
nodejs的后台模板引擎主要分为两种ejs和jade.简单说一下两者区别吧,ejs学习成本低,效率不是很高(主要是先把模板中内容解析字符串),jade学习成本比较大,后期维护成本低,效率相对于ejs较好,express框架默认模板引擎依旧是jade有能力的情况下学习下jade还是非常不错的!今天主要介绍ejs后台模板引擎!
简单看一下处理字符串的小例子
//ejs 后台模板引擎
var ejs=require("ejs");
var str="很高兴,哈哈哈今天是<%= n%>月<%=m%>号";
var data={
n:7,
m:4
}
var test=ejs.render(str, data);
console.log(test);//自动解析成很高兴,哈哈哈今天是7月4号上面例子很简单,使用<%= %>里面填入需要解析的变量,使用ejs.rander(str,data);str是需要解析的参数,data是存储的解析数据!
下面看一个比较复杂的模板引擎的小例子
模板文件test.ejs(这里后缀名随意,php,html等无所谓)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ejs模板引擎</title>
</head>
<body>
<h2>nice 今天天气挺不错 今天是<%= y %>年<%=m%>月<%=d%>日 看一下今天的电影排行条目</h2>
<ul>
<% for(var i=0;i<news.length;i++){ %>
<li>电影名称:<%=news[i].title %> 阅读人数: <%= news[i].reader %> 上映时间: <%= news[i].date %></li>
<% }%>
</ul>
<h2>一下是阅读量大于1000的电影条目</h2>
<ul>
<% for(var i=0;i<news.length;i++){
if(news[i].reader>1000) {
%>
<li>电影名称:<%=news[i].title %> 阅读人数: <%= news[i].reader %> 上映时间: <%= news[i].date %></li>
<%
}
}%>
</ul>
</body>
</html>在此情况下,不在一个文件内,需要先进行文件的读取后执行,模板解析操作,看一下node代码
// ejs模板引擎读取内容
var http=require('http');
var ejs=require('ejs');
var fs=require('fs');
const server=http.createServer(function(req,res){
//读取文件
fs.readFile("./test.ejs",function(err,data){
// console.log(data.toString())
var template=data.toString();
var shuju={
y:2018,
m:7,
d:4,
news:[
{'title':"霸王别姬","reader":"864","date":"2012年"},
{'title':"大明王朝1566","reader":"15864","date":"2006年"},
{'title':"黄金搭档2012","reader":"854","date":"2012年"},
{'title':"大明王朝1566","reader":"15864","date":"2006年"},
{'title':"黄金搭档2012","reader":"854","date":"2012年"},
{'title':"大明王朝1566","reader":"15864","date":"2006年"},
{'title':"黄金搭档2012","reader":"854","date":"2012年"}
]
}
var html=ejs.render(template,shuju);
res.writeHead(200,{"content-type":"text/html"});
res.end(html);
})
})
server.listen(3000,"127.0.0.1");对于上面的案例简单总结一些,<% %>中间可以包含任意的js语句,但是在输出内容(纯数据的调用)的时候需要使用<%= "这里是调取的数据" %>,这里的数据在案例中包含在shuju这个变量中,总体调取的是new数组下面的对象,在调取数据的时候无需强调shuju下面的news,直接使用news.对象属性就行,因为在ejs处理的时候已经声明了shuju是调取的数据文件,而读取的ejs文件是一个模板文件.
ejs一个常用api,上面取用就是下面这个api,options无需理会,传入模板字符串和数据的参数就行!
ejs.render(str, data, options);// => Rendered HTML stringejs模板引擎api地址:https://www.npmjs.com/package/ejs
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-7-5，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
