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

ave-form.vue 组件中如何将产品名称发送给后端？

news 来源：原创 2025/9/14 22:40:18

如何将产品名称发送给后端。

在这段代码中，产品名称（productName）的处理和发送主要发生在 save() 方法中。让我逐步分析：

产品ID的选择：

<w-form-selectv-model="form.productId"label="涉及产品"label-width="120px":operate-type="operateType":list="productList"option-label="name"option-value="id"
/>

在表单中，用户通过下拉框选择产品，这里的 v-model="form.productId" 会绑定所选产品的 id 到 form.productId。
:list="productList" 是产品列表数据，来自 getProducts() 方法从后端获取的。
option-label="name" 表示下拉框显示的是产品的名称（name），而 option-value="id" 表示实际绑定的是产品的 id。

获取产品名称：
在 save() 方法中，通过以下代码从 productList 中找到选中的产品并获取其名称：

const selectedProduct = this.productList.find((p: any) => p.id === this.form.productId)

this.productList 是存储所有产品信息的数组。
.find() 方法根据 form.productId（用户选择的产品ID）找到对应的产品对象。
selectedProduct 会包含该产品的所有信息，包括 name（名称）。

准备发送的数据：

const data = {...this.form,productName: selectedProduct?.name || '', // 添加产品名称productPhotos: JSON.stringify(this.form.productPhotos),purchaseRecords: JSON.stringify(this.form.purchaseRecords)
}

这里创建了一个新的 data 对象，使用展开运算符 ...this.form 复制了表单中的所有字段。
productName: selectedProduct?.name || '' 明确地将选中的产品名称添加到发送的数据中。如果 selectedProduct 存在，就取它的 name，否则为空字符串。
注意：form.productId 已经包含在 ...this.form 中，所以后端会同时收到产品ID和产品名称。

发送到后端：

const res: any = await esave(data)

esave(data) 是 API 调用（定义在 @/api/fake-registration 中），它将 data 对象发送给后端。
因为 data 中已经包含了 productName，所以产品名称会作为请求的一部分发送出去。

总结

用户在界面上选择产品时，form.productId 保存了产品ID。
在提交时，save() 方法通过 productId 从 productList 中查找对应的产品名称，并将其赋值给 data.productName。
最后，data 对象（包含 productName 和其他表单数据）通过 esave API 发送到后端。

如果后端需要的是产品名称而不仅仅是ID，这段代码已经确保了 productName 会被正确发送。

修改 ave-form.vue，在暂存和提交时添加 productName。

typescript:src/views/tools/fake-strategy/components/ave-form.vue

// ... 其他代码保持不变 ...export default class extends Vue {// ... 其他属性和方法保持不变 ...private async save() {// 从产品列表中获取选中产品的名称const selectedProduct = this.productList.find((p: any) => p.id === this.form.productId)const data = {...this.form,productName: selectedProduct?.name || '', // 添加产品名称productPhotos: JSON.stringify(this.form.productPhotos),purchaseRecords: JSON.stringify(this.form.purchaseRecords)}const res: any = await esave(data)if (res?.code === 0) {this.$emit('close', true)}}// ... 其他代码保持不变 ...
}

主要修改：

在 save 方法中，根据选中的 productId 从 productList 中找到对应的产品
将产品名称 (productName) 添加到发送给后端的数据中

这样在点击暂存或提交按钮时，都会将产品名称一起发送给后端。

在这里插入图片描述

ave-form.vue 组件中如何将产品名称发送给后端？

如何将产品名称发送给后端。在这段代码中，产品名称（productName）的处理和发送主要发生在 save() 方法中。让我逐步分析： 产品ID的选择： <w-form-selectv-model"form.productId"label"涉及产品&q…...

编程日记 2025/9/14 22:40:18

2025年电气工程与智能系统国际学术会议（IC2EIS 2025）

重要信息官网：www.ic2eis.org(点击了解参会投稿等) 时间：2025年3月14-16日地点：中国河南省郑州市简介 2025年电气工程与智能系统国际学术会议（IC2EIS 2025）将于2025年3月14-16日在中国郑州举行。会议旨在为电气…...

编程日记 2025/9/14 22:37:08

Android TextView 使用.9图片文字不展示

参考文章 Android的TextView设置padding无效。实现如上图效果的时候，选择框使用了.9,代码如下： LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(0,...

编程日记 2025/9/14 22:40:18

【PyTorch][chapter-33][transformer-5] MHA MQA GQA, KV-Cache

