码迷,mamicode.com
首页 > Web开发 > 详细

node08---EJS模版

时间:2017-06-17 10:22:25      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:server   read   text   字符   ade   script   html   console   char   

四、模板引擎
<a href="<%= url %>"><img src="<%= imageURL %>" ></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引擎效率高,难度大

node08---EJS模版

标签:server   read   text   字符   ade   script   html   console   char   

原文地址:http://www.cnblogs.com/yaowen/p/7037694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!