简介

本项目是一个基于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>

源码

github

$ yarn
$ yarn serve

使用

组件

import ElementApiDocs from 'element-api-docs'

Vue.use(ElementApiDocs)

源码

import ElementApiDocs from '@/components'

Vue.use(ElementApiDocs)

<template>
  <el-api-docs ref="api"
               :doc-url="docUrl"
               :base-url="baseUrl"
               :data.sync="data"
               :headers.sync="headers"
               :result.sync="result"
               :auto-request="false"
               @submit="handleSubmit">
  <div slot="leftMenu">
    <el-button type="text"
               @click="handleClick">自定义按钮</el-button>
  </div>
</el-api-docs>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        docUrl: 'http://localhost:8001/v2/api-docs',
        baseUrl: 'http://localhost:8001',
        data: [{
          key: 1,
          value: 2
        }],
        headers: [{
          key: 3,
          value: 4
        }],
        result: {
          data: {},
          code: 200,
          msg: "描述信息",
        }
      }
    },
    methods: {
      handleSubmit (val) {
        console.log(val)
      },
      handleClick () {
        console.log(this.$refs.api.getConfig())
      }
    }
  }
</script>

本示例展示了组建的全部功能，正常使用的话可以只配置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 |

插槽

<el-api-docs :doc-url="docUrl">
  <div slot="leftMenu">
    <el-button type="text">自定义按钮</el-button>
  </div>
</el-api-docs>

打包

组件

$ yarn lib

源码

$ yarn build

捐赠

如果你觉得本项目帮助到你的话，可以给作者买杯咖啡。

License

MIT