主要翻译外网： 解剖Deep Seek 系列，详细见参考部分。目录： Multi-Head Attention （MHA) KV-Cache KV-Cache 公式 Multi-Query Attention（MQA) Grouped-Query Attention(GQA) Multi-Head Latent Attention …...

编程日记 2025/9/11 3:29:35

MS SQL 2008 技术内幕：T-SQL 语言基础

《MS SQL 2008 技术内幕：T-SQL 语言基础》是一部全面介绍 Microsoft SQL Server 2008 中 T-SQL（Transact-SQL）语言的书籍。T-SQL 是 SQL Server 的扩展版本，增加了编程功能和数据库管理功能，使得开发者和数据库管理员能…...

编程日记 2025/9/14 22:35:39

seacmsv9注入管理员账号密码+orderby+limit

seacmsv9注入管理员账号密码安装海洋CMS（seacms） 将upload文件夹里的文件全部上传至网页服务器后，执行以下操作: 请运行http://域名/install/index.php进行程序安装 SQL语句尝试注入 http://127.0.0.1/upload/comment/api/index.php?g…...

编程日记 2025/9/13 22:00:48

智能生活综合平台需求规格说明书

一、引言 1.1 编写目的本需求规格说明书旨在明确智能生活综合平台的功能、性能、用户界面等方面的需求，为平台的开发、测试和部署提供详细的指导，确保平台能够满足用户在社交、购物、教育、医疗、政务等多个领域的智能生活需求，提升用户的…...

编程日记 2025/9/8 21:18:28

应用的负载均衡

概述负载均衡（Load Balancing） 调度后方的多台机器，以统一的接口对外提供服务，承担此职责的技术组件被称为“负载均衡”。负载均衡器将传入的请求分发到应用服务器和数据库等计算资源。负载均衡是计算机网络中一种用于优化资源利…...

编程日记 2025/9/14 20:45:37

TDengine 中的数据类型

简介数据类型是数据库产品中一个非常重要的概念，它决定着能处理不同类型数据的范围。 TDengine 支持了所有通用的数据类型，同时还支持了一些特色数据类型，如地理坐标，未来准备支持 decimal 数据类型，方便银行等场景中…...

编程日记 2025/9/11 16:10:38

网络运维学习笔记（DeepSeek优化版）005网工初级（HCIA-Datacom与CCNA-EI）链路层发现协议与VLAN技术

文章目录一、链路层发现协议1.1 思科CDP协议1.2 华为LLDP协议二、VLAN（Virtual Local Area Network，虚拟局域网）技术详解2.1 基本概念2.2 技术特性2.3 接口工作原理2.3.1 Access模式2.3.2 Trunk模式 2.4 厂商配置对比思科配置华为配置 2.5 …...

编程日记 2025/9/11 15:34:05

51 哈希表的实现

目录一、哈希介绍 （一）直接定值法 （二）哈希冲突 （三）负载因子 （四）将关键字转为整数 （五）哈希函数 1、除法散列法 / 除留余数法 2、乘法散列法&#…...

编程日记 2025/9/14 22:05:38

使用Python实现机器学习小案例：构建房价预测模型

背景在日常生活中，很多人都希望了解某个区域的房价，特别是在购房时。如果我们能够根据一些已知的房屋特征（如面积、卧室数量、距离市中心的距离等）来预测房价，那将大大提高购房决策的效率。在本文中，我们将通过Python实现一个简单的房价预测模型，并帮助你理解机器学习…...

编程日记 2025/9/13 13:01:01

Layui页面粘贴的方法

一: 在Controller层注解的注意点 : 1.先写一个大的 RequestMapping () () 里面的的是 : (这些你写的那个实体类的方法,在这取名是什么比如用户类 user) 2. 在Controller层需要写一个 Controller的注解 3. Autowired 就相当与之前new的全局的serviceImpl 的方法 4.在…...

编程日记 2025/9/11 9:38:56

js：根据后端返回的数组取出每一个数组的keyword字段然后拼接成一个逗号分隔的字符串

问： 现在有一个el-select， 后端接口返回数据为keyword:xxx,referenceNum:1,tagId:132sf32fasdfaf组成的数组， 现在select是多选， 但是但我选择多个下拉框选项后，后端需要前端返回的数据tagIds字段需要时一个字符串…...

编程日记 2025/9/14 9:37:30

ES 客户端 API 二次封装思想

ES 客户端 API 二次封装思想网页端 ： ip5601 索引创建数据新增数据查询数据删除因为json串会出现在代码中，为了让用户更容易去添加数据所以去封装它。思想：为了让json串变得更加容易添加，封装最主要是为了简化正文的…...

编程日记 2025/9/8 18:01:08

