四、模板引擎 <a href="<%= url %>"><img src="<%= imageURL %>" alt=""></a> 数据绑定，就成为一个完整的html字符串了。 前台的模板，我们现在要学习的是后台的模板。 后台模板，著名的有两个，第一个叫做ejs； 第二个叫做jade。 是npm第三方包。 先说EJS Embedded JavaScript templates 后台模板引擎 <ul> <% for(var i = 0 ; i < news.length ; i++){ %> <li><%= news[i] %></li> <% } %> </ul> var dictionary = { a:6, news : ["1期班太牛逼了","高薪就业","哈哈哈哈哈"] };
14.js
/** * Created by Danny on 2015/9/20 16:59. */ var ejs = require("ejs"); //模板 var string = "好高兴啊，今天我买了iphone<%= a %>s"; //数据 var data = { a : 6 }; //数据绑定 var html = ejs.render(string, data); //输出 console.log(html);
15.js
/** * Created by Danny on 2015/9/20 16:59. */ var ejs = require("ejs"); var fs = require("fs"); var http = require("http"); var server = http.createServer(function(req,res){ fs.readFile("./views/index.ejs",function(err,data){ //绑定模板 var template = data.toString(); var dictionary = { a:6, news : [ {"title":"陈伟我爱你","count":10}, {"title":"哈哈哈哈","count":20}, {"title":"逗你玩儿的","count":30} ] }; var html = ejs.render(template,dictionary); //显示 res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"}); res.end(html); }); }); server.listen(3000);
index.ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>好高兴啊，今天我买了一个iphone<%= a %>s</h1>
<ul>
<%
for(var i = 0 ; i < news.length ; i++){
if(news[i].count > 15){
%>
<li><%= news[i].title %></li>
<%
}
}
%>
</ul>
</body>
</html>
EJS模版效率不高，JADE引擎效率高，难度大