芋道源码yudao-cloud 二开日记(商品sku数据归类为规格属性)

ops/2024/11/15 4:01:41/
商品的每一条规格和属性在数据库里都是单一的一条数据,从数据库里查出来后,该怎么归类为对应的规格和属性值?如下图:

在这里插入图片描述

在商城模块,商品的单规格、多规格、单属性、多属性功能可以说是非常完整,如下图:

在这里插入图片描述

在多规格设置里,每添加一项属性,规格列表里都会增加一项,每添加一个属性值,规格列表里也会增加一条对应的项。

在这里插入图片描述
下图为表格里规格在数据库中的数据,直接存了字符串数据:
在这里插入图片描述
从数据库查出来以后得到的是多条数据,想处理为对应的规格和属性也有很多的方式和方法,可以在前端处理也可以在后端处理,本来我想在后端处理的,转换数据的方法前端一个函数是可以直接引入调用的,方法如下:

/*** 获得商品的规格列表 - 商品相关的公共函数** @param spu* @return PropertyAndValues 规格列表*/
const getPropertyList = (spu: Spu): PropertyAndValues[] => {//  直接拿返回的 skus 属性逆向生成出 propertyListconst properties: PropertyAndValues[] = []// 只有是多规格才处理if (spu.specType) {spu.skus?.forEach((sku) => {sku.properties?.forEach(({ propertyId, propertyName, valueId, valueName }) => {// 添加属性if (!properties?.some((item) => item.id === propertyId)) {properties.push({ id: propertyId!, name: propertyName!, values: [] })}// 添加属性值const index = properties?.findIndex((item) => item.id === propertyId)if (!properties[index].values?.some((value) => value.id === valueId)) {properties[index].values?.push({ id: valueId!, name: valueName! })}})})}return properties
}

这个函数体的文件目录是在views/mall/product/spu/components/index.ts,直接在需要使用的地方引入调用即可,打印一下。

prodDetail.value.property = getPropertyList(data)
console.log(prodDetail.value.property);

处理过后的数据是这样的。如下图:
在这里插入图片描述

在这里已经处理好了,ok,处理完成。

http://www.ppmy.cn/ops/87462.html

相关文章

Java中的单点登录实现:OAuth2与JWT

Java中的单点登录实现:OAuth2与JWT 大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!今天我们来探讨在Java中如何使用OAuth2与JWT实现单点登录(SSO)。 一、单点登录…

PyCharm 2024.1最新变化

1、Hugging Face 集成: PyCharm 现在集成了对 Hugging Face 模型和数据集的支持,允许用户直接在 IDE 内预览模型和数据集的文档。当鼠标悬停在模型或数据集名称上时,IDE 将显示一个弹出窗口,其中包含相关的描述信息&#…

【计算机视觉】基本概念和应用

计算机视觉:基本概念和应用 目录 引言计算机视觉的基本概念 图像处理与图像分析特征提取与表示机器学习与深度学习 计算机视觉的关键技术 图像分类目标检测图像分割姿态估计图像生成与风格迁移 计算机视觉的应用 自动驾驶医疗影像智能监控增强现实与虚拟现实 计算…

反序列化靶机serial复现

靶机描述 今天研究一下php反序列化,靶机serial实战。目标为获取root权限。 ------------------------------------- 靶机信息 可以去vulhub上下载此靶机:serial: 1 ~ VulnHub下载好,之后,使用Vmware新建虚拟机打开: 渗透测试过程…

创建了Vue项目,需要导入什么插件以及怎么导入

如果你不知道怎么创建Vue项目,建议可以看一看这篇文章 怎么安装Vue的环境和搭建Vue的项目-CSDN博客 1.在idea中打开目标文件 2.系在一个插件Vue.js 3.下载ELement UI 在Terminal中输入 # 切换到项目根目录 cd vueadmin-vue # 或者直接在idea中执行下面命令 # 安装element-u…

Spring boot 整合influxdb2

一.服务安装 docker search influxdb docker pull influxdb docker run -dit --name influxdb --restart always -p 8086:8086 -v /dp/docker/file/influxdb:/var/lib/influxdb influxdb 访问8086 初始化 账号组织和新建bucket 创建密钥 这些豆记录下来 二.项目配置 引入依赖…

HiveSQL题——炸裂+开窗

一、每个学科的成绩第一名是谁? 0 问题描述 基于学生成绩表输出每个科目的第一名是谁呢? 1 数据准备 with t1 as(selectzs as name,[{"Chinese":80},{"Math":70},{"English"…

QML编程知识——Quick动画类型详解及示例

目录 引言 一、动画的基本概念 常用的动画类型 二、动画的应用示例 1. 属性动画(PropertyAnimation) 2. 数值动画(NumberAnimation) 3. 颜色动画(ColorAnimation) 4. 旋转动画(Rotation…