?

作者聲明：不想看作者聲明的（需要生成接口設計表的）直接前往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，希望諸位同僚能不吝賜教，向我反饋一切讓你感到蹩腳的問題，與君共勉！

?