62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import { computed, ref, watchEffect } from 'vue';
|
|||
|
|
|
|||
|
|
import { Page } from '@vben/common-ui';
|
|||
|
|
|
|||
|
|
import { Card, Radio, RadioGroup } from 'ant-design-vue';
|
|||
|
|
|
|||
|
|
import { getParamsData } from '#/api/examples/params';
|
|||
|
|
|
|||
|
|
const params = { ids: [2512, 3241, 4255] };
|
|||
|
|
const paramsSerializer = ref<'brackets' | 'comma' | 'indices' | 'repeat'>(
|
|||
|
|
'brackets',
|
|||
|
|
);
|
|||
|
|
const response = ref('');
|
|||
|
|
const paramsStr = computed(() => {
|
|||
|
|
// 写一段代码，从完整的URL中提取参数部分
|
|||
|
|
const url = response.value;
|
|||
|
|
return new URL(url).searchParams.toString();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watchEffect(() => {
|
|||
|
|
getParamsData(params, paramsSerializer.value).then((res) => {
|
|||
|
|
response.value = res.request.responseURL;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<template>
|
|||
|
|
<Page
|
|||
|
|
title="请求参数序列化"
|
|||
|
|
description="不同的后台接口可能对数组类型的GET参数的解析方式不同，我们预置了几种数组序列化方式，通过配置 paramsSerializer 来实现不同的序列化方式"
|
|||
|
|
>
|
|||
|
|
<Card>
|
|||
|
|
<RadioGroup v-model:value="paramsSerializer" name="paramsSerializer">
|
|||
|
|
<Radio value="brackets">brackets</Radio>
|
|||
|
|
<Radio value="comma">comma</Radio>
|
|||
|
|
<Radio value="indices">indices</Radio>
|
|||
|
|
<Radio value="repeat">repeat</Radio>
|
|||
|
|
</RadioGroup>
|
|||
|
|
<div class="mt-4 flex flex-col gap-4">
|
|||
|
|
<div>
|
|||
|
|
<h3>需要提交的参数</h3>
|
|||
|
|
<div>{{ JSON.stringify(params, null, 2) }}</div>
|
|||
|
|
</div>
|
|||
|
|
<template v-if="response">
|
|||
|
|
<div>
|
|||
|
|
<h3>访问地址</h3>
|
|||
|
|
<pre>{{ response }}</pre>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3>参数字符串</h3>
|
|||
|
|
<pre>{{ paramsStr }}</pre>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3>参数解码</h3>
|
|||
|
|
<pre>{{ decodeURIComponent(paramsStr) }}</pre>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Page>
|
|||
|
|
</template>
|