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

╰半橙微兮° 2023-01-07 10:15 365阅读 0赞

## 一、简介 ##

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

## 二、ejs基本使用 ##

这里我们使用如下配置文件：  
![在这里插入图片描述][20190503213554140.jpg]

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

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>

这时我们会得到如下图的结果：  
![在这里插入图片描述][20190504123650541.jpg]  
由此可以知道：  
<% xxx %>：里面写入的是js语法，  
<%= xxx %>：里面是服务端发送给ejs模板转义后的变量，输出为原html  
<%- xxx %>：里面也是服务端发送给ejs模板后的变量，不过他会把html输出来

同理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
    });

## 三、ejs标签各种含义 ##

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

## 四、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数据从服务器返送给模板引擎就行

[https_ejs.bootcss.com]: https://ejs.bootcss.com/
[20190503213554140.jpg]: /images/20221119/ad21c1ac469a4b6b8f3d4e3e7050291f.png
[20190504123650541.jpg]: /images/20221119/c158211da5f844b99b92e458734b144d.png