1.分析前端保存商品发布信息的json数据

1.分析commoditylaunch.vue的submitSkus

1.将后面的都注销，只保留查看数据的部分

2.填写基本信息

3.保存信息，得到json

4.使用工具格式化一下

2.使用工具将json转为model

3.根据业务修改vo，放到vo包下

2.保存spu基本信息

1.创建表commodity_spu_info

1.用这个表来存储json的前六条信息

2.sql

use sunliving_commodity;

CREATE TABLE commodity_spu_info
(
    id BIGINT NOT NULL AUTO_INCREMENT COMMENT '商品 id',
    spu_name VARCHAR(200) COMMENT '商品名称',
    spu_description VARCHAR(1000) COMMENT '商品描述',
    catalog_id BIGINT COMMENT '所属分类 id',
    brand_id BIGINT COMMENT '品牌 id',
    weight DECIMAL(18,4),
    publish_status TINYINT COMMENT '上架状态[0 - 下架，1 - 上架]',
    create_time DATETIME,
    update_time DATETIME,
    PRIMARY KEY (id)
)CHARSET=utf8mb4 COMMENT='商品 spu 信息';

SELECT * FROM commodity_spu_info

2.生成基本的CRUD

1.启动项目，访问localhost:81，点击生成

2.将生成的main目录覆盖sunliving-commodity的main目录

3.注释掉SpuInfoController.java中跟shiro相关的

4.重启测试接口

1.访问 http://localhost:5050/api/sunliving-commodity/commodity/spuinfo/list

2.注意，如果提示VO不识别之类的就先刷新maven然后build一下即可

3.完成基本信息的保存

1.后端 sunliving-commodity模块

1.SpuInfoService.java 接受SpuSaveVO，保存到数据库

public interface SpuInfoService extends IService<SpuInfoEntity> {

    PageUtils queryPage(Map<String, Object> params);

    /**
     * 保存 spu 信息
     * @param spuSaveVO
     */
    public void saveSpuInfo(SpuSaveVO spuSaveVO);
}

2.SpuInfoServiceImpl.java 实现方法

    @Override
    public void saveSpuInfo(SpuSaveVO spuSaveVO) {
        // 1.保存spu基本信息到entity，注意vo和entity的属性名必须一致
        SpuInfoEntity spuInfoEntity = new SpuInfoEntity();
        BeanUtils.copyProperties(spuSaveVO, spuInfoEntity);

        // 2.手动设置spu的其他属性
        spuInfoEntity.setCreateTime(new Date());
        spuInfoEntity.setUpdateTime(new Date());

        // 3.保存到数据库
        this.save(spuInfoEntity);
    }

3.SpuInfoController.java 编写保存信息的接口

    /**
     * 保存
     */
    @RequestMapping("/save")
    // @RequiresPermissions("commodity:spuinfo:save")
    public R save(@RequestBody SpuSaveVO spuSaveVO) {
        spuInfoService.saveSpuInfo(spuSaveVO);
        return R.ok();
    }

4.前端 commoditylaunch.vue的submitSkus方法

1.修改url为环境变量+资源路径的方式

2.解掉下面的注释

5.前后端联调

1.前端输入信息

2.后端查看数据库

3.保存spu图片描述url

1.数据库表设计

use sunliving_commodity;

CREATE TABLE commodity_spu_info_desc
(
    spu_id  BIGINT NOT NULL COMMENT '商品 id',
    decript LONGTEXT COMMENT '商品介绍图片',
    PRIMARY KEY (spu_id)
) CHARSET = utf8mb4 COMMENT ='商品 spu 信息介绍';

select * from commodity_spu_info_desc;

2.生成基本CRUD

1.将生成的main目录覆盖sunliving-commodity的main目录

2.注释掉SpuInfoDescController.java的与shiro有关的部分

3.重启测试

3.完成保存spu的图片描述url

1.后端 sunliving-commodity模块

1.将SpuInfoDescEntity.java的id修改为不是自增的

