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

素颜马尾好姑娘i 2023-07-18 02:53 19阅读 0赞

# 一、简介 #

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

# 二、ejs基本使用 #

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

![format_png][]

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

app.js文件：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>const express=require(</code><code>"express"</code><code>);</code> <code>const ejs=require(</code><code>"ejs"</code><code>);</code> <code>const fs=require(</code><code>"fs"</code><code>);</code> &nbsp; <code>var</code>&nbsp;<code>app=express();</code> &nbsp; <code>//引用ejs</code> <code>app.set(</code><code>'views'</code><code>,</code><code>"public"</code><code>);&nbsp;&nbsp;</code><code>//设置视图的对应目录</code> <code>app.set(</code><code>"view engine"</code><code>,</code><code>"ejs"</code><code>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//设置默认的模板引擎</code> <code>app.engine(</code><code>'ejs'</code><code>, ejs.__express);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定义模板引擎</code> &nbsp; <code>app.get(</code><code>"/"</code><code>,</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.render(</code><code>"index.ejs"</code><code>,{title:&nbsp;</code><code>"&lt;h4&gt;express&lt;/h4&gt;"</code><code>});</code> <code>});</code> &nbsp; <code>app.listen(8080);</code> </td> 
 </tr> 
 </tbody> 
</table>

ejs文件：

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

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

![format_png 1][]

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>res.render(</code><code>'user'</code><code>, { name:&nbsp;</code><code>'Tobi'</code>&nbsp;<code>},&nbsp;</code><code>function</code><code>(err, html) { </code> <code>&nbsp;&nbsp;</code><code>console.log(html);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>ejs.render(str, data, options);</code> &nbsp; <code>ejs.renderFile(filename, data, options,&nbsp;</code><code>function</code><code>(err, str){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// str =&gt; 输出绘制后的 HTML</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

# 　　三、ejs标签各种含义 #

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

# 四、option的配置： #

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

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

[https_ejs.bootcss.com]: https://ejs.bootcss.com/
[format_png]: /images/20230528/9d0f96764c434d7cb28f748d4f885b30.png
[format_png 1]: /images/20230528/e526cb27acef407fae80ea7017b80f78.png