《Kettle保姆级教学-日志写入数据库（通过修改kettle.properties一劳永逸）》

目录一、配置转换属性二、修改kettle.properties文件一、配置转换属性双击空白处，进入配置页面执行转换可以看到日志已写入数据库二、修改kettle.properties文件第一步的方式只能对某个转换/作业生效，怎么做到所有的转换/作业都可以生效呢&…...

编程日记 2025/9/12 2:17:37

SQL注入练习

目录一、如何绕过 information schema 字段过滤注入二、如何绕过 order by 语句过滤注入三、seacmsv9 实现报错注入数据一、如何绕过 information schema 字段过滤注入 1、使用其他系统表，不同数据库有各自的系统表，可替代information_schema。 …...

编程日记 2025/9/14 20:21:25

【大模型】量化、剪枝、蒸馏

大模型的量化、剪枝和蒸馏是三种常用的模型优化技术，旨在减少模型的复杂性，降低计算资源消耗，并加速推理过程。下面是每种技术的详细介绍： 1. 量化（Quantization） 量化是将浮点数表示的模型参数&#xff…...

编程日记 2025/9/11 21:58:52

Feign 类型转换问题解析：如何正确处理 `ResponseEntity＜byte[]＞` 返回值

在微服务架构中，Feign 是一种常见的用于服务间调用的客户端，它允许我们通过声明式接口来调用远程服务。使用 Feign 时，我们通常通过接口方法的返回类型来接收服务的响应体。然而，某些情况下，我们会遇到 Feign 无法正确解析响应体类型的问题，尤其是当服务返回一个如 Respo…...

编程日记 2025/9/9 3:27:22

最快安装ESP8266 ESP832 开发板·Arduino环境的方法

直接去官网找这种exe然后直接运行就好他会自动识别安装请点击此处下载插件安装文件（提取码：49c1） 去官网可以找到最新的，但是这种方法有个弊端你更新不了，所以还要添加链接到首选项 http://arduino.esp8266.com/st…...

编程日记 2025/9/9 15:02:10

【工具变量】公司企业数字领导力（2004-2023年）

数据简介：企业数字化领导力是指在数字经济时代，领导者通过战略性地使用数字资产、引领组织变革，使企业在数字化环境中获得持续成功的能力。对于上市公司而言，这种领导力尤为重要，因为它直接关系到企业的战略方向、市场…...

编程日记 2025/9/11 15:23:17

LeetCode 动态规划环形子数组的最大和

环形子数组的最大和给定一个长度为 n 的环形整数数组 nums ，返回 nums 的非空子数组的最大可能和。环形数组意味着数组的末端将会与开头相连呈环状。形式上， nums[i] 的下一个元素是 nums[(i 1) % n] ， nums[i] 的前一个元素是 nums[(…...

编程日记 2025/9/14 7:28:14

毕业项目推荐：基于yolov8/yolo11的野生菌菇检测识别系统（python+卷积神经网络）

文章目录概要一、整体资源介绍技术要点功能展示：功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出（xls格式）功能6 支持切换检测到的目标查看二、数据集三、算法介绍1. YO…...

编程日记 2025/9/11 23:03:30

基于开源鸿蒙(OpenHarmony)的【智能家居综合应用】系统

基于开源鸿蒙OpenHarmony的智能家居综合应用系统 1. 智能安防与门禁系统1) 系统概述2) 系统架构3）关键功能实现4）安全策略5）总结 2.环境智能调节系统1）场景描述2）技术实现3）总结 3.健康管理与睡眠监测1&…...

编程日记 2025/9/9 7:12:46

C语言【指针篇】（三）

C语言【指针篇】（三） 前言正文1. 数组名的理解2. 使用指针访问数组3. 一维数组传参的本质4. 冒泡排序5. 二级指针6. 指针数组7. 指针数组模拟二维数组总结前言本文主要基于前面对指针的掌握，进一步学习：数组名的理解、使用指针…...

编程日记 2025/9/10 19:44:11

【嵌入式Linux应用开发基础】网络编程(4)：UDP协议

目录一、UDP 协议概述二、UDP 协议特点三、UDP协议的字段格式四、UDP协议的数据传输过程五、嵌入式UDP编程核心API 六、UDP 在嵌入式 Linux 中的编程实现 6.1 UDP 服务器代码示例 6.2 UDP 客户端代码示例七、UDP 协议的应用场景八、UDP 协议的优缺点 8.1 优点…...

编程日记 2025/9/9 22:17:23

PS渐变工具

