继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

EJS模板在express中的使用攻略及应用实例(建议收藏)

张培跃
关注TA
已关注
手记 23
粉丝 30
获赞 98

一、什么是ejs?

ejs当中的"E" 代表 “effective”,即【高效】。EJS 是一套非常简单的模板语言,可以帮你利用普通的 JavaScript 代码快速生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。


二、快速使用EJS

1、安装ejs与express
cnpm install ejs express -D
2、在项目中新建demo.js:
const express = require("express");
const ejs = require("ejs");
const app = express();
app.get("/", (req, res) => {
    // 创建用于渲染的数据
    var data = {
        siteName: "张培跃",
        siteUrl: "http://www.zhangpeiyue.com"
    }
    // 创建模板内容
    var template =
        "<a href='<%=siteUrl%>'>" +
        "<%=siteName%>" +
        "</a>";
    // 通过ejs.render将数据放到模板中,转为HTML数据
    let html = ejs.render(template, data);
    // 将数据在浏览器进行展现
    res.send(html);
})
app.listen(80, function () {
    console.log("开启服务成功!")
})

代码解析:

  • ejs.render()方法:用于将数据(data)在指定的模板(template)中进行展示,生成HTML
  • <%= 数据的属性 %>:用于将数据的属性在模板中进行输出
  • 注意:数据的类型需要是对象
3、效果:


三、以文件形式使用模板

在上个例子中,我们将模板放到变量template中,数据量少的话还可以,倘若数据量比较大的话,将是一件十分恐怖的事情。所以我们可以将模板放到文件中,现在对以上示例进行改造。

1、创建views文件夹
2、在views文件夹内创建one.ejs模板文件:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="<%= siteUrl %>">
        <%= siteName %>
    </a>
</body>
</html>
3、demo.js调整如下:
const express = require("express");
const ejs = require("ejs");
const app = express();
app.get("/", (req, res) => {
    // 创建用于渲染的数据
    var data = {
        siteName: "张培跃",
        siteUrl: "http://www.zhangpeiyue.com"
    }
    // 将数据在浏览器进行展现
    res.render("one.ejs",data);
})
app.listen(80, function () {
    console.log("开启服务成功!")
})

代码解析:

  • res.render(path,data):将ejs模板渲染成html页面后返回给浏览器。path默认为views文件夹下的文件,data为对象类型。
  • 模板扩展名为.ejs
4、示例目录如下:

四、更改默认文件夹

假如你不喜欢将你的模板放到views文件夹内,可以通过app.set()方法进行设置。比如,我们要将模板文件放置到html文件夹内:

1、创建html文件夹
2、将上个示例中的one.ejs移入html文件夹内
3、上示例中的demo.js添加如下代码:
// 设置模板文件夹为html
app.set("views","html");

五、默认文件为index

render设置的地址为"./",默认使用的文件为views文件夹下index.ejs文件:

res.render("./",{});

更改默认文件夹为html文件夹后,默认使用的文件为html文件夹下的index.ejs文件:

// 设置模板文件夹为html
app.set("views","html");
  • ./ 为指定文件夹下的index文件

六、配置默认后缀名.html

假如要将使用的模板文件为.html,需要进行以下设置:

// 设置扩展名为 html
app.engine('.html',require('ejs').__express);
// 或
// app.engine('html', require('ejs').renderFile);

我们可以在views文件夹内新建index.html,内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
</head>
<body>
<a href="<%= siteUrl %>">
    <%= siteName %>
</a>
</body>
</html>

demo.js:

const express = require("express");
const ejs = require("ejs");
const app = express();
// 设置扩展名为 html
// app.engine('.html',require('ejs').__express);
// 或
app.engine('html', require('ejs').renderFile);
// 默认扩展名为html
app.set("view engine","html");
app.get("/", (req, res) => {
    // 创建用于渲染的数据
    var data = {
        siteName: "张培跃",
        siteUrl: "http://www.zhangpeiyue.com"
    }
    // 当前模板地址为views/index.html
    res.render("./",data);
})
app.listen(80, function () {
    console.log("开启服务成功!")
})

当前目录结构:

执行demo.js, 你会发现现在模板所采用的的文件变更为了html文件

七、如何开启模板缓存

需要进行以下配置:

app.set('view cache', true);

demo.js:

