第八篇: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.mzph.cn/news/662140.shtml

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

相关文章

【笔记】SPN和PLMN 运营商网络名称显示

一、业务术语 缩写 全称 释义 CDNR Carrier Display Name Ressource 运营商显示名称资源 PLMN Public Land Mobile Network 公共陆地移动网络。 表示最终显示的网络运营商名字 SPN Service Provider Name SIM卡EF文件6F46。表示服务提供商名字,主要是SIM卡服务 OPL Operator …

【VSCode 光标返回上一位置】

默认按键 Windows: Alt ← ;或者 鼠标侧键 Linux: Ctrl Alt - ;貌似数字键盘的减号没效果 Mac: Ctrl - 自定义修改方法&#xff1a; VSCode左下角 “管理 / Manage” “键盘快捷方式 / KeyBoard Shortcuts” 搜索 “前进 / Go Forward 或 后退 / Go Back” 双击需…

模型相关.pt和.bin文件在PyTorch中的用途以及存储和加载方式

1. .pt文件 .pt或.pth文件扩展名通常用于表示PyTorch的模型文件。这些文件包含了模型的结构以及参数&#xff0c;可以通过PyTorch的torch.save和torch.load或torch.jit.save和torch.jit.load函数进行保存和加载。.pt文件可能是通过torch.save保存的模型状态字典&#xff08;st…

React16源码: React中event事件系统初始化源码实现

event 事件系统初始化 1 &#xff09;概述 react事件系统比较的复杂&#xff0c;它是基于dom的事件系统在dom事件系统上面进行了一个深度的封装它里面的很多实现逻辑都是自由的一套在初始化 react-dom 的源码的时候&#xff0c;会为react的事件系统注入 reactdom 相关的一些插…

HarmonyOS4.0系统性深入开发33相对布局(RelativeContainer)

相对布局&#xff08;RelativeContainer&#xff09; 概述 RelativeContainer为采用相对布局的容器&#xff0c;支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点&#xff0c;也支持指定父容器作为锚点&#xff0c;基于锚点做相对位置布局。下图是一个…

【python基础】爬虫练习

不知道大家有没有通过豆瓣网寻找一些排名较高的电影&#xff0c;反正小编基本上是顺着排名一点点找电影看。 本文将详细介绍如何使用Python爬虫抓取豆瓣网电影评论用户的观影习惯数据&#xff0c;并进行简单的数据处理和分析。 目录 一、配置环境1.1、 安装Python1.2、 安装Re…

『C++成长记』string使用指南

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、string类介绍 二、string类的常用接口说明 &#x1f4d2;2.1string类对象的常…

Sg7050ccn晶体振荡器spxo规格书

SG7050CCN是一款CMOS输出石英晶体振荡器&#xff0c;小体积尺寸7.0x5.0mm,四脚贴片&#xff0c;额定频率2.5MHz ~ 50MHz&#xff0c;电源电压4.5V至5.5V,工作温度范围B : -20 C to 70 C / G : -40 C to 85 C C&#xff0c;具有小体积轻薄型&#xff0c;低抖动&#xff0c;低功耗…

基于STM32F103C8的宠物喂食系统设计

在撰写一篇关于基于STM32F103C8的宠物喂食系统设计的论文时&#xff0c;您需要遵循一般的科技论文结构&#xff0c;并针对您的项目提供详细的信息。以下是一个概要性的指南&#xff0c;用于帮助您组织和撰写这篇论文&#xff1a; **标题&#xff1a;** 基于STM32F103C8的智能宠…

Unity打包Android,jar文件无法解析的问题

Unity打包Android&#xff0c;jar无法解析的问题 介绍解决方案总结 介绍 最近在接入语音的SDK时&#xff0c;发现的这个问题. 当我默认导入这个插件的时候&#xff0c;插件内部的文件夹&#xff08;我下面话红框的文件夹&#xff09;名字原本为GCloudVoice&#xff0c;这时候我…

vit细粒度图像分类(八)SIM-Trans学习笔记