2.修改SpuInfoServiceImpl.java的saveSpuInfo方法即可，注意需要添加@Transactional进行事务管理

    @Transactional // 事务管理
    @Override
    public void saveSpuInfo(SpuSaveVO spuSaveVO) {
        // 1.保存spu基本信息到entity，注意vo和entity的属性名必须一致
        SpuInfoEntity spuInfoEntity = new SpuInfoEntity();
        BeanUtils.copyProperties(spuSaveVO, spuInfoEntity);

        // 2.手动设置spu的其他属性
        spuInfoEntity.setCreateTime(new Date());
        spuInfoEntity.setUpdateTime(new Date());

        // 获取decript信息
        List<String> decript = spuSaveVO.getDecript();
        SpuInfoDescEntity spuInfoDescEntity = new SpuInfoDescEntity();

        // 如果decript为空，则保存默认值，否则保存decript,以逗号分隔
        if (decript != null && !decript.isEmpty()) {
            spuInfoDescEntity.setDecript(String.join(",", decript));
        } else {
            spuInfoDescEntity.setDecript("暂无描述");
        }
        // 设置spuId为刚刚保存的spu的id
        spuInfoDescEntity.setSpuId(spuInfoEntity.getId());

        // 保存spu描述信息
        spuInfoDescService.save(spuInfoDescEntity);

        // 3.将spu的信息保存到数据库
        this.save(spuInfoEntity);
    }

3.前后端联调

1.前端保存信息

2.后端在保存图片描述url的时候发现是空，原因是在将spuInfoEntity的id保存到db之前的确是空的，更改一下执行顺序即可

3.将spuInfoEntity的保存提前

4.再次测试，成功保存信息

4.保存SPU图片集信息

1.数据库表设计

use sunliving_commodity;

CREATE TABLE commodity_spu_images
(
    id          BIGINT NOT NULL AUTO_INCREMENT COMMENT 'id',
    spu_id      BIGINT COMMENT 'spu_id',
    img_name    VARCHAR(200) COMMENT '图片名',
    img_url     VARCHAR(255) COMMENT '图片地址',
    img_sort    INT COMMENT '顺序',
    default_img TINYINT COMMENT '是否默认图',
    PRIMARY KEY (id)
) CHARSET = utf8mb4 COMMENT ='spu 图片集';

SELECT *
FROM commodity_spu_images;

2.生成基本CRUD（不再赘述）

3.完成保存图片集信息

1.后端 sunliving-commodity 模块

1.修改SpuInfoServiceImpl.java的saveSpuInfo即可

    @Transactional // 事务管理
    @Override
    public void saveSpuInfo(SpuSaveVO spuSaveVO) {
        // 1.保存spu基本信息到entity，注意vo和entity的属性名必须一致
        SpuInfoEntity spuInfoEntity = new SpuInfoEntity();
        BeanUtils.copyProperties(spuSaveVO, spuInfoEntity);

        // 2.手动设置spu的其他属性
        spuInfoEntity.setCreateTime(new Date());
        spuInfoEntity.setUpdateTime(new Date());

        // 获取decript信息
        List<String> decript = spuSaveVO.getDecript();
        SpuInfoDescEntity spuInfoDescEntity = new SpuInfoDescEntity();

        // 如果decript为空，则保存默认值，否则保存decript,以逗号分隔
        if (decript != null && !decript.isEmpty()) {
            spuInfoDescEntity.setDecript(String.join(",", decript));
        } else {
            spuInfoDescEntity.setDecript("暂无描述");
        }
        // 将spu的信息保存到数据库
        this.save(spuInfoEntity);

        // 设置spuId为刚刚保存的spu的id
        spuInfoDescEntity.setSpuId(spuInfoEntity.getId());

        // 保存spu描述信息
        spuInfoDescService.save(spuInfoDescEntity);

        // 获取spu的图片信息
        List<String> images = spuSaveVO.getImages();

        // 如果images为空，则保存默认值
        if (images == null || images.isEmpty()) {
            SpuImagesEntity spuImagesEntity = new SpuImagesEntity();
            spuImagesEntity.setSpuId(spuInfoEntity.getId());
            spuImagesEntity.setDefaultImg(0);
            spuImagesEntity.setImgUrl("暂无图片");
            spuImagesEntity.setImgSort(0);
            spuImagesService.save(spuImagesEntity);
        } else {
            // 否则，使用stream api 将图片保存到一个集合，批量保存
            List<SpuImagesEntity> collect = images.stream().map(img -> {
                SpuImagesEntity spuImagesEntity = new SpuImagesEntity();
                spuImagesEntity.setSpuId(spuInfoEntity.getId());
                spuImagesEntity.setDefaultImg(0);
                spuImagesEntity.setImgUrl(img);
                spuImagesEntity.setImgSort(0);
                return spuImagesEntity;
            }).collect(Collectors.toList());

            // 批量保存图片
            spuImagesService.saveBatch(collect);
        }

    }

2.前后端联调

1.前端保存信息

2.后端查看数据库

5.保存SPU的基本属性

