支持下载请求，返回值展示优化

2021-11-15 23:11:19 +08:00
parent 1ba75d3e29
commit 157d06bf8d
6 changed files with 164 additions and 65 deletions
--- a/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequest.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequest.vue
@@ -1,6 +1,6 @@
 <template>
    <div>
-        <a-input-search v-model:value="docUrl" @search="sendRequest">
+        <a-input-search v-model:value="docUrl" @search="sendRequest" placeholder="请输入目标URL地址">
            <template #addonBefore>
                <a-select v-model:value="docInfoShow.method" style="width: 100px;">
                    <a-select-option :value="method" v-for="method in methodList">{{method.toUpperCase()}}</a-select-option>
@@ -83,23 +83,40 @@
            VerticalAlignTopOutlined, VerticalAlignBottomOutlined, CloseOutlined, ParamTable, ParamBody, ApiRequestResult,
        },
        setup(props) {
-            let docUrl = ref('http://baidu.com');
+            let docUrl = ref('');
            let activePage = ref('urlParam');
            const route = useRoute();
            const store = useStore();
            store.commit('addTableName', {key: route.fullPath, val: '接口请求' + route.query.id});
+            let globalParam = store.state.globalParam || [];
+            let nextIndex = 1;
            // URL参数处理
            const urlParamRef = ref();
            let urlParamList = ref([]);
            // Header参数处理
            const headerParamRef = ref();
-            let headerParamList = ref([]);
+            let headerParamListProp = [];
+            let headerParamListGlobal = globalParam.filter(item => item.paramType === 2);
+            headerParamListGlobal.forEach(item => {
+                headerParamListProp.push({name: item.paramKey, value: item.paramValue, type: 'string', key: 'g' + (nextIndex++)});
+            });
+            let headerParamList = ref(JSON.parse(JSON.stringify(headerParamListProp)));
            // cookie参数处理
            const cookieParamRef = ref();
-            let cookieParamList = ref([]);
+            let cookieParamListProp = [];
+            let cookieParamListGlobal = globalParam.filter(item => item.paramType === 3);
+            cookieParamListGlobal.forEach(item => {
+                cookieParamListProp.push({name: item.paramKey, value: item.paramValue, type: 'string', key: 'g' + (nextIndex++)});
+            });
+            let cookieParamList = ref(JSON.parse(JSON.stringify(cookieParamListProp)));
            // form参数处理
            const formParamRef= ref();
-            let formParamList = ref([]);
+            let formParamListProp = [];
+            let formParamListGlobal = globalParam.filter(item => item.paramType === 1);
+            formParamListGlobal.forEach(item => {
+                formParamListProp.push({name: item.paramKey, value: item.paramValue, type: 'string', key: 'g' + (nextIndex++)});
+            });
+            let formParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
            // form参数处理
            const formEncodeParamRef = ref();
            let formEncodeParamList = ref([]);
@@ -114,6 +131,10 @@
            let requestResult = ref({});
            let requestLoading = ref(false);
            const sendRequest = () => {
+                if (!docUrl.value) {
+                    message.error('请输入请求的目标URL地址');
+                    return;
+                }
                const formData = new FormData();
                let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
                let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
--- a/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequestResult.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequestResult.vue
@@ -126,6 +126,8 @@
                }
            }
            const initData = () => {
+                resultDataContentOrigin.value = '';
+                resultDataContentFormat.value = '';
                if (props.result.data) {
                    resultData.value = props.result.data;
                    if (props.result.data.headers) {
--- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
@@ -1,8 +1,8 @@
 <template>
    <div>
-        <a-input-search :addon-before="docInfoShow.method.toUpperCase()" v-model:value="docUrl" @search="sendRequest">
+        <a-input-search :addon-before="docInfoShow.method.toUpperCase()" v-model:value="docUrl" @search="sendRequest" placeholder="请输入目标URL地址">
            <template #enterButton>
-                <a-button type="primary" :loading="requestLoading">发送请求</a-button>
+                <a-button type="primary" :loading="requestLoading">{{isDownloadRequest?'下载文件':'发送请求'}}</a-button>
            </template>
        </a-input-search>
        <a-tabs v-model:activeKey="activePage" closable @tab-click="activePageChange" style="padding: 5px 10px 0;">
@@ -19,7 +19,7 @@
                            <a-radio value="form">form-data</a-radio>
                            <a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio>
                            <a-radio value="row">row</a-radio>
-                            <a-radio value="binary">binary</a-radio>
+<!--                            <a-radio value="binary">binary</a-radio>-->
                        </a-radio-group>
                        <a-select v-if="bodyParamType === 'row'" v-model:value="consumesParamType" size="small" style="margin-left: 10px;vertical-align: top;width: 100px;">
                            <a-select-option value="json">JSON</a-select-option>
@@ -55,7 +55,10 @@
                <a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
            </template>
        </a-tabs>
-        <DocDebuggerResult :result="requestResult" :loading="requestLoading"></DocDebuggerResult>
+        <DocDebuggerResult v-if="!isDownloadRequest" :result="requestResult" :loading="requestLoading"></DocDebuggerResult>
+        <form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
+            <input type="hidden" :name="key" :value="val" v-for="(val,key) in downloadFormParam.param">
+        </form>
    </div>
 </template>

@@ -72,6 +75,7 @@
    import 'mavon-editor/dist/markdown/github-markdown.min.css'
    import 'mavon-editor/dist/css/index.css'
    import {zyplayerApi} from "../../../api";
+    import {getZyplayerApiBaseUrl} from "../../../api/request/utils.js";

    export default {
        props: {
@@ -178,7 +182,14 @@
            // 发送请求
            let requestResult = ref({});
            let requestLoading = ref(false);
+            let downloadFormParam = ref({url: getZyplayerApiBaseUrl() + '/doc-swagger/proxy/download', param: {}});
+            let downloadFormRef = ref();
+            let isDownloadRequest = (props.docInfoShow.produces === 'application/octet-stream');
            const sendRequest = () => {
+                if (!docUrl.value) {
+                    message.error('请输入请求的目标URL地址');
+                    return;
+                }
                const formData = new FormData();
                let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
                let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
@@ -216,23 +227,40 @@
                //     formData.append('files[]', file);
                // });
                let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
-                formData.append('url', url);
-                formData.append('host', urlDomain);
-                formData.append('method', props.docInfoShow.method);
-                formData.append('contentType', props.docInfoShow.consumes);
-                formData.append('headerParam', JSON.stringify(headerParamArr));
-                formData.append('cookieParam', JSON.stringify(cookieParamArr));
-                formData.append('formParam', JSON.stringify(formParamArr));
-                formData.append('formEncodeParam', JSON.stringify(formEncodeParamArr));
-                formData.append('bodyParam', bodyParamStr);
-                requestLoading.value = true;
-                requestResult.value = {};
-                zyplayerApi.requestUrl(formData).then(res => {
-                    requestResult.value = res;
-                    requestLoading.value = false;
-                }).catch(e => {
-                    requestLoading.value = false;
-                });
+                // 下载请求
+                if (isDownloadRequest) {
+                    downloadFormParam.value.param = {
+                        url: url,
+                        host: urlDomain,
+                        method: props.docInfoShow.method,
+                        contentType: props.docInfoShow.consumes,
+                        headerParam: JSON.stringify(headerParamArr),
+                        cookieParam: JSON.stringify(cookieParamArr),
+                        formParam: JSON.stringify(formParamArr),
+                        formEncodeParam: JSON.stringify(formEncodeParamArr),
+                        bodyParam: bodyParamStr,
+                    };
+                    setTimeout(() => downloadFormRef.value.submit(), 0);
+                } else {
+                    // 正常请求
+                    formData.append('url', url);
+                    formData.append('host', urlDomain);
+                    formData.append('method', props.docInfoShow.method);
+                    formData.append('contentType', props.docInfoShow.consumes);
+                    formData.append('headerParam', JSON.stringify(headerParamArr));
+                    formData.append('cookieParam', JSON.stringify(cookieParamArr));
+                    formData.append('formParam', JSON.stringify(formParamArr));
+                    formData.append('formEncodeParam', JSON.stringify(formEncodeParamArr));
+                    formData.append('bodyParam', bodyParamStr);
+                    requestLoading.value = true;
+                    requestResult.value = {};
+                    zyplayerApi.requestUrl(formData).then(res => {
+                        requestResult.value = res;
+                        requestLoading.value = false;
+                    }).catch(e => {
+                        requestLoading.value = false;
+                    });
+                }
            };
            let queryParamVisible = ref(true);
            const hideQueryParam = () => {
@@ -252,6 +280,9 @@
                sendRequest,
                requestResult,
                consumesParamType,
+                downloadFormParam,
+                downloadFormRef,
+                isDownloadRequest,
                // url参数
                urlParamRef,
                urlParamList,
--- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
@@ -1,6 +1,6 @@
 <template>
    <div v-if="result.data" style="margin-bottom: 30px;">
-        <div v-if="result.data.data" style="margin-bottom: 30px;">
+        <div v-if="result.data.data || result.data.status === 200" style="margin-bottom: 30px;">
            <a-tabs v-model:activeKey="activePage" @tab-click="" style="padding: 5px 10px 0;">
                <a-tab-pane tab="Body" key="body" forceRender>
                    <div style="margin-bottom: 10px;">
@@ -126,6 +126,8 @@
                }
            }
            const initData = () => {
+                resultDataContentOrigin.value = '';
+                resultDataContentFormat.value = '';
                if (props.result.data) {
                    resultData.value = props.result.data;
                    if (props.result.data.headers) {
@@ -150,7 +152,8 @@
                    if (props.result.data.cookies) {
                        resultCookies.value = props.result.data.cookies;
                    }
-                    if (props.result.data.data) {
+                    if (props.result.data.data || props.result.data.status === 200) {
+                        resultDataContentFormat.value = props.result.data.data;
                        resultDataContentOrigin.value = props.result.data.data;
                        try {
                            if (bodyShowFormatType.value === 'xml') {