1.摘要 细粒度视觉分类(FGVC)旨在从相似的从属类别中识别物体&#xff0c;这对人类准确的自动识别需求具有挑战性和实用性。大多数FGVC方法侧重于判别区域挖掘的注意机制研究&#xff0c;而忽略了它们之间的相互依赖关系和组成的整体对象结构&#xff0c;而这些对模型的判别信…

解锁文档处理的全新维度:ONLYOFFICE 文档开发者版

前言 相信大家对于 ONLYOFFICE 这款办公软件可能已经有所耳闻&#xff0c;最近因工作需要&#xff0c;我在众多办公协作工具中选择了 ONLYOFFICE&#xff0c;原因主要是它开源经济实惠&#xff0c;可以部署在自己的服务器上并且能够轻松集成到我们的平台中。在数字化信息时代&…

全志R128 SDK HAL 模块开发指南之 LPUART

模块介绍 LPUART 驱动主要实现设备驱动的底层细节&#xff0c;并为上层提供一套标准的 API 接口以供使用。 模块配置 配置路径如下: Kernel Setup --->Drivers Setup --->SoC HAL Drivers --->LPUART Devices --->[*] enable lpuart driver源码结构 LPUART 模…

torch与cuda\cudnn和torchvision的对应

以上图片来源于这篇博客 于是&#xff0c;我需要手动下载0.9.0torchvision 直接在网站https://pypi.tuna.tsinghua.edu.cn/simple/后面加上torchvision&#xff0c;就不用ctrlF搜torchvision了&#xff0c;即进入下面这个网站&#xff0c;找到对应版本的包下载安装即可 https…

android 音频调试技巧

常用命令 查看当前声卡信息 cat proc/asound/cards bengal_515:/ # cat /proc/asound/cards0 [bengalidpsndcar]: bengal-idp-snd- - bengal-idp-snd-cardbengal-idp-snd-card1 [Loopback ]: Loopback - LoopbackLoopback 1查看PCM设备列表 cat proc/asound/pcm ben…

Github设置clone慢的解决方案

Github设置代理clone依然慢的解决方案 1、前提&#xff1a; 注意&#xff1a; 必须要有科学上网&#xff01;必须要有科学上网&#xff01;必须要有科学上网&#xff01;重要的事情说三遍&#xff1b; 2、http/https方案&#xff08;git clone时使用http&#xff09;&#x…

MirrorLayer可以正常触摸屏幕原理分析

背景&#xff1a; 上次blog分享了给学员朋友们布置的作业&#xff0c;今天来进行简单的揭秘。 问题&#xff1a; 在多屏互动时候有一个屏幕的画面是一个MirrorLayer&#xff0c;另一个屏幕画面是真实的&#xff0c;即2个屏幕上有一个是MirrorLayer&#xff0c;这个时候疑问就…

【C++基础入门】四、程序流程结构(水仙花数、乘法口诀、七和七的倍数、随机数猜数字)

四、程序流程结构 C/C支持最基本的三种程序运行结构&#xff1a;顺序结构、选择结构、循环结构 顺序结构&#xff1a;程序按顺序执行&#xff0c;不发生跳转选择结构&#xff1a;依据条件是否满足&#xff0c;有选择的执行相应功能循环结构&#xff1a;依据条件是否满足&…

【Django-ninja】使用schema

在Django Ninja中&#xff0c;"schema"主要是指帮助描述和规范你的API的工具&#xff0c;以便系统能够自动生成文档并提供验证。通俗地说&#xff0c;它有两个主要作用&#xff1a; API文档生成器&#xff1a; Schema 让 Django Ninja 能够自动生成互动式的API文档。…

windows下利用verdaccio私服让npm构建速度上来

一.verdaccio的准备 上一篇文章&#xff0c;我写了的&#xff0c;看这里。windows下使用verdaccio构建npm私服环境-CSDN博客 二.用nrm实现npm源管理 虽然英语不好&#xff0c;我猜这个工具的缩写的意思是npm resource manage&#xff0c;哈哈。 1.安装nrm 输入npm install…