当前位置： 首页 > news >正文

第八篇：node模版引擎Handlebars及他的高级用法（动态参数）

news 2026/4/2 13:28:38

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

 🔥 个人专栏 :《 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

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

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

​

​

相关文章：

第八篇：node模版引擎Handlebars及他的高级用法（动态参数）

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 &#x1f4d8; 引言&#xff1a; &#x1f…...

编程日记 2024/2/3 2:36:34

css3 属性 backface-visibility 的实践应用

backface-visibility 是一个用于控制元素在面对屏幕不同方向时的可见性的CSS3特性。它有两个可能的值&#xff1a; visible&#xff1a;当元素不面向屏幕&#xff08;即背面朝向用户&#xff09;时&#xff0c;元素的内容是可以被看到的。hidden&#xff1a;当元素不面向屏幕…...

编程日记 2024/2/3 2:35:33

嵌入式学习第十七天

C语言小项目&#xff1a; 制作俄罗斯方块小游戏&#xff08;全部&#xff09; 主函数部分 #include <stdio.h> #include <unistd.h> #include <string.h> #include <signal.h> #include <stdlib.h> #include <time.h> #include "b…...

编程日记 2024/2/3 2:32:30

使用Python的Turtle模块简单绘制烟花效果

import turtle import random# 初始化屏幕 screen turtle.Screen() screen.bgcolor("black") screen.title("烟花模拟")# 创建一个Turtle来绘制烟花 firework turtle.Turtle() firework.hideturtle() firework.speed(0) # 设置绘图速度为最快# 绘制烟花…...

编程日记 2024/2/3 2:29:26

数学建模-退火算法和遗传算法

退火算法和遗传算法 一&#xff0e;退火算法 退火算法Matlab程序如下&#xff1a; [W]xlsread(D:100个目标经度纬度);>> x[W(:,1)];>> y[W(:,2)];>> w[x y];;d1[70, 40];>> w[d1;w;d1]ww*pi/180;%角度化成弧度dzeros(102);%距离矩阵初始化for i1:101…...

编程日记 2024/2/3 2:28:25

Qt开源版 vs 商业版 详细比较！！！！

简单整理Qt开源版与商业版有哪些差别&#xff0c;仅供参考。 简单对比 开源版商业版许可证大部分采用对商业使用不友好的LGPLv3具备商业许可证保护代码专有许可证相关大部分模块使用LGPLv3和部分模块使用GPL组成仅第三方开源组件使用Qt的其他许可证Qt模块功能支持支持技术支持…...

编程日记 2024/2/3 2:27:25

华为云CodeArts Snap荣获信通院优秀大模型案例及两项荣誉证书

2024年1月25日&#xff0c;中国人工智能产业发展联盟智能化软件工程工作组&#xff08;AI for Software Engineering&#xff0c;下文简称AI4SE&#xff09;在京召开首届“AI4SE创新巡航”活动。在活动上&#xff0c;华为云大模型辅助系统测试代码生成荣获“2023AI4SE银弹优秀案…...

编程日记 2024/2/3 2:25:23

小程序的应用、页面、组件生命周期（超全版）

小程序生命周期 应用的生命周期 onLaunch: 初始化小程序完成时触发&#xff0c;且全局只触发一次&#xff1b; onShow: 小程序初始化完成&#xff08;启动&#xff09;或从后台切换到前台显示时触发&#xff1b; onHide: 小程序从前台切换到后台隐藏时触发&#xff08;如切换…...

编程日记 2024/2/3 2:22:20

TCP四次握手

TCP 协议在关闭连接时&#xff0c;需要进行四次挥手的过程&#xff0c;主要是为了确保客户端和服务器都能正确地关闭连接。 # 执行流程 四次挥手的具体流程如下&#xff1a; 客户端发送 FIN 包&#xff1a;客户端发送一个 FIN 包&#xff0c;其中 FIN 标识位为 1&#xff0c…...

编程日记 2024/2/3 2:21:17

EBC金融英国CEO：高波动性周期下，如何寻找市场的稳定性？

利率主导的市场&#xff0c;将在2024年延续。目前&#xff0c;固收市场对于降息的定价&#xff0c;正通过利率传导至不同资产中。尽管市场迫切利用通胀去佐证降息&#xff0c;但各国央行仍囿于通胀目标的政策桎梏。政策和市场预期的博弈将继续牵动市场脉搏&#xff0c;引发价格…...

编程日记 2024/2/3 2:20:16

C++ Web 编程

