当前位置: 首页 > news >正文

#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

相关文章:

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

1、背景 后端返回的json数据中包含一个json数组&#xff0c;此数组中是目标跳转地址所需要的form表单的数据。 2、跳转前的页面 const goto () > {finish.value true;request.post(/xxx/yyy,{zzz: zzz.value}).then(res > {const url res.data.submitUrlconst params…...

航测管家:智能化革新航测作业流程

在信息时代的浪潮中&#xff0c;倾斜摄影作为一种高效的航测技术&#xff0c;对于城市规划、土地管理、环境监测等领域的重要性日益凸显。然而&#xff0c;航测作业中的数据管理和设备操作复杂性一直是行业面临的挑战。深圳赛尔智控推出的赛尔航测管家&#xff0c;凭借其智能化…...

XXE-XML实体注入漏洞

目录 1.xml基础 1.1什么是xml 1.2xml文档结构 1.3 什么是DTD 1.4 什么是实体 1.5 什么是外部实体 2.xxe漏洞 2.1xxe漏洞基本介绍 2.2xxe漏洞的危害 经典漏洞案例分析 3.xxe漏洞挖掘和利用 3.1. 识别潜在的XML入口 3.2. 检查XML处理逻辑 3.3. 构造试探Payload 常…...

数据结构从入门到精通——栈

栈 前言一、栈1.1栈的概念及结构1.2栈的实现1.3栈的面试题 二、栈的具体实现代码栈的初始化栈的销毁入栈出栈返回栈顶元素返回栈中的元素个数检测是否为空Stack.hStack.ctest.c 前言 栈&#xff0c;作为一种后进先出&#xff08;LIFO&#xff09;的数据结构&#xff0c;在计算…...

webhook详解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 webhook简介 在当今高度连接的网络世界中,没有什么可以孤立地发挥最佳作用。完成一项任务(几乎)总是需要多个实体的参与。电子商务应用程序需要与支付系统通信,支付…...

用 ChatGPT 帮自己修英文简历 — UI/UX 设计师篇

用 ChatGPT 帮自己修英文简历 — UI/UX 设计师篇 之所以能写这篇文章&#xff0c;主要是我本身是 AI 工具的重度使用者&#xff0c;在工作上目前大量依赖 GitHub Copilot 与 ChatGPT 等工具&#xff0c;所以算是有一些心得可以分享。我自己觉得要能发挥这类工具最大的效用&…...

2402. 2-SAT 问题(tarjan,2-SAT模板题)

活动 - AcWing 给定 n 个还未赋值的布尔变量 x1∼xn。 现在有 m 个条件&#xff0c;每个条件的形式为 “xi 为 0/1 或 xj 为 0/1 至少有一项成立”&#xff0c;例如 “x1 为 1 或 x3 为 0”、“x8 为 0 或 x4 为 0” 等。 现在&#xff0c;请你对这 n 个布尔变量进行赋值&am…...

基于java+springboot+vue实现的宠物健康咨询系统(文末源码+Lw)23-206

摘 要 本宠物健康咨询系统分为管理员还有用户两个权限&#xff0c;管理员可以管理用户的基本信息内容&#xff0c;可以管理公告信息以及宠物健康知识信息&#xff0c;能够与用户进行相互交流等操作&#xff0c;用户可以查看宠物健康知识信息&#xff0c;可以查看公告以及查看…...

品牌如何玩转饥饿营销?媒介盒子分享

饥饿营销是许多品牌都会用的策略&#xff0c;从“限定发售”、“先到先得”、“季节限定”、“专属VIP”等都属于饥饿营销的范畴&#xff0c;为什么饥饿营销屡试不爽&#xff0c;原因就在于人们面对同等的收益和损失时&#xff0c;损失会令他们更加难以接受。今天媒介盒子就来和…...

Vue3:ref和reactive实现响应式数据

一、情景说明 在Vue2中&#xff0c;我们已经知道数据的响应式&#xff0c;是什么含义 就是&#xff0c;在data块中&#xff0c;定义的变量&#xff0c;在页面中引用后 任何地方修改了该变量&#xff0c;页面中引用的变量会立即显示最新数值。 这块&#xff0c;我们学习了 插值…...

