使用 Express.js 和 Handlebars.js 构建模板引擎

在 Web 开发中，模板引擎是一种非常重要的技术，它可以帮助你更高效地将数据和页面合并，从而生成最终的 HTML 页面。大多数的 Web 框架都支持模板引擎，而在 Node.js 应用中，Express.js 和 Handlebars.js 是两个非常受欢迎的选择。

在本文中，我们将介绍如何使用 Express.js 和 Handlebars.js 构建模板引擎，包括如何安装、配置和使用。此外，我们还将通过示例代码演示如何利用这两个技术创建一个简单但功能强大的 Web 应用。

安装和配置

首先，我们需要安装 Express.js 和 Handlebars.js。在 Node.js 应用中，可以通过 npm 安装这两个模块。打开终端并键入以下命令：

--- ------- ------- ---------- ------

另外，为了支持静态文件和表单等功能，我们还需安装 body-parser 和 serve-static 模块：

--- ------- ----------- ------------ ------

安装完成后，我们需要在应用中引入这些模块：

--- ------- - -------------------
--- ---------- - ----------------------
--- ---------- - -----------------------
--- ----------- - ------------------------

接着，我们需要配置 Express.js 和 Handlebars.js 的模板引擎设置。在 Express.js 应用中，可以通过以下代码配置模板引擎：

--- --- - ----------

-- -- ------------- ----
------------------ ------------
    -------- -------
    -------------- ----------
    ----------- --------- - -----------------
    ------------ --------- - -----------------
----
------------- -------- --------
---------------- --------- - ----------

在上面的代码中，我们设置了 Handlebars.js 的模板引擎，并指定了默认的布局、布局和局部文件的目录。同时，我们还设置了 Express.js 的视图目录。

最后，我们需要配置静态文件和表单的中间件。在 Express.js 应用中，可以通过以下代码配置静态文件和表单的中间件：

-- --------
----------------------------- - ------------

-- -- --- -----
------------------------------- --------- ---- ----

在上面的代码中，我们使用了 serve-static 和 body-parser 模块来配置静态文件和表单的中间件。其中，serve-static 中间件用于配置静态文件目录，而 body-parser 中间件用于解析 POST 请求并转换为对象格式。

至此，我们已经完成了 Express.js 和 Handlebars.js 的安装和配置，接下来我们将开始编写实际的 Web 应用代码。

编写 Web 应用代码

在本文中，我们将创建一个简单的 Web 应用，让用户可以通过表单输入自己的姓名和年龄，并将这些信息保存到服务器中。同时，用户还可以查看所有已保存的信息，并对其进行编辑或删除操作。

编写路由代码

首先，我们需要编写路由代码来处理用户的请求。在我们的应用中，将有以下三个路由：

  • GET /：显示所有保存的信息。
  • GET /add：显示添加信息的表单。
  • POST /add：将新的信息保存到服务器中。

在 Express.js 应用中，可以通过以下代码编写路由：

-- ---------
------------ ------------- ---- -
    -- ----- -----------
---

-- ---------
--------------- ------------- ---- -
    ------------------
---

-- ------------
---------------- ------------- ---- -
    -- ----- -----------
---

在上面的代码中，我们定义了三个路由，并分别处理了不同的请求。

编写 Handlebars.js 视图

接下来，我们需要编写 Handlebars.js 视图来显示不同的页面。在本应用中，将有以下两个视图：

  • default.hbs：默认的布局文件。
  • add.hbs：显示添加信息的表单。

在 Handlebars.js 视图中，可以使用 {{{ body }}} 占位符来显示每个页面的内容，如下所示：

--------- -----
------
------
    ---------- ----- -----------
-------
------
    --- ---- ---
-------
-------
----- --------------
    ------ ----------- ----------- -----------------
    ------ ----------- ---------- -----------------
    ------- -------------------------
-------

在上面的代码中，我们分别定义了默认的布局文件和添加信息的表单，并使用 Handlebars.js 语法渲染了相应的 HTML 代码。

编写数据层代码

最后，我们需要编写一个数据层文件，用于操作和管理保存的信息。在本应用中，我们将使用一个简单的 JavaScript 数组来保存信息。