const express = require("express");
const ejs = require("ejs");
const app = express();
// 设置扩展名为 html
// app.engine('.html',require('ejs').__express);
// 或
app.engine('html', require('ejs').renderFile);
// 默认扩展名为html
app.set("view engine","html");
// 开启模板缓存
app.set('view cache', true);
app.get("/", (req, res) => {
    // 创建用于渲染的数据
    var data = {
        nowTime:_getNowTime()
    }
    // 当前模板地址为views/index.html
    res.render("./",data);
    function _getNowTime() {
        var nowTime = new Date();
        var timeStr = nowTime.getFullYear() + "-" +
            (nowTime.getMonth() + 1).toString().padStart(2, "0") + "-" +
            nowTime.getDate().toString().padStart(2, "0") + " " +
            nowTime.getHours().toString().padStart(2, "0") + ":" +
            nowTime.getMinutes().toString().padStart(2, "0") + ":" +
            nowTime.getSeconds().toString().padStart(2, "0");
        return timeStr;
    }
})
app.listen(80, function () {
    console.log("开启服务成功!")
})

views》index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
</head>
<body>
    <div>
        <%=nowTime%>
    </div>
</body>
</html>

此时的效果为:在页面中输出当前时间。假设你现在将html页面的内容全部删光光,依然不会阻止其显示当前时间的决心,因为此时的模板数据来自于缓存。

八、自定义闭合标记

ejs默认的闭合标记是 <% … %>,假如你感觉该标记使用起来不是很爽的话,我们也可以自定义ejs的闭合标记,例如修改为<?...?>:

ejs.delimiter="?"

或:

app.set("view options",{
    delimiter:"?"
});

九、标签使用汇总

<% '脚本' 标签,用于流程控制,无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板(输出是转义 HTML 标签)
<%- 输出非转义的数据到模板
<%# 注释标签,不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

十、include

通过 include 指令将相对于模板路径中的模板片段包含进来。
例如,如果存在 “./views/header.ejs” 和 “./views/footer.ejs” 两个模板文件,我们可以通过以下代码将模板文件包含进来:

<% include header.ejs%>
<% include footer.ejs%>

如果需要传值,可以:

<%- include("header.ejs",{age:10})%>
<%- include("footer.ejs",{age:13})%>

接收值:

<%=age%>

十一、完成如下示例:


目录结构:

server.js:

const express = require("express");
const app = express();
const request = require("request");
const ejs = require("ejs");
app.set("view engine", "ejs");
app.get("/", function (req, res) {
    var pageIndex = (req.query.pageIndex || 1) / 1;
    if (pageIndex < 1)
        pageIndex = 1;
    var url = "https://api.douban.com/v2/movie/top250?count=4&start=" + (pageIndex - 1) * 4;
    request(url, (err, responseText, body) => {
        if (!err && responseText.statusCode === 200) {
            var obj = JSON.parse(body);
            var pageSum = Math.ceil(obj.total / obj.count);
            res.render("./", {
                pageIndex,
                pageSum,
                subjects: obj.subjects
            });
        } else {
            res.send("网络连接错误")
        }
    })
})
app.get("/detail/:id", function (req, res) {
    var url = "https://api.douban.com/v2/movie/subject/" + req.params.id;
    request(url, function (err, responseText, body) {
        if (!err && responseText.statusCode === 200) {
            console.log(body);
            res.render("detail", JSON.parse(body))
        } else {
            res.send("404")
        }
    })
})
app.listen(80, function () {
    console.log("success");
})

views>index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="referrer" content="never">
</head>
<body>
<%include header.ejs%>
<div>
    <a href="/?pageIndex=<%=pageIndex-1%>">上一页</a>
    <%=pageIndex%>/<%=pageSum%>
    <a href="/?pageIndex=<%=pageIndex+1%>">下一页</a>
</div>
<div>
    <%for(var i=0;i<subjects.length;i++){%>
        <a class="item" href="/detail/<%=subjects[i].id%>">
            <div class="cover-wp" data-isnew="false" data-id="26972258">
                <img src="<%=subjects[i].images.small%>" alt="<%=subjects[i].title%>" data-x="1142" data-y="1600">
            </div>
            <p>
                <%=subjects[i].title%>
                <strong><%=subjects[i].rating.average%></strong>
            </p>
        </a>
    <%}%>
</div>
</body>
</html>

views>detail.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="never">
    <title><%=title%></title>
</head>
<body>
<%include header.ejs%>
<div>
    <div>
        <img src="<%= images.small%>" alt="">
    </div>
    <p>电影名:<%=title%></p>
    <p>原名:<%=original_title%></p>
    <p>简单:<%=summary%></p>
</div>
</body>
</html>

views>header.ejs

<header>
    <a href="/"><h3>电影Top250</h3></a>
</header>

—————END—————

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP

热门评论

个人还是比较喜欢Handlebars

查看全部评论