江苏龙网

  1. 主页 > 生活百科 > >

Node/JavaScript中的模板引擎

模板引擎

简介在本文中 ， 我们将介绍如何用Node.js和Express来使用 Handlebars 模板引擎 。还会介绍什么是模板引擎 ， 以及如何使用把 Handlebars 建服务器端渲染(SSR) web应用程序 。
我们还将讨论如何使用 Express.js 框架配置 Handlebars  ， 以及如何使用内置helpers创建动态页面 。最后 ， 我们将了解如何在需要时开发自定义helper。
什么是模板引擎早在上世纪90年代 ， 当互联网出现时 ， 它主要用于科学目的 ， 比如发表研究论文 ， 以及作为大学和科学家之间的沟通渠道 。那时的大多数网页都是静态的 。静态web页面对每个用户都是相同的 ， 不会根据每个用户而改变 ， 如果要更改页面上的任何内容 ， 都必须手动完成 。
在现代世界中 ， 事物的互动性更强 ， 并且为每个用户量身定制 。今天 ， 几乎每个人都能访问互联网 。现在的大多数web应用程序都是动态的 。例如 ， 在一些购物网站上 ， 不同用户登录的界面 ， 展示是不一样的 ， 所谓的 千人千面 。对于每个人来说 ， 页面将遵循相同的模板(即上面有用户名的连续发布) ， 但是内容将是不同的。
模板引擎的工作内容：定义展示内容模板 ， 然后根据当前用户和对数据库的查询 ， 用接收到的内容填充模板 。
我们可以在后端和前端使用模板引擎 。如果我们在后端使用模板引擎来生成html ， 这种方式叫做服务器端渲染(SSR)。
HandlebarsHandlebars 在后端和前端模板中都很流行 。例如 ， 流行的前端框架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.hbsviews文件夹内的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');});【Node/JavaScript中的模板引擎】


推荐阅读


上一篇：俄罗斯蓝猫属于 蓝猫和俄罗斯蓝猫的区别

下一篇：有贵气的女人 有贵气的人