基于Vue3 Sku的设计

惊&鸿

关注

最新推荐文章于 2026-08-05 11:50:53 发布 · 2.3k 阅读

原创

本文为博客 VIP 文章，开通 VIP 后可阅读全文

开通 VIP

基于Vue3 Sku的设计

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<