从Express开始学习node.js（四）模板引擎

站长

2023年07月24日 10:25 · 阅读数 14

从Express开始学习node.js（四）模板引擎

引言

在本专栏的上一篇文章从Express开始学习node.js（三）中间件中，我们学习了什么是中间件、编写一个简单的中间件、常用的中间件，以及如何处理错误。

接下来，我们将要学习模板引擎这一重要概念，继续充实我们的技术积累。

本篇文章作为node.js系列的第三章节，主要内容有：

什么是模板引擎
常用的模板引擎
如何使用模板引擎

注：本章节所有的内容，都需要node.js环境，请确保自己已安装node环境

一、模板引擎简介

在express官网中是这样定义模板引擎的：

模板引擎使用户能够在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送给客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易。

通俗来讲，模板引擎其实就是一个将数据注入到静态模板中的工具，将动态的数据与静态的页面组合，返回完整的HTML。即：Data + Template = HTML。

需要注意的是，模板引擎返回的是一个完整的HTML。

二、常用的模板引擎

express支持多种模板引擎，其中常用的有：

Pug（jade）
EJS
Mustache
...

Pug是Express官网推荐使用的模板引擎，曾用名“Jade”，优点是高性能、可以生成易于阅读和维护的HTML代码；缺点是语法比较特殊，需要一定的学习成本。

Mustache是一种轻量级的模板引擎，优点是语法简单易懂；缺点是功能相对较弱。

EJS是一种功能强大的模板引擎，优点是可以使用JavaScript代码来生成HTML代码；缺点是性能相对较差。

具体使用哪一种模板引擎，需要根据业务场景来做决定。

笔者个人觉得EJS在代码编写上更直观，更易于理解，可以让开发者更多的专注于数据处理，所以推荐使用EJS。

三、如何使用模板引擎

模板引擎的功能大同小异，都能够满足我们的正常需求，基于笔者的个人偏好，我们来介绍一下如何使用模板引擎EJS。

1、安装`EJS`

npm install ejs

2、编写模板

在根目录下创建一个名为views的文件夹，用来存放我们的模板文件：

mkdir views
cd views

在/views目录下，创建一个名为index.ejs的文件，用来保存一个名为index的ejs模板文件:

<!DOCTYPE html>
<html>
  <head><title><%= pageTitle %></title></head>
  <body>
    <h1><%= name %></h1>
  </body>
</html>

3、在Express中使用

首先，我们在根目录下的index.js中，将模板引擎设置为ejs：

//设置模板引擎为ejs
...
app.set('view engine', 'ejs');
...

然后将第2步创建的views文件夹作为模板文件存放目录：

//设置模板文件位置 => 项目根路径下views目录为模板文件存放目录
...
app.set('views', __dirname + '/views');
...

最后，我们在处理根目录的GET请求时，让服务器不再返回Hello World!，而是根据我们的模板引擎，返回一个标题为'Express Study'、内容为h1标签包裹的'Hello，I am ejs.'的html：

// 修改原来的'/'请求处理中间件
...
app.get('/', (req, res) => {
    // res.send('Hello World!')
    res.render('index', {
        name: 'Express Study',
        pageTitle: 'Hello，I am ejs.'
    })
})

...

我们用postman请求我们的服务，看一看效果：

从Express开始学习node.js（四）模板引擎

细心的小伙伴可以发现，在使用模板引擎返回HTML时，我们使用了res.render()方法，这个方法是专门用来处理返回HTML的。在Express官网上是这么定义的：Renders a 'view' and sends the rendered HTML string to the client.

关于res.render()、res.send()，还有之前在处理404错误、500错误时提到的res.status()，我们会在后面专门用一个章节来介绍这些res、req的API。

大家如果想要了解更多，可以访问express的官网API来查看学习。

四、个人想法

在笔者的实际工作中，其实并不会使用模板引擎来作为设计HTML的方式。在前后端分离的场景下，我们更多的是将设计HTML的工作放在前端来实现，后端专注于数据的处理与返回。

模板引擎更多地被应用在一些个人网站或者是TO B的内部网站上，如xxx管理平台，由于学习成本、维护成本，亦或是业务场景的需要，网站的使用者并不关注UI的样式，网站往往由一到两个人开发维护，既要写前端、又要写后端，这个时候采用模板引擎来作为解决方案，也无可厚非了。

不过，笔者还是建议大家尽量拥抱前后端分离，在有余力的情况下学习React或VUE这两个主流框架中的某一个，让前后端的开发与维护都变得更加容易一些。

总结

在这一节，我们了解了什么是模板引擎、常用的模板引擎有哪些、以及如何使用模板引擎。最后，笔者聊了些自己对于模板引擎，以及前后端分离的想法。接下来我们会继续介绍接入数据库等知识，让我们一起来领略编程的乐趣吧！

我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！

如有问题，欢迎在留言区一起讨论。

从Express开始学习node.js（四）模板引擎