vue3前后端开发:响应式对象不能直接成为前后端数据传输的对象

 

如图所示:前端控制台打印显示数据是没问题的,后端却显示没有接收到相应数据,但是后端的确接收到了一组空数据

直接说原因:这种情况唯一的原因是没有按正确格式传递参数。每个人写错的格式各有不同,我只是说明一下我在开发过程中遇到的问题,即使对我问题的记录,也可能对其他人产生一点帮助。

一、我遇到的问题:响应式对象过于复杂。

1、问题

const form1 = ref({phone: "",name: "",siteId: "",identify: "",userAddress: ""
});

 响应式数据具有相对复杂的数据结构:以上图的响应式对象为例,我们希望的该对象的属性是电话、姓名等,但对于响应式对象来说,他数据结构上的属性是RefSymbol和value(如左下图)。这就导致当我们直接将其作为对象传输时传输的是一个极为复杂的对象(如右下图)

2、处理方法

我们需要将响应式对象变成简单的json数据。如下:

let insertData={name: form1.value.name,phone: form1.value.phone,siteId: form1.value.siteId,identify: form1.value.identify,userAddress: form1.value.userAddress,}

我们将得到一个新的数据insertData,他在数据传输过程中的表现形式非常简单,如下图,只有我们需要的结构。

该数据可直接在后端合适的数据结构读取。

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

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

相关文章

[深度学习]长短期记忆网络LSTM

1. 理解序列建模和RNN 长短期记忆网络是一种递归神经网络(RNN)的变体,专门用于处理和预测时间序列数据。首先,理解标准RNN的基本工作原理是非常重要的,因为LSTM是其在解决长期依赖问题上的改进。 传统的循环神经网络…

STM32定时器入门篇——(基本定时器的使用)

一、基本定时器的功能介绍: STM32F103的基本定时器有:TIM6、TIM7。基本定时器TIM6和TIM7各包含一个16位递增自动装载计数器,最大计数到2^16也就是65536,计数值为0~65535,其拥有的功能有:定时中断、主模式触…

Java网络编程之UDP通信与TCP通信交互代码实现

