芋道微服务全栈开发日记(商品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.mzph.cn/pingmian/51717.shtml

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

相关文章

web、http协议、apache服务、nginx服务

web基本概念和常识 概念 web:为用户提供的一种在互联网上浏览信息的服务,是动态的、可交互的、跨平台的和图形化的; 为用户提供各种互联网服务,这些服务包括浏览服务以及各种交互式服务,包括聊天、购物等&#xff1…

shp格式数据详解

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,ech…

MATLAB中“varargin”的作用

varargin是什么? 在MATLAB中,varargin是一个特殊的变量,用于接收函数输入参数中的可变数量的参数。它允许用户在调用函数时传递不确定数量的参数。 varargin的本质是一个包含了所有可变参数的cell数组。在函数内部,可以使用cell…

鸿蒙HarmonyOS开发:@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

文章目录 一、装饰器二、概述三、限制条件四、装饰器说明五、Toggle组件1、子组件2、接口3、ToggleType枚举4、事件 六、示例演示1、代码2、效果 一、装饰器 State装饰器:组件内状态Prop装饰器:父子单向同步Link装饰器:父子双向同步Provide装…

.NET周刊【7月第4期 2024-07-28】

国内文章 .NET 高性能缓冲队列实现 BufferQueue https://mp.weixin.qq.com/s/fUhJpyPqwcmb3whuV3CDyg BufferQueue 是一个用 .NET 编写的高性能的缓冲队列实现,支持多线程并发操作。 项目地址:https://github.com/eventhorizon-cli/BufferQueue 项目…

【Python】基础学习技能提升代码样例6:日志logging

logging 模块实现了python的日志能力。本文通过几个示例展示一些重点概念与用法。 一、线程安全介绍 logging 模块的目标是使客户端不必执行任何特殊操作即可确保线程安全。 它通过使用线程锁来达成这个目标;用一个锁来序列化对模块共享数据的访问,并且…

upload-labs靶场练习

文件上传函数的常见函数: 在PHP中,‌文件上传涉及的主要函数包括move_uploaded_file(), is_uploaded_file(), get_file_extension(), 和 mkdir()。‌这些函数共同协作,‌使得用户可以通过HTTP POST方法上传文件,‌并在服务器上保存…

实战:安装ElasticSearch 和常用操作命令

概叙 科普文:深入理解ElasticSearch体系结构-CSDN博客 Elasticsearch各版本比较 ElasticSearch 单点安装 1 创建普通用户 #1 创建普通用户名,密码 [roothlink1 lyz]# useradd lyz [roothlink1 lyz]# passwd lyz#2 然后 关闭xshell 重新登录 ip 地址…

kaggle使用api下载数据集

背景 kaggle通过api并配置代理下载数据集datasets 步骤 获取api key 登录kaggle,点个人资料,获取到自己的api key 创建好的key会自动下载 将key放至家目录下的kaggle.json文件中 我这里是windows的administrator用户。 装包 我用了虚拟环境 pip …

Vite + Vue3 + TS项目配置前置路由守卫

在现代前端开发中,使用 Vue 3 和 TypeScript 的组合是一种流行且高效的开发方式。Vite 是一个极速的构建工具,可以显著提升开发体验。本文博主将指导你如何在 Vite Vue 3 TypeScript 项目中配置前置路由守卫(Navigation Guards)…

【YashanDB知识库】如何远程连接、使用YashanDB?

问题现象 在各个项目实施中,我们经常遇到客户、开发人员需要连接和使用YashanDB但不知如何操作的问题,本文旨在介绍远程连接、使用YashanDB的几种方式。 问题的风险及影响 无风险 问题影响的版本 历史版本~23.2 问题发生原因 无 解决方法及规避方…

前端web开发HTML+CSS3+移动web(0基础,超详细)——第1天

一、开发坏境的准备 1,在微软商店下载并安装VS Code 以及谷歌浏览器或者其他浏览器(我这里使用的是Microsoft Edge) 2,打开vs code ,在电脑桌面新建一个文件夹命名为code,将文件夹拖拽到vs code 中的右边…

Windows10安装CMake图文教程

CMake是一个跨平台的开源构建工具,用于管理软件构建过程。CMake允许开发人员使用简单的语法来描述项目的构建过程,而无需直接处理特定于操作系统或编译器的细节。开发人员可以编写CMakeLists.txt文件来指定项目的源文件、依赖项和构建规则,然…

Ubuntu 20.04.6 安装 Elasticsearch

1.准备 -- 系统更新 sudo apt update sudo apt upgrade -- 安装vim 文本编辑器 sudo apt install vim-- jdk 版本确认 java -versionjdk 安装可以参照:https://blog.csdn.net/CsethCRM/article/details/140768670 2.官方下载Elasticsearch 官方地址:h…

Tekion 选择 ClickHouse Cloud 提升应用性能和指标监控

本文字数:4187;估计阅读时间:11 分钟 作者:ClickHouse team 本文在公众号【ClickHouseInc】首发 Tekion 由前 Tesla CIO Jay Vijayan 于 2016 年创立,利用大数据、人工智能和物联网等技术,为其汽车客户解决…

2024电赛H题参考方案(+视频演示)——自动行使小车

目录 一、题目要求 二、参考资源获取 三、参考方案 1、环境搭建及工程移植 2、移植MPU6050模块 3、移植TB6612电机驱动模块 4、整体控制方案视频演示 总结 一、题目要求 小编自认为:此次H题属于控制类题目,相较于往年较为简单,功能也算单一&a…

谷歌出品,一款免费的智能绘图工具

AutoDraw是由Google开发的一款基于网络的智能绘图工具,旨在通过人工智能技术帮助用户快速、简便地创建图画和图表。该工具于2017年4月11日由谷歌创意实验室推出,并迅速获得了广泛关注。 AutoDraw的核心功能是利用机器学习算法识别用户的草图或涂鸦&…

分布式SQL查询引擎之Presto

Apache Presto 是一个开源的分布式 SQL 查询引擎,旨在高效地对大规模数据集执行交互式查询。Presto 最初由 Facebook 开发,现已成为广泛使用的数据查询工具,特别是在大数据和分析领域。 主要特点 高性能:Presto 通过并行化和内存…

【A1web 1.0】靶机复现详解!

靶机地址: https://www.vulnhub.com/entry/ai-web-1,353/攻击机:kali 首先虚拟机建一个A1web 1.0靶机 切换nat模式 然后kali扫描 nmap -sV ip段 0/24 扫描出ip进行访问 访问没有什么信息 使用dirb 对网页…

使用 Matlab 绘制带有纹理的柱状图

以下是效果 1. 在 Matlab 里安装两个额外的库: hatchfill2 和 legendflex。 (1)搜索并安装 hatchfill2,用来画纹理 (2) 搜索并安装 legendflex,用来画自定义的图例 2. 代码(说明见注释) data …