基于Vue3 Sku的设计

最新推荐文章于 2025-03-27 23:43:11 发布
原创 最新推荐文章于 2025-03-27 23:43:11 发布 · 2.2k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#sql #数据库 #javascript #前端框架 #vue.js

基于Vue3 Sku的设计

Sku如何进行设计

欢迎各位小伙伴来观看这篇文章！最近做项目需要对sku进行设计并实现，以下是实现的效果。
在这里插入图片描述接下来我们开始吧！！！

数据库的设计

数据库中我们总共有两个表，一个商品表，一个sku表。sql语句

商品表

CREATE TABLE `goods` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(100) DEFAULT NULL,
  `brand` varchar(50) DEFAULT NULL,
  `thumb` varchar(100) DEFAULT NULL,
  `category_id` int(8) DEFAULT NULL,
  `state` tinyint(1) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=36 DEFAULT CHARSET=utf8;

sku表

CREATE TABLE `sku` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `price` int(10) DEFAULT NULL,
  `stock` int(10) DEFAULT NULL,
  `marketPrice` int(10) DEFAULT NULL,
  `costPrice` int(10) DEFAULT NULL,
  `specs` varchar(100) DEFAULT NULL,
  `goods_id` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=37 DEFAULT CHARSET=utf8;

里面的一些数据
商品表的信息
在这里插入图片描述
sku表的信息
在这里插入图片描述
sku的specs字段我的是varchar类型因为我的mysql是5.6版本的，5.7版本及以上可以使用json类型。此处我是按照我的实际情况走的,向sku插入数据时

//item是服务器得到前端传过来的数据
'insert into sku (price,stock,marketPrice,costPrice,specs,goods_id)
 values (?,?,?,?,?,?)',[item.price, item.stock, item.sPrice, item.cPrice, JSON.stringify(item.specs), result.insertId]

以上是对数据库设计的解释，以防小伙伴接下来对拿到的数据不明白。
以上就涉及了两个表，但是我的项目涉及到了其他的数据所以这是按照我的项目拿的数据，但是这个sku的设计就涉及到了上边的两个表

从后端拿数据

接下来是后端给前端的数据。

//利用node搭建的服务器
//在这里后端拿到前端发过来的数据商品id，有关商品某个sku的id.
async function selectGoodsSpecs(ctx) {
   
   
    let id = ctx.query.id
    let sku_id = ctx.query.sku_id
    if (!id || !sku_id) {
   
   
        return ctx.body = {
   
    code: 0, msg: '该商品不存在', data: null }
    }
    // 此处应该加上是否已将上架,此搜索为某个商品的信息
    let [[good]] = await db.query('select * from goods where id=?', [id])
    // 搜索该商品的轮播图的照片
    let [imgs] = await db.query('select * from goods_imgs where goods_id=?', [id])
    let imgsLength = imgs.length
    // 搜索已存在的商品规格组合sku
    let [skusRaw] = await db.query('select * from sku where goods_id=?', [id])
    for (const it of skusRaw) {
   
   
        it.specs = JSON.parse(it.specs)
    }
    // 获取当前的商品规格
    let [[currentSku]] = await db.query('select * from sku where id=?', [sku_id])
    currentSku.specs = JSON.parse(currentSku.specs)
    good.imgs = imgs
    good.imgsLength = imgsLength
    good.skusRaw = skusRaw
    good.currentSku = currentSku
    ctx.body = {
   
    code: 1, msg: '查找成功', data: good }
}

前端拿到的数据是华为电视这个商品的

