在上一篇内容中已经使用了pug模板，那么本篇就来了解一下ejs模板在Express框架中的集成使用，ejs模板也是常用的模板引擎，支持在标签内直接编写javascript代码，通过javascript代码就能够生成HTML页面的，通过本期对ejs模板的学习可以与之前讲的pug模板进行一个比较，两者均有自身的优劣，下面就开始进入正题：
Express框架指定模板
在上一篇内容为了讲述，可以知道通过express命令安装项目环境可以在views文件下可以看到jade的模板文件，jade是pug模板的前身，那么在下次进行express命令创建项目环境就可以通过指定使用哪种模板，在操作之前请先确保是否已经全局安装了express :
(如若未安装可以翻阅先前的篇目，有相关express框架的全局以及局部的创建)；
express --version
通过express命令指定模板安装(ejs)：
express --view=ejs ejsPro
可以看一下 app.js 配置文件，查看相关视图引擎的设置：
app.set('views'，path.join(__dirname,'views')) 设置视图模板文件的路径； app.set('view engine'，'ejs') 设置视图模板的默认后缀名为ejs，无需每次都输入文件的ejs后缀名；
下面来一个简单的案例来了解一下ejs模板的使用：
1. 准备渲染在ejs模板上的json数据：(photo.json)
[
{
"id":1,
"sname":"百度",
"imgSrc":"https://www.baidu.com/img/flexible/logo/pc/result.png",
"skip":"http://www.baidu.com"
},
{
"id":2,
"sname":"搜狗",
"imgSrc":"https://upd10.sogoucdn.com/static/sogou/images/logo.png?v=1",
"skip":"https://123.sogou.com/"
},
{
"id":3,
"sname":"360",
"imgSrc":"https://p3.ssl.qhimg.com/t011e94f0b9ed8e66b0.png",
"skip":"https://www.360.cn/"
}
]2. 路由文件 routes/index.js :
通过fs模块去读取模拟的photo.json文件数据，将获得的数据转为json对象，然后将数据传给ejs模板；
var express = require('express');
var router = express.Router();
var fs = require('fs');
var path = require('path');
/* GET home page. */
router.get('/', function(req,res,next) {
res.redirect('/index');
});
router.get('/index',function(req,res,next){
let result = JSON.parse(fs.readFileSync(path.join(__dirname,'../public/photo.json')));
// 数据传到ejs模板
res.render('index',{data:result});
})
module.exports = router;
3. 编写ejs模板，将传过来的json数据进行渲染；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../stylesheets/index.css">
</head>
<body>
<!-- <ul>
<%data.forEach(function(item){%>
<li>
<img src="<%=item.imgSrc%>"/>
<p>
<a href="<%=item.skip%>">
<%=item.sname%>
</a>
</p>
</li>
<%})%>
</ul> -->
<ul>
<% for(var i in data){ %>
<li>
<img src="<%=data[i].imgSrc%>">
<p>
<a href="<%=data[i].skip%>">
<%=data[i].sname%>
</a>
</p>
</li>
<% } %>
</ul>
</body>
</html>4. 测试运行：
通过命令 npm start 先将项目跑起来，通过浏览器去请求http://127.0.0.1:3000/index
以上就是使用ejs模板，感觉与pug模板如何？通过以上对ejs模板的了解以及上一篇对pug模板的讲解，这两种模板引擎在Express框架中是比较常用到的，对这两个模板引擎如果要进一部的深入了解可以看相关的文档内容，ejs模板相对于pug模板来说对于初学以及了解html相关知识的是一个很好的过渡，反观pug模板，虽然学习成本要相对较高一些，但pug的模板比较简介不像ejs较复杂些，具体取决于读者自身的能力，好了本期的内容就到此结束了，感谢大家的支持，谢谢大家！
补充：ejs标签含义：
| 标签 | 含义 |
| <% | 脚本标签，用于流程控制，无输出 |
| <%_ | 删除其前面的空格符 |
| <%= | 输出数据到模板，输入的是转义的HTML标签 |
| <%- | 输出非转义的数据到模板 |
| <%# | 注释标签，不执行，不输出内容 |
| <%% | 输出字符串 "<%" |
| %> | 一般结束标签 |
| -%> | 删除紧随其后的换行符 |
| _%> | 将结束标签后面的空格符删除 |
具体内容可以查看ejs文档：EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档
