vue编写的功能强大的swagger-ui页面及使用方式

目录
  • think-swagger-ui-vuele
  • 使用方式
  • 登陆
  • 主页
  • 设置
  • swagger 信息展示

think-swagger-ui-vuele

swagger-ui有非常多的版本，觉得不太好用，用postman，每个接口都要自己进行录入。所以在基于think-vuele进行了swagger格式json的解析，自己实现了一套swaggerui界面。

swagger分为后端数据提供方方和前端页面展示请求方。从一定角度来看，swagger是一种标准的数据格式的定义，对于不同语言进行实现一些注解API式的东西，能快速生成这种描述restful格式的api信息的json串.

此项目模块依赖于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

// 安装依赖
npm install
// 直接运行
npm run dev
// 打包
npm run build

java项目 maven直接依赖

<dependency>
  <groupId>com.tennetcn.free</groupId>
  <artifactId>think-swagger-ui-starter</artifactId>
  <version>0.0.4</version>
</dependency>

此jar包的开源项目为think-free-base中的子项目模块

登陆

登陆界面分为json模式和swagger请求地址访问，没多大区别，只有拿到标准的swagger的json数据即可。

支持两种主题，一种是后端管理系统模式的主题。另外一种也是类似，中间1024px进行居中，两边留白。

主页

对于我使用过的一个版本的swagger来说，当接口数量在1000+以上，会等的时间非常长，原因是他一次将所有接口数据进行解析渲染，这个就是慢的原因。

所以我将此进行优化，改为先解析出api摘要信息，然后在点击摘要的时候进行请求头、请求体的渲染；基本可以做到秒开

可以自动填充非json请求体的数据，采用的是mock.Random。

对于json请求体的数据，可以进行json格式化编辑，也是非常方便。json在线格式化编辑使用的是josdejong大神的jsoneditor

对于响应数据直接采用json格式化组件进行格式化展示，支持展开层级。再也不用将返回的数据在去找相关的json格式化工具进行格式化了。格式化控件采用的是chenfengjw163大神的vue-json-viewer

设置

在后端api请求的时候，一般都会在请求头中带一些token的验证，来进行用户标识，所以在设置中，进行了自定义请求头的设置，可以方便的设置相关的请求头,在任何一个请求都会自动带上设置的请求信息。

swagger 信息展示

来源于后端swagger配置的相关信息在此处进行展示

到此这篇关于vue编写的功能强大的swagger-ui页面的文章就介绍到这了,更多相关vue swagger-ui页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue 使用typescript如何优雅的调用swagger API

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学. 前端如何优雅的调用呢? 入门版 根据文档,用axios自动来调用 // 应用管理相关接口 import axios from '../interceptors.js' // 获取应用列表 export const getList = (data) => { return axios({ url: '/app/list?s

  • vue编写的功能强大的swagger-ui页面及使用方式

    vue编写的功能强大的swagger-ui页面及使用方式

    目录 think-swagger-ui-vuele 使用方式 登陆 主页 设置 swagger 信息展示 think-swagger-ui-vuele swagger-ui有非常多的版本,觉得不太好用,用postman,每个接口都要自己进行录入.所以在基于think-vuele进行了swagger格式json的解析,自己实现了一套swaggerui界面. swagger分为后端数据提供方方和前端页面展示请求方.从一定角度来看,swagger是一种标准的数据格式的定义,对于不同语言进行实现一些注解

  • vue 点击按钮 路由跳转指定页面的实现方式

    vue 点击按钮 路由跳转指定页面的实现方式

    目录 点击按钮 路由跳转指定页面 最终效果 vue跳转页面常用的方式 1:router-link跳转 2:this.$router.push() 3.this.$router.replace() 4.this.$router.go(n) ps : 区别 点击按钮 路由跳转指定页面 最终效果 点击指定按钮,跳转指定 /login 页面 代码: <button @click="gotolink" class="btn btn-success">点击跳转页面&

  • 上手简单,功能强大的Python爬虫框架——feapder

    上手简单,功能强大的Python爬虫框架——feapder

    简介 feapder 是一款上手简单,功能强大的Python爬虫框架,使用方式类似scrapy,方便由scrapy框架切换过来,框架内置3种爬虫: AirSpider爬虫比较轻量,学习成本低.面对一些数据量较少,无需断点续爬,无需分布式采集的需求,可采用此爬虫. Spider是一款基于redis的分布式爬虫,适用于海量数据采集,支持断点续爬.爬虫报警.数据自动入库等功能 BatchSpider是一款分布式批次爬虫,对于需要周期性采集的数据,优先考虑使用本爬虫. feapder除了支持断点续爬.数

  • 使用vue编写一个点击数字计时小游戏

    使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束. 1.首先下载vue源码,下载地址http://cn.vuejs.org 2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解) 3.建立一个普通的ht

  • Android组合控件实现功能强大的自定义控件

    Android组合控件实现功能强大的自定义控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 上文说过了如何继承现有控件来自定义控件:<Android继承现有控件拓展实现自定义控件textView>,这节我们来讨论第二个议题.怎么将控件组合来实现一个功能强大的自定义控件. 先看看创建组合控件的好处吧,创建组合控件能够很好的创建具有组合功能的控件集合.那我们一般又是怎么做的了,一般我们来继承一个合适的ViewG

  • springboot+vue实现登录功能的最新方法整理

    目录 一.介绍 二.环境工具 三.搭建后端spring-boot框架 1.选择Spring Initializr创建新项目 2.CommonResult类 3.IErrorCode 接口 4.ResultCode 枚举 5.User类 6.LoginController类 7.修改DemoApplication 8.更改端口号在application.yml 9.不同端口需要解决跨域问题 四.搭建前端Vue框架 1.创建Vue项目 2.添加项目依赖框架 2.1 使用Vue项目管理器添加依赖 2.

  • 详解用vue编写弹出框组件

    前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的.这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读. 设计组件的思考 其实单纯的编写一个弹出框组件并不难,写一个模板,然后用v-if或者v-show指令还控制组件的出现与消失.真正困扰我的是,这个组件的调用方式,这个问题纠结了我好久. 调研了下资料,有些人建议,直接把组件标签插进模板中,然后通过直接控制组件

  • asp.net(C#)实现功能强大的时间日期处理类完整实例

    本文实例讲述了asp.net(C#)实现功能强大的时间日期处理类.分享给大家供大家参考,具体如下: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts

  • 使用vue编写h5公众号跳转小程序的实现代码

    前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求:微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 跳转小程序主要的标签是 wx-open-launch-weapp 第一步在vue项目下public文件夹下的index.html页面,引入

  • asp.net core 集成swagger ui的原理解析

    asp.net core 集成swagger ui的原理解析

    什么是Swagger? 说swagger 之前,我们先说一下OpenApi 规范. OpenApi 是一种和语言无关的用于描述RESTAPIs 接口功能的一种规范,对RESTAPIs 接口的描述包括: 接口参数信息.接口返回值信息.api 功能描述.请求路径等. 这里我们说OpenApi 只是一种规范,既然是一种规范,就必然有相应的实现,Swagger 就是其中一个实现了Open Api 规范的工具. .net 中RESTAPIs的代表便是 web api ,并且.net 针对Web Api 也

随机推荐