Commit 79f97b1ab3ef9ac25ad64acb618269d9640cd94d
1 parent
00c6ab77
pref:修改测试接口,切换为http,websocket的值还存在问题
Showing
8 changed files
with
112 additions
and
23 deletions
| ... | ... | @@ -73,7 +73,7 @@ | 
| 73 | 73 | const jsonEditorValue = jsonEditorRef.value?.getJsonValue(); | 
| 74 | 74 | getRequestBody.content['form-data'] = valuesFormData as any; | 
| 75 | 75 | getRequestBody.content['x-www-form-urlencoded'] = valuesXWww as any; | 
| 76 | - getRequestBody.content['json'] = jsonEditorValue; | |
| 76 | + getRequestBody.content['json'] = jsonEditorValue as any; | |
| 77 | 77 | if (type === 'none') getRequestBody.content = {} as any; | 
| 78 | 78 | return getRequestBody.content; | 
| 79 | 79 | }; | 
| ... | ... | @@ -87,7 +87,7 @@ | 
| 87 | 87 | await nextTick(); | 
| 88 | 88 | bodyCellFormDataTableRef.value?.setValue(isEmpty(data) ? [pushObj] : data['form-data']); | 
| 89 | 89 | bodyCellXwwwTableRef.value?.setValue(isEmpty(data) ? [pushObj] : data['x-www-form-urlencoded']); | 
| 90 | - jsonEditorRef.value?.setJsonValue(data['json']); | |
| 90 | + jsonEditorRef.value?.setJsonValue(data['json'] || '{}'); | |
| 91 | 91 | getRequestBody.content.xml = data['xml']; | 
| 92 | 92 | }; | 
| 93 | 93 | ... | ... | 
| ... | ... | @@ -16,7 +16,6 @@ | 
| 16 | 16 | forceRender | 
| 17 | 17 | key="Body" | 
| 18 | 18 | tab="Body" | 
| 19 | - disabled | |
| 20 | 19 | > | 
| 21 | 20 | <Body ref="bodyRef" /> | 
| 22 | 21 | <BodyTest | 
| ... | ... | @@ -58,6 +57,9 @@ | 
| 58 | 57 | requestOriginUrl: { | 
| 59 | 58 | type: String, | 
| 60 | 59 | }, | 
| 60 | + originUrlType: { | |
| 61 | + type: String, | |
| 62 | + }, | |
| 61 | 63 | }); | 
| 62 | 64 | |
| 63 | 65 | const emits = defineEmits(['activeKey']); | 
| ... | ... | @@ -89,7 +91,7 @@ | 
| 89 | 91 | }); | 
| 90 | 92 | |
| 91 | 93 | const handleChange = () => { | 
| 92 | - // excuteTestRef.value?.resetValue(); | |
| 94 | + excuteTestRef.value?.resetValue(); | |
| 93 | 95 | }; | 
| 94 | 96 | |
| 95 | 97 | const handleClickReset = () => { | 
| ... | ... | @@ -107,7 +109,31 @@ | 
| 107 | 109 | ]; | 
| 108 | 110 | |
| 109 | 111 | const handleEmitExcute = () => { | 
| 112 | + let apiGetUrl = ''; | |
| 113 | + if (props?.method === '2') { | |
| 114 | + if (props?.originUrlType === 'server_url') { | |
| 115 | + const pathUrl = window.location.host; | |
| 116 | + const protocol = window.location.protocol; | |
| 117 | + apiGetUrl = `${ | |
| 118 | + protocol === 'http' ? 'ws:' : protocol === 'https' ? 'wss:' : 'ws:' | |
| 119 | + }//${pathUrl}${props?.requestTypeAndUrl?.requestUrl}`; | |
| 120 | + } else { | |
| 121 | + apiGetUrl = `${props?.requestOriginUrl}${props?.requestTypeAndUrl?.requestUrl}`; | |
| 122 | + } | |
| 123 | + } else { | |
| 124 | + if (props?.originUrlType === 'server_url') { | |
| 125 | + const pathUrl = window.location.host; | |
| 126 | + const protocol = window.location.protocol; | |
| 127 | + apiGetUrl = `${protocol}//${pathUrl}${props?.requestTypeAndUrl?.requestUrl}`; | |
| 128 | + } else { | |
| 129 | + apiGetUrl = `${props?.requestOriginUrl}${props?.requestTypeAndUrl?.requestUrl}`; | |
| 130 | + } | |
| 131 | + } | |
| 110 | 132 | excuteData.value = { | 
| 133 | + apiGetUrl, | |
| 134 | + method: props?.method, | |
| 135 | + apiType: props?.requestTypeAndUrl?.requestHttpType, | |
| 136 | + Type: activeKey.value, | |
| 111 | 137 | Params: testParamsRequestRef.value?.getTestValue(), | 
| 112 | 138 | Header: testHeaderRequestRef.value?.getTestValue(), | 
| 113 | 139 | Body: testBodyRequestRef.value?.getTestValue(), | 
| ... | ... | @@ -120,6 +146,7 @@ | 
| 120 | 146 | requestTypeAndUrl: props.requestTypeAndUrl, | 
| 121 | 147 | method: props.method, | 
| 122 | 148 | activeKey: activeKey.value, | 
| 149 | + originUrlType: props.originUrlType, | |
| 123 | 150 | }; | 
| 124 | 151 | }; | 
| 125 | 152 | |
| ... | ... | @@ -136,12 +163,11 @@ | 
| 136 | 163 | excuteTestRef.value?.showTest(); | 
| 137 | 164 | let value = getValue(false) as any; | 
| 138 | 165 | const type = value?.Body?.requestParamsBodyType; | 
| 139 | - console.log(type); | |
| 140 | - console.log(value?.Body); | |
| 141 | - //取出对应的类型 | |
| 142 | - | |
| 166 | + //取出对应的类型的值 | |
| 167 | + let values = []; | |
| 168 | + for (let i in value?.Body) if (i === type) values = value?.Body[i]; | |
| 143 | 169 | dataMap.mapBodyObj = { | 
| 144 | - list: value?.Body, | |
| 170 | + list: values, | |
| 145 | 171 | ...getCompose(), | 
| 146 | 172 | }; | 
| 147 | 173 | }; | ... | ... | 
| ... | ... | @@ -100,13 +100,21 @@ | 
| 100 | 100 | const getTestValue = () => { | 
| 101 | 101 | const getTable = getTestTableKeyValue(); | 
| 102 | 102 | //源地址 | 
| 103 | - const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`; | |
| 103 | + let apiGetUrl = ''; | |
| 104 | + if (props.data?.originUrlType === 'server_url') { | |
| 105 | + const pathUrl = window.location.host; | |
| 106 | + const protocol = window.location.protocol; | |
| 107 | + apiGetUrl = `${protocol}//${pathUrl}`; | |
| 108 | + } else { | |
| 109 | + apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`; | |
| 110 | + } | |
| 104 | 111 | //请求类型 | 
| 105 | 112 | const apiType = props.data?.requestTypeAndUrl?.requestHttpType; | 
| 106 | 113 | //替换key value | 
| 107 | 114 | const params: any = {}; | 
| 108 | 115 | getTable?.map((it) => (params[it.key!] = it.value!)); | 
| 109 | 116 | excuteData.value = { | 
| 117 | + method: props.data?.method, | |
| 110 | 118 | apiGetUrl, | 
| 111 | 119 | apiType, | 
| 112 | 120 | params, | ... | ... | 
| ... | ... | @@ -8,12 +8,21 @@ | 
| 8 | 8 | <a-col :span="2"> 测试结果 </a-col> | 
| 9 | 9 | <a-col :span="22"> | 
| 10 | 10 | <a-textarea | 
| 11 | + v-if="ifWebSocket === '2'" | |
| 11 | 12 | allow-clear | 
| 12 | 13 | show-count | 
| 13 | 14 | v-model:value="testResult" | 
| 14 | 15 | placeholder="测试结果为:" | 
| 15 | 16 | :rows="8" | 
| 16 | 17 | /> | 
| 18 | + <a-textarea | |
| 19 | + v-else | |
| 20 | + allow-clear | |
| 21 | + show-count | |
| 22 | + v-model:value="httpResult" | |
| 23 | + placeholder="测试结果为:" | |
| 24 | + :rows="8" | |
| 25 | + /> | |
| 17 | 26 | </a-col> | 
| 18 | 27 | </a-row> | 
| 19 | 28 | </div> | 
| ... | ... | @@ -27,7 +36,7 @@ | 
| 27 | 36 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; | 
| 28 | 37 | import { getAuthCache } from '/@/utils/auth'; | 
| 29 | 38 | import { useMessage } from '/@/hooks/web/useMessage'; | 
| 30 | - import { useGlobSetting } from '/@/hooks/setting'; | |
| 39 | + // import { useGlobSetting } from '/@/hooks/setting'; | |
| 31 | 40 | |
| 32 | 41 | const emits = defineEmits(['emitExcute']); | 
| 33 | 42 | |
| ... | ... | @@ -39,14 +48,18 @@ | 
| 39 | 48 | |
| 40 | 49 | const showTestFlag = ref(false); | 
| 41 | 50 | |
| 51 | + const ifWebSocket = ref(''); | |
| 52 | + | |
| 42 | 53 | const { createMessage } = useMessage(); | 
| 43 | 54 | |
| 44 | 55 | const token = getAuthCache(JWT_TOKEN_KEY); | 
| 45 | 56 | |
| 46 | - const { socketUrl } = useGlobSetting(); | |
| 57 | + const socketUrls = ref(''); | |
| 58 | + | |
| 59 | + // const { socketUrl } = useGlobSetting(); | |
| 47 | 60 | |
| 48 | 61 | const socketMessage: any = reactive({ | 
| 49 | - server: `${socketUrl}${token}`, | |
| 62 | + server: ``, | |
| 50 | 63 | sendValue: { | 
| 51 | 64 | tsSubCmds: [], | 
| 52 | 65 | }, | 
| ... | ... | @@ -74,6 +87,8 @@ | 
| 74 | 87 | |
| 75 | 88 | const testResult = ref(''); | 
| 76 | 89 | |
| 90 | + const httpResult = ref(''); | |
| 91 | + | |
| 77 | 92 | //执行测试接口 | 
| 78 | 93 | const handleExcute = () => { | 
| 79 | 94 | emits('emitExcute'); | 
| ... | ... | @@ -84,18 +99,22 @@ | 
| 84 | 99 | await nextTick(); | 
| 85 | 100 | //获取Params和Header和Body | 
| 86 | 101 | const Objects = props.data; | 
| 87 | - console.log(Objects); | |
| 88 | - const apiType = Objects?.Params?.apiType; | |
| 89 | - const url = Objects?.Params?.apiGetUrl; | |
| 102 | + const isWebSocketType = Objects?.method; | |
| 103 | + const apiType = Objects?.apiType; | |
| 104 | + const url = Objects?.apiGetUrl; | |
| 90 | 105 | const headers = Objects?.Header?.params; | 
| 91 | 106 | const params = Objects?.Params?.params; | 
| 92 | - const apiUrl = url.restfulFormat(params); | |
| 93 | - if (url.startsWith('ws') || url.startsWith('wss')) { | |
| 107 | + const body = Objects?.Body?.params; | |
| 108 | + const apiUrl = url?.restfulFormat(params); | |
| 109 | + ifWebSocket.value = isWebSocketType; | |
| 110 | + if (isWebSocketType === '2') { | |
| 111 | + socketUrls.value = url; | |
| 112 | + socketMessage.server = `${socketUrls.value}?token=${token}`; | |
| 94 | 113 | websocketRequest(params); | 
| 95 | 114 | } else { | 
| 96 | - const resp = await otherHttpRequest(apiType, apiUrl.split('{?')[0], headers, params); | |
| 115 | + const resp = await otherHttpRequest(apiType, apiUrl?.split('{?')[0], headers, params, body); | |
| 97 | 116 | if (!resp) return; | 
| 98 | - testResult.value = JSON.stringify(resp); | |
| 117 | + httpResult.value = JSON.stringify(resp); | |
| 99 | 118 | } | 
| 100 | 119 | }; | 
| 101 | 120 | |
| ... | ... | @@ -133,6 +152,7 @@ | 
| 133 | 152 | apiUrl, | 
| 134 | 153 | headers = {}, | 
| 135 | 154 | params = {}, | 
| 155 | + body, | |
| 136 | 156 | joinPrefix = false | 
| 137 | 157 | ) => { | 
| 138 | 158 | switch (apiType) { | 
| ... | ... | @@ -144,12 +164,30 @@ | 
| 144 | 164 | joinPrefix, | 
| 145 | 165 | } | 
| 146 | 166 | ); | 
| 167 | + case 'POST': | |
| 168 | + return await otherHttp.post( | |
| 169 | + { url: apiUrl, data: body, headers, params }, | |
| 170 | + { | |
| 171 | + apiUrl: '', | |
| 172 | + joinPrefix, | |
| 173 | + } | |
| 174 | + ); | |
| 175 | + case 'PUT': | |
| 176 | + return await otherHttp.put( | |
| 177 | + { url: apiUrl, data: body, headers, params }, | |
| 178 | + { | |
| 179 | + apiUrl: '', | |
| 180 | + joinPrefix, | |
| 181 | + } | |
| 182 | + ); | |
| 147 | 183 | } | 
| 148 | 184 | }; | 
| 149 | 185 | |
| 150 | 186 | const resetValue = () => { | 
| 151 | 187 | showTestFlag.value = false; | 
| 188 | + httpResult.value = '测试结果为:'; | |
| 152 | 189 | testResult.value = '测试结果为:'; | 
| 190 | + ifWebSocket.value = '0'; | |
| 153 | 191 | }; | 
| 154 | 192 | |
| 155 | 193 | const showTest = () => (showTestFlag.value = true); | ... | ... | 
| ... | ... | @@ -60,13 +60,21 @@ | 
| 60 | 60 | const getTestValue = () => { | 
| 61 | 61 | const getTable = getTestTableKeyValue(); | 
| 62 | 62 | //源地址 | 
| 63 | - const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`; | |
| 63 | + let apiGetUrl = ''; | |
| 64 | + if (props.data?.originUrlType === 'server_url') { | |
| 65 | + const pathUrl = window.location.host; | |
| 66 | + const protocol = window.location.protocol; | |
| 67 | + apiGetUrl = `${protocol}//${pathUrl}`; | |
| 68 | + } else { | |
| 69 | + apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`; | |
| 70 | + } | |
| 64 | 71 | //请求类型 | 
| 65 | 72 | const apiType = props.data?.requestTypeAndUrl?.requestHttpType; | 
| 66 | 73 | //替换key value | 
| 67 | 74 | const params: any = {}; | 
| 68 | 75 | getTable?.map((it: any) => (params[it.key!] = it.value!)); | 
| 69 | 76 | excuteData.value = { | 
| 77 | + method: props.data?.method, | |
| 70 | 78 | apiGetUrl, | 
| 71 | 79 | apiType, | 
| 72 | 80 | params, | ... | ... | 
| ... | ... | @@ -100,13 +100,21 @@ | 
| 100 | 100 | const getTestValue = () => { | 
| 101 | 101 | const getTable = getTestTableKeyValue(); | 
| 102 | 102 | //源地址 | 
| 103 | - const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`; | |
| 103 | + let apiGetUrl = ''; | |
| 104 | + if (props.data?.originUrlType === 'server_url') { | |
| 105 | + const pathUrl = window.location.host; | |
| 106 | + const protocol = window.location.protocol; | |
| 107 | + apiGetUrl = `${protocol}//${pathUrl}`; | |
| 108 | + } else { | |
| 109 | + apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`; | |
| 110 | + } | |
| 104 | 111 | //请求类型 | 
| 105 | 112 | const apiType = props.data?.requestTypeAndUrl?.requestHttpType; | 
| 106 | 113 | //替换key value | 
| 107 | 114 | const params: any = {}; | 
| 108 | 115 | getTable?.map((it) => (params[it.key!] = it.value!)); | 
| 109 | 116 | excuteData.value = { | 
| 117 | + method: props.data?.method, | |
| 110 | 118 | apiGetUrl, | 
| 111 | 119 | apiType, | 
| 112 | 120 | params, | ... | ... |