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 条评论
登录 后参与评论

相关文章

来自专栏编程

利用Python进行数据分析(一)

说在前面 即将自学《利用Python进行数据分析》这本书,为了督促自己思考并总结,遂将学习内容连载在此。以便大家参考,和自己回顾。此书前五章主要是介绍了IPyt...

2247
来自专栏ytkah

群用户通过微信小程序可以更好地协作了

  今天,小程序向开发者开放了群ID的接口能力。简单地说,就是当你把小程序分享在群聊中,被点击后开发者可获取群ID和群名称,也方便更好地针对群场景提供个性化服务...

4835
来自专栏python学习指南

Python爬虫(九)_非结构化数据与结构化数据

爬虫的一个重要步骤就是页面解析与数据提取。更多内容请参考:Python学习指南 页面解析与数据提取 实际上爬虫一共就四个主要步骤: 定(要知道你准备在哪个...

2536
来自专栏腾讯IVWEB团队的专栏

移动端 tryjs 异常捕获

上周处理了一下群活动的 badjs ,第一步是摆脱` Script error .`,捕获异常栈,找到自己是错在哪里? 分享一下移动端 tryjs 异常捕获的步...

3470
来自专栏IMWeb前端团队

移动端tryjs异常捕获

上周处理了一下群活动的badjs,第一步是摆脱Script error.,捕获异常栈,找到自己是错在哪里~ 分享一下这个步骤 异步的切入点: 1、XMLHttp...

2176
来自专栏程序员互动联盟

【一起学python】hello world

联盟有个小伙伴,为了督促自己学习进步,决定把自己以前学的python重新梳理下,并且以文章的方式展示出来,联盟专门做一起学python系列专栏,鼓励这位小伙伴学...

3488
来自专栏walterlv - 吕毅的博客

为带有多种语言的 Jekyll 博客添加多语言选择

发布于 2018-03-06 06:47 更新于 2018-09...

1511
来自专栏程序员互动联盟

【答疑释惑第五讲】面向对象和面向过程语言的区别

疑惑一 面向对象和面向过程语言的区别? 面向过程就是把一个复杂的事情,划分为N多的步骤,然后每个对应函数来实现,面向对象不是划分步骤,而是把这些事情对应成相应对...

3269
来自专栏SEO

「SEO技巧」页面分页优化技巧

3577
来自专栏张善友的专栏

Web打印组件jatoolsPrinter

应用web化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于web的应用,客户端的规则很简单,容易学习,容易维护,容易发布。但对程序员来说,因为...

6319

扫码关注云+社区

领取腾讯云代金券