建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
wagger-ui有非常多的版本，覺(jué)得不太好用，用postman，每個(gè)接口都要自己進(jìn)行錄入。所以在基于think-vuele進(jìn)行了swagger格式j(luò)son的解析，自己實(shí)現(xiàn)了一套swaggerui界面。
swagger分為后端數(shù)據(jù)提供方方和前端頁(yè)面展示請(qǐng)求方。從一定角度來(lái)看，swagger是一種標(biāo)準(zhǔn)的數(shù)據(jù)格式的定義，對(duì)于不同語(yǔ)言進(jìn)行實(shí)現(xiàn)一些注解API式的東西，能快速生成這種描述restful格式的api信息的json串。
此項(xiàng)目模塊依賴(lài)于think-vuele
demo：
http://sw.tennetcn.com
github：
https://github.com/chfree/think-swagger-ui-vuele
使用方式
自行下載編譯
- // 下載代碼
- git clone https://github.com/chfree/think-swagger-ui-vuele
- // 安裝依賴(lài)
- npm install
- // 直接運(yùn)行
- npm run dev
- // 打包
- npm run build
java項(xiàng)目 maven直接依賴(lài)
com.tennetcn.free think-swagger-ui-starter 0.0.4
此jar包的開(kāi)源項(xiàng)目為think-free-base中的子項(xiàng)目模塊
登陸
登陸界面分為json模式和swagger請(qǐng)求地址訪(fǎng)問(wèn)，沒(méi)多大區(qū)別，只有拿到標(biāo)準(zhǔn)的swagger的json數(shù)據(jù)即可。Java知音公眾號(hào)內(nèi)回復(fù)“后端面試”，送你一份Java面試題寶典。
支持兩種主題，一種是后端管理系統(tǒng)模式的主題。另外一種也是類(lèi)似，中間1024px進(jìn)行居中，兩邊留白。
主頁(yè)
對(duì)于我使用過(guò)的一個(gè)版本的swagger來(lái)說(shuō)，當(dāng)接口數(shù)量在1000+以上，會(huì)等的時(shí)間非常長(zhǎng)，原因是他一次將所有接口數(shù)據(jù)進(jìn)行解析渲染，這個(gè)就是慢的原因。推薦閱讀：設(shè)計(jì)模式入門(mén)
所以我將此進(jìn)行優(yōu)化，改為先解析出api摘要信息，然后在點(diǎn)擊摘要的時(shí)候進(jìn)行請(qǐng)求頭、請(qǐng)求體的渲染；基本可以做到秒開(kāi)
可以自動(dòng)填充非json請(qǐng)求體的數(shù)據(jù)，采用的是mock.Random。
對(duì)于json請(qǐng)求體的數(shù)據(jù)，可以進(jìn)行json格式化編輯，也是非常方便。json在線(xiàn)格式化編輯使用的是josdejong大神的jsoneditor
對(duì)于響應(yīng)數(shù)據(jù)直接采用json格式化組件進(jìn)行格式化展示，支持展開(kāi)層級(jí)。再也不用將返回的數(shù)據(jù)在去找相關(guān)的json格式化工具進(jìn)行格式化了。格式化控件采用的是chenfengjw163大神的vue-json-viewer
設(shè)置
在后端api請(qǐng)求的時(shí)候，一般都會(huì)在請(qǐng)求頭中帶一些token的驗(yàn)證，來(lái)進(jìn)行用戶(hù)標(biāo)識(shí)，所以在設(shè)置中，進(jìn)行了自定義請(qǐng)求頭的設(shè)置，可以方便的設(shè)置相關(guān)的請(qǐng)求頭,在任何一個(gè)請(qǐng)求都會(huì)自動(dòng)帶上設(shè)置的請(qǐng)求信息。
swagger 信息展示
來(lái)源于后端swagger配置的相關(guān)信息在此處進(jìn)行展示
文章題目：一款vue編寫(xiě)的功能強(qiáng)大的swagger-ui，有點(diǎn)秀（附開(kāi)源地址）
文章轉(zhuǎn)載：http://www.5511xx.com/article/cceocco.html
