第八篇:node模版引擎Handlebars及他的高级用法(动态参数)

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

📘 引言:

📘 介绍 Handlebars

📟 第一步:安装对应的模版引擎

📟 第二步:创建views文件夹,并且新建一个index.hbs文件和about.hbs文件

📟 第三步:在serve.js中配置和使用模版。 

 配置

使用 

📘 高级用法(动态参数)

📟 第一步:创建views文件夹,并且新建一个index.hbs文件

📟 第二步:在serve.js中配置和使用模版。

配置

使用 

📟 效果展示 

 📘 往期篇章推荐

⭐  写在最后


📘 引言:

当今互联网时代,Node.js 成为了最受欢迎的服务器端开发平台之一。作为一名小白,学习 Node.js 可能会让你感到有些困惑和陌生。但是,不用担心!本文将带领你进入 Node.js 的世界,帮助你理解它的基本概念和学习路径。

Node.js 是构建高性能、可扩展网络应用程序的运行时环境。它基于 Chrome V8 JavaScript 引擎,并采用事件驱动、非阻塞的 I/O 模型,使得它能够处理大量并发连接而不阻塞其他操作。这使得 Node.js 成为构建实时应用程序、聊天应用、API 服务等的理想选择。

本文旨在为初学者提供一个简单的入门指南,介绍 Node.js 的核心概念、安装和配置环境的步骤,以及使用常见的模块和工具。我们还将探索如何编写简单的服务器端代码、处理 HTTP 请求和响应、读写文件、操作数据库等常见任务。

无论你是想成为一名全职的 Node.js 开发者,还是只是对学习这门技术感兴趣,本文都将为你提供一个良好的起点。我们将尽量以简洁明了的方式解释概念,并提供实际的示例代码帮助你理解。

让我们一起开始这段令人兴奋的 Node.js 学习之旅吧!

📘 介绍 Handlebars

模版引擎可以简单的理解为升级版的 html 文档,express可以用模版引擎来渲染前端页面,模版引擎有很多种,包括jade,ejs,nunjunks,Handlebars等等,express对每一种都提供了很好的支持,只需要几行代码就可以使用。我们今天来学习下Handlebars(简写hbs)

📟 第一步:安装对应的模版引擎

yarn add hbs

📟 第二步:创建views文件夹,并且新建一个index.hbs文件和about.hbs文件

index.hbs:

<div><h1>express</h1><p>我是江城开朗的豌豆</p><a href="/about" target="_blank">关于我们</a>
</div>

about.hbs: 

<div><h1>关于我们</h1><p>学习node.js第二天</p>
</div>

📟 第三步:在serve.js中配置和使用模版。 

 配置
