https://ejs.bootcss.com/

一、简介

相比于jade模板引擎，ejs对原HTML语言就未作出结构上的改变，只不过在其交互数据方面做出了些许修改，相比于jade更加简单易用。因此其学习成本是很低的。

二、安装

如果使用express脚手架创建项目,项目默认中已经包含了ejs模板引擎
如果项目中默认未包含ejs,可以使用以下命令安装

  1. cnpm install ejs --save

二、基本使用

我们在express项目中简单使用ejs模板引擎:

movies.ejs文件
注意后缀名为.ejs,是ejs模板引擎规定的文件格式，该文件将渲染输出为一个Html发送给浏览器

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>电影列表</title>
  5.     <link rel='stylesheet' href='/stylesheets/style.css' />
  6.   </head>
  7.   <body>
  8.     <h1>电影列表</h1>
  9.     <ul>
  10.       <!--<% %> 是编写javascript代码的ejs模板引擎语法 -->
  11.       <% movies.forEach(function(item){ %>
  12.         <li>
  13.           <h4>电影名称:</h4>
  14.           <p><%= item.name %></p>
  15.           <h4>简介:</h4>
  16.           <p><%= item.brief %></p>
  17.           <h4>导演:</h4>
  18.           <p><%= item.author %></p>
  19.         </li>
  21.       <% }); %>
  23.     </ul>
  24.   </body>
  25. </html>

app.js文件：

  1. var express = require('express');
  2. var path = require('path');
  3. var app = express();
  5. // 设置模板引擎
  6. app.set('views', path.join(__dirname, 'views'));
  7. app.set('view engine', 'ejs');
  9. //定义一个路由,此处未使用express中的Router
  10. app.get('/movies', function(req, res, next) {
  11.   //定义需要渲染到HTML页面中的电影列表
  12.     let movies =  [{
  13.       name:'斗战胜佛之大圣之泪',
  14.       brief:'成为斗战胜佛的孙悟空竟被怨灵蛊惑，唐三藏遭遇灭顶之灾！危急关头，孙悟空揪出怨灵源头，却发现她竟是与自己有三百年缘分的天人界女神——“幸运星”！为了找出“幸运星”黑化的原因，拯救唐三藏，孙悟空踏上了一场回到过去之旅，却最终流下了一滴眼泪。大圣之泪，为何而流，为谁而流？',
  15.       author:'钟智行 Frankie Chung'
  16.     },{
  17.       name:'猎谎者',
  18.       brief:'三个月前，某市发生了一起恶性绑架杀人案。三个月后，凶手与被害人都死于车祸。初出茅庐的女警韩烨找到了案件的幸存者林超凡，向他求证案件发生的经过。但随着调查的深入，韩烨发现林超凡的很多证词都存在漏洞，再三逼问之下，林超凡无奈坦白了另一个版本的故事，但案件真相远没有这么简单，几乎每个人都在说谎，而故事也开始不断反转。',
  19.       author:'廉欣 Xin Lian'
  20.     },{
  21.       name:'天启大爆炸',
  22.       brief:'《天启大爆炸》以中国古代曾真实发生的神秘爆炸为原型，加以天马行空的巧妙构思，为观众解封至今困惑世人的隐秘真相。神秘机构“夜行司”追踪离奇谜团勇闯“无相城”，一场关乎百姓苍生命运博弈就此展开。',
  23.       author:'黄羿 Yi Huang / 曾黎'
  24.     }];
  26.     //渲染数据并返回html.movies是我们定义的movies.ejs文件
  27.   res.render('movies', { movies:movies });
  28. });
  31. module.exports = app;

访问http://localhost:3000/movies

image.png

res.render()函数也是支持回调的,这样可以在模板引擎中渲染完成html后可以返回渲染的内容

  1. res.render('movies', { movies:movies },function(err,html){
  2.     console.log(html)
  3.   });
  4. });

另外值得说明的是ejs模块也有ejs.render()和ejs.renderFile()方法，他在这里与res.render()作用类似

  1. ejs.render(str, data, options);
  2. ejs.renderFile(filename, data, options, function(err, str){
  3.    // str => 输出绘制后的 HTML
  4. });

四、ejs标签含义

  • <% ‘脚本’ 标签，用于流程控制，无输出。
  • <%_ 删除其前面的空格符
  • <%= 输出数据到模板（输出是转义 HTML 标签）
  • <%- 输出非转义的数据到模板
  • <%# 注释标签，不执行、不输出内容
  • <%% 输出字符串 ‘<%’
  • %> 一般结束标签
  • -%> 删除紧随其后的换行符
  • _%> 将结束标签后面的空格符删除

更多使用方法浏览官方文档