​import java.net.InetAddress; import java.io.IOException; class Main {public static void main(String[] args) {try { InetAddress localAddress InetAddress.getLocalHost(); //获得本地主机 InetAddress remoteAddress InetAddress.getByName("www.itcast.cn&qu…

EtherCAT主站IGH-- 1 -- IGH之cdev.h/c文件解析

EtherCAT主站IGH-- 1 -- IGH之cdev.h/c文件解析 0 预览一 该文件功能cdev.c 文件功能函数预览 二 函数功能介绍cdev.c 中主要函数的作用1. ec_cdev_init2. ec_cdev_clear3. eccdev_open4. eccdev_release5. eccdev_ioctl6. eccdev_mmap7. eccdev_vma_fault8. eccdev_vma_nopage…

批处理脚本参数传递:掌握命令行的艺术

批处理脚本参数传递:掌握命令行的艺术 批处理脚本(Batch Script)是Windows操作系统中一种自动化执行任务的脚本文件,通常以.bat或.cmd为文件扩展名。在编写批处理脚本时,我们经常需要从命令行接收参数以提供更大的灵活…

【Android面试八股文】说一说ListView卡顿的原因以及相对应的优化策略

文章目录 一、ListView卡顿的原因1.1 Item没有复用1.2 布局的层级过深1.3 数据绑定逻辑过多1.4 滑动时不必要的图片刷新1.5 频繁的notifyDataSetChanged二、优化策略2.1 使用 ViewHolder 进行视图复用2.2 优化布局结构2.3 优化数据绑定逻辑过多2.4 图片加载优化2.5 避免频繁调用…

电机故障检测系统的通用性限制分析

电机故障检测系统因应用环境、功能需求、经济性等多方面差异而难以实现通用。工厂与实验室在环境条件、使用频率、功能需求、成本、维护及数据处理方面有显著不同,此外,LabVIEW软件在两者中的应用和数据处理也存在差异,这进一步限制了系统的通…

一个实例配置多个服务名

更改参数实现配置多个服务名 需求背景 在做案例模拟的时候发现博主的环境配置的是3个服务名,通常都是一个服务名,服务名就是数据库名,出于好奇进行了以下实验。 环境:Oracle 11.2.0.4 单点 配置多个服务名的意义 可以通过服务…

数组方法总结

创建数组的方法 Array.of(): 创建包含所有传入参数的数组。Array.from(): 从类数组或可迭代对象创建数组。 let arr1 Array.of(1, 2, 3); // [1, 2, 3] let arr2 Array.from(hello); // [h, e, l, l, o]添加/删除元素 push(): 在数组末尾添加一个或多个元素,返…

YOLOv8/v10项目使用教程

根据改好的YOLOv8.yaml改yolov10.yaml教程 打开ultralytics/cfg/models/v8路径,找到需要移植的yaml文件,从其中复制相关的模块。打开一个YOLOv10的yaml文件。 注释掉之前相应位置的模块,并粘贴上面复制的模块,完成。 其余使用步骤…

云原生面试

云原生面试 Kubernetes原理Kubernetes 如何保证集群的安全性。简述 Kubernetes 准入机制简述Kubernetes Secret 有哪些使用方式简述Kubernetes PodSecurityPolicy机制简述Kubernetes PodSecurityPolicy机制能实现哪些安全策略简述Kubernetes 网络策略原理简述Kubernetes 数据持…

基于SpringBoot+Vue的美容美发在线预约系统的设计与实现【附源码】

毕业设计(论文) 题目:基于SpringBootVue的美容美发在线预约系统的设计与实现 二级学院: 专业(方向): 班 级: 学 生: 指导教师&#xff…

072、对象的创建与调用方法

071、Python 类的定义 当我们定义好一个类后,肯定是为了使用其中的功能来解决某些问题的,那么如何使用呢? 首先就是需要通过类创建对象,也就是类的实例化(只有实例化后的对象才能够调用里面的属性和方法)…

Go 语言学习笔记之通道 Channel

Go 语言学习笔记之通道 Channel 大家好,我是码农先森。 概念 Go 语言中的通道(channel)是用来在 Go 协程之间传递数据的一种通信机制。 通道可以避免多个协程直接共享内存,避免数据竞争和锁的使用,从而简化了并发程…

【解决方案】Mysql 数据库千万数据插入脚本

一.背景 要做数据模拟,需要在测试环境创建7千万的流水数据,进行迁移的模拟动作。 二.具体代码 private static final String DB_URL "jdbc:mysql://IP:3306/twallet_dev?zeroDateTimeBehaviorconvertToNull&allowMultiQueriestrue&useAf…

《Mybatis-Plus》系列文章目录

什么是 MyBatis-Plus? Mybatis-Plus是一个在MyBatis基础上进行增强和扩展的开源Java持久层框架。 Mybatis-Plus(简称MP)旨在简化开发、提高效率,通过提供一系列便捷的功能和工具,大幅度减少开发人员编写重复代码的时…

element-ui 下拉菜单el-dropdown-item添加点击事件

使用element-ui下拉菜单组件Dropdown时绑定点击事件,事件不生效。 click 常见于其用在Vue中的事件绑定,而实际上是 v-on 的简写,而 v-on 则是对 vue 的事件体系封装之后的 API接口。 native修饰符用于处理DOM原生事件,由于组件 …

如何在web页面下做自动化测试?

自动化测试是在软件开发中非常重要的一环,它可以提高测试效率并减少错误率。在web页面下进行自动化测试,可以帮助我们验证网页的功能和交互,并确保它们在不同浏览器和平台上的一致性。本文将从零开始,详细介绍如何在web页面下进行…

10--7层负载均衡集群

前言:动静分离,资源分离都是在7层负载均衡完成的,此处常被与四层负载均衡比较,本章这里使用haproxy与nginx进行负载均衡总结演示。 1、基础概念详解 1.1、负载均衡 4层负载均衡和7层负载均衡是两种常见的负载均衡技术&#xff…

PHP 语言特定指南

PHP 语言特定指南 本指南将教您如何使用 Docker 创建容器化的 PHP 应用程序。通过本指南,您将学习如何: 容器化并运行一个 PHP 应用程序设置用于开发 PHP 应用程序的本地环境在容器内运行 PHP 应用程序的测试使用 GitHub Actions 配置容器化 PHP 应用程…