什么是 CGI&#xff1f; 公共网关接口&#xff08;CGI&#xff09;&#xff0c;是一套标准&#xff0c;定义了信息是如何在 Web 服务器和客户端脚本之间进行交换的。CGI 规范目前是由 NCSA 维护的&#xff0c;NCSA 定义 CGI 如下&#xff1a;公共网关接口&#xff08;CGI&…...

编程日记 2024/2/3 2:18:14

docker笔记整理

Docker 安装 添加yum源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 安装docker yum -y install docker-ce docker-ce-cli containerd.io docker-compose-plugin 启动docker systemctl start docker 查看docker状态 s…...

编程日记 2024/2/3 2:11:09

什么是git，怎样下载安装？

简介&#xff1a; 应用场景&#xff1a; 应用场景&#xff1a;团队企业开发 作用&#xff1a; 安装&#xff1a; 1.网址&#xff1a;Git - Downloads 很卡很慢 2.可以选择镜像网站下载&#xff08;推荐&#xff09; CNPM Binaries Mirror...

编程日记 2024/2/3 2:06:03

Camille-学习笔记-测试流程和测试设计

## 测试用例学习路线 startmindmap * 测试用例 ** 黑盒测试方法论 *** 等价类 *** 边界值 *** 因果图 *** 判定表 *** 场景法 *** 基于模型的测试 ** 白盒测试方法论 ** 测试用例基础概念 ** 测试用例设计 ** 面试测试用例设计 ** 常用测试策略与测试手段 endmindmap **测试用…...

编程日记 2024/2/3 2:02:59

【Python笔记-设计模式】建造者模式

一、说明 又称生成器&#xff0c;是一种创建型设计模式&#xff0c;使其能够分步骤创建复杂对象。允许使用相同的创建代码生成不同类型和形式的对象。 (一) 解决问题 对象的创建问题&#xff1a;当一个对象的构建过程复杂&#xff0c;且部分构建过程相互独立时&#xff0c;可…...

编程日记 2024/2/3 2:00:58

【LVGL源码移植】

LVGL源码移植 ■ LVGL源码移植一&#xff1a;下载LVGL源码二&#xff1a;修改LVGL文件夹1: 将这5个文件&#xff0c;复制到一个新的文件夹2: 简化文件&#xff0c;减少内存消耗&#xff08;去除不必要的文件&#xff09;3: 为了规范化&#xff0c;我们将下列文件进行重命名 三&…...

编程日记 2024/2/3 1:58:55

双非本科准备秋招（14.2）—— 进程与线程

进程 进程是运行着的程序&#xff0c;是程序在操作系统的一次执行过程&#xff0c;进程是操作系统分配资源的基本单位。 启动一个java程序&#xff0c;操作系统就会创建一个java进程 进程也可以看作一个程序的实例&#xff0c;大部分程序可以运行多个实例进程&#xff0c;比如记…...

编程日记 2024/2/3 1:57:54

数据结构和算法笔记5：堆和优先队列

今天来讲一下堆&#xff0c;在网上看到一个很好的文章&#xff0c;不过它实现堆是用Golang写的&#xff0c;我这里打算用C实现一下&#xff1a; Golang: Heap data structure 1. 基本概念 满二叉树&#xff08;二叉树每层节点都是满的&#xff09;&#xff1a; 完全二叉树&a…...

编程日记 2024/2/3 1:56:53

第8章 SpringBoot任务管理

学习目标 熟悉SpringBoot整合异步任务的实现 熟悉SpringBoot整合定时任务的实现 熟悉SpringBoot整合邮件任务的实现 开发web应用时，多数应用都具备任务调度功能。常见的任务包括异步任务，定时任务和发邮件任务。我们以数据库报表为例看看任务调度如何帮助改善系统设计。报表可…...

编程日记 2024/2/3 1:55:52

Qt5 基于OpenGL实现六轴机械臂三维仿真

需求 在Qt中通过OPenGL方式加载三维模型STL文件&#xff0c;然后将多个结构的STL文件类型的模型进行组装&#xff0c;形成6轴机械臂三维模型的显示&#xff0c;并且可以对每个关节进行关节角度的控制。 新建一个C类STLFileLoader&#xff0c;用于加载STL文件&#xff0c;并进…...

编程日记 2024/2/3 1:54:50

Gitee：中国DevOps生态的数字化转型引擎

本土化创新重塑开发者体验在中国数字经济蓬勃发展的背景下&#xff0c;Gitee作为国产代码托管平台的代表&#xff0c;正在重新定义中国开发者的工作方式。不同于国际平台在中国市场的适应性局限&#xff0c;Gitee通过深度理解本土开发者的工作习惯和业务场景&#xff0c;构建了…...

