第八篇：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：

  
express
  
我是江城开朗的豌豆
  关于我们

about.hbs： 

  
关于我们
  
学习node.js第二天

第三步：在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

    
    
    


    

        
express
         姓名：{{ name }}
        
我是江城开朗的豌豆
       
        
        
{{ message }}
        关于我们
    

第二步：在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

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

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

​

​