express 之 ejs模板引擎

ejs模板引擎

官方文档

一、简介

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

二、安装

如果使用express脚手架创建项目,项目默认中已经包含了ejs模板引擎
如果不是采用express创建的项目,或者项目中没有,可以使用以下命令安装

cnpm install ejs --save

二、基本使用

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

movies.ejs文件

注意后缀名为.ejs,是ejs模板引擎规定的文件格式,其中使用ejs模板语法渲染为Html文件

  
    
    
  
  
    
电影列表
    

      
      <% movies.forEach(function(item){ %>
        

          
电影名称:
          
<%= item.name %>
          
简介:
          
<%= item.brief %>
          
导演:
          
<%= item.author %>
        
        
      <% }); %>
     
    
  

app.js文件：

var express = require('express');
var path = require('path');
var app = express();

// 设置模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

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

    //渲染数据并返回html.movies是我们定义的movies.ejs文件
  res.render('movies', { movies:movies });
});


module.exports = app;

访问http://localhost:3000/movies

1595753239175-5bfde17a-3bd1-4262-814f-290bc9f39b8c.png

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

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

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

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

四、ejs标签含义

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

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