渐变工具：（颜色条起点到终点为前景色到背景色） 渐变shift：垂直、水平、45度渐变工具–》仿色：让渐变变得细腻。仿色值高，过渡柔和，仿色值低，过渡粗糙渐变工具–》渐变编辑器&am…...

编程日记 2025/9/8 16:55:17

win11系统通过WSL安装ubuntu

Linux 和Windows windows 属于单用户、多任务 Linux属于多用户多任务。Linux一切皆文件 https://blog.csdn.net/ddafei/article/details/142798010 一、启用WSL功能首先，你需要在Windows上启用WSL功能。打开“控制面板”。点击“程序” > “启用或关闭Windo…...

编程日记 2025/9/10 18:18:24

Sqoop从入门到使用

安装和配置修改文件配置：修改文件名将（sqoop-env-template.sh改为sqoop-env.sh） 编辑sqoop-env.sh内部文本，修改调用文件位置将sqoop-env.sh，配置到全局变量中，方便调用。查看正常运用第一类&#xff1…...

编程日记 2025/9/14 0:24:43

深度学习奠基作 AlexNet 论文阅读笔记（2025.2.25）

文章目录训练数据集数据预处理神经网络模型模型训练正则化技术模型性能其他补充训练数据集模型主要使用2010年和2012年的 ImageNet 大规模视觉识别挑战赛（ILSVRC）提供的 ImageNet 的子集进行训练，这些子集包含120万张图像。最终&#xff…...

编程日记 2025/9/14 16:34:07

问题描述： pip install openai Fatal error in launcher: Unable to create process using ‘“e:\private\github\navigation_site.venv\Scripts\python.exe” “E:\private\github\my_project\navigation_site.venv\Scripts\pip.exe” install OpenAI’: ??? 这…...

编程日记 2025/9/14 10:37:54

项目实践之 pdf简历的解析和填充（若依+vue3）

文章目录环境背景最终效果前端讲解左侧模块解析右侧上传模块解析前端步骤后端讲解代码前端环境背景若依前后端分离框架 vue最后边附有代码哦最终效果前端讲解左侧模块解析 1、左侧表单使用el-form 注意： 1、prop出现的字段，需要保证是该类所…...

编程日记 2025/9/12 0:16:19

RAGS评测后的数据如何利用influxdb和grafan 进行数据汇总查看

RAGS（通常指相关性、准确性、语法、流畅性）评测后的数据能借助 InfluxDB 存储，再利用 Grafana 进行可视化展示，实现从四个维度查看数据，并详细呈现每个问题对应的这四个指标情况。以下是详细步骤： 1. 环境准备 InfluxDB 安装与配置依据自身操作系统，从 InfluxDB 官网下…...

编程日记 2025/9/14 18:56:25

本地部署阿里的万象2.1文生视频（Wan2.1-T2V-1.3B）模型

文章目录 （零）在线体验（一）本地部署（1.1）克隆仓库（1.2）安装依赖（1.2.1）安装 flash-attention（1.2.2）重新安装依赖（1.2.3&a…...

编程日记 2025/8/16 10:55:03

centos设置 sh脚本开机自启动

1. start.sh脚本 #!/bin/bash# 依赖docker，等待xxx容器完全启动 sleep 60curl -X POST "localhost:8381/models?urlmymodel.mar&model_namemymodel&batch_size1&max_batch_delay10&initial_workers1"sudo /usr/local/nginx/sbin/nginx …...

编程日记 2025/9/14 18:51:08

一文读懂什么是K8s Admission Controller

#作者：曹付江文章目录 1、什么是 Admission Controllers？2、如何创建 Admission Controllers？3、Admission 控制器的最佳实践 K8s 中的操作与安全标准执行机制： 1、什么是 Admission Controllers？ Admission contro…...

编程日记 2025/9/8 17:27:12

江协科技/江科大-51单片机入门教程——P[1-3] 单片机及开发板介绍

前言：本节主要的任务是了解一下 51 单片机和所用的普中51开发板。目录一、单片机介绍二、单片机的应用领域三、STC89C52单片机四、命名规则五、单片机内部拆解六、单片机内部结构图七、单片机管脚图八、单片机最小系统九、开发板介绍十、开发…...

编程日记 2025/9/14 16:25:02

一周学会Flask3 Python Web开发-Jinja2模板继承和include标签使用

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 不管是开发网站还是后台管理系统，我们页面里多多少少有公共的模块。比如博客网站，就有公共的头部&…...

编程日记 2025/9/14 21:56:23

4.3MISC流量分析练习-wireshark-https

