快速导出接口设计表——基于DOMParser的Swagger接口详情半自动化提取方法

作者声明：不想看作者声明的（需要生成接口设计表的）直接前往https://capujin.github.io/A2T/。

注：Github Pages生成的页面可能会出现访问不稳定，暂时没将源码上传至Github，如有需要，可联系我私发。

前言

使用：打开你的swagger网页，展开你需要导出表的api详细，F12打开控制台，打开“元素”面板，向上滑动找到html标签，右击选择复制标签/复制html啥的，然后打开上面的网站复制到输入区，单击“开始解析”按钮。

效果展示：

第1章 绪论

空格发牢骚

1.1 研究背景与意义

空格我选题是xx系统的设计与实现，然后其中一章我定为“系统设计”，然后在这展示详细的“接口设计”（见图1-1）。使用《基于DOMParser的Swagger接口详细半自动化提取方法》可以快速帮助实现多接口设计表的插入。

图1-1 系统设计子标题

1.2 研究现状

1.2.1 前辈的研究现状

空格参考了多位前辈的接口设计篇，无一例外用的类三线表，如图1-2所示：

图1-2 前辈的接口设计表

1.2.2 我的研究现状

空格但是...但是我的这破玩意太多了，一想到六个模块我要写这么多英文字母，我就想爆粗，实在是干不动了。

图1-3 我的Swagger接口组

空格去网上各种扒，“一键生成接口设计表”、“接口表在线生成”、“Swagger接口转表格”....结果一无所获，更烦了。

1.3 本章小结

空格本章详细阐述了作者发布这篇CSDN的原因，同时为了凑页数和水字数，作者决定攻克接口设计表快速生成这一耗时问题，提供实用方案。经过详细分析，作者发现该方法存在明显的适配性和限制性缺陷，主要适用于后端已集成Swagger作为接口文档工具，并且使用者正处于撰写系统接口设计文档阶段的场景。因此，本章不仅介绍了这一快速生成方法，还通过对其局限性的深入探讨，帮助读者更全面地了解其适用范围，避免在实际项目中不恰当地使用，从而节省时间和资源。

第2章  相关技术概述

空格但我学的啥？前端啊！别的不会，F12打开个控制台copy个网页源码，然后拿源码提取关键信息借助ChatGPT来帮我转成表格还不会吗？（！脑袋上一个电灯泡）

2.1 开发人员工具

空格打开Swagger页面，按F12或Ctrl+shift+I即可打开“控制台”面板（如图2-1所示）。需要关注的为：

图2-1 控制台面板

空格① 元素检查。使用方法，点击后将鼠标移至页面视图，会自动在③中高亮指定代码块。

空格② 控制台。使用方法，运行js代码。

空格③ 元素。使用方法，和①相反鼠标指定代码块，会自动在页面视图高亮指定区域，如图2-2所示：

图2-2 鼠标在代码块时的页面效果

2.2 DOMParser

空格DOMParser是Web API中文档对象模型的API，​ 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。 ​说人话就是DOMParser 是浏览器内置对象可以用new语法，它可以把一段HTML 字符串转成可以用JS代码操作的dom结构。

图2-3 DOMParser使用示例

2.3 Vue3 + Vite

空格vite快速初始化、打包配合vue3响应式处理，嗷嗷叫的快。

2.4 其他第三方库

2.4.1 Element Plus

空格都快成vue项目的标配组件库了。

2.4.2 Supabase.js

空格一个开源的线上数据库，每个月有限制可调用的tokens，适合我这种没服务器的还有时候需要搞点线上服务的。

2.4.3 Intro.js

空格一个用于制作网页引导效果的js插件,用法很简单。

2.4.4 Pixpin

空格一个用于电脑截图的强大截图工具，支持横向/竖向滚动截屏。下载地址：https://pixpin.cn/

 2.4.5 Gihub Pages

空格GitHub Pages 是由 GitHub 提供的一项免费服务，允许用户将代码仓库（repository）中的静态内容发布为网站，相当于免费将自己的demo部署到线上，让所有可访问。

第3章 需求分析

空格这个系统的主旨就是为了免费帮助那些，那些写论文的，计算机论文的，尤其是写系统设计类论文的并且还想在论文开一篇名为“接口设计”篇来水页数字数的，在网上苦苦找寻不到一键生成设计表的，又懒得自己在word里一点点敲的，恰巧后端代码用了swagger的，苦逼大学生的。

空格作为符合以上需求的苦逼大学生，现将我的需求分析如下：

空格1. 能根据我的Swagger网页源码抽取我想要的结构，包括接口名、请求方式、请求参数，相应类型等内容，如图3-1所示：

图3-1 Swagger抽取目标内容

空格2. 抽取后，应该能在页面生成表格，并且表格要支持修改，比如自定义列宽、自定义表头、自定义表格边框线等表格操作。

空格3. 满足上面两个核心需求后，接下来就是扩展需求了，比如对表格样式的自定义配置要实现存储、读取功能，对抽取内容进行编辑，比如某个抽取的内容不满意要能提供手动修改等等。

第4章 系统设计与实现

空格根据上一章的分析，我们大致明确了系统需要实现什么功能，下面将对系统的设计与实现做出详细概述。

空格系统主界面如下图4-1所示，左侧为输入html数据源，右侧为视图窗口，左下角为功能区。

图4-1 系统主界面

空格在点击“开始解析”按钮后，在视图区会加载解析结果（如图4-2所示），同时“开始解析”变成“已解析”字样。

图4-2 解析结果视图

空格在右侧视图标题右侧，可点击“切换视图”按钮，切换到指定视图，如图4-3所示。

图4-3 切换视图功能

第5章 结语

空格两天的时间匆忙写完，肯定有诸多bug，希望诸位同僚能不吝赐教，向我反馈一切让你感到蹩脚的问题，与君共勉！