Node.js 系列 - 使用 EJS 模板引擎
发布网友
发布时间：2024-09-17 07:13
共1个回答
热心网友
时间：2024-09-29 18:07
在说什么是「模板引擎」之前，请先思考一个问题：我们之前响应给客户端的都是静态 HTML 页面，也就是内容都是写死的。但平时我们看到的网页大多内容都是变动的，根据数据的不同内容也随之改变。很明显不能靠人力去实时更改 HTML 文件。那么该怎么让 HTML 页面去动态改变内容呢？
你应该能想到在前端用 JavaScript 代码去根据数据动态生成页面内容。这的确是个好办法，但也有两个明显缺陷：因为浏览器先加载了一个内容不完全的页面，然后用 JavaScript 获取数据渲染页面内容。这样的话，当搜索引擎想抓取页面解析 HTML 内容的时候，JavaScript 代码还未被调用，页面内容还没被生成。这会影响到 SEO。页面在刚刚加载之后，用户还要等一个 JavaScript 代码执行时间，一个数据请求时间，一个 DOM 渲染时间，这增加的等待时间，可能会让用户体验打折扣。
「模板引擎」让表现层（HTML 文档）和业务数据分离。通过特定的语法，来动态地用数据渲染出 HTML 文档。
通过使用模板引擎就可以解决刚刚提到的问题。HTML 文档在服务器用模板引擎根据数据动态地渲染好。然后直接将渲染完整的页面响应给客户端。浏览器加载完页面内容可以立即展示，也可以减少显示页面所花的时间。
在这一篇里，我要介绍的是「EJS 模板引擎」它是 "Embedded JavaScript" 的缩写，通过在 HTML 文件内使用 JavaScript 代码语法来进行 HTML 模板渲染。Node.js 支持模板引擎有非常多，之所以选择讲 EJS，是因为个人觉得它上手最快，可以在不破坏 HTML 文档结构的情况下，直接在标签内书写 JavaScript 代码。对于前端开发人员来说学习成本很低。
简单来说，EJS 用起来非常简单，你只要像之前写 HTML 代码一样去写就好了。只要最后文件后缀名改成.ejs 那这就是一个 EJS 模板文件了。在模板中，`` 括起来的内容会作为 JavaScript 代码来编译，`` 将括起来的变量中的数据渲染到模板。``，变量值若包含 '', '&' 等字符会被转义。``，变量值是什么就输出什么。
当然除了上面讲的标签之外还有其他的，但这里我就不多做介绍了，大家可以自行查阅 文档。
让我们再来看另一个例子：如果我传入变量state = 'danger'，页面应该如下图。
在 Node.js 中渲染页面，首先，还是要安装 ejs 模块：之后我们根据数据和模板来渲染页面。ejs 模块提供多种方法实现，但这里我们先只介绍 `ejs.renderFile` 函数。前面的第一个 EJS 模板例子在服务器的调用代码为：
有很多时候一个网站的不同页面里有一些部分是相同的，比如下面这些例子：这些内容在网站中的不同页面里重复出现。如果在每一个 HTML 文件里都重新写一遍，很明显是低效率地 "笨" 行为。而且如果日后需要更改内容，你总不能一个文件一个文件地去改吧。
我们可以将这些通用的组件提炼出来作为 "模板片段"。
在 EJS 模板中，通过 `include` 指令可以将其他的模板片段引入到当前模板。
例如，如果我有 "./index.ejs" 和 "./header.ejs" 两个模板文件，我可以通过 `` 代码让 header.ejs 被 index.ejs 引入。
大多数情况下，我们需要使用能够输出原始内容的标签 `<%-` 在 include 指令上，避免对输出的 HTML 代码做转义处理。
现在来让我们看一个实例。假如我要做一个个人介绍网页，它包含：关于我，项目介绍，个人博客，三个页面。每个页面都包含一个代码相同的header 元素：那么我们就可以把这段代码提取出来，单独作为一个模板片段，取名 common-header.ejs。之后在各个页面中引入：为了管理方便，我把所有的 EJS 模板放在了 views 目录，把模板片段放在了 views 目录下的 templates 目录：HTTP 服务器路由代码如下：服务器运行起来，在浏览器里访问网站，效果如下：在每个页面上，common-header.ejs 模板片段都被引入了。代码的复用性，简洁性都得到了提高。好啦，今天的分享就告一段落啦。在下一篇，我会介绍如何使用 MongoDB 数据库。
