Node中的模板引擎是什么
这篇文章主要介绍了Node中的模板引擎是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
在六合等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供做网站、成都网站建设 网站设计制作按需规划网站,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站建设,外贸网站建设,六合网站建设费用合理。
在本文中,我们将介绍如何用Node.js
和Express
来使用 Handlebars 模板引擎。还会介绍什么是模板引擎,以及如何使用把 Handlebars 建服务器端渲染(SSR)web应用程序。
我们还将讨论如何使用 Express.js
框架配置 Handlebars ,以及如何使用内置helpers
创建动态页面。最后,我们将了解如何在需要时开发自定义helper
。
什么是模板引擎
早在上世纪90年代,当互联网出现时,它主要用于科学目的,比如发表研究论文,以及作为大学和科学家之间的沟通渠道。那时的大多数网页都是静态的。静态web页面对每个用户都是相同的,不会根据每个用户而改变,如果要更改页面上的任何内容,都必须手动完成。
在现代世界中,事物的互动性更强,并且为每个用户量身定制。今天,几乎每个人都能访问互联网。现在的大多数web应用程序都是动态的。例如,在一些购物网站上,不同用户登录的界面,展示是不一样的,所谓的 千人千面。对于每个人来说,页面将遵循相同的模板(即上面有用户名的连续发布),但是内容将是不同的。
模板引擎的工作内容:定义展示内容模板,然后根据当前用户和对数据库的查询,用接收到的内容填充模板。
我们可以在后端和前端使用模板引擎。如果我们在后端使用模板引擎来生成HTML,这种方式叫做服务器端渲染(SSR)
。
Handlebars
Handlebars在后端和前端模板中都很流行。例如,流行的前端框架Ember就是使用Handlebars
作为模板引擎。
Handlebars 是Mustache模板语言的扩展,Mustache 模板语言主要专注于简单性和最小的模板。
在 Node.js 中使用 Handlebars
首先,创建一个空文件夹,然后打开终端,然后运行npm init -y
以默认配置建一个空的 Node.js 项目。
开始之前,我们需要安装所需的Node.js库。 通过运行以下命令来安装express
和express-handlebars
模块:
npm install --save express express-handlebars
注意:在服务器端使用 Handlebars
时,你可能会使用一个像express-handlebars
这样的帮助模块,它将Handlebars
与web框架集成在一起。在本文中,我们主要关注模板语法,这也是我们使用express-handlebars
的原因,但是如果你自己处理模板编译和渲染,还需要看 compilation API reference 对应的文档说明。
然后,重新创建默认的 Handlebars 目录结构。 views
文件夹包含所有Handlebars 手模板:
├── app.js └── views ├── home.hbs └── layouts └── main.hbs
views
文件夹内的layouts
文件夹将包含布局或模板包装器。 这些布局将包含模板之间共享的HTML结构,样式表和脚本。
main.hbs
文件是主布局,home.hbs
文件是我们要构建的示例Handlebars
模板。
在我们的示例中,我们使用一个脚本来保持简单性。首先,在app.js
文件中导入所需的库:
const express = require('express'); const exphbs = require('express-handlebars');
然后,创建一个Express app
const app = express();
现在,我们可以配置express-handlebars
作为我们的视图引擎:
const express = require('express'); const exphbs = require('express-handlebars'); const app = express(); app.engine('hbs', exphbs({ defaultLayout: 'main', extname: '.hbs' })) app.set('view engine', 'hbs');
默认情况下,Handlebars 模板的扩展名是.handlebars
。 但是在这里的设置中,我们通过extname
标志将其更改为.hbs
,因为它更短。
接着,在main.hbs
布局添加Bootstrap
脚本和样式:
在home.hb
添加如下内容:
Hello World from Handlebars
在 app.js
中添加对应的路由配置:
app.get('/', (req, res) => { res.render('home'); });
然后,添加如果监听的端口号:
app.listen(3000, () => { console.log('The web server has started on port 3000'); });
这样就可以在控制台中运行node app.js
启动应用程序。
但是我们也可以选择使用诸如nodemon之类的工具。 使用nodemon
,我们在改代码时不需要每次都要重新启动服务器,nodemon
会自动刷新服务器。
盘它:
npm i -g nodemon
安装后,运行:
nodemon app.js
在浏览器中打开 http://localhost:3000/
:
Handlebars 更多功能
为了展示一些Handlebars
功能,我们将构建一个社交媒体类的网站。 这里我们用一个简单的数组来模拟数据库。
将home.hbs
内容更新成如下:
此文章由 前端小智 发布
- 期待你们的留言/li>
- 期待你们的留言
上面我们添加了一个 navbar
和一个帖子的展示内容 card
,运行效果如下:
向模板传递参数
现在,让我们从页面本身中删除这些硬编码的值,这些值由路由传递进来, 在 app.js
中修改如下内容 :
app.get('/', function (req, res) { res.render('home', { post: { author: '小智', image: 'https://picsum.photos/500/500', comments: [] } }); });
post 对象包含author
,image
和comments
等字段。 我们可以在 Handlebars模板使用{{post}}
来引用这些值:
此文章由 {{post.author}} 发布
- 期待你们的留言/li>
- 期待你们的留言
效果如下:
使用条件
由于这里需要一些逻辑判断,即 comments
没数据不显示,我们看看如何在Handlebars 模板中使用条件:
此文章由 {{post.author}} 发布
{{#if post.comments}}
- 期待你们的留言
这里我们的 comments 为空,所以显示了 期待你们的留言
。
#if
是把 Handlebars 的内置帮助器。 如果if
语句返回true
,则将渲染#if
块内部的块。 如果返回false
,undefined
,null
,""
,0
或[]
,则不会渲染该块。
#if
仅接受一个条件,并且不能使用 JS 比较语法(===
)。 如果需要使用多个条件或其他语法,则可以在代码中创建一个变量,然后将其传递给模板。 另外,你可以定义自己的 helper ,我们将在上一节中进行操作。
使用循环
由于帖子可以包含多个评论,因此我们需要一个循环渲染它们。 首先,我们先添加一些数据:
app.get('/', function (req, res) { res.render('home', { post: { author: '小智', image: 'https://picsum.photos/500/500', comments: [ '前端小智终身学习者', '前端小智持续分享者', '虽然没啥流量,但也希望你也能坚持分享下去,帮助更多的初学者' ] } }); });
现在,在我们的模板中,使用#each
循环遍历它们:
此文章由 {{post.author}} 发布
{{#if post.comments}}
-
{{#each post.comments}}
- {{this}} {{/each}}
- 期待你们的留言
在#each
循环中,可以使用this
来引用当前迭代中的元素。在我们的示例中,它引用了一个随后被渲染的字符串
如果posts
是一个对象数组,你也可以访问该对象的任何属性。例如,如果有一个人员数组,你可以简单地使用this.name
来访问name
字段。
现在,为我们的 posts
添加多个数据:
app.get('/', function (req, res) { res.render('home', { posts: [ { author: '小智', image: 'https://picsum.photos/500/500', comments: [ '前端小智终身学习者', '前端小智持续分享者', '虽然没啥流量,但也希望你也能坚持分享下去,帮助更多的初学者' ] }, { author: '前端大智', image: 'https://picsum.photos/500/500?2', comments: [] } ] }); });
然后,使用#each
来遍历 posts
:
{{#each posts}}
此文章由 {{post.author}} 发布
{{#if this.comments}}
-
{{#each this.comments}}
- {{this}} {{/each}}
- 期待你们的留言
感谢你能够认真阅读完这篇文章,希望小编分享Node中的模板引擎是什么内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
本文名称:Node中的模板引擎是什么
URL链接:http://myzitong.com/article/geopid.html