芋道源码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.rhkb.cn/news/389168.html

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

相关文章

【前端逆向】最佳JS反编译利器,原来就是chrome!

有时候需要反编译别人的 min.js。 比如简单改库、看看别人的 min,js 干了什么,有没有重复加载?此时就需要去反编译Javascript。 Vscode 里面有一些反编译插件,某某Beautify等等。但这些插件看人品,运气不好搞的话,反…

Postman:API开发与测试的强大伴侣

在当今的数字化时代,API(应用程序编程接口)已成为不同软件系统之间通信的桥梁,它们如同数字世界的“翻译官”,使得数据和服务能够在不同的平台和应用程序之间无缝流动。然而,API的开发、测试和维护并非易事…

见证中国数据库的崛起:从追赶到引领的壮丽征程《三》

见证中国数据库的崛起:从追赶到引领的壮丽征程《三》 三、深度思考:中国数据库发展的经验与启示产学研用结合的创新模式应用驱动的创新路径人才培养的关键作用 【纪录片】中国数据库前世今生 在数字化潮流席卷全球的今天,数据库作为IT技术领域…

PowerDNS架构解析与安装部署指南

1、背景介绍 目前公司使用PowerDNS进行DNS管理,但由于采用的是单节点架构,存在不可用的风险。为提升系统的稳定性和可靠性,我们计划对现有架构进行重构。通过引入高可用性设计,我们将优化系统架构,使其能够在故障情况…

计算机毕业设计Python+Flask微博舆情分析 微博情感分析 微博爬虫 微博大数据 舆情监控系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

基于Python/flask的微博舆情数据分析可视化系统 python爬虫数据分析可视化项目 编程语言:python 涉及技术:flask mysql echarts SnowNlP情感分析 文本分析 系统设计的功能: ①用户注册登录 ②微博数据描述性统计、热词统计、舆情统计 ③微博数…

Python酷库之旅-第三方库Pandas(060)

目录 一、用法精讲 231、pandas.Series.reorder_levels方法 231-1、语法 231-2、参数 231-3、功能 231-4、返回值 231-5、说明 231-6、用法 231-6-1、数据准备 231-6-2、代码示例 231-6-3、结果输出 232、pandas.Series.sort_values方法 232-1、语法 232-2、参数…

springboot的表现层/控制层controller开发

第一步:新建文件和注入业务层对象 需要使用的注解: 第一个声明是restful风格开发 第二个是需要设置网页访问路径 RestController RequestMapping("/fuels")//http://localhost/fuels注入服务层对象: Autowiredprivate FuelServ…

RabbitMQ知识总结(基本概念)

文章收录在网站:http://hardyfish.top/ 文章收录在网站:http://hardyfish.top/ 文章收录在网站:http://hardyfish.top/ 文章收录在网站:http://hardyfish.top/ 基本概念 Producer: 消息的生产者,是一个向…

活动报道 | 盘古信息携IMS OS+小快轻准产品集亮相东莞市中小数转试点供需对接会

8月1日,由东莞市工业和信息化局主办,南城街道经济发展局承办,东莞市软件行业协会协办的东莞市中小企业数字化转型城市试点供需对接会(城区和水乡新城片区)隆重召开。市工业和信息化局副局长江小敏、市工业和信息化局信…

Mybatis超级方便操作数据方式(注解+封装mapper接口)!!!

Mybatis作为一个流行的持久层框架,其优化了Java程序与数据库的交互过程。它的核心在于使用Mapper接口与XML映射文件或注解绑定来实现对数据库的操作。这种方式不仅简化了数据库操作,还提升了开发效率,使得开发者可以从繁琐的JDBC代码中解放出…

MIT-离散数学笔记

离散数学 PropositionEx 1:Ex 2:Ex 3:Ex 4:Ex 5:Ex 6:Ex 7:Ex 8: Proposition In mathematics, we have a mathematical proof is a verification of a proposition by a chain of logical deductions from a set of axioms. 在数学中,数学证明是通过一组公理的一系…

Vmware ubuntu20.04 虚拟文件夹

目录 1.vmware 设置 2.ubuntu设置 1.vmware 设置 设置完成后我们开机 2.ubuntu设置 我们打开终端 输入命令 vmware-hgfsclient可以看到你当前的共享文件 然后我们输入以下命令,用于将共享文件夹挂载到虚拟机中 sudo vmhgfs-fuse .host:/ /mnt -o nonempty -o …

从零开始安装Jupyter Notebook和Jupyter Lab图文教程

前言 随着人工智能热浪(机器学习、深度学习、卷积神经网络、强化学习、AGC以及大语言模型LLM, 真的是一浪又一浪)的兴起,小伙伴们Python学习的热情达到了空前的高度。当我20年前接触Python的时候,做梦也没有想到Python会发展得怎么…

Blackcat V2.2付费会员制WordPress资源站主题

Blackcat-付费会员制WordPress资源站主题,该主题是基于简约实用的主题选项框架 Codestar Framework 进行开发的功能强大的付费会员制主题,该主题尤其适合用于搭建付费下载资源网站,比如素材站、软件站、视频教程站等付费资源下载网站。 集成…

(~_~)

一、用不同url头利用python访问一个网站,并把返回的东西保存为 requests库 主要用于http发送请求和处理响应 1.发送get和post请求 requests.get(目标网址) requests.post(url,data) post于get不同的是get一般用来请求获取数据,而post相当于带着数…

Yearning-MYSQL 审计平台部署

目录 一. 环境准备 二. 部署安装 三. 基础使用 1.用户管理 2. 创建SQL审计流程 3. 自定义审核规则 4. 导入数据源 5. 创建权限组 6. 登录用户申请工单 1. 创建一个DDL工单提交 2. SQL审核执行 3. SQL执行 4. 数据验证 Yearning 是一个开源的 MySQL SQL 审计平台…

动态规划-斐波那契数列

一. 什么是动态规划 dp一般是需要前面状态的值的问题。比如,解决一个问题需要很多步骤,且步骤之间相关联,后一个步骤的推导需要前一个步骤的结论。而我们所做的就是,将这个带求解的问题分成若干步骤,将每个步骤答案保…

python 去除验证码图片噪音

在处理验证码图片时,出现噪音,如横线、像素点等问题往往会影响识别率,这里给出一个去除噪音的方法,仅供学习。 import cv2 import os import numpy as np import copydef del_noise(img, number):height img.shape[0]width img…

JavaScript模块化

JavaScript模块化 一、CommonJS规范1、在node环境下的模块化导入、导出 2、浏览器环境下使用模块化browserify编译js 二、ES6模块化规范1、在浏览器端的定义和使用2、在node环境下简单使用方式一:方式二: 3、导出数据4、导入数据5、数据引用问题 一、Com…

前端:Vue学习 - 智慧商城项目

前端:Vue学习 - 智慧商城项目 1. vue组件库 > vant-ui2. postcss插件 > vw 适配3. 路由配置4. 登录页面静态布局4.1 封装axios实例访问验证码接口4.2 vant 组件 > 轻提示4.3 短信验证倒计时4.4 登录功能4.5 响应拦截器 > 统一处理错误4.6 登录权证信息存…