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

用户1272076

发布于 2019-04-23 11:50:21

4.5K0

发布于 2019-04-23 11:50:21

一、什么是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添加如下代码：

// 设置模板文件夹为htmlapp.set("views","html");

五、默认文件为index

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

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

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

// 设置模板文件夹为htmlapp.set("views","html");

./ 为指定文件夹下的index文件

六、配置默认后缀名.html

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

// 设置扩展名为 htmlapp.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);// 默认扩展名为htmlapp.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);// 默认扩展名为htmlapp.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>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除

html

javascript

本文分享自张培跃微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

javascript

登录后参与评论

0 条评论

热度