对于现代化的 Web 应用来说，前后分离已经成为了一种趋势。前端框架的高速发展和前端工程化的普及让前端工程师能够更加专注于业务逻辑以及用户体验，同时也让后端工程师能够更加专注于数据处理以及业务逻辑。而在众多前端框架中，使用 Handlebars 模版引擎的情况越来越多，因为它能够极大地提高模版的复用性和可维护性。
在这篇文章中，我们将会介绍如何在 Koa 应用中使用 Handlebars 模版引擎来实现前后分离。我们将会涉及到如下的内容：
- Handlebars 模版引擎的基本使用；
- Koa 应用中使用 Handlebars 模版引擎的具体实现；
- Handlebars 模版引擎与前后分离的结合实践。
Handlebars 模版引擎的基本使用
Handlebars 是一款简单、高效、灵活的 JavaScript 模版引擎，它能够将数据和模版结合生成 HTML 代码。Handlebars 的语法简单易学，支持各种条件语句和迭代语句，同时可以自定义 Helper 来扩展语法。
安装 Handlebars
Handlebars 可以通过 npm 包来安装，非常方便。在 terminal 中输入以下命令：
--- ------- ----------
使用 Handlebars
以下是一个简单的 Handlebars 模版：
-----
----- ----------
-------------------------
--------
-------------
-------
------在 Koa 应用中，我们需要将数据通过 Koa 中间件传递给 Handlebars 模版。以下是一个示例：
----- --- - ---------------
----- ---------- - ----------------------
----- --- - --- ------
----- ------ - -------------------------
----- -------- - ---------------------------
------------- ----- -- -
----- ---- - -
-------- ------ -------
--
----- ---- - ---------------
-------- - -----
---
-----------------
---------------- ------ -- --------- -- ---- --------以上代码的执行结果将会在浏览器中输出一个包含 "Hello World!" 的 div 标签。
Koa 应用中使用 Handlebars 模版引擎的具体实现
在 Koa 应用中使用 Handlebars 也非常简单，只需引入 koa-handlebars 包，然后在 Koa 中间件中使用即可。
安装 koa-handlebars
在 terminal 中输入以下命令即可安装 koa-handlebars：
--- ------- --------------
使用 koa-handlebars
以下是一个 Koa 应用中使用 koa-handlebars 的示例：
----- --- - ---------------
----- ---------- - ----------------------
----- -------------------- - --------------------------
----- --- - --- ------
------------------------------------ ------------- -
------ --- - ----
---
------------------------------
----- --------- - ---------
-------- -------
------- ----------
------------ -
------------
------------------
--
-------- -
---- ---------- -
------ ------
-
-
----
------------- ----- -- -
----- ------------------ -
------ ---- - ------------
-------- ------ ------
---
---
-----------------
---------------- ------ -- --------- -- ---- --------在这个示例中，我们注册了一个 Handlebars Helper "exclaim"，这个 Helper 可以在模版中使用。我们通过 helper、partials、layout 来定制化模版的输出，同时在 Koa 中间件中调用 render 函数实现模版的渲染。
Handlebars 模版引擎与前后分离的结合实践
现在，我们来介绍 Handlebars 模版引擎和前后分离的结合实践。我们将会使用 Handlebars 和 Vue.js 来实现前后分离。
配置 koa-handlebars
在 Koa 应用中，我们可以使用 koa-handlebars 来配置 Handlebars 模版引擎。我们可以使用 koa-static 来配置前端静态资源。
----- --- - ---------------
----- ---------- - ----------------------
----- -------------------- - --------------------------
----- ----- - ----------------------
----- --- - --- ------
------------------------------
----- --------- - ---------
-------- ------
----
----------------------- - ------------
-----------------
---------------- ------ -- --------- -- ---- --------实现前端页面
在 views 目录下创建一个 index.hbs 文件，这个文件将会作为我们的前端页面。
index.hbs 的代码如下：
--------- -----
------
------
----- ----------------
------------------------
-------
------
---- ---------------
------- --------------------------
-------
-------这个模版是一个基本的 HTML 骨架，我们为了让 Handlebars 能够更好地与前端框架结合，我们将前端资源引入到模版中，然后通过前端框架来实现动态内容。
实现 Vue.js 组件
我们可以使用 Vue CLI 快速生成一个 Vue.js 项目的模版。在模版中，我们可以使用 Vue.js 组件，通过 AJAX 向服务器获取数据并展示在页面上。
在 public/js 目录下创建一个 app.js 文件，这个文件将会作为 Vue.js 应用的入口文件。
------ --- ---- -----
------ --- ---- -----------
--- -----
------- - -- ------
------------------在 public/js/components 目录下创建一个名为 HelloWorld.vue 的组件，在这个组件中，我们向服务器获取数据，并将数据渲染到 HTML 中。
----------
-----
------ ------- -------
----
--- ----------- -- -------- ---- -------
-----
------
-----------
--------
------ ------- -
---- -- -
------ -
-------- ------ -------
----- --
-
--
------- -- -
--------------------------------- -- -------------------------- -- -
--------- - ----------
---
-
-
---------在这个组件中，我们使用了用 Vue 框架提供的数据绑定语法来动态展示从服务器获取回来的数据。
实现后端接口
在 Koa 应用中，我们通过中间件来实现接口。我们可以使用 koa-router 来实现 api/hello 接口，通过这个接口向浏览器返回数据。
在 Koa 应用中，添加 koa-router，并实现 api/hello 接口：
----- ------ - ----------------------
----- ------ - --- ---------
------------------------ ----- ----- -- -
----- ---- - ----- ---- -----
-------- - -------
---
-------------------------
---------------------------------运行应用
在 terminal 中输入以下命令启动应用：
---- ------
然后在浏览器中打开以下地址：
----------------------
你就可以看到一个完整的前后分离的页面了。
结论
在这篇文章中，我们介绍了如何在 Koa 应用中使用 Handlebars 模版引擎来实现前后分离。我们通过一个完整的示例来展示了 Handlebars 模版引擎和前端框架如何结合、如何在 Koa 应用中使用 Handlebars。本文中涉及到的知识能够帮助你更好地理解和应用 Handlebars 模版引擎，从而快速实现前后分离的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ad939ddd3a70eb6d0f580