编程新知 2026/4/2 12:38:05

洪城寻缘角

洪城寻缘角 南昌人的免费寻缘平台 不必再奔波相亲角&#xff0c;不必被收费套路困扰 洪城寻缘角&#xff0c;全功能永久免费 无需注册即可登记&#xff0c;一键发布个人资料 支持多条件精准筛选&#xff0c;快速匹配同频有缘人 覆盖南昌全城单身&#xff0c;真实、高效、安心…...

编程新知 2026/4/2 11:28:42

glTF Pipeline完全攻略：高效3D模型优化解决方案

glTF Pipeline完全攻略&#xff1a;高效3D模型优化解决方案 【免费下载链接】gltf-pipeline Content pipeline tools for optimizing glTF assets. :globe_with_meridians: 项目地址: https://gitcode.com/gh_mirrors/gl/gltf-pipeline 3D模型加载缓慢、文件体积过大&am…...

编程新知 2026/4/2 11:26:42

别再只盯着CAN了！聊聊LIN总线在低成本IoT传感器网络里的那些‘骚操作’

LIN总线在低成本IoT传感器网络中的创新实践 当谈到工业物联网和传感器网络通信协议时&#xff0c;大多数人会立刻想到CAN、Modbus或以太网协议。但有一个被严重低估的选项正在悄然崛起——LIN总线。这个原本为汽车电子设计的轻量级协议&#xff0c;凭借其独特的成本优势和简洁架…...

编程新知 2026/4/2 10:21:59

SPSS加权处理实战：广告效果分析中的权重设置技巧（附详细步骤）

SPSS加权处理实战&#xff1a;广告效果分析中的权重设置技巧&#xff08;附详细步骤&#xff09; 当市场部门拿着厚厚一叠广告效果调研数据来找你时&#xff0c;最头疼的往往不是分析本身&#xff0c;而是那些看似简单却暗藏玄机的原始数据。上个月我就遇到这样一个案例&#x…...

编程新知 2026/4/2 10:19:58

发动机阀系系统设计避坑指南：AVL-Excite中这10个元素配置最容易出错

发动机阀系系统设计避坑指南&#xff1a;AVL-Excite中这10个元素配置最容易出错 在发动机阀系系统的仿真建模中&#xff0c;AVL-Excite作为行业标杆工具&#xff0c;其强大的功能背后也隐藏着诸多配置陷阱。许多工程师在完成基础建模后&#xff0c;往往会在看似简单的参数设置上…...

编程新知 2026/4/2 9:57:41

丰田的“改善”到底牛在哪？-云质QMS为您解读精益生产的核心

提到丰田&#xff0c;大家第一反应大概率是精益生产、JIT 即时制&#xff0c;却很少有人深究&#xff0c;支撑丰田几十年持续领跑制造业的底层逻辑&#xff0c;其实是那个看似简单的日语词 ——改善&#xff08;kaizen&#xff09;。很多企业学丰田学了个皮毛&#xff0c;照搬流…...

编程新知 2026/4/2 7:35:15

Pixel Couplet Gen入门指南：8-bit UI无障碍访问（色盲模式支持）

Pixel Couplet Gen入门指南&#xff1a;8-bit UI无障碍访问&#xff08;色盲模式支持&#xff09; 1. 项目介绍 Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的AI春联生成器。通过ModelScope大模型驱动&#xff0c;它将中国传统的春联创作转化为充满怀旧游戏美…...

编程新知 2026/4/2 7:09:02

【仅限内部技术白皮书泄露版】：某金融级Java协议解析引擎设计文档（吞吐量23.8万TPS，延迟＜1.2ms）

第一章&#xff1a;金融级Java协议解析引擎总体架构设计金融级Java协议解析引擎面向高频、低延时、强一致性的交易与清算场景&#xff0c;需在微秒级完成报文解析、字段校验、语义转换及路由分发。其总体架构采用分层解耦设计&#xff0c;兼顾可扩展性、可观测性与容灾能力&…...

编程新知 2026/4/2 6:28:29

告别盲调！用STM32的编码器模式+定时器中断，精准测量电机转速（附速度计算源码）

STM32编码器模式实战&#xff1a;从脉冲计数到精准转速测量的全链路解析 在电机控制系统中&#xff0c;转速测量就像给盲人配上一副眼镜——它让抽象的旋转运动变得可视化、可量化。许多工程师在完成电机基础驱动后常陷入一个尴尬境地&#xff1a;电机确实转起来了&#xff0c;…...

编程新知 2026/4/2 6:20:28