从Express开始学习node.js(四)模板引擎
从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请求我们的服务,看一看效果:
细心的小伙伴可以发现,在使用模板引擎返回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
这两个主流框架中的某一个,让前后端的开发与维护都变得更加容易一些。
总结
在这一节,我们了解了什么是模板引擎、常用的模板引擎有哪些、以及如何使用模板引擎。最后,笔者聊了些自己对于模板引擎,以及前后端分离的想法。接下来我们会继续介绍接入数据库等知识,让我们一起来领略编程的乐趣吧!
我是何以庆余年,如果文章对你起到了帮助,希望可以点个赞,谢谢!
如有问题,欢迎在留言区一起讨论。
转载自:https://juejin.cn/post/7241760513205387319