1.1.3：分析模板引擎
1.什么是模板引擎
模板引擎是一个将页面模板和要显示的数据结合生成HTML页面的工具
可以这么理解，如果说Express中的路由控制方法是MVC中的控制器的话，那么模板就是MVC的视图。
什么是ejs？
ejs是模板引擎的一种，也是在1.1.2节中用到的模板引擎，因为它使用起来非常简单，而且与express集成良好。
2.使用模板引擎
我在之前讲过通过以下两行代码设置模板文件的存储位置和使用的模板引擎：
app.set(‘views‘, path.join(__dirname, ‘views‘)); app.set(‘view engine‘, ‘ejs‘);
注意：通过express -e blog，我们只是初始化了一个使用ejs模板引擎的工程而已，比如node_modules下添加了ejs模块，在views有index.ejs。这并不是说强制该项目只能使用ejs，而不能使用其它模板引擎如jade，真正指定使用哪个模板引擎的是：
app.use(‘view engine‘,‘ejs‘);
在1.1.2节的routes/index.js中通过调用res.render()渲染模块，并将其产生的页面返回给客户端。它接收两个参数，第一个参数是模板名称，即views目录下的模板文件名，扩展名.ejs可选；第二个参数是传递给模板的数据对象，用于模板翻译。
打开views/index.ejs，内容如下：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
当我们res.render("index",{title:"木人子韦"});时,模板引擎会把<%=title%>替换成“木人子韦”，然后把替换后的页面显示给用户。
渲染后生成的页面代码为：
<!DOCTYPE html>
<html>
<head>
<title>木人子韦</title>
<link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
</head>
<body>
<h1>木人子韦</h1>
<p>Welcome to 木人子韦</p>
</body>
</html>
注意：通过app.use(express.static(path.join(__dirname, ‘public‘)));将css等静态文件的根目录设置为了public文件夹，所以在上面代码中的
href=‘/stylesheets/style.css‘
就相当于
href=‘public/stylesheets/style.css‘
ejs的标签系统非常简单，有以下标签：
<%‘脚本‘ 标签，用于流程控制，无输出。<%_删除其前面的空格符<%=输出数据到模板（输出是转义 HTML 标签）<%-输出非转义的数据到模板<%#注释标签，不执行、不输出内容<%%输出字符串 ‘<%‘%>一般结束标签-%>删除紧随其后的换行符_%>将结束标签后面的空格符删除
注意：当变量code为普通字符串时，<%=code%>和<%-code%>没有区别。当code为<div>从删库到跑路</div>这样的字符串时，<%=code%>会原样输出<div>从删库到跑路</div>，而<%-code%>则会显示 从删库到跑路 字符串。
感受一下标签<% code %>，其它的标签找官方文档https://ejs.bootcss.com/。下面模仿ejs的官方实例：
实例
数据
user:{name:"木人子韦"}
模板
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
渲染后的代码
<h2>木人子韦</h2>
3.页面布局
在Express 3.x中不再使用layout.ejs进行页面布局，转而使用include来替代。
include的简单使用方法如下：
index.ejs
<%- include top%> murenziwei <%- include bottom%>
top.ejs
I am top.ejs
bottom.ejs
I am bottom.ejs
最终，index.ejs会显示
I am top.ejs murenziwei I am bottom.ejs
在1.1.3节中，我们学习了模板引擎的相关知识。
原文地址：https://www.cnblogs.com/murenziwei/p/10159590.html