场景
什么是模板引擎
模板引擎( Template Engine)是一个从页面模板根据一定的规则生成HTML的工具。它的发韧可以追溯到1996年PHP 2.0的诞生。PHP原本是Personal Home Page Tools(个人主页工具)的简称，用于取代Perl和CGI的组合，其功能是让代码嵌人在HTML中执行，以产生动态的页面，因此PHP堪称是最早的模板引擎的雏形。随后的ASP, JSP都沿用了这个模式，即建立一个HTML页面模板，插人可执行的代码，运行时动态生成HTML。
基于JavaScript的模板引擎有许多种实现，我们推荐使用ejs(Embedded JavaScript)，因为它十分简单，而且与Express集成良好。由于它是标准JavaScript实现的，因此它不仅可以运行在服务器端，还可以运行在浏览器中。我们这一章的示例是在服务器端运行ejs,这样减少了对浏览器的依赖，而且更符合传统架构的习惯。
ejs官网：
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
新建项目
在前端项目IDE中，这里是Webstorm，新建空项目，然后在此目录下打开终端。
express -e microBlog后面跟的是项目名，会使用ejs引擎去生成项目。
然后会生成项目目录，进入到项目中
cd microBlog安装项目依赖
npm install或者
cnpm install
启动项目的命令不再是node app.js，而是
npm start
然后打开浏览器输入：
localhost:3000
项目就启动成功了。
使用模板引擎
首先在app.js中设置要使用的模板引擎和模板引擎的位置
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');在使用ejs作为模板引擎后在app.js中已经添加了这些代码。
在app.js中已经引入了index模块
var indexRouter = require('./routes/index');
app.use('/', indexRouter);来到routes下index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: '公众号:霸道的程序猿' });
});
module.exports = router;通过
res.render('index', { title: '公众号:霸道的程序猿' });就能调用名字为index.ejs的模板引擎，并且向其传递参数，参数名为title,参数值为’公众号:霸道的程序猿’
来到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>就可以通过
<%= title %>调用传递的参数。
重启项目并重新访问
片段视图
Express的视图系统还支持片段视图，就是一个页面的片段，通常是重复的内容，用于迭代显示。
在app.js中添加一个路由
app.get('/list',function (req,res) {
res.render('list',{
title:'List',
items:[['公','众','号'],['霸','道','的','程','序','猿'],['编','程','教','程','与','资','源'],['免','费','推','送']]
});
});此路由向名字为list.ejs的模板引擎传递一个对象，对象有两个属性，其中第二个属性是一个二维数组。
然后在list.ejs中获取对象的第二个属性的值。
在views下新建list.ejs
<ul>
<% items.forEach(function(item){ %>
<%- include('./listitem', {item: item}); %>
<% }); %>
</ul>这里使用的是ejs的循环的语法，其中items就是上面传递过来的参数。
<%-代表输出非转义的数据到模板，其它标签含义还有
这里为了演示还使用了include用来包含另一个ejs。
通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename’ 参数。) 例如，如果存在 “./views/users.ejs” 和 “./views/user/show.ejs” 两个模板文件，你可以通过 <%- include(‘user/show’); %> 代码包含后者。
你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。
这里引入了在同级目录下的listitem.ejs模板引擎文件，并且向其传递参数item
在views下新建文件listitem.ejs
<%for(var i=0;i<item.length;i++) { %>
<li><%=item[i] %></li> <%}%>然后启动项目，访问
localhost:3000/list
示例代码下载
https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/12980008
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136520.html