//id:商品id
//name:商品名字
//brand:品牌
//thumb:封面图
//category_id:分类id
//state:商品状态
//imgs:商品轮播图
//imgsLength:商品轮播图的个数
//skusRaw:该商品目前拥有的规格sku
//currentSku:默认的商品sku
{
   
   
    "id": 35,
    "name": "华为智慧屏 SE 65英寸 畅连通话版 超薄电视 4K超高清智能液晶电视机 HD65DESY 2+16GB 【搭载HarmonyOS 2】  ",
    "brand": "华为",
    "thumb": "2021/11/10/1639137174811华为1.dpg",
    "category_id": 38,
    "state": 1,
    "imgs": [
        {
   
   
            "id": 8,
            "url": "2021/11/10/1639137289124华为1-1.dpg.webp",
            "goods_id": 35
        },
        {
   
   
            "id": 9,
            "url": "2021/11/10/1639137294323华为1-2.dpg.webp",
            "goods_id": 35
        },
        {
   
   
            "id": 10,
            "url": "2021/11/10/1639137299589华为1-3.dpg.webp",
            "goods_id": 35
        },
        {
   
   
            "id": 11,
            "url": "2021/11/10/1639137306225华为1-4.dpg.webp",
            "goods_id": 35
        },
        {
   
   
            "id": 12,
            "url": "2021/11/10/1639137312438华为1-5.dpg.webp",
            "goods_id": 35
        }
    ],
    "imgsLength": 5,
    "skusRaw": [
        {
   
   
            "id": 27,
            "price": 329900,
            "stock": 111,
            "marketPrice": 299900,
            "costPrice": 200000,
            "specs": {
   
   
                "颜色": "红色",
                "运行内存": "4G",
                "存储": "64G"
            },
            "goods_id": 35
        },
        {
   
   
            "id": 28,
            "price": 259900,
            "stock": 222,
            "marketPrice": 199900,
            "costPrice": 149900,
            "specs": {
   
   
                "颜色": "金色",
                "运行内存": "6G",
                "存储": "128G"
            },
            "goods_id": 35
        },
        {
   
   
            "id": 29,
            "price": 269900,
            "stock": 333,
            "marketPrice": 189900,
            "costPrice": 129900,
            "specs": {
   
   
                "颜色": "褐色",
                "运行内存": "4G",
                "存储": "256G"
            },
            "goods_id": 35
        },
        {
   
   
            "id": 30,
            "price": 289500,
            "stock": 4444,
            "marketPrice": 179900,
            "costPrice": 149900,
            "specs": {
   
   
                "颜色": "黑色",
                "运行内存": "4G",
                "存储": "128G"
            },
            "goods_id": 35
        },
        {
   
   
            "id": 31,
            "price": 312600,
            "stock": 555,
            "marketPrice": 159900,
            "costPrice": 148500,
            "specs": {
   
   
                "颜色": "白色",
                "运行内存": "4G",
                "存储": "64G"
            },
            "goods_id": 35
        },
        {
   
   
            "id": 32,
            "price": 245600,
            "stock": 666,
            "marketPrice": 195600,
            "costPrice": 111100,
            "specs": {
   
   
                "颜色": "红色",
                "运行内存": "6G",
                "存储": "128G"
            },
            "goods_id": 35
        },
        {
   
   
            "id": 33,
            "price": 327800,
            "stock": 777,
            "marketPrice": 169800,
            "costPrice": 145800,
            "specs": {
   
   
                "颜色": "金色",
                "运行内存": "8G",
                "存储": "64G"
            },
            "goods_id": 35
        },
        {
   
   
            "id": 34,
            "price": 369900<
最低0.47元/天 解锁文章
vue3 之 商城项目—封装SKU组件
Jasmin博客
02-18 3567
颜色 尺寸 产地都选择了。
Vue3 商品详情多规格 SKU 选择组件实战（含算法、选中样式、价格与库存联动）
最新发布
qq_52915780的博客
09-03 1726
本文基于 Vue3 实战，封装了一个可复用的商品多规格 SKU 选择组件，支持主规格/二级规格选择、选中样式与禁用态控制，并实现价格与库存的实时联动。核心采用“邻接矩阵”算法，仅以有库存的 SKU 组合计算可选项，避免用户选出无货组合；文中给出完整组件代码、、数据格式约定、父组件一行式 initSkuData(product, variants) 接入示例。适合电商详情页、多维规格场景，具备易集成、交互顺滑与可维护性强等优点。
Vue3实现 SKU 规格
weixin_49431241的博客
11-15 974
实现 sku 规格选中
vue3项目中使用sku组件
2301_79568779的博客
03-27 681
sku组件的作用是为了让用户能够选择商品的规格，从而提交购物车，在选择的过程中，组件的选状态要进行更新，组件还要提示用户当前的规格是否禁用，每次选择都要产出对应的sku数据。
Vue3商品SKU多规格编辑组件
luck332的专栏
09-07 2337
SKU（Stock Keeping Unit）定义：SKU即库存量单位，是指宝贝的销售属性集合，供买家在下单时点选，如“规格”、“颜色分类”、“尺码”等。部分SKU的属性值可以由卖家自定义编辑，部分则不可编辑。功能：商品SKU多规格组件允许买家在商品详情页直接查看并选择商品的多种规格，同时展示每种规格对应的库存数量、价格等信息。这有助于买家快速了解商品的各种选项，并做出购买决策。
vue中SKU实现
Wx001214的博客
06-05 835
根据当前状态进行激活或取消激活的逻辑，通过为每个规格项添加的“selected”字段来标识是否激活，同时利用样式处理，通过动态类属性来直观地显示选中状态。：通过遍历规格对象，利用“name”字段与路径字典进行匹配来确定是否禁用，并通过增加“disabled”字段和动态类名来实现显示上的禁用效果。：以已选择项数组中不存在“undefined”来判断用户已选择所有有效规格，然后通过拼接已选数组为路径字典的键来获取相应的 SKU 信息对象。：基于库存情况来确定规格是否禁用，通过生成有效路径字典来简化匹配过程。
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
基于Vue实现电商SKU组合算法问题
10-16
基于Vue实现电商SKU组合算法问题涉及到多个方面，本文将重点探讨以下几个知识点： 1. Vue框架在电商中的应用 Vue是一套构建用户界面的渐进式JavaScript框架，用于构建交互式的Web界面。在电商领域，Vue能够帮助...
sku多属性选择算法-基于vue
07-27
本项目“sku多属性选择算法-基于vue”是针对此类需求的一个解决方案，利用Vue.js这一现代前端框架来实现。Vue.js以其易学易用、组件化的特点，成为构建用户界面的热门工具。 首先，我们要理解SKU多属性选择的核心...
使用Vue实现的一个简易SKU组合查询DEMO
08-09
使用Vue实现的一个简易SKU组合查询DEMO
前端 VUE 实现SKU(商品规格)
slow097的博客
10-28 4283
1.下面是后端返回的数据 2.下面是渲染数据以后传值和调用方法来确定选择的是哪个商品规格以及切换颜色 <div v-for="(item,index) in colorList" :key='index'> <div style="color: white;font-weight: bold;font-size: 20px;margin-top: 20px;" > {{item.label}}
使用vue实现多规格选择实例（SKU）
10-16
主要介绍了使用vue实现多规格选择实例（SKU），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 实现商品多规格的sku
w_minx的博客
10-20 3725
template <div class="wrap wrap-sku"> <div class="product-box"> <div class="product-content"> <div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications"> <p>{{ProductItem.n
vue3使用笛卡尔积算法生成sku表格
weixin_73184582的博客
03-14 1556
通过输入框输入商品规格---通过弹出框表单输入商品规格，这里只是渲染输入的数据而已。商品规格表格数据-------formData是一个提交后台的表单；sku表格里面的sku参数属性，定义sku参数。
vue 实现商品规格选择(sku)
GuAng
12-23 4544
动手之前要先确定自己的商品数据结构，下面是我的商品数据结构 dataInfo: { attr: [ { attr_name: "码数", attr_value: [{attr: "40"}, {attr: "50"}], attr_values: ["40", "50"], }, { attr_name: "颜色",...
vue+element 实现商品sku效果
weixin_30378623的博客
04-18 3328
在网上搜索了很久，没有发现合适sku编辑的文章，只能自己写一个vue+element的sku编辑功能。实现的效果如下图 除成本、售价、库存、货号这几个写死的属性外，可自行添加/删除商品属性，自行添加删除商品sku。 PS：可自行修改这几个属性 话不多说，放码一战： template/html <div id="app"> <el-for...
Vue3中实现电商Sku组件封装
weixin_74457498的博客
10-23 1335
随着 Vue 3 的广泛应用，构建灵活、高效的 SKU 组件变得尤为重要。本文将深入探讨如何在 Vue 3 中封装一个可复用的 SKU 组件，帮助开发者提升用户体验，同时简化产品管理。
vue3 sku组件
04-28
### 创建或使用 Vue3 中的 SKU 选择组件 在 Vue3 开发环境中，SKU（库存单位）组件是一个常见的需求，尤其是在电商平台的应用场景下。以下是关于如何创建和使用的详细介绍。 #### 1. 封装一个可复用的 SKU 组件 为了提高代码的重用性和维护性，在 Vue3 中可以封装一个独立的 SKU 组件。该组件的主要功能包括显示商品规格、处理用户的选择以及返回最终选定的结果。 ##### 数据结构设计 首先定义好 SKU 的数据模型。通常情况下，SKU 数据会包含以下字段： - `specs`: 商品的所有规格选项及其对应的值列表。 - `stock`: 库存数量。 - `price`: 对应的价格信息。 示例数据如下： ```json { "specs": [ { "name": "颜色", "values": ["红色", "蓝色"] }, { "name": "容量", "values": ["64GB", "128GB"] } ], "skuList": [ { "color": "红色", "capacity": "64GB", "price": 999, "stock": 50 }, { "color": "蓝色", "capacity": "128GB", "price": 1199, "stock": 30 } ] } ``` ##### 实现逻辑 利用 Vue3 提供的 Composition API 和响应式特性来实现动态更新的功能[^1]。 ###### (1) 处理默认规格组合 当用户进入页面时，默认会选择某些规格项。可以通过计算属性或者方法获取当前选中的规格组合： ```javascript import { ref, computed } from &#39;vue&#39;; export default { setup(props) { const selectedSpecs = ref({}); // 默认初始化部分规格 props.specs.forEach(spec => { if (!selectedSpecs.value[spec.name]) { selectedSpecs.value[spec.name] = spec.values[0]; } }); // 计算当前选中的规格字符串形式 const currentSelectionString = computed(() => { return Object.entries(selectedSpecs.value).map(([key, value]) => `${key}:${value}`).join(&#39;,&#39;); }); return { selectedSpecs, currentSelectionString }; } }; ``` ###### (2) 动态过滤不可用选项 根据用户的实时选择，隐藏那些无法满足条件的其他规格选项。这一步骤需要用到幂集算法生成可能的子组合，并排除不符合库存约束的情况[^3]。 ```javascript function powerset(array) { return array.reduce( (subsets, value) => subsets.concat(subsets.map(set => [...set, value])), [[]] ); } // 过滤掉无库存的规格组合 const availableOptions = skuList.filter(skuItem => Object.keys(selectedSpecs.value).every(key => skuItem[key] === selectedSpecs.value[key]) ); ``` #### 2. 使用现有的开源解决方案 如果不想从零开始开发 SKU 组件，也可以借助成熟的第三方库。例如提到过的 **diygw-ui-admin** 是一款基于 Vue3 构建的后台管理系统模板，其中已经内置了一个支持多规格编辑的 SKU 组件[^2]。 安装方式： ```bash npm install diygw-ui-admin ``` 引入并注册组件： ```javascript import { SkuSelector } from &#39;diyw-ui-admin&#39;; import &#39;diyw-ui-admin/dist/style.css&#39;; // 加载样式文件 export default { components: { SkuSelector }, data() { return { productData: {} // 初始化商品数据对象 }; } }; ``` 调用实例： ```html <template> <div> <SkuSelector :data="productData" @change="handleSkuChange"></SkuSelector> </div> </template> <script> export default { methods: { handleSkuChange(selectedResult) { console.log(&#39;Selected SKU:&#39;, selectedResult); } } }; </script> ``` --- #### 总结 无论是自行封装还是采用现有工具链，Vue3 都提供了强大的技术支持去完成复杂的交互体验。通过合理规划数据流与视图层绑定关系，能够显著降低开发成本的同时增强系统的灵活性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值