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…

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

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

一个实例配置多个服务名

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

YOLOv8/v10项目使用教程

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

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

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

Go 语言学习笔记之通道 Channel

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

《Mybatis-Plus》系列文章目录

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

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

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

10--7层负载均衡集群

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

vite+vue3+ts项目搭建流程 (pnpm, eslint, prettier, stylint, husky,commitlint )

vitevue3ts项目搭建 项目搭建项目目录结构 项目配置自动打开项目eslint①vue3环境代码校验插件②修改.eslintrc.cjs配置文件③.eslintignore忽略文件④运行脚本 prettier①安装依赖包②.prettierrc添加规则③.prettierignore忽略文件④运行脚本 stylint①.stylelintrc.cjs配置文…

前端自动化

前端自动化的内容 自动化代码检查自动化测试自动化构建自动化部署自动化文档 前端自动化的最佳实践

基于改进YOLOv5的安全帽检测算法 | 引入Ghost卷积 + 添加CA注意力机制 + 更换Neck网络之BiFPN + 更换损失函数之WIoU

前言:Hello大家好,我是小哥谈。为了解决建筑工地、隧道、煤矿等施工场景中现有安全帽检测算法对于小目标、密集目标以及复杂环境下的检测精度低的问题,设计实现了一种基于YOLOv5的改进目标检测算法,记为YOLOv5-GBCW。首先使用Ghos…

C语言 | Leetcode C语言题解之第166题分数到小数

题目: 题解: struct HashMapNode {int key;int val;UT_hash_handle hh; };struct HashMapNode* hashMap NULL;int hashMapAdd(int key, int val) {struct HashMapNode* node;HASH_FIND_INT(hashMap, &key, node);if(node ! NULL){return node->…

fiddler抓https包

1,安装fiddler省略 2,下载证书步骤:tools-options-https 点击确认,点击OK,点击是 把证书安装到谷歌浏览器上步骤:点击谷歌浏览器右上角的设置,在搜索框中搜索证书,点击“证书管理”…

从0搭建一个vue项目,不使用脚手架从html到vue

前言 从最开始学习web网页开始,搭建一个网页只需要创建一个html文件对其进行编写dom标签语言即可;后来分离了html,css和js,搭建一个网页开始需要文件夹,文件夹包含了这3类文件以及静态文件,图片&#xff0c…

【会议征稿】2024年应用计算智能、信息学与大数据国际会议(ACIIBD 2024,7月26-28)

2024年应用计算智能、信息学与大数据国际学术会议(ACIIBD 2024)将于2024年7月26-28日在中国广州举办。会议将聚焦于计算智能及其应用、信息、大数据等相关的研究领域, 广泛邀请国内外知名专家学者,共同探讨相关学科领域的最新发展…

26.高级特性(上)

目录 一、不安全的Rust二、不安全的超能力2.1 概念2.2 解引用裸指针2.3 调用不安全的函数或方法2.3 创建不安全代码的安全抽象2.4 使用extern函数调用外部代码2.5 访问或修改可变静态变量2.6 实现不安全trait2.7 访问联合体中的字段 三、高级trait3.1 关联类型在trait定义中指定…

【昇思初学入门】第七天打卡-模型训练

训练模型 学习心得 构建数据集。这通常包括训练集、验证集(可选)和测试集。训练集用于训练模型,验证集用于调整超参数和监控过拟合,测试集用于评估模型的泛化能力。 (mindspore提供数据集https://www.mindspore.cn/d…