vue-antd-admin测试平台开发(二)

一、新建页面

新建src/pages/postman文件夹，文件夹有如下文件：
Postman.vue 页面
index.js

1、新建src/pages/postman/Postman.vue

有默认的模版 组件库

2、新建src/pages/postman/index.js

import Postman from "@/pages/postman/Postman";
export default  Postman

二. 配置目录(非动态路由)

在src/router/config.js添加二级菜单

{
              path: 'http_test',
              name: '在线HTTP测试工具',
              component: () => import('@/pages/postman')
            }

icon参考如下链接：

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

三. 编写Postman.vue内容

1、template层

引入Card，并调整width为100%，Card内部有url层，标签栏，标签对应内容和response层；
如：url层: 有下拉框和带按钮的输入框两个组件

2、script层

四. 在services中实现请求

1、新建文件src/services/postman.js

import {request, METHOD} from "@/utils/request";

export async function postman_send(url) {
    return request(url, METHOD.GET)
}

export default {
    postman_send
}

2、在src/services/index.js引用

3、在src/pages/postman/Postman.vue中引用并调用

<template>
<div>
  <a-card title="在线HTTP测试工具" style="width: 100%">
    <a-row>
      <a-col :span="4">
        <a-space>
          <a-select
              ref="select"
              defaultValue="get"
              style="width: 150px"
              @focus="focus"
              @change="handleChange"
          >
            <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-space>
      </a-col>
      <a-col :span="20">
          <a-input-group compact>
            <a-input  style="width: calc(100% - 200px)" />
            <a-button type="primary" @click="onSubmit" >请求此API</a-button>
          </a-input-group>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-col :span="24">
        <!--       activeKey属性通过“v-model”实现表单与data数据的双向绑定, 需在data中定义该属性-->
        <a-tabs v-model="activeKey">
          <a-tab-pane key="1" tab="Params">
            <a-table bordered :data-source="dataSource" :columns="columns">
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'name'">
                  <div class="editable-cell">
                    <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
                      <a-input v-model="editableData[record.key].name" @pressEnter="save(record.key)" />
                      <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
                    </div>
                    <div v-else class="editable-cell-text-wrapper">
                      {{ text || ' ' }}
                      <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
                    </div>
                  </div>
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                  <a-popconfirm
                      v-if="dataSource.length"
                      title="Sure to delete?"
                      @confirm="onDelete(record.key)"
                  >
                    <a>Delete</a>
                  </a-popconfirm>
                </template>
              </template>
            </a-table>
            <a-button class="editable-add-btn" style="width: 100%" @click="handleAdd">+ 添加一行数据</a-button>
          </a-tab-pane>
          <a-tab-pane key="2" tab="Headers" force-render>
            <a-table bordered :data-source="dataSource" :columns="columns">
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'name'">
                  <div class="editable-cell">
                    <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
                      <a-input v-model="editableData[record.key].name" @pressEnter="save(record.key)" />
                      <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
                    </div>
                    <div v-else class="editable-cell-text-wrapper">
                      {{ text || ' ' }}
                      <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
                    </div>
                  </div>
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                  <a-popconfirm
                      v-if="dataSource.length"
                      title="Sure to delete?"
                      @confirm="onDelete(record.key)"
                  >
                    <a>Delete</a>
                  </a-popconfirm>
                </template>
              </template>
            </a-table>
            <a-button class="editable-add-btn" style="width: 100%" @click="handleAdd">+ 添加一行数据</a-button>
          </a-tab-pane>
          <a-tab-pane key="3" tab="Body">
            <a-col :span="24">
              <a-radio-group defaultValue="none" name="radioGroup">
                <a-radio value="none">none
<!--                  <a-card style="width: 100%">-->
<!--                    <p>This request does not have a body</p>-->
<!--                  </a-card>-->
                </a-radio>
                <a-radio value="form-data">form-data</a-radio>
                <a-radio value="x-www-form-urlencoded">x-www-form-urlencoded</a-radio>
                <a-radio value="raw">raw</a-radio>
                <a-radio value="binary">binary</a-radio>
                <a-radio value="GraphQL">GraphQL</a-radio>
              </a-radio-group>
            </a-col>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-card title="Response" style="width: 100%">
        <p>{{ rev_data }}</p>
      </a-card>
    </a-row>
  </a-card>

</div>
</template>

<script>
// import type { SelectProps } from 'ant-design-vue';
// import { defineComponent, ref } from 'vue';
import {postman_send} from "@/services/postman";
import {mapState} from "vuex";

//表头数据,title 为表头的标题 dataIndex为列数据在数据项中对应的 key
const columns = [
  {
    title : 'KEY',
    dataIndex: 'KEY',
  },
  {
    title: 'VALUE',
    dataIndex: 'VALUE',
  },
  {
    title: 'DESCRIPTION',
    dataIndex: 'DESCRIPTION',
  },
  {
    title : 'operation',
    dataIndex: 'operation',
  },
]

export default {
  name: "Postman",
  data() {
    return {
      api_url: "http://localhost:7777/auth/hello",
      rev_data: "",
      activeKey: '3',  //控制标签页params、headers、body
      dataSource:[],
      columns:columns
    }
  },
  methods: {
    onSubmit() {
      this.loading = true;
      postman_send(this.api_url)
          .then((result) => {
            this.loading = false;
            this.rev_data = result;
          })
          .catch((err) => {
            this.rev_data = err;
          });
    },
    focus(key) {
      console.log(key)
    },
    handleChange(key) {
      console.log(key)
    },
    handleAdd(key) {
      console.log(key)
    },
    computed: {
      ...mapState('setting', ['isMobile'])
    },
    components: {
      // s-table  //注册组件
    },

  }
}


</script>

<style scoped>

</style>

五. 效果

六. 待解决问题

1、body部分页面还没实现
2、很多按钮对应的方法还没实现