InterfaceTest.vue 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <a-card :bordered="false">
  3. <a-row>
  4. <a-col :md="2" :sm="4">
  5. <a-select defaultValue="POST" style="width: 90px" @change="handleChange" size="large">
  6. <a-select-option value="POST">POST</a-select-option>
  7. <!--<a-select-option value="GET">GET</a-select-option>-->
  8. </a-select>
  9. </a-col>
  10. <a-col :md="22" :sm="20">
  11. <a-input-search
  12. placeholder="input send url"
  13. v-model="url"
  14. @search="onSearch"
  15. enterButton="Send"
  16. size="large"/>
  17. </a-col>
  18. </a-row>
  19. <a-tabs defaultActiveKey="2">
  20. <a-tab-pane tab="params" key="2">
  21. <textarea style="width:100%;font-size: 16px;font-weight:500" :rows="13" @input="changeVal">
  22. </textarea>
  23. </a-tab-pane>
  24. </a-tabs>
  25. <a-tabs defaultActiveKey="1">
  26. <a-tab-pane tab="response" key="1">
  27. <textarea style="width:100%;font-size: 16px;font-weight:500" :rows="10" v-html="resultJson" readonly>
  28. </textarea>
  29. </a-tab-pane>
  30. </a-tabs>
  31. </a-card>
  32. </template>
  33. <script>
  34. import {postAction, getAction} from '@/api/manage'
  35. import {ACCESS_TOKEN} from "@/store/mutation-types"
  36. import Vue from 'vue'
  37. export default {
  38. name: 'FlowTest',
  39. data() {
  40. return {
  41. url: "",
  42. paramJson: "",
  43. resultJson: {},
  44. requestMethod: "POST"
  45. }
  46. },
  47. methods: {
  48. onSearch(value) {
  49. let that = this
  50. this.resultJson = {};
  51. if ("POST" === this.requestMethod.toUpperCase()) {
  52. postAction(value, this.paramJson).then((res) => {
  53. console.log(res)
  54. this.resultJson = res
  55. }).catch((err) => {
  56. that.$message.error("请求异常:" + err)
  57. })
  58. } else {
  59. getAction(value, this.paramJson).then((res) => {
  60. console.log(res)
  61. this.resultJson = res;
  62. }).catch((err) => {
  63. that.$message.error("请求异常:" + err)
  64. })
  65. }
  66. },
  67. changeVal(e) {
  68. try {
  69. let json = e.target.value;
  70. json = json.replace(/\n/g, "");
  71. json = json.replace(/\s*/g, "");
  72. if (json.indexOf(",}") > 0) {
  73. json = json.replace(",}", "}");
  74. }
  75. this.paramJson = JSON.parse(json);
  76. } catch (e) {
  77. console.log(e);
  78. this.$message.error("非法的JSON字符串")
  79. }
  80. },
  81. handleChange(value) {
  82. this.requestMethod = value;
  83. },
  84. created() {
  85. const token = Vue.ls.get(ACCESS_TOKEN);
  86. this.headers = {"X-Access-Token": token}
  87. }
  88. }
  89. }
  90. </script>