vue 根据swagger 生成接口_采用vue编写的功能强大的swagger-ui页面

think-swagger-ui-vuele

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

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

使用方式

自行下载编译

// 下载代码

git clone https://github.com/chfree/think-swagger-ui-vuele

// 安装依赖

npm install

// 直接运行

npm run dev

// 打包

npm run build

java项目 maven直接依赖

com.tennetcn.free

think-swagger-ui-starter

0.0.4

此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配置的相关信息在此处进行展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562515.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

选择排序--Java

选择排序:合适的元素放在合适的位置 1、每一次遍历的过程中,都假定第一个索引处的元素是最小值,和其他索引处的值依次进行比较,如果当前索引处的值大于其他某个索引处的值,则假定其他某个索引处的只为最小值&#xff…

python re正则查找_python正则表达式 - re

1,匹配符号基本元字符. : 任意字符,除了\n,flags设置为DOTALL(S)可以让.匹配\n|:逻辑或\:转义():捕获组空白字符[\b] : 回退\f : 换页\n : 换行\r : 回车\t : 制表tab\v : 垂直制表特定字符\d : 数字&#…

Comparable接口的使用:(知识回顾)

Comparable接口的使用&#xff1a;&#xff08;知识回顾&#xff09; 1、定义一个学生类&#xff0c;具有年龄age和姓名username两个属性&#xff0c;并通过Comparable接口提供比较规则。 package demo02.sort; public class Student implements Comparable<Student>{p…

maven没有resource文件夹_maven项目中没有resource文件夹的问题

之前使用eclipse创建maven项目,文件夹都是建好的,这几次创建,都没有resource文件夹,需要手动创建resource.现象描述在eclipse中,创建maven项目有两种方式:一种是勾选Create a simple project(skip archetype selection)然后直接输入Group Id ,Artifact Id 如下图.就能创建一个m…

binary search(二分法)

binary search&#xff08;二分法&#xff09;&#xff1a; 代码&#xff1a; import java.util.Arrays;/*** 二分法查找元素*/ public class BinarySearch {public static void main(String[] args) {int[] arr {30,20,50,10,80,9,7,12,100,40,8};int searchWord 20;//要查…

冒泡排序--Java

1、冒泡排序 import java.util.Arrays; /*** 冒泡排序*/ public class Test01 {public static void main(String[] args) {int[] values {3,1,6,2,9,0,7,4,8,5};System.out.println("排序前数组&#xff1a;" Arrays.toString(values));int temp;for (int i 0; i …

react封装函数_react request.js 函数封装

1.request.js 函数封装import { Toast } from antd-mobile;import axios from axios;import store from ../store;import { push } from react-router-redux;import qs from qs;// 请求路径const BaseUrl https://www.baidu.com/; // 主机及端口//axios默认配置请求的api基础…

Java_FileInputStream_读一个文件

Java_FileInputStream_读一个文件 代码: package demo01;import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException;public class FileInputStreamTest01 {public static void main(String[] args) {FileInputStream fis null;tr…

最大化窗口设置_Qt学习笔记4(窗口操作及插入图片)

窗口操作&#xff1a;Qt全屏显示函数 showFullScreen() Qt最大化显示函数 showMaximized()Qt最小化显示函数 showMinimized()Qt固定尺寸显示函数 resize(x,y)Qt设置最大尺寸函数 setMaximumSize(w,h)Qt设置最小尺寸函数 setMinimumSize(w,h)插入图片&#xff1a;Qt中没有Image组…

JDBC练习一

JDBC练习一 import java.sql.*;public class JDBCTest01 {public static void main(String[] args) {Connection conn null;Statement stmt null;try{// 1、注册驱动Driver driver new com.mysql.jdbc.Driver(); //多态&#xff0c;父类型引用指向子类型对象DriverManager.…

php任务分配思路_PHP执行定时任务的几种方法思路

PHP本身是没有定时功能的&#xff0c;PHP也不能多线程。PHP的定时任务功能必须通过和其他工具结合才能实现&#xff0c;例如WordPress内置了wp-cron的功能&#xff0c;很厉害。本文&#xff0c;我们就来深入的解析几种常见的php定时任务的思路。1、Linux服务器上使用CronTab定时…

JDBC练习二

JDBC练习二 import java.sql.*; /*JDBC完成Delete */public class JDBCTest02 {public static void main(String[] args) {// 1、注册驱动// 2、获取连接// 3、获取数据库操作对象// 4、执行sql语句// 5、获取查询结果集// 6、释放资源Connection conn null;Statement stmt …

dhrystone测试结果_Linux性能测试工具-UnixBench--安装以及结果分析-阿里云开发者社区...

UnixBenchunixbench是一个用于测试unix系统性能的工具&#xff0c;也是一个比较通用的benchmark&#xff0c; 此测试的目的是对类Unix 系统提供一个基本的性能指示&#xff0c;很多测试用于系统性能的不同方面&#xff0c;这些测试的结果是一个指数值(index value&#xff0c;如…

JDBC练习三

JDBC练习三 import java.sql.*; /*注册驱动的另一种方式 */public class JDBCTest03 {public static void main(String[] args) {try{// 注册驱动Class.forName("com.mysql.jdbc.Driver");// 获取连接Connection conn DriverManager.getConnection("jdbc:mysq…

mailbox 编程_MailboxProcessor从C#

虽然可以使用MailboxProcessor< T>直接从C#(使用C#异步扩展),如我的另一个答案中所指出的,这不是一件好事 – 我主要是为了好奇而写的.邮箱处理器< T>类型被设计为从F#使用,所以它不适合C#编程模型.你可能可以为C#实现类似的API,但它不会那么好(当然不是C#4.0). TP…

JDBC练习四

JDBC练习四 import java.sql.*; import java.util.*; /*使用资源绑定器 */ public class JDBCTest04 {public static void main(String[] args) {ResourceBundle bundle ResourceBundle.getBundle("jdbc");String driver bundle.getString("driver");St…

JDBC练习五

JDBC练习五 /*执行DQL语句 */import java.sql.*; import java.util.*;public class JDBCTest05 {public static void main(String[] args) {// 1、注册驱动// 2、建立连接// 3、获取数据库操作对象// 4、执行sql语句// 5、获取查询结果集// 6、释放资源Connection conn null;…

gradle 查看依赖类库版本_如何查找第三方库(Gradle引用)的依赖?

原标题&#xff1a;如何查找第三方库(Gradle引用)的依赖?如何查找第三方库(Gradle引用)的依赖?每日一问-Tools-20181105答: 三方法可查找.1. 执行 Gradle Task : androidDependencies可以直接执行gradleandroidDependencies执行结果将在控制台直接输出.可以在控制台直接查看,…

JDBC小记

JDBC小记 前言 昨天刚冲完了jdbc,今天来总结 一.JDBC介绍 JDBC (百度百科): Java数据库连接&#xff0c;&#xff08;Java Database Connectivity&#xff0c;简称JDBC&#xff09;是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口&#xff0c;提供了诸如查询…

云联惠认证时间_云联惠强制关闭真正原因是什么?

展开全部云联惠强制关闭的原因是云联惠为特大网络传销犯罪62616964757a686964616fe78988e69d8331333433616232团伙。广东云联惠网络科技有限公司成立于2014年1月6日&#xff0c;法定代表人是黄观勇。2018年5月8日&#xff0c;广东省公安厅部署广州警方开展收网行动&#xff0c;…