当前位置: 首页 > 科技观察

入门:介绍Node-JavaScript中的模板引擎

时间:2023-03-15 19:31:50 科技观察

在本文中,我们将向您展示如何在Node.js和Express中使用Handlebars模板引擎。它还解释了模板引擎是什么以及如何使用Handlebars构建服务器端渲染(SSR)Web应用程序。我们还将讨论如何使用Express.js框架配置Handlebars,以及如何使用内置帮助程序创建动态页面。最后,我们将了解如何在需要时开发自定义助手。什么是模板引擎?早在90年代,当互联网出现时,它主要用于科学目的,例如发表研究论文,以及作为大学与科学家之间的沟通渠道。当时的大多数网页都是静态的。静态网页对每个用户都是一样的,不会因用户而异,如果您想更改页面上的任何内容,则必须手动完成。在现代世界中,事物更具交互性,并且为每个用户量身定制。今天,几乎每个人都可以访问Internet。今天的大多数Web应用程序都是动态的。例如,在某些购物网站上,不同的用户登录界面显示不同,即所谓的千面。对于每个人,该页面将遵循相同的模板(即带有用户名的动态帖子),但内容会有所不同。模板引擎的工作内容:定义显示内容模板,然后根据当前用户和对数据库的查询,将接收到的内容填充到模板中。我们可以在后端和前端使用模板引擎。如果我们使用模板引擎在后端生成HTML,这种方法称为服务器端渲染(SSR)。HandlebarsHandlebars在后端和前端模板中都很流行。例如,流行的前端框架Ember使用Handlebars作为其模板引擎。Handlebars是Mustache模板语言的扩展,主要关注简单性和最小模板。在Node.js中使用Handlebars首先,创建一个空文件夹,然后打开一个终端,运行npminit-y以使用默认配置创建一个空的Node.js项目。在开始之前,我们需要安装所需的Node.js库。通过运行安装express和express-handlebars模块:npminstall--saveexpressexpress-handlebars**注意:**在服务器端使用Handlebars时,您可以使用像express-handlebars这样的帮助模块,它将Handlebars与Web框架集成.在本文中,我们主要关注模板语法,这也是我们使用express-handlebars的原因,但是如果您自己处理模板编译和渲染,您还需要查看编译API参考对应的文档。然后,重新创建默认的Handlebars目录结构。views文件夹包含所有Handlebars手模板:├──app.js└──views├──home.hbs└──layouts└──main.hbsviews文件夹内的layouts文件夹将包含布局或模板包装器。这些布局将包含模板之间共享的HTML结构、样式表和脚本。main.hbs文件是主要布局,home.hbs文件是我们要构建的示例Handlebars模板。在我们的示例中,我们使用脚本来简化操作。首先,在app.js文件中导入所需的库:constexpress=require('express');constexphbs=require('快速车把');然后,创建一个Express应用程序constapp=express();现在,我们可以将express-handlebars配置为我们的视图引擎:constexpress=require('express');constexphbs=require('快速车把');constapp=快递();app.engine('hbs',exphbs({defaultLayout:'main',extname:'.hbs'}))app.set('viewengine','hbs');默认情况下,Handlebars模板的扩展名为.handlebars。但是在此处的设置中,我们通过extname标志将其更改为.hbs,因为它更短。接下来,在main.hbs布局中添加Bootstrap脚本和样式:在home.hb中添加如下内容:

HelloWorldfromHandlebars

在app.js中添加相应的路由配置:app.get('/',(req,res)=>{res.render('home');});然后,如果监听,添加端口号:app.listen(3000,()=>{console.log('Thewebserverhasstartedonport3000');});这将通过在控制台中运行nodeapp.js来启动应用程序。但我们也可以选择使用像nodemon这样的工具。使用nodemon,我们不需要每次改代码都重启服务器,nodemon会自动刷新服务器。盘吧:安装npmi-gnodemon后,运行:nodemonapp.js在浏览器中打开http://localhost:3000/:Handlebars更多功能为了演示一些Handlebars功能,我们将建立一个社交媒体网站。这里我们使用一个简单的数组来模拟数据库。更新home.hbs的内容如下:BookFace本文由前端小智发布期待您的留言/li>期待您的留言
上面我们添加了一个navbar和一个postdisplaycontentcard,运行效果如下:给模板传递参数现在,我们从页面本身开始删除路由传入的这些硬编码值,修改app.js中如下内容:app.get('/',function(req,res){res.render('home',{post:{author:'小智',image:'https://picsum.photos/500/500',评论:[]}});});帖子对象包含作者、图片和评论等字段我们可以在Handlebars模板中使用{{post}}来引用这些值:BookFace本文由{{post.author}}Publish赞助期待您的留言/li>期待大家的意见效果如下:使用条件因为一些逻辑判断这里需要,也就是没有数据的评论是不会显示的,我们看看在Handlebars模板中如何使用条件:BookFace本文由{{post.author}}{{#ifpost.comments}}发表{{else}}期待您的评论{{/if}}这里我们的注释是空的,表明我们期待您的意见#if是Handlebars的内置助手。如果if语句返回真,#if块内的块将被渲染。如果返回false、undefined、null、""、0或[],则不会渲染该块。#if只接受一个条件,不能使用JS比较语法(===)。如果您需要使用多个条件或其他语法,您可以在代码中创建一个变量并将其传递给模板。此外,您可以定义自己的助手,我们将在上一节中进行。使用循环由于帖子可以包含多个评论,我们需要一个循环来呈现它们。首先,让我们添加一些数据:app.get('/',function(req,res){res.render('home',{post:{author:'小智',image:'https://picsum.photos/500/500',comments:['前端小智终身学习者','前端小智持续分享者','虽然没有流量,但希望大家继续分享,帮助更多的初学者学者']}});});现在,在我们的模板中,使用#each循环遍历它们:BookFace本文由{{post.author}}{{#ifpost.comments}}{{#eachpost.comments}}{{this}}{{/each}}{{else}}期待您的留言{{/if}}/div>在#each循环中,可以使用this来引用当前迭代中的元素。在我们的示例中,它指的是随后呈现的字符串。如果posts是一个对象数组,您还可以访问该对象的任何属性。例如,如果你有一组人,你可以简单地使用this.name来访问姓名字段。现在,为我们的帖子添加多个数据: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遍历帖子:{{#eachposts}}这篇文章发表于{{post.author}}{{#ifthis.comments}}{{#eachthis.comments}}{{this}}{{/each}}{{else}}期待您的留言{{/if}}{{/each}}总结在本文中,我们介绍了Handlebars的基础知识,Handlebars是Node.js和前端JavaScript的模板引擎使用Handlebars,我们可以创建在服务器端或客户端呈现的动态网页。使用Handlebars的条件、循环、部分和自定义辅助函数,我们的网页将不仅仅是静态HTML。