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

news2024/11/24 9:03:26

 

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

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

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

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.coloradmin.cn/o/1862320.html

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

相关文章

大模型应用研发基础环境配置(Miniconda、Python、Jupyter Lab、Ollama等)

老牛同学之前使用的MacBook Pro电脑配置有点旧(2015 年生产),跑大模型感觉有点吃力,操作起来有点卡顿,因此不得已捡起了尘封了快两年的MateBook Pro电脑(老牛同学其实不太喜欢用 Windows 电脑做研发工作&am…

第三方软件连接虚拟机

第三方软件连接虚拟机 1 查看本机VM(VMware)虚拟机网段2 开启虚拟机系统,修改网卡配置3 重新打开网络并测试连通性4 打开VM虚拟机网络开关5 通过第三方软件建立连接6 可能遇到的问题 1 查看本机VM(VMware)虚拟机网段 子…

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

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

EfficientNet-V2论文阅读笔记

目录 EfficientNetV2: Smaller Models and Faster Training摘要Introduction—简介Related work—相关工作EfficientNetV2 Architecture Design—高效EfficientNetV2架构设计Understanding Training Efficiency—了解训练效率Training-Aware NAS and Scaling—训练感知NAS和缩放…

Android开发系列(九)Jetpack Compose之ConstraintLayout

ConstraintLayout是一个用于构建复杂布局的组件。它通过将子视图限制在给定的约束条件下来定位和排列视图。 使用ConstraintLayout,您可以通过定义视图之间的约束关系来指定它们的位置。这些约束可以是水平和垂直的对齐、边距、宽度和高度等。这允许您创建灵活而响…

win10修改远程桌面端口,Windows 10下修改远程桌面端口及服务器关闭445端口的操作指南

Windows 10下修改远程桌面端口及服务器关闭445端口的操作指南 一、修改Windows 10远程桌面端口 在Windows 10系统中,远程桌面连接默认使用3389端口。为了安全起见,建议修改此端口以减少潜在的安全风险。以下是修改远程桌面端口的步骤: 1. 打…

AI 编程还有前景嘛?

自从各个大厂相继出品 AI 编程助手之后,AI 在编程领域的发展,可谓是几无寸进。 相比于 AI 在多模态领域火热,AI 在编程领域的热度已经完全下来了。 阿七在公众号搜索了关键词「AI编程」,发现搜索出来的公众号寥寥无几&#xff0…

[学习笔记] 禹神:一小时快速上手Electron笔记,附代码

课程地址 禹神:一小时快速上手Electron,前端Electron开发教程_哔哩哔哩_bilibili 笔记地址 https://github.com/sui5yue6/my-electron-app 进程通信 桌面软件 跨平台的桌面应用程序 chromium nodejs native api 流程模型 main主进程 .js文件 node…

【Unity小技巧】记一个RenderTexture无法正确输出Camera视图下的Depth渲染的问题

问题 这个问题出现在使用URP管线时,我试图用Shader实现血条的制作,并用RenderTexture将视图渲染到RawImage上。 但是渲染结果出现了问题: 可以看到液体边缘的渲染出现了错误,原因不明 在StackFlow上查找后找到了类似的问题&…

嵌入式学习(Day 51:ARM指令/汇编与c语言函数相互调用)

1.Supervisor模式与SVC模式 Supervisor模式是ARM处理器的一个特权工作模式,允许执行特权指令和访问特权资源。SVC模式(Supervisor Call)是与Supervisor模式相关的一个功能或指令,用于从用户模式切换到Supervisor模式,…

MySQL报错Duplicate entry ‘0‘ for key ‘PRIMARY‘

报错现场 现象解释 因为你在插入时没有给 Customer.Id 赋值,MySQL 会倾向于赋值为 NULL。但是主键不能为 NULL,所以 MySQL 帮了你一个忙,将值转换为 0。这样,在第二次插入时就会出现冲突(如果已经有一条记录为 0&…

Linux系统中根下的目录结构介绍

一、Linux的路径分隔符 Linux系统中使用正斜杠(/)作为路径分隔符;每个目录的后面都默认带有一个正斜杠(如:需要进入opt目录可以分别使用【cd /opt】或【cd /opt/】) 二、Linux根目录下各个目录结构介绍 红色标识的文件夹为Linux的…

Vue3基础使用

目录 一、创建Vue3工程 (一)、cli (二)、vite 二、常用Composition API (一)、setup函数 (二)、ref函数 (三)、reactive函数 (四)、setup注意事项 (五)、计算属性 (六)、watch (七)、watchEffect函数 (八)、生命周期 1、以配置项的形式使用生命周期钩子 2、组合式…

LeetCode 算法:将有序数组转换为二叉搜索树 c++

原题链接🔗:将有序数组转换为二叉搜索树 难度:简单⭐️ 题目 给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 平衡 二叉搜索树。 示例 1: 输入:nums [-10,-3,0,5,9]…

怎么用电脑在线制作活码?快速将活码生成的操作方法

随着现在很多内容都可以通过生成二维码的方式来展示,所以在很多地方都会将内容生成二维码的方式让其他人通过扫码查看内容。二维码不仅能够简化用户获取内容的流程,还可以降低成本,有效提升用户体验,那么不同内容的二维码如何制作…

Golang笔记:使用serial包进行串口通讯

文章目录 目的使用入门总结 目的 串口是非常常用的一种电脑与设备交互的接口。这篇文章将介绍golang中相关功能的使用。 本文使用的包为 :go.bug.st/serial https://pkg.go.dev/go.bug.st/serial https://github.com/bugst/go-serial 另外还有一些常见的包如&…

构建家庭NAS之三:在TrueNAS SCALE上安装qBittorrent

本系列文章索引: 构建家庭NAS之一:用途和软硬件选型 构建家庭NAS之二:TrueNAS Scale规划、安装与配置 构建家庭NAS之三:在TrueNAS SCALE上安装qBittorrent 大部分家庭NAS用户应该都会装一个下载工具。本篇以qBittorrent为例&…

Linux-笔记 全志T113移植正点4.3寸RGB屏幕笔记

目录 前言 线序整理 软件 显示调试 触摸调试 背光调试 前言 由于手头有一块4.3寸的RGB屏幕(触摸IC为GT1151),正好开发板上也有40Pin的RGB接口,就想着给移植一下,前期准备工作主要是整理好线序,然后用转接板与杜邦线连接验证好…

MySQL 外连接、内连接与自连接的区别?

引言:本文将深入探讨这些连接类型的概念、语法及其应用场景,帮助读者全面理解如何利用这些技术实现复杂的数据查询和分析。在数据库查询中,连接操作使得我们可以根据指定的关联条件(join condition)联合两个或多个表中…