#14vue3生成表单并跳转到外部地址的方式
1、背景
后端返回的json数据中包含一个json数组，此数组中是目标跳转地址所需要的form表单的数据。
2、跳转前的页面
const goto = () => {finish.value = true;request.post('/xxx/yyy',{zzz: zzz.value}).then(res => {const url = res.data.submitUrlconst params = JSON.stringify(res.data.params);const resolve = router.resolve({name:'outForm',query:{url,params}});window.open(resolve.href, "_blank");})
}
params在后端是一个Map<String,Object>，传递到前端后先将其序列化为字符串。
使用router.resolve通过query上送的方式把参数传递到outForm.vue。
3、outForm.vue
<template>
<form ref="formRef" method="post"><input v-for="(value, key) in params" :key="key" type="hidden" :name="key" :value="value" /></form>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {toReactive, useUrlSearchParams} from "@vueuse/core";
import {lowerCaseJSONObj2UpperCaseUnderlineObj} from "../../utils/common";const formRef=ref();
const urlSearchParams=useUrlSearchParams()
const url = ref(decodeURIComponent(urlSearchParams.url));
const parse = JSON.parse(decodeURIComponent(urlSearchParams.params));
const params = toReactive(lowerCaseJSONObj2UpperCaseUnderlineObj(parse));onMounted(() => {formRef.value.action=url.value;formRef.value.submit();
})
</script>
通过v-for将params遍历为对应的input，注意value在前key在后。
此处注意需将params字符串反序列化之后再转化为一个响应式的对象，其中根据业务需求要将参数改为大写加分隔下划线的形式。
然后通过onMounted在form表单挂载完成后立即提交表单，将内容提交到目标url并实现跳转。
附上参数转化函数：
export const lowerCaseJSONObj2UpperCaseUnderlineObj =
(obj) => {if(typeof obj !== 'object') return;const transformedArray = [];for (const key in obj) {const transformedKey = key.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase();const transformedObj = { [transformedKey]: obj[key] };transformedArray.push(transformedObj);}return transformedArray.reduce((acc, obj) => {const key = Object.keys(obj)[0];acc[key] = obj[key];return acc;}, {});
}
如果对你有帮助，点赞、收藏、关注是我更新的动力！
#13Maven打包生成MD5校验文件的两种方式_mvn 打war包,显示md5和大小-CSDN博客文章浏览阅读1.9k次，点赞57次，收藏13次。Maven打包生成MD5校验文件的两种方式_mvn 打war包,显示md5和大小
https://blog.csdn.net/weixin_42718399/article/details/136375811?spm=1001.2014.3001.5502#12解决request中getReader()和getInputStream()只能调用一次的问题-CSDN博客文章浏览阅读2.1k次，点赞64次，收藏30次。getInputStream() has already been called for this request,解决request中getReader()和getInputStream()只能调用一次的问题