基于 Vue+Element 美化SwaggerUI

基于 Vue+Element 美化SwaggerUI

写在前面

本项目基于think-swagger-ui-vuele进行改造和升级,主要是修复了原项目中一些已知bug以及部分由 swagger JSON 数据不规范导致的错误,新增了部分快捷操作功能,提高使用者体验,以及改造了整个界面的风格,使其看起来更像elementUI.(这个纯属个人喜好,原作者的风格看着也挺好的,只是个人感觉灰棕色有点压抑)

  • 原 think-swagger-ui-vuele 的体验地址:demo
  • 作者改造后的体验地址:my-swaggerui

支持https访问,如果输入swagger链接访问提示跨域,或者需要使用https访问,则请通过https访问https://mingyong-g.gitee.io/my-swaggerui/#/

原think-swagger-ui-vuele 介绍 think-swagger-ui-vuele介绍


界面效果

  • admin 模式
    基于 Vue+Element 美化SwaggerUI_第1张图片

  • simple模式
    基于 Vue+Element 美化SwaggerUI_第2张图片

如何使用

  • 通过swagger文档链接访问

基于 Vue+Element 美化SwaggerUI_第3张图片

  • 通过swagger JSON数据访问、

基于 Vue+Element 美化SwaggerUI_第4张图片

项目地址

  • github: https://github.com/mingyong-g/my-swaggerui

  • gitee: https://gitee.com/mingyong-g/my-swaggerui

  • demo-github: https://mingyong-g.github.io/my-swaggerui/

  • demo-gitee: https://mingyong-g.gitee.io/my-swaggerui/


(完)
基于 Vue+Element 美化SwaggerUI_第5张图片

你可能感兴趣的:(VUE,点滴DayUP,swagger,UI,swagger美化,Vue+swagger,自定义swagger,前端处理swagger)