#14vue3生成表单并跳转到外部地址的方式

1、背景

后端返回的json数据中包含一个json数组,此数组中是目标跳转地址所需要的form表单的数据。

2、跳转前的页面

javascript 复制代码
const goto = () => {
	finish.value = true;
  request.post('/xxx/yyy',
      {zzz: zzz.value}).then(res => {
    const url = res.data.submitUrl
    const 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

javascript 复制代码
<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并实现跳转。

附上参数转化函数:

javascript 复制代码
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()只能调用一次的问题https://blog.csdn.net/weixin_42718399/article/details/136237084?spm=1001.2014.3001.5502#11vue3中使用el-dialog展示与关闭交由父组件控制的写法_vue dailog 固定关闭按钮-CSDN博客文章浏览阅读1.1k次,点赞40次,收藏28次。vue3中使用elementplus的el-dialog展示与关闭交由父组件控制的写法,分两种方法,使用difineExpose或者defineEmits实现_vue dailog 固定关闭按钮https://blog.csdn.net/weixin_42718399/article/details/136155379?spm=1001.2014.3001.5502#3Jenkins(Windows环境)版本升级、迁移、负载均衡、双机器同步与备份_windows下的jenkins的job备份-CSDN博客文章浏览阅读1.1k次,点赞28次,收藏17次。Jenkins(Windows环境)版本升级、迁移、负载均衡、双机器同步与备份_windows下的jenkins的job备份https://blog.csdn.net/weixin_42718399/article/details/135404525?spm=1001.2014.3001.5502#2Vite+Vue3+SpringMVC前后端分离 解决跨域问题和session每次请求不一致问题_vue3 每次请求sessionid都不一样-CSDN博客文章浏览阅读1.1k次,点赞37次,收藏16次。Vite+Vue3+SpringMVC前后端分离通过vite/nginx解决跨域问题和session一致性问题_vue3 每次请求sessionid都不一样https://blog.csdn.net/weixin_42718399/article/details/135388463?spm=1001.2014.3001.5502

相关推荐
aha-凯心13 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没30 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN30 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠35 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户990450177800944 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js