Web 开发领域日新月异，新技术、新框架、新库层出不穷。Fastify 和 Svelte 两个相对较新的工具，已经开始逐渐赢得了前端开发人员的青睐，它们的应用有望在未来的 Web 前端开发中发挥更加重要的作用。本文将介绍如何通过结合 Fastify 和 Svelte 来构建 Web 应用并实现前后端分离。
Fastify & Svelte 介绍
Fastify 是一个 Web 框架，专注于提供高效和低开销的 Node.js Web 应用程序。它使用了众多的优化策略，例如自动分类、请求监控、高效的错误处理和生命周期扩展，使得它在性能方面表现得非常优秀。从设计上来看，Fastify 具有良好的类型支持和强大的插件系统，加上其他优秀的特性，是一款非常不错的 Web 框架。
Svelte 是一个编译时框架，被称为是“编写小巧且快速的 Web 应用程序的最佳选择”。它不同于传统的静态 Web 应用开发中所见的传统框架，例如 React 和 Vue.js 等，而是将组件的事件处理逻辑提前到编译时，对性能影响非常小，生成的代码非常快。Svelte 同时还可以组合将应用程序拆分成小巧的组件，从而让应用程序更加易于维护。
构建 Web 应用
为了演示 Fastify 和 Svelte 如何配合使用来构建一个完整的 Web 应用程序，我们将创建一个在线海报制作应用。该应用程序将允许用户上传照片，并将其转换为一个漂亮的海报。应用程序将包括一个前端，用于处理用户界面和用户上传的图片，同时还包括一个后端，用于将图片与某些海报纹理结合来生成新的海报。
步骤 1: 创建 Fastify 服务器
首先，我们需要创建一个 Fastify 服务器来处理上传的图片请求。Fastify 使我们很容易创建服务器，并提供了强大的插件系统来简化大多数常见任务的处理。
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- ---
------------------------------------------- -
----- -------------------- ----------
------- -----------
---
----------------------- ----- ----- ------ -- -
----- ----------- - ----- -----------
----- ------ - ----- --------------------------
-------------------------------------
--
-------------------- ----- -------- -- -
-- ----- -
-----------------------
----------------
-
------------------------ --------- -- -------------
---在上面的代码中，我们通过 Fastify 注册了 static 插件，并将 public 目录下的内容绑定到 /public/。我们也定义了一个 /upload 端点，用于处理文件上传请求。最后，我们通过调用 listen() 方法来启动我们的服务器。
步骤 2: 创建 Svelte 应用程序
现在我们需要使用 Svelte 来构建前端的用户界面。Svelte 提供了一些工具和构建器，可以帮助我们轻松地创建 Svelte 应用程序。在创建和构建应用程序之前，我们需要先安装 Svelte 的 CLI 工具。
npm install -g degit svelte
下面是一个简单的 Svelte 应用程序示例。
-- -------------------- ---- -------
---- ---------- ---
--------
--- ---- - -----
----- ------ - ----- -- -- -
----- -------- - --- -----------
----------------------- ------
----- -------- - ----- ---------------- -
------- -------
----- ---------
---
----- ---- - ----- ----------------
----- --- - --------------------------
----- --- - ------------------------------
------- - ----
-------------------------------
-
---------
------
------ ----------- ----------------- --
------- ---------------------------------
-------在上述代码中，我们创建了一个包含一个上传文件 input 和上传按钮的组件。当用户点击上传按钮时，我们使用 fetch API 发送一个 POST 请求到我们的服务器，并将文件作为表单数据附加到请求的主体中。一旦我们从服务器收到了一个响应，我们就会获得一个 blob 对象，并将其转换为图像，以便将其插入到我们的 HTML 页面中显示。
步骤 3: 启动 Svelte 应用程序
在构建并生成 Svelte 应用程序后，我们需要使用 Node.js 的 HTTP 模块来启动应用程序。使用 Node.js 的 HTTP 模块的好处是可以更好地控制请求的处理方式，特别是在处理文件上传等比较重的任务时。
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- ------- - -------------------- ----------
----- --------- - ------------------ --------------
----------------------- ---- -- -
-- -------- --- ---- -
-- ----- ----- ----
----------------------------- -------------
-----------------------------------------
- ---- -
-- ----- ------ -----
----- -------- - ------------------ ------------------
----------------------------------------
-
--------------- ----- -------- -- -
----------------- ------ --------- ---- ---------
---在上述代码中，我们创建了一个 HTTP 服务器，并使用 Node.js 的 fs 模块读取和发送文件。我们还根据请求的路径决定要发送的是 HTML 页面还是其他静态资源。
步骤 4: 结合 Fastify 和 Svelte
我们现在已经有了一个 Fastify 服务器，可以在后端处理文件上传请求。我们还有一个 Svelte 应用程序，用于逻辑控制和用户界面的渲染。接下来，我们需要将这两个应用程序结合起来，以便它们能够相互通信。
我们可以使用 Fastify CORS 插件来允许在不同的域上运行的 Web 应用程序之间进行通信。只需将下面的代码添加到 Fastify 服务器的代码中即可。
fastify.register(require('fastify-cors'), {
origin: '*',
});我们要在 Svelte 应用程序中对 fetch API 进行一些修改，以便将文件发送到 Fastify 服务器。我们需要将 Svelte 应用程序的 upload() 方法更改为仅处理文件，然后将其上传到 Fastify 服务器的 /upload 端点。
总结
结合 Fastify 和 Svelte 来构建 Web 应用程序是一种很好的方法。Fastify 提供的出色的性能优化与 Svelte 编译时逻辑的支持相结合，可以生成具有较高性能且易于维护的 Web 应用程序。
在本文中，我们介绍了如何使用 Fastify 和 Svelte 来构建一个完整的 Web 应用程序。我们还讨论了如何在两个应用程序之间进行文件上传并进行通信。这个示例应用程序可以用于实现更复杂的 Web 应用程序，例如一个在线图片编辑器或一个具有即时聊天功能的 Web 应用程序。
完整代码示例：https://github.com/xenbo/fastify-svelte-example.git
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64817cc748841e98940f6a38