1.数据库表创建

use sunliving_commodity;

CREATE TABLE commodity_product_attr_value
(
    id         BIGINT NOT NULL AUTO_INCREMENT COMMENT 'id',
    spu_id     BIGINT COMMENT '商品 id',
    attr_id    BIGINT COMMENT '属性 id',
    attr_name  VARCHAR(200) COMMENT '属性名',
    attr_value VARCHAR(200) COMMENT '属性值',
    attr_sort  INT COMMENT '顺序',
    quick_show TINYINT COMMENT '快速展示【是否展示在介绍上；0-否 1-是】',
    PRIMARY KEY (id)
) CHARSET = utf8mb4 COMMENT ='spu 基本属性值';

select * from commodity_product_attr_value;

2.生成基本CRUD（不再赘述）

3.保存SPU的基本属性

1.后端 sunliving-commodity模块

1.ProductAttrValueService.java 新增方法，批量保存

    /**
     * 批量保存商品属性
     * @param productAttrValueEntities
     */
    void saveProductAttrValue(List<ProductAttrValueEntity> productAttrValueEntities);

2.ProductAttrValueServiceImpl.java 实现方法

    @Override
    public void saveProductAttrValue(List<ProductAttrValueEntity> productAttrValueEntities) {
        this.saveBatch(productAttrValueEntities);
    }

3.修改SpuInfoServiceImpl.java 的saveSpuInfo方法，新增代码

        // 得到spu的基本属性
        List<BaseAttrs> baseAttrs = spuSaveVO.getBaseAttrs();
        // 使用stream api将基本属性保存到数据库
        List<ProductAttrValueEntity> collect = baseAttrs.stream().map(
                baseAttr -> {
                    ProductAttrValueEntity productAttrValueEntity = new ProductAttrValueEntity();
                    productAttrValueEntity.setSpuId(spuInfoEntity.getId());
                    productAttrValueEntity.setAttrId(baseAttr.getAttrId());
                    productAttrValueEntity.setQuickShow(baseAttr.getShowDesc());
                    productAttrValueEntity.setAttrSort(0);
                    productAttrValueEntity.setAttrValue(baseAttr.getAttrValues());
                    // 根据attrId查询attrName并设置
                    productAttrValueEntity.setAttrName(attrService.getById(baseAttr.getAttrId()).getAttrName());
                    return productAttrValueEntity;
                }
        ).collect(Collectors.toList());

        // 批量保存ProductAttrValueEntity
        productAttrValueService.saveProductAttrValue(collect);

2.前后端联调

1.前端保存基本属性

2.后端查看数据库

6.保存SKU的基本信息

1.数据库表设计

use sunliving_commodity;

CREATE TABLE commodity_sku_info
(
    sku_id          BIGINT NOT NULL AUTO_INCREMENT COMMENT 'skuId',
    spu_id          BIGINT COMMENT 'spuId',
    sku_name        VARCHAR(255) COMMENT 'sku 名称',
    sku_desc        VARCHAR(2000) COMMENT 'sku 介绍描述',
    catalog_id      BIGINT COMMENT '所属分类 id',
    brand_id        BIGINT COMMENT '品牌 id',
    sku_default_img VARCHAR(255) COMMENT '默认图片',
    sku_title       VARCHAR(255) COMMENT '标题',
    sku_subtitle    VARCHAR(2000) COMMENT '副标题',
    price           DECIMAL(18, 4) COMMENT '价格',
    sale_count      BIGINT COMMENT '销量',
    PRIMARY KEY (sku_id)
) CHARSET = utf8mb4 COMMENT ='sku 信息';

SELECT *
FROM commodity_sku_info;

2.生成基本CRUD（不再赘述）

3.保存SKU基本信息 sunliving-commodity模块

1.SkuInfoService.java 新增批量添加的方法

    /**
     * 批量添加
     */
    void saveBatch(List<SkuInfoEntity> skuInfoEntities);

2.SkuInfoServiceImpl.java 实现方法

    @Override
    public void saveBatch(List<SkuInfoEntity> skuInfoEntities) {
        this.saveBatch(skuInfoEntities);
    }

