노드의 템플릿 엔진 이해(시작하기)
- 青灯夜游앞으로
- 2020-10-30 17:38:312067검색
추천 튜토리얼: node js tutorial
이 글에서는 Node.js 및 Express와 함께 Handlebars 템플릿 엔진을 사용하는 방법을 소개합니다. 또한 템플릿 엔진이 무엇인지, 핸들바를 사용하여 SSR(서버 측 렌더링) 웹 애플리케이션을 구축하는 방법을 소개합니다. 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添加如下内容：
<h1>Hello World from Handlebars</h1>
在 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/
Express.js 프레임워크를 사용하여 핸들바를 구성하는 방법과 내장된 헬퍼를 사용하여 동적 페이지를 만드는 방법에 대해서도 설명합니다. 마지막으로 필요한 경우 사용자 정의 도우미를 개발하는 방법을 살펴보겠습니다.
템플릿 엔진이란
 "160405046618227노드의 템플릿 엔진 이해(시작하기)")
1990년대 인터넷이 등장했을 당시에는 주로 연구 논문 출판 등 과학적인 목적과 대학과 과학자 간의 소통 채널로 사용되었습니다. 당시 대부분의 웹페이지는 정적이었습니다. 정적 웹 페이지는 모든 사용자에게 동일하며 모든 사용자에 대해 변경되지 않습니다. 페이지에서 무엇이든 변경하려면 수동으로 수행해야 합니다. 🎜현대 사회에서는 사물이 더욱 상호 작용적이고 각 사용자에 맞게 맞춤화됩니다. 오늘날 거의 모든 사람이 인터넷에 접속할 수 있습니다. 오늘날 대부분의 웹 애플리케이션은 동적입니다. 예를 들어, 일부 쇼핑 웹사이트에서는 다양한 사용자의 로그인 인터페이스가 다르게 표시되어 소위 수천 명의 사람들이 서로 다른 견해를 가지고 있습니다. 페이지는 모든 사람에게 동일한 템플릿을 따르지만(예: 사용자 이름이 포함된 연속 게시물) 콘텐츠는 다릅니다. 🎜🎜템플릿 엔진의 작업 콘텐츠: 표시 콘텐츠 템플릿을 정의한 다음 현재 사용자와 데이터베이스에 대한 쿼리를 기반으로 수신된 콘텐츠로 템플릿을 채웁니다. 🎜🎜백엔드와 프런트엔드 모두에서 템플릿 엔진을 사용할 수 있습니다. 백엔드에서 템플릿 엔진을 사용하여 HTML을 생성하는 경우 이 방법을 서버 측 렌더링(SSR)이라고 합니다. 🎜핸들바
🎜핸들바는 백엔드 템플릿과 프런트엔드 템플릿 모두에서 널리 사용됩니다. 예를 들어, 널리 사용되는 프런트엔드 프레임워크 Ember는 템플릿 엔진으로Handlebars를 사용합니다. 🎜🎜Handlebars는 주로 단순성과 최소한의 템플릿에 중점을 둔 Mustache 템플릿 언어의 확장입니다. 🎜Node.js에서 핸들바 사용
🎜먼저 빈 폴더를 만든 다음 터미널을 열고npm init -y를 실행하여 기본 구성으로 빈 노드를 만듭니다. js 프로젝트. 🎜🎜시작하기 전에 필수 Node.js 라이브러리를 설치해야 합니다. 다음 명령을 실행하여 express 및 express-handlebars 모듈을 설치합니다. 🎜🎜npm install --save express express-handlebars🎜🎜참고: 서버 측에서 Handlebars를 사용할 때 Handlebars를 웹 프레임워크와 통합하는 express-handlebars와 같은 도우미 모듈을 사용할 수 있습니다. 이 글에서는 주로 템플릿 구문에 중점을 두기 때문에 express-handlebars를 사용합니다. 하지만 템플릿 컴파일과 렌더링을 직접 처리하는 경우 컴파일 API 참조에 해당하는 문서도 읽어야 합니다. . 🎜🎜그런 다음 기본 Handlebars 디렉터리 구조를 다시 만듭니다. views 폴더에는 모든 핸들바 손 템플릿이 포함되어 있습니다. 🎜<nav> <a>Book Face</a> </nav> <p> </p><p> </p><p> </p><p> <img alt="노드의 템플릿 엔진 이해(시작하기)" > </p><p> </p><h5>此文章由 前端小智 发布</h5>
- 期待你们的留言/li>
- 期待你们的留言
views 폴더 내의 layouts 폴더에는 레이아웃 또는 템플릿 래퍼가 포함됩니다. 이러한 레이아웃에는 템플릿 간에 공유되는 HTML 구조, 스타일시트 및 스크립트가 포함됩니다. 🎜🎜main.hbs 파일은 기본 레이아웃이고 home.hbs 파일은 우리가 빌드하려는 샘플 Handlebars 템플릿입니다. 🎜🎜이 예에서는 간단하게 유지하기 위해 스크립트를 사용합니다. 먼저 app.js 파일에서 필수 라이브러리를 가져옵니다. 🎜app.get('/', function (req, res) {
res.render('home', {
post: {
author: '小智',
image: 'https://picsum.photos/500/500',
comments: []
}
});
});🎜 그런 다음 Express 앱을 만듭니다 🎜<nav>
<a>Book Face</a>
</nav>
<p>
</p><p>
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
- 期待你们的留言/li>
- 期待你们的留言
express-handlebars를 뷰로 구성할 수 있습니다. 엔진: 🎜<nav>
<a>Book Face</a>
</nav>
<p>
</p><p>
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
{{#if post.comments}}
- 期待你们的留言
.handlebars입니다. 하지만 여기 설정에서는 길이가 더 짧기 때문에 extname 플래그를 통해 .hbs로 변경했습니다. 🎜🎜다음으로 Bootstrap 스크립트와 스타일을 main.hbs 레이아웃에 추가하세요. 🎜🎜다음 콘텐츠를 home.hb에 추가하세요. 🎜 app.get('/', function (req, res) {
res.render('home', {
post: {
author: '小智',
image: 'https://picsum.photos/500/500',
comments: [
'前端小智终身学习者',
'前端小智持续分享者',
'虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
]
}
});
});🎜In app.js에 해당 라우팅 구성을 추가합니다: 🎜<nav>
<a>Book Face</a>
</nav>
<p>
</p><p>
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
{{#if post.comments}}
-
{{#each post.comments}}
- {{this}} {{/each}}
- 期待你们的留言
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: []
}
]
});
});🎜그래서 node app.js를 실행할 수 있습니다. 콘솔에서 애플리케이션을 시작합니다. 🎜🎜하지만 nodemon과 같은 도구를 사용하도록 선택할 수도 있습니다. nodemon을 사용하면 코드를 변경할 때마다 서버를 다시 시작할 필요가 없습니다. nodemon은 자동으로 서버를 새로 고칩니다. 🎜🎜디스크에 저장: 🎜<p>
</p><p>
{{#each posts}}
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
{{#if this.comments}}
-
{{#each this.comments}}
- {{this}} {{/each}}
- 期待你们的留言
http://localhost:3000/ 열기: 🎜🎜🎜🎜Handlebars 更多功能
为了展示一些Handlebars功能，我们将构建一个社交媒体类的网站。 这里我们用一个简单的数组来模拟数据库。
将home.hbs内容更新成如下：
<nav> <a>Book Face</a> </nav> <p> </p><p> </p><p> </p><p> <img alt="노드의 템플릿 엔진 이해(시작하기)" > </p><p> </p><h5>此文章由 前端小智 发布</h5>
- 期待你们的留言/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}}来引用这些值：
<nav>
<a>Book Face</a>
</nav>
<p>
</p><p>
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
- 期待你们的留言/li>
- 期待你们的留言
效果如下：
 "160405048058170노드의 템플릿 엔진 이해(시작하기)")
使用条件
由于这里需要一些逻辑判断，即 comments 没数据不显示，我们看看如何在Handlebars 模板中使用条件：
<nav>
<a>Book Face</a>
</nav>
<p>
</p><p>
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
{{#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循环遍历它们：
<nav>
<a>Book Face</a>
</nav>
<p>
</p><p>
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
{{#if post.comments}}
-
{{#each post.comments}}
- {{this}} {{/each}}
- 期待你们的留言
在#each循环中，可以使用this来引用当前迭代中的元素。在我们的示例中，它引用了一个随后被渲染的字符串
 "160405049272339노드의 템플릿 엔진 이해(시작하기)")
如果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：
<p>
</p><p>
{{#each posts}}
</p><p>
</p><p>
<img alt="노드의 템플릿 엔진 이해(시작하기)" >
</p><p>
</p><h5>此文章由 {{post.author}} 发布</h5>
{{#if this.comments}}
-
{{#each this.comments}}
- {{this}} {{/each}}
- 期待你们的留言
总结
在本文中，我们介绍了Handlebars的基础知识，Handlebars 是Node.js 和前端JavaScript 的模板引擎。 使用 Handlebars，我们可以创建在服务器端或客户端渲染的动态网页。 使用 Handlebars 的条件，循环，局部和自定义帮助器功能，我们的网页将不仅仅是静态HTML。
原文地址：https://stackabuse.com/guide-to-handlebars-engine-for-node/
作者：Janith Kasun
译者：前端小智
更多编程相关知识，请访问：编程入门！！
위 내용은 노드의 템플릿 엔진 이해(시작하기)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!