express js 中的车把模板
原文:https://www . geesforgeks . org/handlebar-templating-in-express js/
Handlebars.js 是一个模板引擎,类似于 node.js 中的 ejs 模块,但是功能更强大,使用更简单。它确保了最小的模板化,并且是一个无需逻辑的引擎,可以将视图和代码分开。它可以与 express 一起用作 hbs 模块,可通过 npm 获得。HandleBars 可用于从服务器端的数据向客户端呈现网页。
命令安装 hbs 模块:
npm i hbs
要在 express 中使用手柄,我们需要将 HTML 代码存储到源目录的“视图”文件夹中的. hbs 扩展中,因为 hbs 会在“视图”文件夹中查找页面。
我们在 index.js 文件中需要做的第一件事就是需要 hbs 模块
var express = require('express')
var hbs = require('hbs')
var app = express()
现在,我们需要更改默认的视图引擎。
app.set('view engine', 'hbs')
如果视图目录不理想,可以通过以下命令更改视图路径:
app.set('views', <pathname>)
现在让我们在视图目录中创建一个 demo.hbs 文件,包含以下内容:
<!DOCTYPE html>
<html>
<body>
<p>This is a Demo Page on localhost!</p>
</body>
</html>
现在,我们通过 express 将网页呈现给本地服务器。
app.get('/', (req, res)=>{
res.render('demo')
})
app.listen(3000)
现在,打开浏览器,在网址上输入 localhost:3000 ,在服务器上验证网页。
现在我们将看到如何将页面动态链接到服务器端数据。 在 index.js 中,我们声明了一个演示对象,实际上,该对象可以是请求体和/或数据库查询的结果。
var demo = {
name : 'Rohan',
age : 26
}
app.get('/', (req, res)=>{
res.render('dynamic', {demo : demo})
})
在这里,我们将演示对象作为演示发送到我们的 hbs 页面。我们可以检索视图文件夹中的 dynamic.hbs 中的信息。
<!DOCTYPE html>
<html>
<body>
<p>{{demo.name}} is {{demo.age}} years old.</p>
</body>
</html>
输出:
Rohan is 26 years old
给定多个值,我们可以遍历所有这些值,为每个元素执行相同的功能/显示。
举个例子,把下面的代码加到你的index.js
中,运行服务器,得到响应。
var projects = {
name : 'Rahul',
skills : ['Data Mining', 'BlockChain Dev', 'node.js']
}
app.get('/projects', (req, res)=>{
res.render('projects', {project : project});
})
外部视图/项目的位置。hbs 看起来像:
<!DOCTYPE html>
<html>
<body>
{{projects.name}} has the following skills : <br>
{{#each projects.skills}}
{{this}} <br>
{{/each}}
</body>
</html>
输出:
Rahul has the following skills :
Data Mining
BlockChain Dev
node.js
版权属于:月萌API www.moonapi.com,转载请注明出处