3.SpuInfoServiceImpl.java 修改saveSpuInfo方法，新增代码

        // 得到spu的skus信息
        List<Skus> skus = spuSaveVO.getSkus();
        // 使用stream api将skus信息保存到数据库
        List<SkuInfoEntity> skusCollect = skus.stream().map(sku -> {
            SkuInfoEntity skuInfoEntity = new SkuInfoEntity();
            skuInfoEntity.setBrandId(spuInfoEntity.getBrandId());
            skuInfoEntity.setSkuDesc("");
            skuInfoEntity.setSkuName(sku.getSkuName());
            skuInfoEntity.setPrice(sku.getPrice());
            skuInfoEntity.setSpuId(spuInfoEntity.getId());
            // 从images中获取默认图片
            List<Images> skuImages = sku.getImages();
            for (Images image : skuImages) {
                if (image.getDefaultImg() == 1) {
                    skuInfoEntity.setSkuDefaultImg(image.getImgUrl());
                }
                else {
                    skuInfoEntity.setSkuDefaultImg("暂无默认图片");
                }
            }
            skuInfoEntity.setSkuSubtitle(sku.getSkuSubtitle());
            skuInfoEntity.setSkuTitle(sku.getSkuTitle());
            skuInfoEntity.setCatalogId(spuInfoEntity.getCatalogId());
            skuInfoEntity.setSaleCount(0L);
            return skuInfoEntity;
        }).collect(Collectors.toList());
        // 批量保存SkuInfoEntity
        skuInfoService.saveSkuInfoEntitys(skusCollect);

4.前后端联调

1.后端报错，java.lang.StackOverflowError

2.问题分析

• 这里只报了这一个StackOverflowError，没有任何其他的提示信息
• 栈溢出，只可能是无限递归，debug查看数据没问题，在调用saveBatch报错
• 检查一下saveBatch发现，我自定义的名字跟IService接口的saveBatch相同，这样就相当于重写了IService接口中的方法，然后不断递归，所以出现了栈溢出
• 解决方式：修改一下自定义方法的名字即可

3.问题解决

1.修改自定义方法的名字

2.修改SpuInfoServiceImpl.java调用的方法

3.重启测试，保存成功！

7.保存SPU和SKU图片信息

1.数据库表创建

use sunliving_commodity;

CREATE TABLE commodity_sku_images
(
    id          BIGINT NOT NULL AUTO_INCREMENT COMMENT 'id',
    sku_id      BIGINT COMMENT 'sku_id',
    img_url     VARCHAR(255) COMMENT '图片地址',
    img_sort    INT COMMENT '排序',
    default_img INT COMMENT '默认图[0 - 不是默认图，1 - 是默认图]',
    PRIMARY KEY (id)
) CHARSET = utf8mb4 COMMENT ='sku 图片';

SELECT *
FROM commodity_sku_images

2.生成基本CRUD（不再赘述）

3.完成保存SPU和SKU图片信息 sunliving-commodity模块

1.SkuImagesService.java 新增方法，批量保存sku图片

    /**
     * 批量保存 sku 图片
     * @param skuImagesEntity
     */
    void saveSkuImages(List<SkuImagesEntity> skuImagesEntity);

2.SkuImagesServiceImpl.java 实现方法

    @Override
    public void saveSkuImages(List<SkuImagesEntity> skuImagesEntity) {
        this.saveBatch(skuImagesEntity);
    }

3.修改 SpuInfoServiceImpl.java，修改代码

        // 得到spu的skus信息
        List<Skus> skus = spuSaveVO.getSkus();
        // 遍历skus，将sku信息保存到数据库
        skus.forEach(sku -> {
            SkuInfoEntity skuInfoEntity = new SkuInfoEntity();
            skuInfoEntity.setBrandId(spuInfoEntity.getBrandId());
            skuInfoEntity.setSkuDesc("");
            skuInfoEntity.setSkuName(sku.getSkuName());
            skuInfoEntity.setPrice(sku.getPrice());
            skuInfoEntity.setSpuId(spuInfoEntity.getId());
            // 从images中获取默认图片
            List<Images> skuImages = sku.getImages();
            for (Images image : skuImages) {
                if (image.getDefaultImg() == 1) {
                    skuInfoEntity.setSkuDefaultImg(image.getImgUrl());
                }
                else {
                    skuInfoEntity.setSkuDefaultImg("暂无默认图片");
                }
            }
            skuInfoEntity.setSkuSubtitle(sku.getSkuSubtitle());
            skuInfoEntity.setSkuTitle(sku.getSkuTitle());
            skuInfoEntity.setCatalogId(spuInfoEntity.getCatalogId());
            skuInfoEntity.setSaleCount(0L);
            // 将sku信息保存到数据库
            skuInfoService.save(skuInfoEntity);

            // 保存sku的图片信息
            List<SkuImagesEntity> skuImagesEntities = skuImages.stream().map(image -> {
                SkuImagesEntity skuImagesEntity = new SkuImagesEntity();
                skuImagesEntity.setSkuId(skuInfoEntity.getSkuId());
                skuImagesEntity.setDefaultImg(image.getDefaultImg());
                skuImagesEntity.setImgUrl(image.getImgUrl());
                skuImagesEntity.setImgSort(0);
                return skuImagesEntity;
            }).collect(Collectors.toList());
            // 批量保存sku的图片信息
            skuImagesService.saveSkuImages(skuImagesEntities);
        });