二维码门楼牌管理系统应用场景:商业与零售业发展的助推器

文章目录 前言一、二维码门楼牌管理系统的基本功能二、商业和零售业中的应用场景三、二维码门楼牌管理系统的优势分析四、结论 前言 在数字化时代的浪潮中&#xff0c;二维码门楼牌管理系统凭借其独特的优势&#xff0c;正在逐步成为商业和零售业发展的新宠。它不仅能够为商家…...

【Linux进阶之路】网络 —— “?“ (下)

文章目录 前言一、概念铺垫1.TCP2.全双工 二、网络版本计算器1. 原理简要2. 实现框架&&代码2.1 封装socket2.2 客户端与服务端2.3 封装与解包2.4 请求与响应2.5 对数据进行处理2.6 主程序逻辑 3.Json的简单使用 总结尾序 前言 在上文我们学习使用套接字的相关接口进行了…...

【AIGC】Stable Diffusion的建模思想、训练预测方式快速

在这篇博客中&#xff0c;将会用机器学习入门级描述&#xff0c;来介绍Stable Diffusion的关键原理。目前&#xff0c;网络上的使用教程非常多&#xff0c;本篇中不会介绍如何部署、使用或者微调SD模型。也会尽量精简语言&#xff0c;无公式推导&#xff0c;旨在理解思想。让有…...

JVM(类加载机制)

类加载就是 .class 文件, 从文件(硬盘) 被加载到内存(元数据区)中的过程 类加载的过程 加载: 找 .class 文件的过程, 打开文件, 读文件, 把文件读到内存中 验证: 检查 .class 文件的格式是否正确 .class 是一个二进制文件, 其格式有严格的说明 准备: 给类对象分配内存空间 (先在…...

C++ 实战项目之 Boost 搜索引擎

项目地址&#xff1a;https://gitee.com/Vertas/boost-searcher-project 1. 项目背景 日常生活中我们使用过很多搜索引擎&#xff0c;比如百度&#xff0c;搜狗&#xff0c;360搜索等。我们今天是要实现一个像百度这样的搜索引擎嘛&#xff1f;那是不可能的&#xff0c;因为像…...

部署LVS+Keepalived高可用群集(抢占模式,非抢占模式,延迟模式)

目录 一、LVSKeepalived高可用群集 1、实验环境 2、 主和备keepalived的配置 2.1 yum安装ipvsadm和keepalived工具 2.2 添加ip_vs模块并开启ipvsadm 2.3 修改keepalived的配置文件 2.4 调整proc响应参数&#xff0c;关闭linux内核的重定向参数响应 2.5 将主服务器的kee…...

性别和年龄的视频实时监测项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 性别和年龄检测 Python 项目 首先介绍性别和年龄检测的高级Python项目中使用的专业术语 什么是计算机视觉&#xff1f; 计算机视觉是使计算机能…...

【Spring面试题】

目录 前言 1.Spring框架中的单例bean是线程安全的吗? 2.什么是AOP? 3.你们项目中有没有使用到AOP&#xff1f; 4.Spring中的事务是如何实现的&#xff1f; 5.Spring中事务失效的场景有哪些&#xff1f; 6.Spring的bean的生命周期。 7.Spring中的循环引用 8.构造方法…...

打车代驾小程序开发 醉酒不用怕一键找代驾

近年来&#xff0c;随着我国私家车市场的不断扩大&#xff0c;驾驶员的安全驾驶意识不断提高&#xff0c;以及交通法规对酒后驾驶的严格把握&#xff0c;代驾市场的潜力也在迸发。代驾小程序开发平台成为了代驾人不可或缺的线上接单平台。那么代驾小程序开发需要实现哪些功能呢…...

蓝桥集训之统计子矩阵

统计子矩阵 核心思想&#xff1a;矩阵前缀和 双指针 用i和j双指针 遍历所有子矩阵的列用s和t双指针 遍历所有子矩阵的行求其子矩阵的和 若>k 将s向下移动 矩阵和必定减小(元素个数减少)直到满足<k 因为列一定 行数即为方案数(从t行往上数到s行 共t-s1个区间[t,t][t-1,t]…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...