ejs模板(了解),前后端杂糅

nodejs原生(前端写死,后台改造html填充数据,未实现前后端分离)

/**
 * 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}
            ]
        };
        // dictionary中的a news绑定到template中
        var html = ejs.render(template,dictionary);

        //显示
        res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
        res.end(html);
    });
});

server.listen(80,"127.0.0.1");

前端html(类似PHp,混编杂糅,落后技术)

<!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>

express+ejs

/**
 * Created by Danny on 2015/9/22 9:37.
 */
var express = require("express");
var app = express();

app.set("view engine","ejs");

app.get("/",function(req,res){
    res.render("haha",{ //默认到views中查找haha.ejs
        "news" : ["我是小新闻啊","我也是啊","哈哈哈哈"]
    });
});

app.listen(3000);

ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>哈哈哈哈</h1>
    <ul>
        <% for(var i = 0 ; i < news.length ; i++){ %>
            <li><%= news[i] %></li>
        <% } %>
    </ul>
</body>
</html>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值