--- ---- - -
    - ----- ----- ---- -- --
    - ----- ----- ---- -- --
    - ----- ----- ---- -- -
--

-------------- - -
    ------- ---------- -
        ------ -----
    --

    ---- ------------- -
        ---------------
    -
--

在上面的代码中，我们定义了一个 JavaScript 数组，并导出了两个方法，分别用于获取所有保存的信息和添加新的信息。这些方法将在路由代码中被引用。

整合代码并运行应用

最后，我们需要将数据层、路由和视图文件整合在一起，并运行应用。完整的应用代码如下：

--- ------- - -------------------
--- ---------- - ----------------------
--- ---------- - -----------------------
--- ----------- - ------------------------
--- ---- - ------------------

--- --- - ----------

-- -- ------------- ----
------------------ ------------
    -------- -------
    -------------- ----------
    ----------- --------- - -----------------
    ------------ --------- - -----------------
----
------------- -------- --------
---------------- --------- - ----------

-- --------
----------------------------- - ------------

-- -- --- -----
------------------------------- --------- ---- ----

-- ---------
------------ ------------- ---- -
    --- ------- - --------------
    ------------------- - ------ ------- ----- ------- ---
---

-- ---------
--------------- ------------- ---- -
    ----------------- - ------ ------ ---
---

-- ------------
---------------- ------------- ---- -
    -------------------
    ------------------
---

-- ----
-----------------
------------------- -------- -------------------------

在上述代码中，我们将数据层、路由和视图文件整合在了一起，并在 3000 端口上启动了应用。可以通过浏览器访问 http://localhost:3000/ 来查看应用效果。

总结

本文介绍了如何使用 Express.js 和 Handlebars.js 构建模板引擎，并通过一个简单的 Web 应用示例演示了如何在实际中使用这两个技术。通过本文的学习，读者可以更加熟练地掌握 Express.js 和 Handlebars.js 的用法，并且可以将它们应用到其他 Web 应用中。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b4c934add4f0e0ffda430d

阅读全文

