前言
在现代的 Web 开发中，前后端分离已成为一种趋势，前端工程师需要了解后端接口的定义和参数规范。Swagger UI 是一种工具，可以方便地查看和测试 REST API 接口。本文将介绍如何在 Fastify 中使用 Swagger UI。
Fastify 简介
Fastify 是一个快速和低开销的 Web 框架，底层使用了类似 Node.js 的流和 Fastify 内建的插件系统，提供了高性能和低开支的 Web 开发体验。它的插件模块化和内建类型定义支持，使得它在构建大型系统方面非常有用。
Swagger UI 简介
Swagger UI 是一个开源工具，它可以生成 API 文档并提供用户交互式的方式来测试 API。它支持 RESTful API，通过分析 API 的 Swagger 规范文件来生成文档，并提供交互式的方式来测试这些 API。
在 Fastify 中使用 Swagger UI
1. 安装 Swagger UI
首先需要安装 Swagger UI，可以通过 npm 命令来安装。
npm install swagger-ui-dist
2. 添加 Swagger UI 路由
在你的 Fastify 应用中添加一个路由来提供 Swagger UI，例如：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - --------------------
-------------------- ----- ----- ------ -- -
-----------------------
------------
--------- -----
------
------
---------- ---------------------
----- ---------------- --------------- ----------------------------------------------------------------------------------- --
-------
------
---- ----------------------
------- --------------------------------------------------------------------------------------------------
--------
------------- - ---------- -
----- -- - -----------------
---- ----------------
------- --------------
-------- -
-----------------------------
-----------------------------------------
--
------- ------------------
---
-
---------
-------
-------
--
--这里我们定义了一个路由 /docs，返回了一个 HTML 页面，用于加载 Swagger UI。我们使用了 CDN 引入了 Swagger UI 的 CSS 和 JS 文件，并在页面的 onload 事件中初始化 Swagger UI，并传入了一些配置。
其中 url 属性指定了 Swagger 规范文件的 URL，这里我们将要新建该规范文件，dom_id 属性指定了 Swagger UI 的容器，presets 属性用于配置 UI 的预设，layout 属性指定了 UI 的布局方式。
3. 生成 Swagger 规范文件
接下来，我们需要为我们的 API 生成 Swagger 规范文件。可以使用 Fastify Swagger 插件 来自动生成。
npm install fastify-swagger
使用插件非常简单，只需要添加一些配置。
-- -------------------- ---- -------
----- ------- - --------------------
----- ------- - --------------------------
------------------------- -
------------ --------
-------- -
----- -
------ ---- ---------------
------------ ----- --- ------------- ----- ------- -- --- ---------
-------- -------
--
------------- -
---- ---------------------
------------ ----- ---- ---- -----
--
----- -----------------
-------- ---------
--------- ---------------------
--------- ---------------------
-------------------- -
----------- -
----- ---------
----- ----------------
--- --------
-
-
--
------------ ----
--这里我们将 Swagger UI 的路由配置为 /docs，利用 fastify-swagger 插件自动生成 Swagger 规范文件，并且将其绑定到我们之前定义的 Swagger UI 页面上。
4. 测试 API
现在，我们的 Fastify 应用已准备好处理 Swagger UI 页面和 Swagger 规范文件了。访问 http://localhost:3000/docs，你将看到一个交互式的 Swagger UI 页面，并且可以在其中测试和调用 API。
结论
使用 Swagger UI 可以为前后端分离的 Web 开发过程中提供更好的协作体验。在 Fastify 中使用 Swagger UI 也非常简单，只需要几行代码和一些配置，就可以为你的 API 提供交互式的文档和测试方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcf98d44713626017546bf