一. 运用背景
生成的在线接少与前端人员/app开发人员的口文档确实减沟通成本,但是由于项目比较庞大,一个项目的接口由N多人同时开发,并且有成千上万个接口,这时候就出现了一个问题:当后端开发人员想去查看自己的开发的接口,或者是某个接口,就变得很头疼,只能手动去寻找。 萌生了把Swagger顶部的搜索改成更契合需求的
① 接口名称查询
② 开发作者查询
二. 解决思路/方案
去掉顶部搜索“explore”按钮事件==>>绑定新的“搜索”按钮事件==>>用户点击“搜索”前确保所有接口正常(避免二次搜索问题)==>>通过自带的search函数搜索标题含有的字符串==>>通过操作dom对象隐藏节点
代码源文件我直接放Git上,写的有点粗糙,可以优化整理下,地址(https://github.com/WatermelonMk/swaggerSearch)
或者CSDN下载资源:https://download.csdn.net/download/watermelonmk/11004522
只要替换掉dist目录下(别弄错了):index.html 和 swagger-ui-standalone-preset.js
效果图(左原