猜你喜欢

  • Enzyme 和 Jest 在 React Native 项目中的应用教程

    Enzyme 和 Jest 在 React Native 项目中的应用教程 React Native 是一个流行的开源框架，用于构建移动应用程序。然而，开发者面临一个挑战，即如何在 React Nat...

    9 个月前
  • 如何在 ES10 中使用函数形式的 matchAll 方法来解析文本

    如何在 ES10 中使用函数形式的 matchAll 方法来解析文本 在前端开发中，经常需要对文本进行一些处理，比如在一段文本中匹配出符合规则的字符序列。在 ES9 中，引入了 matchAll 方法...

    9 个月前
  • ES9 中引入的 String.prototype.trimStart() 和 trimEnd() 方法的多语言应用

    在 JavaScript 中，字符串是一个十分常见的数据类型，而字符串前后的空格则是经常出现的问题。ES9 在原有的 String.prototype.trim() 方法的基础上新增了 String....

    9 个月前
  • Promise 的 defer 模式

    在 JavaScript 中，Promise 是一种解决 JavaScript 异步编程领域中的问题的技术。通过 Promise，可以有效地解决由回调地狱（Callback Hell）所带来的问题。

    9 个月前
  • Jest mock 和 Stub 规范

    在前端开发中，单元测试是非常重要的一环。而 Jest 是一个流行的测试框架，它提供了多种类型的模拟，包括 mock 和 stub。模拟是一种模拟函数行为的技术，以便在测试过程中确定功能是否正确。

    9 个月前
  • 遇到 React 报错： TypeError: Cannot read property'setState' of undefined ，该如何解决？

    在 React 开发中，我们经常会遇到各种各样的错误。其中，TypeError: Cannot read property 'setState' of undefined 这个错误比较常见，意味着我们...

    9 个月前
  • ES6 中如何使用 async/await 解决跨域问题

    在前端开发中，常常会涉及到异步请求数据的场景，而请求的数据可能来自于不同的域名。由于浏览器的同源策略，跨域请求被禁止，这就给前端开发带来了阻碍。本文将介绍如何使用 ES6 中的 async/await...

    9 个月前
  • ES7 中的箭头函数详解

    随着 ECMAScript 标准的升级，ES7 中终于加入了箭头函数这一语法特性。箭头函数的出现不仅简化了函数的书写和调用，还能提高 JavaScript 程序的性能。

    9 个月前
  • 如何使用 Fastify 和 MongoDB 构建 REST API

    在前端开发中，构建 REST API 是很常见的任务。Fastify 是一个快速而高效的 Web 框架，适合用于构建高性能的 REST API。而 MongoDB 则是一种广泛使用的 NoSQL 数据...

    9 个月前
  • PM2 如何实现动态扩容和缩容 Node.js 应用？

    如果你是一个 Node.js 应用程序员，那么你一定会遇到这样一个问题：如何实现动态扩容和缩容的 Node.js 应用？对于这个问题，我们可以使用 PM2 来解决。

    9 个月前
  • Server-Sent Event（SSE）：如何捕获错误

    前言： Server-Sent Event（SSE） 是一种非常有效的实时通信方法，在前端类的开发中被广泛使用。但是，在使用过程中，我们可能会遇到一些错误，如连接中断、服务器错误等等。

    9 个月前
  • Custom Elements 中的样式继承问题及解决方案

    随着 Web 应用的日益普及，自定义元素（Custom Elements）成为了 Web 开发中重要的一环。Custom Elements 可以让开发者创建自己的 HTML 元素，并在 JavaScr...

    9 个月前
  • 处理 GraphQL 联合类型的错误

    GraphQL 是一种流行的查询语言，用于前端和后端之间的数据通信。其中，联合类型是 GraphQL 语言提供的一种强大的功能，它允许我们将不同类型的字段组合在一起并将它们作为一个整体查询。

    9 个月前
  • Kubernetes 调度器深度解析：解释 K8S 调度器的原理及实现

    Kubernetes 是一个基于容器技术的开源容器编排引擎，它可以自动化地部署、扩展和管理应用程序容器。在 Kubernetes 中，调度器是一个非常重要的组件，它负责将工作负载（Pod）分配到不同的...

    9 个月前
  • Tailwind 第三方组件如何定制

    Tailwind 第三方组件如何定制 Tailwind CSS 是一个流行的 UI 框架，提供了丰富的样式库和交互组件，让开发者可以快速构建漂亮的、完善的用户界面。

    9 个月前
  • 在 Cypress 中如何拦截网络请求并进行 mock？

    在 Cypress 中如何拦截网络请求并进行 mock？ Cypress是一个强大的前端测试框架，它允许开发人员对他们的web应用程序进行端到端测试，同时也提供了许多有用的功能来帮助开发人员进行测试。

    9 个月前
  • 如何在 ESLint 中使用 no-mixed-spaces-and-tabs 规则来检查混合使用空格和制表符

    在前端开发中，代码风格的一致性对于团队协作和代码可维护性有着极其重要的作用。而在代码风格中，一个常见而又容易被忽略的问题就是混用空格和制表符。针对这个问题，ESLint 提供了 no-mixed-sp...

    9 个月前
  • webpack 优化 koa 应用

    介绍 随着前端应用的复杂性增加，Webpack 作为一种构建工具变得越来越受欢迎。Koa 是一种基于 Node.js 的 Web 框架，使用异步操作来提高性能。本文将探讨如何利用 Webpack 优化...

    9 个月前
  • 使用 Chai 的 assert 模块进行 path.yield 和 path.yieldWith 的测试

    在进行前端开发时，我们经常需要对代码进行测试以保证其稳定性和可靠性。而在测试过程中，使用 assert 模块来判断结果是否符合预期是非常常见的一种方式。而在使用 assert 进行测试时，Chai 是...

    9 个月前
  • RxJS 中的 mapTo 操作符的应用

    RxJS 是一款强大的响应式编程库，它可以帮助开发者更便捷地处理异步数据流。在 RxJS 中，mapTo 操作符是一种非常常用的操作符，它可以将源 Observable 中的每个元素都映射成相同的固定...

    9 个月前

相关推荐

    暂无文章