Express全系列教程之(十一)：渲染ejs模板引擎

时间 2019-11-08

标签 express 系列教程十一渲染 ejs 模板引擎繁體版

原文原文链接

1、简介

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

2、ejs基本使用

这里咱们使用以下配置文件：css

咱们啊能够经过下面的方式实现基本的ejs操做：html

app.js文件：java

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文件：数据库

<!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>

　　这时咱们会获得以下图的结果：express

由此能够知道：
<% xxx %>：里面写入的是js语法，
<%= xxx %>：里面是服务端发送给ejs模板转义后的变量，输出为原html
<%- xxx %>：里面也是服务端发送给ejs模板后的变量，不过他会把html输出来json

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

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

　　这样咱们便可将看到heml的内容。另外值得说明的是ejs模块也有ejs.render()和ejs.renderFile()方法，他在这里与res.render()做用相似，以下：安全

ejs.render(str, data, options);

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

　　3、ejs标签各类含义

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

4、option的配置：

cache 		缓存编译后的函数，须要提供 filename
filename 	被 cache 参数用作键值，同时也用于 include 语句
context 	函数执行时的上下文环境
compileDebug 当为 false 时不编译调试语句
client 		返回独立的编译后的函数
delimiter 	放在角括号中的字符，用于标记标签的开与闭
debug 		将生成的函数体输出
_with 		是否使用 with() {} 结构。若是为 false，全部局部数据将存储在 locals 对象上。
localsName 	若是不使用 with ，localsName 将做为存储局部变量的对象的名称。默认名称是 locals
rmWhitespace 删除全部可安全删除的空白字符，包括开始与结尾处的空格。对于全部标签来讲，它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
escape 	为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中经过 .toString() 输出。(默认转义 XML)。

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