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 实现方法

    @Overridepublic 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 // 事务管理@Overridepublic 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的idspuInfoDescEntity.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 // 事务管理@Overridepublic 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的idspuInfoDescEntity.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 实现方法

    @Overridepublic 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());// 批量保存ProductAttrValueEntityproductAttrValueService.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 实现方法

    @Overridepublic 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());// 批量保存SkuInfoEntityskuInfoService.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 实现方法

    @Overridepublic 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 实现方法

    @Overridepublic 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的信息拷贝到skuSaleAttrValueEntityBeanUtils.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关联