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

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

news 2026/1/5 22:36:25

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

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

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/12/26 19:06:17

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/4 11:25:00

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/12/31 9:34:02

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/1/1 16:53:52

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37