简介
本项目是一个基于element-ui,swagger2的快速接口测试工具。其实swagger-ui已经可以满足接口测试的场景,但是我们项目要求接口参数加密,这就导致了swagger-ui无法使用,所以诞生了此项目。
另外,直接使用本项目可能会存在跨域的问题,请在后台设置测试环境下允许跨域。(正式环境请禁用swagger2)
安装
组件
$ npm i element-api-docs或$ yarn add element-api-docs
如果使用导出功能,请在index.html中自行引入以下js,并且加入public文件夹下的api-template.docx模板
<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.9.1/docxtemplater.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.6.1/jszip.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.js"></script>
源码
$ yarn$ yarn serve
使用
组件
import ElementApiDocs from 'element-api-docs' Vue.use(ElementApiDocs)
源码
import ElementApiDocs from '@/components' Vue.use(ElementApiDocs)
自定义按钮
本示例展示了组建的全部功能,正常使用的话可以只配置doc-url,其余属性皆有默认值,详情见下。
属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
aside-width | 左侧栏宽度 | Number | 350 |
doc-url | swagger2接口文档地址(/v2/api-docs) | String | "" |
base-url | axios请求baseUrl | String | swagger2文档中的baseUrl |
data | 初始请求参数,格式为[{key: '', value: '', required: false}] | Array | [{}] |
headers | 初始请求头,格式为[{key: '', value: ''}] | Array | [{}] |
result | 返回结果预展示 | Object | { data: {}, code: 200, msg: "描述信息" } |
validate | 提交时是否校验参数 | Boolean | true |
auto-request | 提交时是否自动请求,若为false请使用@submit接受拼装好的参数,自行处理请求 | Boolean | true |
export-btn | 是否显示导出按钮 | Boolean | false |
data、headers、result可通过.sync修饰符获取到实时组件内值的变化
若使用导出功能,请在index.html中自行引入以下js,并且加入public文件夹下的api-template.docx模板
<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.9.1/docxtemplater.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.6.1/jszip.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.js"></script>
事件
名称 | 说明 | 回调参数 |
---|---|---|
submit | auto-request为false时此事件存在,可自行处理参数 | axios的config |
方法
名称 | 说明 | 返回值 |
---|---|---|
getConfig | 获取拼接好的axios的config,可直接用于axios请求 | config |
插槽
自定义按钮
打包
组件
$ yarn lib
源码
$ yarn build
捐赠
如果你觉得本项目帮助到你的话,可以给作者买杯咖啡。