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

This commit is contained in:
暮光:城中城
2021-11-15 23:11:19 +08:00
parent 1ba75d3e29
commit 157d06bf8d
6 changed files with 164 additions and 65 deletions

View File

@@ -15,6 +15,8 @@ import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource; import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Objects;
/** /**
* 请求参数控制器 * 请求参数控制器
@@ -44,4 +46,18 @@ public class SwaggerPoxyRequestController {
ProxyRequestResultVo requestResult = swaggerHttpRequestService.proxyRequest(request, requestParam); ProxyRequestResultVo requestResult = swaggerHttpRequestService.proxyRequest(request, requestParam);
return DocResponseJson.ok(requestResult); return DocResponseJson.ok(requestResult);
} }
/**
* 代理接口下载请求
*
* @return 请求参数
* @author 暮光:城中城
* @since 2021年10月16日
*/
@ResponseBody
@PostMapping(value = "/download")
public ResponseJson<ProxyRequestResultVo> download(HttpServletRequest request, HttpServletResponse response, ProxyRequestParam requestParam) {
swaggerHttpRequestService.proxyDownload(request, response, requestParam);
return DocResponseJson.ok();
}
} }

View File

@@ -1,9 +1,8 @@
package com.zyplayer.doc.swaggerplus.service; package com.zyplayer.doc.swaggerplus.service;
import cn.hutool.http.HttpRequest; import cn.hutool.core.io.FileUtil;
import cn.hutool.http.HttpResponse; import cn.hutool.core.io.IoUtil;
import cn.hutool.http.HttpUtil; import cn.hutool.http.*;
import cn.hutool.http.Method;
import com.zyplayer.doc.core.exception.ConfirmException; import com.zyplayer.doc.core.exception.ConfirmException;
import com.zyplayer.doc.data.repository.manage.entity.SwaggerGlobalParam; import com.zyplayer.doc.data.repository.manage.entity.SwaggerGlobalParam;
import com.zyplayer.doc.data.service.manage.SwaggerGlobalParamService; import com.zyplayer.doc.data.service.manage.SwaggerGlobalParamService;
@@ -21,7 +20,9 @@ import org.springframework.stereotype.Service;
import javax.annotation.Resource; import javax.annotation.Resource;
import javax.servlet.http.Cookie; import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.net.HttpCookie; import java.net.HttpCookie;
import java.net.URLEncoder;
import java.util.*; import java.util.*;
import java.util.stream.Collectors; import java.util.stream.Collectors;
import java.util.stream.Stream; import java.util.stream.Stream;
@@ -66,6 +67,27 @@ public class SwaggerHttpRequestService {
return resultStr; return resultStr;
} }
/**
* 执行代理请求
*
* @author 暮光:城中城
* @since 2021-11-04
*/
public void proxyDownload(HttpServletRequest request, HttpServletResponse response, ProxyRequestParam requestParam) {
try {
HttpResponse httpResponse = this.getHttpResponse(request, requestParam);
Map<String, List<String>> responseHeaders = httpResponse.headers();
if (MapUtils.isNotEmpty(responseHeaders)) {
for (Map.Entry<String, List<String>> httpHeader : responseHeaders.entrySet()) {
response.addHeader(httpHeader.getKey(), String.join(";", httpHeader.getValue()));
}
}
httpResponse.writeBody(response.getOutputStream(), true, null);
} catch (Exception e) {
e.printStackTrace();
}
}
/** /**
* 执行代理请求 * 执行代理请求
* *
@@ -76,39 +98,7 @@ public class SwaggerHttpRequestService {
ProxyRequestResultVo resultVo = new ProxyRequestResultVo(); ProxyRequestResultVo resultVo = new ProxyRequestResultVo();
long startTime = System.currentTimeMillis(); long startTime = System.currentTimeMillis();
try { try {
// 执行请求 HttpResponse httpResponse = getHttpResponse(request, requestParam);
Method method = requestMethodMap.get(requestParam.getMethod());
if (method == null) {
throw new ConfirmException("不支持的请求方式:" + requestParam.getMethod());
}
HttpRequest httpRequest = HttpUtil.createRequest(method, requestParam.getUrl());
// header获取
Map<String, String> headerParam = new HashMap<>();
requestParam.getHeaderParamData().forEach(item -> headerParam.put(item.getCode(), item.getValue()));
Map<String, String> requestHeaders = this.getHttpHeader(request, headerParam);
if (StringUtils.isNotBlank(requestParam.getHost())) {
domainHeaderKeys.forEach(key -> requestHeaders.put(key, requestParam.getHost()));
requestHeaders.put("host", SwaggerDocUtil.getDomainHost(requestParam.getHost()));
}
// http自带参数
httpRequest.addHeaders(requestHeaders);
// 用户输入的参数
requestParam.getFormParamData().forEach(data -> httpRequest.form(data.getCode(), data.getValue()));
requestParam.getFormEncodeParamData().forEach(data -> httpRequest.form(data.getCode(), data.getValue()));
// cookie参数
Map<String, String> cookieParam = new HashMap<>();
String headerCookie = headerParam.getOrDefault("Cookie", headerParam.get("cookie"));
requestParam.getCookieParamData().forEach(item -> cookieParam.put(item.getCode(), item.getValue()));
httpRequest.cookie(this.getHttpCookie(request, cookieParam, headerCookie));
if (StringUtils.isNotBlank(requestParam.getBodyParam())) {
httpRequest.body(requestParam.getBodyParam());
}
// 强制设置类型貌似不用刻意设置如果写的application/json参数是表单传过去收不到值先注释这个
// if (StringUtils.isNotBlank(requestParam.getContentType())) {
// httpRequest.contentType(requestParam.getContentType());
// }
// 执行请求
HttpResponse httpResponse = httpRequest.timeout(10000).execute();
resultVo.setData(httpResponse.body()); resultVo.setData(httpResponse.body());
resultVo.setStatus(httpResponse.getStatus()); resultVo.setStatus(httpResponse.getStatus());
resultVo.setContentLength(httpResponse.bodyBytes().length); resultVo.setContentLength(httpResponse.bodyBytes().length);
@@ -137,6 +127,42 @@ public class SwaggerHttpRequestService {
return resultVo; return resultVo;
} }
private HttpResponse getHttpResponse(HttpServletRequest request, ProxyRequestParam requestParam){
// 执行请求
Method method = requestMethodMap.get(requestParam.getMethod());
if (method == null) {
throw new ConfirmException("不支持的请求方式:" + requestParam.getMethod());
}
HttpRequest httpRequest = HttpUtil.createRequest(method, requestParam.getUrl());
// header获取
Map<String, String> headerParam = new HashMap<>();
requestParam.getHeaderParamData().forEach(item -> headerParam.put(item.getCode(), item.getValue()));
Map<String, String> requestHeaders = this.getHttpHeader(request, headerParam);
if (StringUtils.isNotBlank(requestParam.getHost())) {
domainHeaderKeys.forEach(key -> requestHeaders.put(key, requestParam.getHost()));
requestHeaders.put("host", SwaggerDocUtil.getDomainHost(requestParam.getHost()));
}
// http自带参数
httpRequest.addHeaders(requestHeaders);
// 用户输入的参数
requestParam.getFormParamData().forEach(data -> httpRequest.form(data.getCode(), data.getValue()));
requestParam.getFormEncodeParamData().forEach(data -> httpRequest.form(data.getCode(), data.getValue()));
// cookie参数
Map<String, String> cookieParam = new HashMap<>();
String headerCookie = headerParam.getOrDefault("Cookie", headerParam.get("cookie"));
requestParam.getCookieParamData().forEach(item -> cookieParam.put(item.getCode(), item.getValue()));
httpRequest.cookie(this.getHttpCookie(request, cookieParam, headerCookie));
if (StringUtils.isNotBlank(requestParam.getBodyParam())) {
httpRequest.body(requestParam.getBodyParam());
}
// 强制设置类型貌似不用刻意设置如果写的application/json参数是表单传过去收不到值先注释这个
// if (StringUtils.isNotBlank(requestParam.getContentType())) {
// httpRequest.contentType(requestParam.getContentType());
// }
// 执行请求
return httpRequest.timeout(10000).execute();
}
/** /**
* 获取http的cookie * 获取http的cookie
* *

View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<a-input-search v-model:value="docUrl" @search="sendRequest"> <a-input-search v-model:value="docUrl" @search="sendRequest" placeholder="请输入目标URL地址">
<template #addonBefore> <template #addonBefore>
<a-select v-model:value="docInfoShow.method" style="width: 100px;"> <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> <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, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, CloseOutlined, ParamTable, ParamBody, ApiRequestResult,
}, },
setup(props) { setup(props) {
let docUrl = ref('http://baidu.com'); let docUrl = ref('');
let activePage = ref('urlParam'); let activePage = ref('urlParam');
const route = useRoute(); const route = useRoute();
const store = useStore(); const store = useStore();
store.commit('addTableName', {key: route.fullPath, val: '接口请求' + route.query.id}); store.commit('addTableName', {key: route.fullPath, val: '接口请求' + route.query.id});
let globalParam = store.state.globalParam || [];
let nextIndex = 1;
// URL参数处理 // URL参数处理
const urlParamRef = ref(); const urlParamRef = ref();
let urlParamList = ref([]); let urlParamList = ref([]);
// Header参数处理 // Header参数处理
const headerParamRef = ref(); 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参数处理 // cookie参数处理
const cookieParamRef = ref(); 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参数处理 // form参数处理
const formParamRef= ref(); 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参数处理 // form参数处理
const formEncodeParamRef = ref(); const formEncodeParamRef = ref();
let formEncodeParamList = ref([]); let formEncodeParamList = ref([]);
@@ -114,6 +131,10 @@
let requestResult = ref({}); let requestResult = ref({});
let requestLoading = ref(false); let requestLoading = ref(false);
const sendRequest = () => { const sendRequest = () => {
if (!docUrl.value) {
message.error('请输入请求的目标URL地址');
return;
}
const formData = new FormData(); const formData = new FormData();
let urlParamSelected = urlParamRef.value.getSelectedRowKeys(); let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => { let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {

View File

@@ -126,6 +126,8 @@
} }
} }
const initData = () => { const initData = () => {
resultDataContentOrigin.value = '';
resultDataContentFormat.value = '';
if (props.result.data) { if (props.result.data) {
resultData.value = props.result.data; resultData.value = props.result.data;
if (props.result.data.headers) { if (props.result.data.headers) {

View File

@@ -1,8 +1,8 @@
<template> <template>
<div> <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> <template #enterButton>
<a-button type="primary" :loading="requestLoading">发送请求</a-button> <a-button type="primary" :loading="requestLoading">{{isDownloadRequest?'下载文件':'发送请求'}}</a-button>
</template> </template>
</a-input-search> </a-input-search>
<a-tabs v-model:activeKey="activePage" closable @tab-click="activePageChange" style="padding: 5px 10px 0;"> <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="form">form-data</a-radio>
<a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio> <a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio>
<a-radio value="row">row</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-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 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> <a-select-option value="json">JSON</a-select-option>
@@ -55,7 +55,10 @@
<a-button v-else @click="showQueryParam" type="link">展开参数</a-button> <a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
</template> </template>
</a-tabs> </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> </div>
</template> </template>
@@ -72,6 +75,7 @@
import 'mavon-editor/dist/markdown/github-markdown.min.css' import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css' import 'mavon-editor/dist/css/index.css'
import {zyplayerApi} from "../../../api"; import {zyplayerApi} from "../../../api";
import {getZyplayerApiBaseUrl} from "../../../api/request/utils.js";
export default { export default {
props: { props: {
@@ -178,7 +182,14 @@
// 发送请求 // 发送请求
let requestResult = ref({}); let requestResult = ref({});
let requestLoading = ref(false); 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 = () => { const sendRequest = () => {
if (!docUrl.value) {
message.error('请输入请求的目标URL地址');
return;
}
const formData = new FormData(); const formData = new FormData();
let urlParamSelected = urlParamRef.value.getSelectedRowKeys(); let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => { 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); // formData.append('files[]', file);
// }); // });
let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value; let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
formData.append('url', url); // 下载请求
formData.append('host', urlDomain); if (isDownloadRequest) {
formData.append('method', props.docInfoShow.method); downloadFormParam.value.param = {
formData.append('contentType', props.docInfoShow.consumes); url: url,
formData.append('headerParam', JSON.stringify(headerParamArr)); host: urlDomain,
formData.append('cookieParam', JSON.stringify(cookieParamArr)); method: props.docInfoShow.method,
formData.append('formParam', JSON.stringify(formParamArr)); contentType: props.docInfoShow.consumes,
formData.append('formEncodeParam', JSON.stringify(formEncodeParamArr)); headerParam: JSON.stringify(headerParamArr),
formData.append('bodyParam', bodyParamStr); cookieParam: JSON.stringify(cookieParamArr),
requestLoading.value = true; formParam: JSON.stringify(formParamArr),
requestResult.value = {}; formEncodeParam: JSON.stringify(formEncodeParamArr),
zyplayerApi.requestUrl(formData).then(res => { bodyParam: bodyParamStr,
requestResult.value = res; };
requestLoading.value = false; setTimeout(() => downloadFormRef.value.submit(), 0);
}).catch(e => { } else {
requestLoading.value = false; // 正常请求
}); 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); let queryParamVisible = ref(true);
const hideQueryParam = () => { const hideQueryParam = () => {
@@ -252,6 +280,9 @@
sendRequest, sendRequest,
requestResult, requestResult,
consumesParamType, consumesParamType,
downloadFormParam,
downloadFormRef,
isDownloadRequest,
// url参数 // url参数
urlParamRef, urlParamRef,
urlParamList, urlParamList,

View File

@@ -1,6 +1,6 @@
<template> <template>
<div v-if="result.data" style="margin-bottom: 30px;"> <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-tabs v-model:activeKey="activePage" @tab-click="" style="padding: 5px 10px 0;">
<a-tab-pane tab="Body" key="body" forceRender> <a-tab-pane tab="Body" key="body" forceRender>
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px;">
@@ -126,6 +126,8 @@
} }
} }
const initData = () => { const initData = () => {
resultDataContentOrigin.value = '';
resultDataContentFormat.value = '';
if (props.result.data) { if (props.result.data) {
resultData.value = props.result.data; resultData.value = props.result.data;
if (props.result.data.headers) { if (props.result.data.headers) {
@@ -150,7 +152,8 @@
if (props.result.data.cookies) { if (props.result.data.cookies) {
resultCookies.value = 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; resultDataContentOrigin.value = props.result.data.data;
try { try {
if (bodyShowFormatType.value === 'xml') { if (bodyShowFormatType.value === 'xml') {