Vue在线接口调试组件

• Z时代
• 2024-01-10
• 分类：综合

Vue在线接口测试组件

效果图

组件: InterfaceTest.vue

<template>
  <a-drawer
    title="在线接口测试"
    width="60%"
    placement="right"
    @close="close"
    :destroy-on-close="true"
    :visible="visible">
    <a-card :bordered="false">
      <a-row style="margin-top: 20px">
        <a-col :md="2" :sm="4">
          <a-select style="width: 90px" size="large" default-value="GET" disabled>
            <a-select-option value="GET">GET</a-select-option>
          </a-select>
        </a-col>
        <a-col :md="22" :sm="20">
          <a-input-search
            placeholder="input send url"
            v-model="tokenUrl"
            :expand-depth="5"
            @search="onSearch"
            enterButton="获 取 token"
            size="large" />
        </a-col>
      </a-row>
      <a-row style="margin-top: 20px">
        <a-col :md="2" :sm="4">
          <a-select style="width: 90px" v-model="requestMethod" size="large">
            <a-select-option value="GET">GET</a-select-option>
            <a-select-option value="POST">POST</a-select-option>
            <a-select-option value="PUT">PUT</a-select-option>
            <a-select-option value="DELETE">DELETE</a-select-option>
          </a-select>
        </a-col>
        <a-col :md="22" :sm="20">
          <a-input-search
            placeholder="input send url"
            v-model="url"
            :expand-depth="5"
            @search="onSearch"
            enterButton="发 送 请 求"
            size="large" />
        </a-col>
      </a-row>
      <a-tabs defaultActiveKey="2" style="margin-top: 10px">
        <a-tab-pane tab="Params" key="2">
          <a-textarea style="width:100%;font-size: 16px;font-weight:500;height: 300px;resize: none;" @blur="changeVal" :placeholder="paramsPlace"></a-textarea>
        </a-tab-pane>
      </a-tabs>
      <a-tabs defaultActiveKey="1" style="margin-top: 10px">
        <a-tab-pane tab="Response" key="1">
          <json-viewer
            style="background-color: #E9EBFE;min-height: 300px;"
            :value="resultJson"
            boxed>
          </json-viewer>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-drawer>
</template>
<script>
  import { axios } from \'@/utils/request\'
  export default {
    name: \'FlowTest\',
    data() {
      return {
        url: \'\',
        tokenStr: \'\',
        tokenUrl: \'\',
        paramJson: \'参数转换后对应的JSON\',
        paramsPlace: \'{\n“key1” : “value1”,\n“key2” : value2\n}\',
        visible: false,
        resultJson: {},
        requestMethod: \'GET\'
      }
    },
    methods: {
      show(record) {
        this.url = process.env.VUE_APP_API_BASE_URL + record.address
        this.tokenUrl = process.env.VUE_APP_API_BASE_URL + \'/openApi/refreshToken/\' + record.appId + \'/lzjy@2021!\'
        this.requestMethod = record.method_dictText
        this.visible = true
      },
      onSearch (value) {
        let that = this
        if (!value) {
          that.$message.error(\'请填写路径\')
          return false
        }
        this.resultJson = {}
        console.log(that.tokenStr)
        axios({
            headers: {
              \'Access-Token\': that.tokenStr
            },
            url: value,
            method: that.requestMethod,
            data: that.paramJson,
            params: that.paramJson
          }).then((res) => {
            that.resultJson = res
            if (value.indexOf(\'refreshToken\') !== -1) {
              that.tokenStr = res.result
              console.log(\'***********\' + that.tokenStr)
            }
          }).catch((err) => {
            console.log(err)
            that.$message.error(\'请求异常：\' + err)
          })
      },
      changeVal(e) {
        try {
          let json = e.target.value
          if (!json) {
            return false
          }
          this.paramJson = JSON.parse(json)
        } catch (e) {
          console.log(e)
          this.$message.error(\'非法的JSON字符串\')
        }
      },
      close () {
        this.resultJson = {}
        this.paramJson = \'\'
        this.visible = false
      }
    }
  }
</script>

以上是 Vue在线接口调试组件 的全部内容， 来源链接： utcz.com/z/377421.html