4.前后端联调

1.前端保存信息

2.后端测试，发现commodity_sku_images表插入了两条空的字段

3.debug分析

1.第一个sku有两张图片，第二个sku没有图片，在遍历第二个sku时发现，即使第二个没有图片，前端会传一个url为空的数组，包含两个元素

2.在保存sku图片信息的时候，就会将这个图片的信息保存到数据库中

3.解决方式：在保存sku图片信息时加一个过滤即可，把url为空的过滤掉

4.重启测试，再添加一次，没有空值了

8.保存SKU销售属性

1.数据库表设计

use sunliving_commodity;

CREATE TABLE commodity_sku_sale_attr_value
(
    id         BIGINT NOT NULL AUTO_INCREMENT COMMENT 'id',
    sku_id     BIGINT COMMENT 'sku_id',
    attr_id    BIGINT COMMENT 'attr_id',
    attr_name  VARCHAR(200) COMMENT '销售属性名',
    attr_value VARCHAR(200) COMMENT '销售属性值',
    attr_sort  INT COMMENT '顺序',
    PRIMARY KEY (id)
) CHARSET = utf8mb4 COMMENT ='sku 的销售属性/值表';

SELECT *
FROM commodity_sku_sale_attr_value;

2.生成基本CRUD（不再赘述）

3.完成保存SKU销售属性 sunliving-commodity模块

1.SkuSaleAttrValueService.java 新增方法批量保存sku销售属性

    /**
     * 批量保存sku销售属性
     * @param skuSaleAttrValueEntities
     */
    void saveSkuSaleAttrValues(List<SkuSaleAttrValueEntity> skuSaleAttrValueEntities);

2.SkuSaleAttrValueServiceImpl.java 实现方法

    @Override
    public void saveSkuSaleAttrValues(List<SkuSaleAttrValueEntity> skuSaleAttrValueEntities) {
        this.saveBatch(skuSaleAttrValueEntities);
    }

3.SpuInfoServiceImpl.java 新增代码保存sku的销售属性信息

            // 保存sku的销售属性信息
            List<Attr> attr = sku.getAttr();
            List<SkuSaleAttrValueEntity> skuSaleAttrValueEntities = attr.stream().map(a -> {
                SkuSaleAttrValueEntity skuSaleAttrValueEntity = new SkuSaleAttrValueEntity();
                // 将attr的信息拷贝到skuSaleAttrValueEntity
                BeanUtils.copyProperties(a, skuSaleAttrValueEntity);
                skuSaleAttrValueEntity.setSkuId(skuInfoEntity.getSkuId());
                skuSaleAttrValueEntity.setAttrSort(0);
                return skuSaleAttrValueEntity;
            }).collect(Collectors.toList());
            // 批量保存sku的销售属性信息
            skuSaleAttrValueService.saveSkuSaleAttrValues(skuSaleAttrValueEntities);

4.重启测试

9.将vo转化为entity的总结

1.整体的 SpuSaveVO预览

2.转换结构

• 这里由六个基本属性和五个特殊属性来组成一个VO

3.转换规则

• 首先，一定是在Controller层，接收到一个完整的VO
• 将这个VO的基本属性，转换为一个主entity
• 将每个特殊属性再单独转为一个entity，需要与主entity的id关联，当然也可以关联其他属性

4.List类型的特殊属性细节说明

• 关于List类型的特殊属性，有两种选择，一种是将里面的内容，比如是String类型的图片url放到一个entity中使用逗号间隔，第二种是将每一个String都放到一个entity中，都是可以的

5.关于List里面还有多个特殊属性的处理

1.查看这里的 List

2.分析

• 可以看到一个SpuSaveVO中不仅有List类型的Skus，而且每个Skus中还有List类型的Attr
• 虽然看上去复杂，不过确实也复杂。
• 但是，关于List类型的属性，只需要记住一点，遍历出每一个元素，将其转化为entity，这个entity至少需要与上一层的entity的id关联