在前端开发中，接口文档是非常重要的一环。Swagger UI 是一个非常流行的工具，可以帮助我们自动生成接口文档，并且以可视化的方式呈现出来。在 Fastify 框架中，我们可以通过一些简单的步骤来引入 Swagger UI，并展示我们的接口文档。
步骤一：安装 Swagger UI
首先，我们需要安装 Swagger UI。可以通过 npm 来安装：
npm install swagger-ui-dist
步骤二：编写 Swagger 配置文件
接下来，我们需要编写 Swagger 配置文件。这个文件描述了我们的接口文档的所有信息，包括接口的 URL、请求参数、响应参数等等。这里我们以一个简单的例子来说明：
-- -------------------- ---- -------
-------- -----
-----
-------- -----
------ -- ---
------------ -- --- -----------
--------- ----
--------
- ----
---------
- ----------------
---------
- ----------------
------
-------
----
-------- --- -----
------------ --- - ---- -- -----
----------
------
------------ --
-------
----- -----
------
----- ------
-----------
-----
----- ------
----
----- -------
------
----- ------
------
----- ------步骤三：引入 Swagger UI
最后，我们需要在 Fastify 中引入 Swagger UI，并将 Swagger 配置文件传递给它。可以通过以下方式来实现：
-- -------------------- ---- -------
----- ------- - --------------------
----- --------- - --------------------------
----- --------------- - -------------------------
------------------------------------------- -
----- ------------------------------
------- --------------
--
---------------------------- ----- ------ -- -
---------------------------
--
-------------------- ----- ------ -- -
-----------------------
------------
------
------
----- ---------------- --------------- ----------------------------------
------- ------------------------------------------------
-------
------
---- ----------------------
--------
------------- - ---------- -
----- -- - -----------------
---- ----------------
------- -------------
--
-
---------
-------
-------
--
--以上代码中，我们首先引入了 Swagger UI 和 Swagger 配置文件。然后，我们使用 fastify-static 插件将 Swagger UI 的静态文件提供给 Fastify。接着，我们定义了一个路由 /swagger.json，用来返回 Swagger 配置文件。最后，我们定义了一个路由 /docs，用来展示 Swagger UI。
结论
通过以上步骤，我们就可以在 Fastify 中引入 Swagger UI，并展示我们的接口文档了。这对于团队协作和接口调试都非常有帮助。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675f82dbe49b4d0716255ae5