二十二、ejs模板在Express框架中的集成

在上一篇内容中已经使用了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 中文文档

二十二、ejs模板在Express框架中的集成

Express框架指定模板

猜你喜欢