简介

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

ejs 基本使用

这里我们使用如下配置文件：

我们啊可以通过下面的方式实现基本的 ejs 操作：
app.js 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const express=require("express");
const ejs=require("ejs");
const fs=require("fs");

var app=express();

//引用ejs
app.set('views',"public");	//设置视图的对应目录
app.set("view engine","ejs");		//设置默认的模板引擎
app.engine('ejs', ejs.__express);		//定义模板引擎

app.get("/",function(req,res){
	res.render("index.ejs",{title: "<h4>express</h4>"});
});

app.listen(8080);

ejs 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<% for(var i=0;i<10;i++){ %>
			<%= i %>
		<% } %>
		<!-- 获取变量 -->
		<div class="datas">
			<p>获取变量：</p>
			<%- title %>
			<%= title %>
		</div>
	</body>
</html>

这时我们会得到如下图的结果：

由此可以知道：

1
2
3
4
<% xxx %>：里面写入的是js语法，
<%= xxx %>：里面是服务端发送给ejs模板转义后的变量，输出为原html
<%- xxx %>：里面也是服务端发送给ejs模板后的变量，不过他会把html输出来
<%# 注释标签，不执行、不输出内容

同理 res.render()函数也是支持回调的：

1
2
3
res.render('user', { name: 'Tobi' }, function(err, html) {
  console.log(html);
});

这样我们即可将看到 heml 的内容。另外值得说明的是 ejs 模块也有 ejs.render()和 ejs.renderFile()方法，他在这里与 res.render()作用类似，如下：

1
2
3
4
5
ejs.render(str, data, options);

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

ejs 标签各种含义

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

以上就为 ejs 基本用法，往后对数据库操作就直接把 json 数据从服务器返送给模板引擎就行；