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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

/**
 * 获得商品的规格列表 - 商品相关的公共函数
 *
 * @param spu
 * @return PropertyAndValues 规格列表
 */
const getPropertyList = (spu: Spu): PropertyAndValues[] => {
  //  直接拿返回的 skus 属性逆向生成出 propertyList
  const 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.coloradmin.cn/o/1970046.html

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

相关文章

Java新手启航:JDK 21 版本安装,开启编程之行

在Java开发前,JDK是必不可少的环境,接下来,让我们一起完成JDK 21版本的下载和安装! 种一棵树最好的时间是10年前,其次就是现在,加油! …

【Redis 进阶】事务

Redis 的事务和 MySQL 的事务概念上是类似的,都是把一系列操作绑定成一组,让这一组能够批量执行。 一、Redis 的事务和 MySQL 事务的区别 1、MySQL 事务 原子性:把多个操作打包成一个整体。(要么全都做,要么都不做&am…

实时渲染云交互助力汽车虚拟仿真新体验!

汽车虚拟仿真是指利用软件和数学模型,模拟汽车的设计、制造、测试和运行等过程,以及汽车与环境、驾驶员、乘客等的交互。汽车虚拟仿真可以帮助汽车工程师快速验证方案,优化性能,降低成本,提高安全性和可靠性。 ​ 汽车…

S32G3系列芯片Serial Boot功能详解!

《S32G3系列芯片——Boot详解》系列——S32G3系列芯片Serial Boot功能详解!★★★ 一、Serial Boot模式概述二、串行下载协议2.1 基于UART和CAN的下载协议概述2.2 基于FlexCAN的Serial Boot2.2.1 IO配置2.2.2 时钟配置2.2.3 通信波特率2.2.4 基于FlexCAN的Serial Bo…

精心准备的高水平的博客【点评语】,来抄啊!

大家好,我是一名_全栈_测试开发工程师,已经开源一套【自动化测试框架】和【测试管理平台】,欢迎大家关注我,和我一起【分享测试知识,交流测试技术,趣聊行业热点】。 第 1 条 这篇博客文章如同灯塔般照亮了技…

ElementPlus 覆盖默认样式的探索

文章目录 问题解决:global 解释改进一下在研究一下 问题 解决 使用 :global(.el-header) :global(.el-header) {padding: 0; } :global(.el-menu--horizontal) {justify-content: center; }:global 解释 在Vue中,:global() 是一个特殊的 CSS 选择器,用…

在Windows中使用VS Code连接远程服务器

①首先生成自己的密钥 ssh-keygen ②打开VS Code的扩展,安装连接工具 Remote-SSH Remote - SSH: Editing Configuration Files ③点击左侧远程资源管理器,之后点击SSH右侧齿轮,选择一个配置文件 注意:此部分的Host名字要与生成…

【Python机器学习系列】一文教你实现决策树模型可视化(案例+源码)

这是我的第335篇原创文章。 一、引言 决策树是一个有监督分类模型,本质是选择一个最大信息增益的特征值进行输的分割,直到达到结束条件或叶子节点纯度达到阈值。根据分割指标和分割方法,可分为:ID3、C4.5、CART算法。每一种颜色代…

GitLab安装方式

一、什么是GitLab GitLab是一个利用Ruby on Rails开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开或者私人项目。它拥有与Github类似的功能,能够浏览源代码,管理缺陷和注释,可以管理团队对…

动态代理对象在 IronPython 中的实现

动态代理对象是一种设计模式,允许在运行时动态地创建对象,并在这些对象上拦截和处理方法调用。它常用于 AOP(面向方面编程)、日志记录、权限控制等场景。应用非常广泛,下面跟着我来聊一聊我遇到的问题。 1、问题背景 …

通过ProSave对西门子触摸屏进行OS更新的具体操作方法(恢复出厂设置)

通过ProSave对西门子触摸屏进行OS更新的具体操作方法(恢复出厂设置) 首先,打开电脑的控制面板,将右上角的查看方式修改为“大图标”,如下图所示,找到“设置PG/PC接口”, 如下图所示,在弹出的窗口中上方的应用程序访问点的下拉菜单中选择 “S7ONLINE(STEP7)”,并在下…

【深度学习实战(49)】目标检测损失函数:IoU、GIoU、DIoU、CIoU、EIoU、alpha IoU、SIoU、WIoU原理及Pytorch实现

前言 损失函数是用来评价模型的预测值和真实值一致程度,损失函数越小,通常模型的性能越好。不同的模型用的损失函数一般也不一样。损失函数主要是用在模型的训练阶段,如果我们想让预测值无限接近于真实值,就需要将损失值降到最低…

kernel-devel导致的linux网卡驱动安装异常

引言 安装包下载:iso镜像文件解压后进入package路径,可以找到所有想要的rpm安装包 1.检查gcc gcc -v:检查gcc编译程序是否安装,如果已经成功安装直接执行步骤3 2.安装gcc & gcc-c gcc程序准备,拷贝到centos后进入…

大厂linux面试题攻略五之数据库管理

一、数据库管理-MySQL语句 0.MySQL基本语句: 1.SQL语句-增 创建xxx用户: mysql>create user xxx % indentified by 123456; xxx表示用户名 %b表示该用户用来连接数据库的方式(远程或本地连接) indentified by 123456设置密码…

《看漫画学Python》全彩PDF教程,495页深度解析,零基础也能轻松上手!

前言 说起编程语言,Python 也许不是使用最广的,但一定是现在被谈论最多的。随着近年大数据、人工智能的兴起,Python 越来越多的出现在人们的视野中。 在各家公司里,Python 还常被用来做快速原型开发,以便更快验证产品…

PyCharm 中如何使用驭码CodeRider?

极狐GitLab 在 5 月 28 日正式发布了 AI 产品驭码CodeRider,可以使用驭码CodeRider 进行AI 编程 & DevOps 流程处理。现已开启免费试用,登录官网:https://coderider.gitlab.cn/ 即可申请试用。 GitLab 中文版学习资料 驭码CodeRider 官…

【论文学习】基于序列统计的未知无线协议特征提取方法

【参考文献】刘治国,蔡文珠,李运琪,等.基于序列统计的未知无线协议特征提取方法[J].计算机工程,2021,47(11):192-197.DOI:10.19678/j.issn.1000-3428.0059551.【注】本文仅为作者个人学习笔记,如有冒犯,请联系作者删除。 这篇题为《基于序列统计的未知无…

U-Net++原理与实现(含Pytorch和TensorFlow源码)

U-Net原理与实现 引言1. U-Net简介1.1 编码器(Encoder)1.2 解码器(Decoder)1.3 跳跃连接(Skip Connections) 2. U-Net详解2.1 密集跳跃连接2.2 嵌套和多尺度特征融合2.3 参数效率和性能2.4 Pytorch代码2.5 …

conda搭建环境,pycham使用

相信学习了tensorflowjs后一定不会满足,毕竟tensorflowjs使用场景以及开源度远不及pyhton的tensorflow,所以不要犹豫,开始使用python吧,有ChatGPT帮助,比想象的简单很多 python环境安装 conda环境安装 推荐大家直接…

[STM32][Bootloader][教程]STM32 HAL库 Bootloader开发和测试教程

0. 项目移植 对于不想知道其执行过程的朋友来说,可以直接移植,我的板子是STM32F411CER6, 512K M4内核 项目地址: Bootloader(可以自己写标志位用于自测,项目中这部分代码已经被注释,可以打开自行测试&…