前言
Swagger 是一种流行的 API 文档生成工具，它可以通过解析 API 代码生成文档，并提供了一套完整的交互式 API 文档页面。Fastify 是一个快速、低开销、可扩展的 Web 框架，它可以与 Swagger 集成，提供了一种简单的方式来展示 API 文档。
本文将介绍如何在 Fastify 中使用 Swagger UI，以及如何根据自己的需求进行定制化。
安装
首先，需要安装 fastify-swagger 和 fastify-static 两个插件。可以使用 npm 进行安装：
--- ------- --------------- --------------
快速上手
在 Fastify 中使用 Swagger UI，需要进行以下步骤：
- 安装
fastify-swagger和fastify-static两个插件 - 添加 Swagger UI 路由和静态文件目录
- 配置 Swagger UI
- 启动服务器
代码示例：
----- ------- - --------------------
----- ------- - --------------------------
----- ---- - ---------------
------------------------- -
------------ --------
-------- -
----- -
------ --- -----
------------ ---- ---------------
-------- -------
--
------------- -
---- ---------------------
------------ ----- ---- ---- -----
--
----- -----------------
-------- ---------
--------- ---------------------
--------- --------------------
--
------------ ----
--
------------------------------------------- -
----- -------------------- ----------
------- ----------
--
-------------------- -------- ----- -------- -
-- ----- -
------------------
---------------
-
------------------- --------- -- ------------
--这段代码做了以下几件事情：
- 注册
fastify-swagger插件，并设置 Swagger UI 的路由为/docs - 注册
fastify-static插件，并设置静态文件目录为public，前缀为/public/ - 配置 Swagger UI 的一些基本信息，如标题、描述、版本、主机地址、协议等
- 启动服务器，监听 3000 端口
现在，可以在浏览器中访问 http://localhost:3000/docs/，即可看到 Swagger UI 的页面。
自定义 UI
Swagger UI 提供了一些默认的样式和布局，但是可能并不符合我们的需求。如果需要进行自定义，可以通过修改 CSS 和 JavaScript 文件来实现。
在 Fastify 中，可以通过在 public 目录下添加自定义的 CSS 和 JavaScript 文件来覆盖默认的文件。
例如，可以在 public 目录下添加一个名为 my-style.css 的文件，并在 HTML 文件中引入：
----- ---------------- --------------------------- --
这样就可以使用自定义的样式了。
如果需要修改 Swagger UI 的行为，可以在 public 目录下添加一个名为 my-script.js 的文件，并在 HTML 文件中引入：
------- ------------------------------------
在 my-script.js 文件中，可以通过修改 SwaggerUIBundle 对象来实现自定义行为。例如，可以修改 SwaggerUIBundle.plugins.DownloadUrl 对象来修改下载按钮的行为：
----------------------------------- - ---------- -
------ -
--------------- -
------------ -------- ---------- - ----- -- -
----- ----------- - ------- -- -
----- - --- - - -----
----- ----------- - -- -- -
----------------------
-
------ -
-----
------- ---------------------------------------
-- ---------- ----------------- --------
------
-
-
------ -----------
-
-
-
-这样就可以在点击下载按钮时执行自定义的行为了。
结论
在本文中，我们介绍了如何在 Fastify 中使用 Swagger UI，并进行了一些基本的定制化。通过阅读本文，你应该已经掌握了如何在 Fastify 项目中添加 Swagger UI，并进行一些简单的自定义。如果想要更深入地了解 Swagger 和 Fastify，可以参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673ea8a290e7ed93bee424f4