流量分析题目的例题 1.了解wireshark的过滤方式 2.了解tls跟ssl协议基本还原 3.了解xor基本变换方式，获取flag 附件是一个流量包，打开之后有各种流量，但是分析无果，然后丢到kali中使用binwalk进行分析，发现有一个r…...

编程日记 2025/9/12 1:52:25

wifi5和wifi6，WiFi 2.4G、5G，五类网线和六类网线，4G和5G的区别

wifi5和wifi6的区别是Wi-Fi 5和Wi-Fi 6的选择与路由器密切相关。路由器是创建和管理无线网络的设备，它决定了网络的类型和性能。具体来说：路由器的标准支持：路由器可以支持不同的Wi-Fi标准，如Wi-Fi 5（802.11ac）和Wi-Fi 6（802.11ax）。支持Wi-Fi 6的路由器能够提供更高…...

编程日记 2025/9/11 1:26:01

【二分查找】P9698 [GDCPC2023] Path Planning|普及

本文涉及的基础知识点本博文代码打包下载 C二分查找 [GDCPC2023] Path Planning 题面翻译【题目描述】有一个 n n n 行 m m m 列的网格。网格里的每个格子都写着一个整数，其中第 i i i 行第 j j j 列的格子里写着整数 a i , j a_{i, j} ai,j。从 0…...

编程日记 2025/9/8 16:41:21

请介绍一下Java的面向对象特性

Java是一种纯面向对象的语言，它支持类、继承、封装和多态等面向对象的基本概念。以下是Java面向对象特性的详细介绍： 一、封装封装是面向对象编程的核心思想之一，它指的是将对象的属性和方法结合在一起，并隐藏对象的内部实现细…...

编程日记 2025/9/13 22:36:14

使用ZFile打造属于自己的私有云系统结合内网穿透实现安全远程访问

文章目录前言1.关于ZFile2.本地部署ZFile3.ZFile本地访问测试4.ZFile的配置5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定ZFile公网地址前言在数字化的今天，我们每个人都是信息的小能手。无论是职场高手、摄影达人还是学习狂人，每天都在创造…...

编程日记 2025/9/10 17:07:06

Spring 源码硬核解析系列专题（八）：Spring Security 的认证与授权源码解析

在前几期中，我们从 Spring 核心到 Spring Boot，再到 Spring Cloud，逐步探索了 Spring 生态的底层原理。作为企业级应用的关键组件，Spring Security 提供了全面的安全解决方案，包括认证（Authentication）和授权（Authorization）。本篇将深入 Spring Security 的源码，剖析…...

编程日记 2025/9/11 11:18:51

Windows 图形显示驱动开发-WDDM 3.2-自动显示切换(七)

亮度数据为了确保用户不会因为切换而注意到亮度变化，GPU0 和 GPU1 显示的所有亮度属性都必须相同。此要求可确保在切换 GPU0 至 GPU1 之前的任何亮度级别，在切换至 GPU1 后都可以支持。为此，GPU0 和 GPU1 的驱动程序必须： 使…...

编程日记 2025/9/13 9:08:49

Android ObjectBox数据库使用与集成指南

ObjectBox其核心特点ObjectBox与 SQLite 和 Realm 的对比Android集成ObjectBox创建ObjectBox实体对象创建ObjectBox操作管理类OBManager在Application初始化ObjectBox插入或更新数据查询数据统计数据分页数据查询删除数据总结今天分享一套Android另一个数据库ObjectBox。Object…...

编程日记 2025/9/10 11:41:48

C++ Qt常见面试题（3）：Qt内存管理机制

Qt 内存管理机制是其框架的重要组成部分，目的是简化开发者对内存的管理，减少内存泄漏的风险，同时提供高效的资源使用方式。Qt 的内存管理机制主要依赖于对象树（Object Tree）和父子关系（Parent-Child Relationship）的设计，通过智能管理对象的生命周期来实现自动化的…...

编程日记 2025/9/14 20:21:26

到底什么是认证？

哈喽！欢迎来到程序视点，我是小二哥！本店菜品如下： #风暴过后以桶认证和授权什么是认证认证 (Authentication) 是根据凭据验明访问者身份的流程。即验证“你是你所说的那个人”的过程。身份认证，通常通过用户名…...

编程日记 2025/9/13 20:53:24

量子计算可能改变世界的四种方式

世界各地的组织和政府正将数十亿美元投入到量子研究与开发中，谷歌、微软和英特尔等公司都在竞相实现量子霸权。这其中的利害关系重大，有这么多重要的参与者，量子计算机的问世可能指日可待。为做好准备，，我们必须了…...

编程日记 2025/9/9 16:56:23

总结

相关文章：