// 配置
// 使用express搭建服务
const express = require('express');
const app = express();
// 指定模版存放目录
app.set('views', 'view');// 指定模版引擎为Handlebars
app.set('view engine', 'hbs');
使用 
// 使用
app.get('/index', (req, res)=>{// 渲染index.hbs文件res.render('index');}
)app.get('/about', (req,res)=>{// 渲染about.hbs文件res.render('about');
})

📘 高级用法(动态参数

📟 第一步:创建views文件夹,并且新建一个index.hbs文件

index.hbs

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><h1>express</h1>姓名:{{ name }}<p>我是江城开朗的豌豆</p><img style="width: 200px;height:200px" src="{{ img }}" alt="头像"><p>{{ message }}</p><a href="/about" target="_salf">关于我们</a></div>
</body>
</html>

📟 第二步:在serve.js中配置和使用模版。

配置
// 使用express搭建服务
const express = require('express');
const app = express();
// 指定模版存放目录
app.set('views', 'view');// 指定模版引擎为Handlebars
app.set('view engine', 'hbs');
使用 
const img = 'https://7072-prod-4gapv4gl33a8a0ff-1305990777.tcb.qcloud.la/%E9%87%8D%E8%A6%81%E5%9B%BE%E7%89%87%E5%AD%98%E5%82%A8/%E8%B1%8C%E8%B1%86%E5%9C%88%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E7%89%87/2891704418680_.pic.jpg?sign=2f48aaf410e2c01ab12eb301f4885c82&t=1704780920'
app.get('/index', (req, res)=>{// 渲染index.hbs文件res.render('index',{name: '张三',message: 'Hello, World!',img,});}  
)

📟 效果展示 

 📘 往期篇章推荐

 📟 第一篇:node的背景及版本的检查

 📟 第二篇:新建node项目并运行

 📟 第三篇:搭建项目的两种代码格式

 📟 第四篇:怎么写express的路由(接口+请求) 

 📟 第五篇:express路由路径方式(字符串,字符串模式,和正则)

 📟 第六篇:express路由拆分(模块化) 

 📟 第七篇:node中间件详解 

⭐  写在最后


请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/250402.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac基于VMware安装CentOS

流程偏长&#xff0c;下一步根本点不完&#xff1b; 01 首先&#xff0c;明确下两款软件的版本信息&#xff1b; VMware是【VMware-Fusion-13.5.0】CentOS是【CentOS-7-x86_64-Minimal-1908】&#xff1b; VMware用来管理虚拟机系统&#xff0c;安装就不多说了&#xff0c;双…

match-case与if/elif/else(python)

if/elif/else语句应对一般场景&#xff0c;match-case主打复杂条件分支语句。 (笔记模板由python脚本于2024年01月28日 18:27:37创建&#xff0c;本篇笔记适合有一定编程基础&#xff0c;对python基础已比较扎实的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1…

npm ERR! reason: certificate has expired(淘宝镜像过期)

npm ERR! request to https://registry.npm.taobao.org/yauzl/-/yauzl-2.4.1.tgz failed, reason: certificate has expired 今天在执行npm install命令时&#xff0c;报错百度了下是淘宝证书过期原因 解决方法一 执行下面两个命令再进行npm install即可 npm cache clean --…

Kafka 记录

推荐资源 官网http://kafka.apache.org/Githubhttps://github.com/apache/kafka书籍《深入理解Kafka 核心设计与实践原理》 Kafka 架构 Kafka使用ZooKeeper作为其分布式协调框架&#xff0c;其动态扩容是通过ZooKeeper来实现的。Kafka使用Zookeeper保存broker的元数据和消费者信…

AI大语言模型学习笔记之三:协同深度学习的黑魔法 - GPU与Transformer模型

Transformer模型的崛起标志着人类在自然语言处理&#xff08;NLP&#xff09;和其他序列建模任务中取得了显著的突破性进展&#xff0c;而这一成就离不开GPU&#xff08;图形处理单元&#xff09;在深度学习中的高效率协同计算和处理。 Transformer模型是由Vaswani等人在2017年…

vio参数文件内相机imu参数的修改

imu标定工具 https://github.com/mintar/imu_utils网络上有各种IMU校准工具和校准教程&#xff0c;曾经花费了巨大精力跟着各种教程去跑校准。 然而&#xff0c;标定使用的数据都是在静止状态下录制的&#xff0c;我们在使用vio或者imu-cam联合标定的时候&#xff0c;imu确是处…

EF Core入门例子(以SqLite为数据库)

测试环境&#xff1a; visual studio 2017 .net core 2.1 具体步骤如下&#xff1a; 1 新增名称为EFCoreDemo的.net core控制台程序&#xff0c;版本选择.net core 2.1&#xff0c;项目不能放到带中文的目录下&#xff0c;不然到后面执行Add-Migration命令时会报如下的错误…

【数据结构】(二)线性表List

目录 1、基本概念 2、栈&#xff08;Stack&#xff09; 3、队列&#xff08;Queue&#xff09; 4、串&#xff08;String&#xff09; 1、基本概念 &#xff08;1&#xff09;线性表是零或多个数据元素的有限序列。 &#xff08;2&#xff09;数组长度指存储空间长度&…

android 网络拦截器统一处理请求参数和返回值加解密实现

前言 项目中遇到参数加密和返回结果加密的业务 这里写一下实现 一来加深记忆 二来为以后参考铺垫 需求 项目在开发中涉及到 登陆 发验证码 认证 等前期准备接口 这些接口需要单独处理 比如不加密 或者有其他的业务需求 剩下的是登陆成功以后的业务需求接口 针对入参和返回值…

软件功能测试如何确定测试需求?CMA、CNAS软件测试报告获取

软件功能测试是为了验证软件的功能是否按照设计要求正常工作的过程&#xff0c;可以确保软件的质量&#xff0c;提高用户体验&#xff0c;也是保证软件安全和可靠性的重要一环。我们需要从多个角度对软件的各个功能模块进行测试&#xff0c;确保每个功能都能正常运行&#xff0…

069:vue中EventBus的使用方法(图文示例)

第069个 查看专栏目录: VUE ------ element UI 本文章目录 示例背景示例效果图示例源代码父组件&#xff1a;子组件A&#xff1a;子组件B&#xff1a;eventbus/index.js&#xff1a; EventBus的基本使用方法&#xff1a; 示例背景 在Vue中&#xff0c;使用EventBus可以实现组件…

Python||五城P.M.2.5数据分析与可视化_使用华夫图分析各个城市的情况(上)

目录 五城P.M.2.5数据分析与可视化——北京市、上海市、广州市、沈阳市、成都市&#xff0c;使用华夫图分析各个城市的情况 1.北京市的空气质量 2.广州市的空气质量 【上海市和成都市空气质量情况详见下期】 五城P.M.2.5数据分析与可视化——北京市、上海市、广州市、沈阳市、成…

红日三打靶!!!

红日三&#xff0c;黑盒测试 环境搭建一.外网打点1.网段探测2.端口服务扫描3.目录扫描4.网站漏洞扫描5.汇总&#xff0c;找破绽6.登陆MySQL改密码 7.进入后台&#xff0c;找能写马的地方8.蚁剑连接9.disable_functions绕过1.蚁剑插件绕过2.bypass_disablefunc_via_LD_PRELOAD绕…

深兰科技陈海波出席CTDC2024第五届首席技术官领袖峰会:“民主化AI”的到来势如破竹

1月26日&#xff0c;CTDC 2024 第五届首席技术官领袖峰会暨出海创新峰会在上海举行。深兰科技创始人、董事长陈海波受邀出席了本届会议&#xff0c;并作为首个演讲嘉宾做了题为“前AGI时代的生产力革命范式”的行业分享。 作为国内顶级前瞻性技术峰会&#xff0c;CTDC首席技术官…

【数据结构 06】二叉树

一、原理 二叉树算法核心思维&#xff1a;递归 满二叉树&#xff1a;二叉树的层数为K&#xff0c;节点数为 完全二叉树&#xff1a;二叉树的层数为K&#xff0c;前K-1层是满的&#xff0c;第K层是连续的 满二叉树是完全二叉树的子集。 任意二叉树&#xff1a;若叶子节点的…

2024-01-07-AI 大模型全栈工程师 - 做自己的产品经理

摘要 2024-01-07 周日 杭州 阴 本节内容: a. 如何做好独立开发设计&#xff0c;实现财富自由&#xff1b; 课程内容 1. 独立开发者 英文 indie hacker&#xff0c;是指独立开发软件产品的人&#xff1b;一人承担一个项目产品的所有工作&#xff1b; 2. 创业机会 云计算设…

学习使用Flask模拟接口进行测试

前言 学习使用一个新工具&#xff0c;首先找一段代码学习一下&#xff0c;基本掌握用法&#xff0c;然后再考虑每一部分是做什么的 Flask的初始化 app Flask(__name__)&#xff1a;初始化&#xff0c;创建一个该类的实例&#xff0c;第一个参数是应用模块或者包的名称 app…

Java宝典-数据类型

目录 1.变量与常量2.Java中的数据类型3.整型3.1 字节型byte3.2 短整型short3.3 整型int3.4 长整型long 4.浮点型4.1 单精度浮点型float4.2 双精度浮点型double 5.字符型6.布尔型7.类型转换7.1 隐式类型转换7.2 显示类型转换(强制类型转换) 8.类型提升 大家好,我是你们的Vampire…

华为数通方向HCIP-DataCom H12-821题库(单选题:401-420)

第401题 R1的配置如图所示,此时在R1查看FIB表时,关于目的网段192.168.1.0/24的下跳是以下哪一项? A、10.0.23.3 B、10.0.12.2 C、10.0.23.2 D、10.0.12.1 【答案】A 【答案解析】 该题目考查的是路由的递归查询和 RIB 以及 FIB 的关系。在 RIB 中,静态路由写的是什么,下…

PPT录屏功能在哪?一键快速找到它!

在现代办公环境中&#xff0c;ppt的录屏功能日益受到关注&#xff0c;它不仅能帮助我们记录演示文稿的播放过程&#xff0c;还能将操作过程、游戏等内容完美录制下来。可是很多人不知道ppt录屏功能在哪&#xff0c;本文将为您介绍ppt录屏的打开方法&#xff0c;以帮助读者更好地…