ejs模板引擎
一、简介
相比于jade模板引擎，ejs对原HTML语言就未作出结构上的改变，只不过在其交互数据方面做出了些许修改，相比于jade更加简单易用。因此其学习成本是很低的。
二、安装
如果使用express脚手架创建项目,项目默认中已经包含了ejs模板引擎<br />如果不是采用express创建的项目,或者项目中没有,可以使用以下命令安装
cnpm install ejs --save
二、基本使用
我们在express项目中简单使用ejs模板引擎:
movies.ejs文件
注意后缀名为.ejs,是ejs模板引擎规定的文件格式,其中使用ejs模板语法渲染为Html文件
<!DOCTYPE html>
<html>
<head>
<title>电影列表</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>电影列表</h1>
<ul>
<!--<% %> 是编写javascript代码的ejs模板引擎语法 -->
<% movies.forEach(function(item){ %>
<li>
<h4>电影名称:</h4>
<p><%= item.name %></p>
<h4>简介:</h4>
<p><%= item.brief %></p>
<h4>导演:</h4>
<p><%= item.author %></p>
</li>
<% }); %>
</ul>
</body>
</html>
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 标签）
- <%- 输出非转义的数据到模板
- <%# 注释标签，不执行、不输出内容
- <%% 输出字符串 '<%'
- %> 一般结束标签
- -%> 删除紧随其后的换行符
- _%> 将结束标签后面的空格符删除
更多使用方法浏览官方文档
