~ Express 模板引擎

模板引擎，是一个将页面模板和要显示的数据结合起来，生成 HTML 页面的工具。

可以这么理解，如果说 Express 中的路由控制方法是 MVC 中的控制器的话，那么模板引擎就是 MVC 中的视图。

EJS

「基本用法」EJS 是一种简洁、高效的模板语言，其语法结构，与 JSP 相似。

~~它可以配合 express 使用，在众多 Node.js 模板引擎中，相对较为简单~~；

也可以，把它看作是一个 JavaScript 库，直接在浏览器运行环境或 Node.js 运行环境中使用；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="div1"></div>
<script src="ejs.min.js"></script>
<script>
    var html = ejs.render('<%=123 %>','');
    document.getElementById('div1').innerHTML = html;
</script>
</body>
</html>

[1] 常用方法

ejs.compile(str,[option]) 编译字符串，得到模板函数

str 需要解析的字符串模板

option 配置选项
var template = ejs.compile('<%=123 %>');
var result = template();
console.log(result);//123
ejs.render(str,data,[option]) 直接渲染字符串，并生成 HTML

str 需要解析的字符串模板

data 数据

option 配置选项
var result = ejs.render('<%=123 %>');
console.log(result);//123

两个函数包括的配置选项参数 options 如下（了解）：

cache   缓存编译后的函数(ejs.compile(..) ,需要 filename参数作为缓存的key
filename   用于缓存的key，和include
context   函数的执行上下文
compileDebug   输出compile的信息来跟踪调试
client   返回编译后的函数
delimiter <% .. %>   指这里的%
debug   输出ejs.compile()得到函数的函数体
strict   ejs.compile()返回的函数是否执行在严格模式
_with   是否使用 with(){..} 来访问本地变量
localsName   保存本地变量的对象名，默认为locals
rmWhitespace   移除多余空格

[2] 常用标签

js

所有使用 <% %> 括起来的内容都会被编译成 Javascript，可以在模版文件中像写 js 一样 coding
//test.ejs
<% var a = 123 %>
<% console.log(a); %>

//test.js
var ejs = require('ejs');
var fs = require('fs');
var data = fs.readFileSync('test.ejs');
var result = ejs.render(data.toString());
console.log(result);   // 123

或者，可以写成这样：
var ejs = require('ejs');
var result = ejs.render('<% var a = 123 %><%console.log(a); %>');
console.log(result);   // 123
变量

用 <%=...%> 输出变量，变量若包含 '<' '>' '&'等字符会被转义
var ejs = require('ejs');
var result = ejs.render('<%=a%>',{a:'<div>123</div>'});
console.log(result);  // &lt;div&gt;123&lt;/div&gt;
如果不希望变量值的内容被转义，那就这么用 <%-... %> 输出变量
var ejs = require('ejs');
var result = ejs.render('<%-a%>',{a:'<div>123</div>'});
console.log(result);   // <div>123</div>
注释

用 <%# some comments %> 来注释，不执行不输出

include

include 可以引用绝对路径或相对路径的模板文件。需说明的是：使用相对路径时，必须设置'filename'选项
// test.ejs
<% var a = 123 %>
<% console.log(a); %>
// test.js
var ejs = require('ejs');var result = ejs.render('<% include test.ejs %>',{filename:'test.ejs'});
console.log(result);//123

在 express 中使用 EJS

// 安装 ejs
   npm install ejs --save

// 代码示例：项目实际中，可以搭配 Bigpipe 技术，优化 ejs 模板引擎的渲染过程

// app.js
const express = require('express');
const app = express();    // 引入并实例化 express

// ejs 基本设置
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views')); 
app.use(express.static(path.join(__dirname, 'views/static')));   // 静态资源

// 使用bigpipe技术
var bigpipe = require('express-middleware-bigpipe')
app.use(bigpipe({		           // use bigpipe
	basedir: __dirname + '/views/'     // 设定 bigpipe 的 pagelet 的 basdir 路径
}));

// 模板引擎路由处理
var viewsRouter = require('./views/api/v.js');
app.use('/v',viewsRouter);

// view/api/v.js

var express = require('express');
var router = express.Router();

// 模板引擎渲染（bigpipe技术）
const pipeRender = require('../render/render.js');
router.get('/',pipeRender.index);  // 首页

module.exports = router;

// views/render/render.js

let async = require('async');
var bigpipe = require('express-middleware-bigpipe')

// 配置对象
let exportObj = {
	index
};
module.exports = exportObj;

function index(req, res) {
	// 创建一个async任务
	let tasks = {
		query: cb => {
			cb(null, '测试内111容')
		}
	}
	// 让async自动控制任务执行
	async.auto(tasks, function(err, result) {
		res.bigpipe.render('index.ejs', {
				title:'biaotiiii',
		        info: result['query']
		})
		res.bigpipe.render('sec1.ejs', {
		        dddd: result['query']
		})
		 
		
	})
}

// views/index.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%= title %></title>
	<link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <h1 class="col"><%= info %></h1>
</body>
</html>