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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

/*** 获得商品的规格列表 - 商品相关的公共函数** @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.lryc.cn/news/414254.html

相关文章:

  • 自媒体新闻资讯类网站模板/EyouCMS自媒体资讯类网站模板
  • Python3 第六十课 -- 实例二十九
  • 【JAVA入门】Day17 - GUI
  • OpenAI API continuing conversation in a dialogue
  • 6.前端怎么做一个验证码和JWT,使用mockjs模拟后端
  • Python酷库之旅-第三方库Pandas(064)
  • MATLAB基础操作(二)
  • win10 繁体简体字切换
  • R语言统计分析——描述性统计
  • 为什么需要合成数据进行机器学习
  • 传统CS网络的新生——基于2G网络的远程灌溉实现
  • EasyAR_稀疏空间图
  • 设计模式 - Singleton pattern 单例模式
  • 显示学习5(基于树莓派Pico) -- 彩色LCD的驱动
  • ros vscode配置gdb调试
  • C 环境设置
  • Linux-ubuntu操作系统装机步骤
  • 马尔科夫毯:信息屏障与状态独立性的守护者
  • Pandas的30个高频函数使用介绍
  • 1. protobuf学习
  • Java面试题:SpringBean的生命周期
  • 50 IRF检测MAD-BFD
  • SpringSecurity-1(认证和授权+SpringSecurity入门案例+自定义认证+数据库认证)
  • Java高级
  • python实现图像分割算法3
  • 解密XXE漏洞:原理剖析、复现与代码审计实战
  • Spring Boot集成Resilience4J实现限流/重试/隔离
  • 谷粒商城实战笔记-119~121-全文检索-ElasticSearch-mapping
  • Java 并发编程:Java 线程池的介绍与使用
  • ubuntu上安装HBase伪分布式-2024年08月04日