#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()只能调用一次的问题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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在线安装MySQL5.7

在线安装MySQL 安装MySQL5.7 yum -y install mysql57-community-release-el7-10.noarch.rpm 若无可用安装包&#xff0c;执行下面这句 wget http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm 本地安装 yum localinstall -y mysql57-community-releas…

python异常机制

当代码出现异常后底下代码都不会被执行了&#xff0c;也就是程序崩溃了。当然能避免异常的话尽量避免但是有的时候这个是没有办法避免的。 异常处理 &#xff08;注&#xff1a;异常处理是从上往下处理&#xff0c;所以编写代码时要注意&#xff09; 语法 try:可能出现异常…

【漏洞复现】锐捷 EWEB auth 远程命令执行漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

力扣面试经典150 —— 6-10题

力扣面试经典150题在 VScode 中安装 LeetCode 插件即可使用 VScode 刷题&#xff0c;安装 Debug LeetCode 插件可以免费 debug本文使用 python 语言解题&#xff0c;文中 “数组” 通常指 python 列表&#xff1b;文中 “指针” 通常指 python 列表索引 文章目录 6. [中等] 轮转…

MySQL基础-----约束

目录 前言 一、概述 二、约束演示 三、外键约束 1.介绍 2.语法 四、删除/更新行为 1.CASCADE 2.SET NULL 前言 本期我们开始MySQL约束的学习&#xff0c;约束一般是只数据键对本条数据的约束&#xff0c;通过约束我们可以保证数据库中数据的正确、有效性和完整性。 下面…

vite+vue3门户网站菜单栏动态路由控制

门户网站用户端需要分板块展示&#xff0c;板块内容由管理端配置&#xff0c;包括板块名称&#xff0c;访问路径&#xff0c;路由组件&#xff0c;展示顺序&#xff0c;是否展示。如下图所示&#xff1a; 用户访问门户网站时&#xff0c;展示菜单跳转通过板块配置&#xff0c;动…

#微信小程序(布局、渲染层基础知识)

1.IDE&#xff1a;微信开发者工具 2.实验&#xff1a; 3.记录: &#xff08;1&#xff09;view&#xff08;类似于div&#xff09; &#xff08;2&#xff09;块级元素不占满一行且水平均分布局flex,justify(space-around) &#xff08;3&#xff09;滚动<scroll view sc…

从破局到引领,小牛电动确立“领航者”地位

一代人有一代人的使命&#xff0c;一代名企也有一代名企的长征。 当下&#xff0c;高端智能两轮电动车正在跨越鸿沟进入到主流市场中&#xff0c;其中&#xff0c;以小牛电动为代表的新势力正在经历由“颠覆者”到扮演“领航者”角色转型&#xff0c;引领市场顺势而上。 不破…

C++:string的介绍

C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;不太符合面向对象的思想&#xff0c;而且底层空间需要用户自己管理&#xff0c;稍不留…

浅谈去耦电容的作用、选择、布局及其它电容的区别!

在一些文章资料中&#xff0c;去耦电容器被认为是旁路电容器。在其他资料中&#xff0c;去耦电容和旁路电容的区别在于&#xff1a;“旁路电容以输入信号中的干扰为滤波对象&#xff0c;而去耦电容以输出信号的干扰为滤波对象&#xff0c;防止干扰信号返回到输出端。”力量。”…

基于Java的生活废品回收系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案&#xff0c;旨在鼓…

如何远程访问电脑文件?

远程访问电脑文件是当今数字化时代中十分常见且实用的技术。它允许我们从任何地方的计算机或移动设备访问和操作我们的电脑中的文件。无论是远程工作、远程学习、远程协作还是方便地获得自己计算机上的重要文件&#xff0c;远程访问电脑文件都为我们提供了巨大的便利。 在远程访…

【C++】stack/queue

链表完了之后就是我们的栈和队列了&#xff0c;当然我们的STL中也有实现&#xff0c;下面我们先来看一下简单用法&#xff0c;跟我们之前C语言实现的一样&#xff0c;stack和queue有这么几个重要的成员函数 最主要的就是这么几个&#xff1a;empty&#xff0c;push&#xff0c;…

LeetCode-91题:解码方法(原创)

【题目描述】 一条包含字母 A-Z 的消息通过以下映射进行了 编码 &#xff1a; A -> "1" B -> "2" ... Z -> "26" 要 解码 已编码的消息&#xff0c;所有数字必须基于上述映射的方法&#xff0c;反向映射回字母&#xff08;可能有多种…

如何获取国外信用卡?需要国外银行卡支付怎么解决?如何订阅国外产品?

当国内的用户想要使用国外的产品时&#xff0c;很多产品是需要订阅付费的。其中有些产品还没有引入国内&#xff0c;只能用国外的信用卡支付&#xff0c;对于在国内的朋友&#xff0c;如何获取一张国外的信用卡呢&#xff1f; 这里推荐一个平台&#xff1a;wildCard waildCard…

2核4g服务器能支持多少人访问?并发数性能测评

2核4g服务器能支持多少人访问&#xff1f;支持80人同时访问&#xff0c;阿腾云使用阿里云2核4G5M带宽服务器&#xff0c;可以支撑80个左右并发用户。阿腾云以Web网站应用为例&#xff0c;如果视频图片媒体文件存储到对象存储OSS上&#xff0c;网站接入CDN&#xff0c;还可以支持…

String 的使用注意事项

String类型变量不可变 string类型的变量不可变&#xff0c;下面的拼接是怎么回事呢? // 拼接字符串 String str1 "hello"; String str2 "world"; String str3 str1 str2; System.out.println(str3);拼接都会新建 一个常量字符串一个拼接之后的字符串 …

【Unity】分拣机的数字双胞胎集成到Unity3D开发平台中

Unity HMI 一、前言 该项目的重点是通过OPC UA进行客户端-服务器通信的简单演示&#xff0c;该演示在Unity3D中实现&#xff08;服务器- B&R Automation PLC&#xff0c;客户端- Unity3D&#xff09;。该项目展示了数字孪生的分拣机与一些额外的功能。该应用程序使用多线程…

S32 Design Studio PE工具配置ADC

工具配置 我这个K1芯片有两个ADC驱动&#xff0c;也就有两个components&#xff0c;点开之后每个components都有四个选项卡converter转换器、channel通道、compare比较器、average求平均。 配置引脚 配置之前&#xff0c;得先配置好引脚&#xff0c;哪个引脚用来采集ADC。 每…

亚洲股市下一步的关键:中国看财报、日本看汇率、韩国看治理、印度看基建

汇丰认为财报将是驱动中国股市走势的关键因素。目前市场预计2024年中国企业每股收益将增长16%。 日本央行转向、A股业绩复苏、印度基建、韩国市场改革......最近这段时间&#xff0c;亚洲各大市场涌现出了不同的交易主题。 汇丰银行指出&#xff0c;中国受到本土企业盈利能力…