Fastify 是一个快速、低开销、可扩展的 Node.js Web 框架。它的特点是性能卓越、插件系统灵活、开发体验友好。在使用 Fastify 开发 Web 应用的过程中，展示 API 文档非常重要。本文将介绍如何使用 Swagger UI 来展示 Fastify 应用的 API 文档。
安装 Swagger UI
Swagger UI 是一个用于展示和测试 RESTful API 文档的工具。要在 Fastify 中使用 Swagger UI，需要先安装 Swagger UI。
可以使用 npm 来安装 Swagger UI：
npm install swagger-ui-dist
编写 Swagger 文档
Swagger 是一种描述 RESTful API 的标准格式。在 Fastify 中使用 Swagger UI 展示 API 文档，需要先编写 Swagger 文档。
以下是一个简单的 Swagger 文档示例：
-- -------------------- ---- -------
-------- -----
-----
-------- -----
------ -- ---
------------ -- --- -----------
----- --------------
--------- ---
--------
- ----
- -----
---------
- ----------------
---------
- ----------------
------
-------
----
-------- --- --- -----
------------ --- --- -----
----------
----
------------ --
----
------------ -------- ------ -----
-----
-------- ------ - ----
------------ ------ - ----
-----------
- ----- ----
--- ----
------------ ---- ------
--------- ----
-------
----- ------
-----------
-----
----- ------
------
----- ------
----------
----
------------ --
----
------------ -------- ------ -----
------------
----
-------- --- - ----
------------ --- - ---- -- --
-----------
- ----- --
--- ----
------------ ---- --
--------- ----
----- -------
----------
----
------------ --
----
------------ ---- --- -----
----
------------ -------- ------ -----
----
-------- ------ - ----
------------ ------ - ---- -- --
-----------
- ----- --
--- ----
------------ ---- --
--------- ----
----- -------
- ----- ----
--- ----
------------ ---- ------
--------- ----
-------
----- ------
-----------
-----
----- ------
------
----- ------
----------
----
------------ --
----
------------ ---- --- -----
----
------------ -------- ------ -----
-------
-------- ------ - ----
------------ ------ - ---- -- --
-----------
- ----- --
--- ----
------------ ---- --
--------- ----
----- -------
----------
----
------------ --
----
------------ ---- --- -----
----
------------ -------- ------ -----在上面的示例中，定义了一个名为 My API 的 API，包含了 /users 和 /users/{id} 两个路由，分别用于获取、创建、更新和删除用户。
集成 Swagger UI
在 Fastify 中集成 Swagger UI 非常容易。只需要在 Fastify 应用中注册 fastify-static 插件，并将 Swagger UI 的静态文件目录作为静态文件服务的根目录即可。
以下是一个使用 Fastify 和 Swagger UI 的示例：
-- -------------------- ---- -------
----- ------- - --------------------
----- ---- - ---------------
-- -- -------------- --
------------------------------------------- -
----- -------------------- ----------
------- ---------------
--
-- -- --- --
---------------
------- ------
---- ------
-------- --------- ------ -- -
------------
-------- ------- --------
--
--
--
-- -- ------- --
-------------------- ----- -- -
-- ----- ----- ---
------------------- --------- -- -----------------------
--在上面的示例中，首先注册了 fastify-static 插件，并将 Swagger UI 的静态文件目录（public 目录）作为静态文件服务的根目录，并将 Swagger UI 的路由前缀设置为 /swagger-ui/。
然后定义了一个 /v1 路由，用于测试 Fastify 应用。
最后启动 Fastify 应用，并监听端口 3000。
在 Swagger UI 中展示 API 文档
要在 Swagger UI 中展示 API 文档，只需要在浏览器中访问 Swagger UI 的 URL，并将 Swagger 文档的 URL 作为参数传递给 Swagger UI。
例如，在上面的示例中，Swagger UI 的 URL 为 http://localhost:3000/swagger-ui/，Swagger 文档的 URL 为 http://localhost:3000/swagger.json，因此在浏览器中访问 http://localhost:3000/swagger-ui/?url=/swagger.json 即可展示 Swagger 文档。
结论
使用 Swagger UI 展示 API 文档对于开发者来说非常方便，可以快速了解和测试 API 接口。在 Fastify 中使用 Swagger UI 也非常简单，只需要编写 Swagger 文档并将 Swagger UI 静态文件目录作为静态文件服务的根目录即可。
希望本文对你有所启发，如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757ded4890bd9faa43978b3