中国建设网站官方网站,外链网址,阿里 域名解析 网站建设,北京市住房和城乡建设厅网站#x1f3ac; 江城开朗的豌豆#xff1a;个人主页 #x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 #x1f4dd; 个人网站 :《 江城开朗的豌豆#x1fadb; 》
⛺️ 生活的理想#xff0c;就是为了理想的生活 ! 目录 #x1f4d8; 引言#xff1a; #x1f… 江城开朗的豌豆个人主页 个人专栏 :《 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可以用模版引擎来渲染前端页面模版引擎有很多种,包括jadeejs,nunjunksHandlebars等等express对每一种都提供了很好的支持只需要几行代码就可以使用。我们今天来学习下Handlebars简写hbs 第一步安装对应的模版引擎
yarn add hbs 第二步创建views文件夹并且新建一个index.hbs文件和about.hbs文件
index.hbs
divh1express/h1p我是江城开朗的豌豆/pa href/about target_blank关于我们/a
/div
about.hbs
divh1关于我们/h1p学习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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydivh1express/h1姓名{{ name }}p我是江城开朗的豌豆/pimg stylewidth: 200px;height:200px src{{ img }} alt头像p{{ message }}/pa 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?sign2f48aaf410e2c01ab12eb301f4885c82t1704780920
app.get(/index, (req, res){// 渲染index.hbs文件res.render(index,{name: 张三,message: Hello, World!,img,});}
) 效果展示 往期篇章推荐 第一篇node的背景及版本的检查 第二篇新建node项目并运行 第三篇搭建项目的两种代码格式 第四篇怎么写express的路由(接口请求) 第五篇express路由路径方式字符串字符串模式和正则 第六篇express路由拆分模块化 第七篇node中间件详解
⭐ 写在最后 请大家不吝赐教,在下方评论或者私信我,十分感谢. ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式 ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法 ✅ 对于文章中部分内容不理解 ✅ 解答我文章中一些疑问 ✅ 认为某些交互,功能需要优化,发现BUG ✅ 想要添加新功能,对于整体的设计,外观有更好的建议 最后感谢各位的耐心观看既然都到这了点个 赞再走吧
