Blame view

ant-design-vue-jeecg/src/views/jeecg/InterfaceTest.vue 2.4 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <a-card :bordered="false">
    <a-row style="margin-top: 20px">
      <a-col :md="2" :sm="4">
        <a-select defaultValue="POST" style="width: 90px" @change="handleChange" size="large">
          <a-select-option value="POST">POST</a-select-option>
          <a-select-option value="GET">GET</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"
          @search="onSearch"
          enterButton="Send"
肖超群 authored
18
          size="large"/>
肖超群 authored
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
      </a-col>
    </a-row>

    <a-tabs defaultActiveKey="2">
      <a-tab-pane tab="params" key="2">
        <textarea style="width:100%;font-size: 16px;font-weight:500" :rows="13" @blur="changeVal">
        </textarea>
      </a-tab-pane>
    </a-tabs>

    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="response" key="1">
        <textarea style="width:100%;font-size: 16px;font-weight:500" :rows="10" v-html="resultJson" readOnly>
        </textarea>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
肖超群 authored
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import {axios} from '@/utils/request'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import Vue from 'vue'

export default {
  name: 'FlowTest',
  data() {
    return {
      url: "",
      paramJson: "",
      resultJson: {},
      requestMethod: "POST"
    }
  },
  methods: {
    onSearch(value) {
      let that = this
      if (!value) {
        that.$message.error("请填写路径")
        return false
肖超群 authored
58
      }
肖超群 authored
59
60
61
62
63
64
65
66
67
68
69
      this.resultJson = {};
      axios({
        url: value,
        method: this.requestMethod,
        data: this.paramJson
      }).then((res) => {
        console.log(res)
        this.resultJson = res
      }).catch((err) => {
        that.$message.error("请求异常:" + err)
      })
肖超群 authored
70
    },
肖超群 authored
71
72
73
74
75
    changeVal(e) {
      try {
        let json = e.target.value;
        if (json.indexOf(",}") > 0) {
          json = json.replace(",}", "}");
肖超群 authored
76
        }
肖超群 authored
77
78
79
80
        this.paramJson = JSON.parse(json);
      } catch (e) {
        console.log(e);
        this.$message.error("非法的JSON字符串")
肖超群 authored
81
      }
肖超群 authored
82
83
84
85
86
87
88
89
    },
    handleChange(value) {
      this.requestMethod = value;
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token": token}
肖超群 authored
90
91
    }
  }
肖超群 authored
92
}
肖超群 authored
93
</script>