专栏首页十月梦想nodejs模板引擎ejs

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 string

ejs模板引擎api地址:https://www.npmjs.com/package/ejs

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 对象的属性方法调用的两种方法

    十月梦想
  • 背景属性

    十月梦想
  • Apache2.4+PHP7.0环境搭建

    开始学习PHP,环境搭建就是一个重要部分,折腾几个小时没搞定,各种问题,今天参考一下书上方法成功了,给大家分享一下。本次搭建结合PHP7.0+Apache2....

    十月梦想
  • 39-序列对象方法2

    凯茜的老爸
  • 同步解决线程安全问题的三种实现

    黑泽君
  • Fiori应用的书签模式 - bookmark

    Fiori和WebUI相比,一个突出feature是支持bookmark,即Fiori里view的每个状态都有一个unique的url与之对应-technica...

    Jerry Wang
  • Swift中防止ptrace依附

    在移动开发中,安全是一个很重要的话题,当然安全是没有绝对的,只能说尽可能的提高安全性。在iOS的开发中,为了防止别人窥视我们的App,我们得采用一些手段来进行防...

    100000798482
  • 理解Context

      1)使用Context调用方法,比如启动Activity、访问资源、调用系统级服务等

    用户3112896
  • 预测未来的公司有何过人之处?

    大数据文摘
  • Python爬虫进阶必备 | XX文书网加密分析-20190902版

    目前该网站已经更换了加密算法,主要原因是原算法太简单,9月2日更新的算法9月3日访问网站已经感觉到明显卡顿,防护并不是很到位。

    叫我龙总

扫码关注云+社区

领取腾讯云代金券