ejs当中的"E" 代表 “effective”，即【高效】。EJS 是一套非常简单的模板语言，可以帮你利用普通的 Javascript 代码快速生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 Javascript 代码而已。
二、快速使用EJS 1、安装ejs与express
cnpm install ejs express -D2、在项目中新建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 =
"'>" +
"<%=siteName%>" +
"";
// 通过ejs.render将数据放到模板中，转为HTML数据
let html = ejs.render(template, data);
// 将数据在浏览器进行展现
res.send(html);
})
app.listen(80, function () {
console.log("开启服务成功！")
})
代码解析：
- ejs.render()方法：用于将数据（data）在指定的模板（template）中进行展示，生成HTML
- <%= 数据的属性 %>：用于将数据的属性在模板中进行输出
- 注意：数据的类型需要是对象
三、以文件形式使用模板
在上个例子中，我们将模板放到变量template中，数据量少的话还可以，倘若数据量比较大的话，将是一件十分恐怖的事情。所以我们可以将模板放到文件中，现在对以上示例进行改造。
1、创建views文件夹 2、在views文件夹内创建one.ejs模板文件:
Title
">
<%= siteName %>
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
假如你不喜欢将你的模板放到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
app.engine('.html',require('ejs').__express);
// 或
// app.engine('html', require('ejs').renderFile);
我们可以在views文件夹内新建index.html，内容:
index.html
">
<%= siteName %>
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:
index.html
<%=nowTime%>
此时的效果为:在页面中输出当前时间。假设你现在将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:
Title
<%include header.ejs%>
">上一页
<%=pageIndex%>/<%=pageSum%>
">下一页
<%for(var i=0;i
">
" alt="<%=subjects[i].title%>" data-x="1142" data-y="1600">
<%=subjects[i].title%>
<%=subjects[i].rating.average%>
<%}%>
views>detail.ejs:
<%=title%>
<%include header.ejs%>
" alt="">
电影名：<%=title%>
原名：<%=original_title%>
简单：<%=summary%>
views>header.ejs
电影Top250
—————END—————
