近期项目里有一个仿PostMan功能的需求，要求能够在系统内部调试接口，找了一下网上没有合适的组件用，所以自己就写了一个，如果大家也有类似的需求，就直接拷贝代码用去吧，会节省很多时间。
<template>
<el-card shadow="never">
<el-input v-model="url">
<template #prepend>
<el-select v-model="method" placeholder="Select" style="width: 115px">
<el-option label="GET" value="GET" />
<el-option label="POST" value="POST" />
<el-option label="PUT" value="PUT" />
<el-option label="PATCH" value="PATCH" />
<el-option label="DELETE" value="DELETE" />
<el-option label="HEAN" value="HEAN" />
<el-option label="OPTIONS" value="OPTIONS" />
</el-select>
</template>
<template #append>
<el-button type="primary" @click="onSubmit">发 送</el-button>
</template>
</el-input>
<el-tabs v-model="activeName" type="card" class="mt-5">
<el-tab-pane label="Body" name="body">
<el-radio-group v-model="sendType">
<el-radio label="form-data">form-data</el-radio>
<el-radio label="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>
<el-radio label="raw">raw</el-radio>
</el-radio-group>
<div class="my-2">
<!-- form-data -->
<div v-if="sendType === 'form-data'">
<el-table :data="formData" style="width: 100%" border>
<el-table-column label="Key">
<template #default="scope">
<el-input v-model="scope.row.key">
<template #append>
<el-select v-model="scope.row.type" style="width: 80px">
<el-option label="Text" value="Text" />
<el-option label="File" value="File" />
</el-select>
</template>
</el-input>
</template>
</el-table-column>
<el-table-column label="Value">
<template #default="scope">
<el-input v-model="scope.row.value" v-if="scope.row.type === 'Text'" />
<el-upload v-else action :limit="1" :auto-upload="true" :show-file-list="true"
:http-request="(parmas) => httpRequest(parmas, scope.$index)">
<el-button type="primary">上传文件</el-button>
</el-upload>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<el-button type="danger" @click="deleteObj(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-3">
<el-button type="primary" @click="addObj(1)">添加属性</el-button>
</div>
</div>
<!-- x-www-form-urlencoded -->
<div v-if="sendType === 'x-www-form-urlencoded'">
<el-table :data="xFormData" style="width: 100%" border>
<el-table-column label="Key">
<template #default="scope">
<el-input v-model="scope.row.key" />
</template>
</el-table-column>
<el-table-column label="Value">
<template #default="scope">
<el-input v-model="scope.row.value" />
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<el-button type="danger" @click="deleteObj(scope.$index, 2)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-3">
<el-button type="primary" @click="addObj(2)">添加属性</el-button>
</div>
</div>
<!-- raw -->
<div v-if="sendType === 'raw'">
<el-input v-model="raw" :rows="15" type="textarea" />
</div>
</div>
</el-tab-pane>
<el-tab-pane label="Headers" name="headers">
<el-table :data="headerData" style="width: 100%" border>
<el-table-column label="Key">
<template #default="scope">
<el-input v-model="scope.row.key" />
</template>
</el-table-column>
<el-table-column label="Value">
<template #default="scope">
<el-input v-model="scope.row.value" />
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<el-button type="danger" @click="deleteObj(scope.$index, 3)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-3">
<el-button type="primary" @click="addObj(3)">添加属性</el-button>
</div>
</el-tab-pane>
</el-tabs>
<div class="mt-10">
<div class="mb-2">响应结果</div>
<v-ace-editor v-model:value="response" lang="json" theme="chrome" :readonly="true" :printMargin="false"
style="height: 500px" />
</div>
</el-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { axios } from '/@/api/system/postman'
import { VAceEditor } from 'vue3-ace-editor'
import 'ace-builds/src-noconflict/mode-json'
import 'ace-builds/src-noconflict/theme-chrome'
const method = ref('GET')
const url = ref('')
const activeName = ref('body')
const sendType = ref('form-data')
const headerData = ref([
{
key: '',
value: ''
}
])
const formData = ref([
{
key: '',
value: '',
type: 'Text'
}
])
const xFormData = ref([
{
key: '',
value: ''
}
])
const raw = ref('')
const response = ref('')
const addObj = (type: number) => {
if (type === 1) {
formData.value.push({
key: '',
value: '',
type: 'Text'
})
} else if (type === 2) {
xFormData.value.push({
key: '',
value: ''
})
} else {
headerData.value.push({
key: '',
value: ''
})
}
}
const deleteObj = (index: number, type: number) => {
if (type === 1) {
formData.value.splice(index, 1)
} else if (type === 2) {
xFormData.value.splice(index, 1)
} else {
headerData.value.splice(index, 1)
}
}
interface RequestOptions {
url: string;
method: string;
params?: any;
data?: any;
headers: any;
}
const transformData = (data: any) => {
const newFormData = new FormData()
data.forEach((item: any) => {
if (item.key) {
newFormData.append(item.key, item.type === 'Text' ? String(item.value) : item.value)
}
})
return newFormData
}
const transXformData = (data: any) => {
const transformedData: any = {}
data.forEach((item: any) => {
if (item.key) {
transformedData[item.key] = item.value
}
})
return transformedData
}
const transformSendData = (sendType: string, formData: any, xFormData: any, raw: string): any => {
switch (sendType) {
case 'form-data':
return ['GET', 'DELETE', 'HEAD', 'OPTIONS'].includes(method.value) ? transXformData(xFormData) : transformData(formData)
case 'x-www-form-urlencoded':
return transXformData(xFormData)
default:
try {
return JSON.parse(raw)
} catch (error) {
throw new Error('Invalid raw data format')
}
}
}
const httpRequest = (event: any, index: number) => {
formData.value[index].value = event.file
}
const onSubmit = () => {
const requestOptions: RequestOptions = {
url: url.value,
method: method.value,
headers: {
...transformData(headerData.value),
...sendType.value === 'form-data' ? {
'Content-Type': 'multipart/form-data'
} : {}
}
}
if (['GET', 'DELETE', 'HEAD', 'OPTIONS'].includes(method.value)) {
requestOptions.params = transformSendData(sendType.value, formData.value, xFormData.value, raw.value)
} else {
requestOptions.data = transformSendData(sendType.value, formData.value, xFormData.value, raw.value)
}
console.log(formData.value)
return
axios(requestOptions).then((result) => {
response.value = JSON.stringify(result, null, 2)
}).catch((error) => {
response.value = JSON.stringify({ error: error.message }, null, 2)
})
}
</script>
