1.SPU和SKU介紹

1.SPU

2.SKU

3.兩者之間的關系

2.完成商品發布界面

1.組件引入

1.commoditylaunch.vue 引入到 src/views/modules/commodity下

2.multiUpload.vue 引入到 src/components/upload/multiUpload.vue

2.創建菜單

1.創建目錄

2.創建菜單，注意菜單路由要匹配

3.重啟前端項目，查看界面

3.選擇分類聯動顯示品牌

1.首先讓分類以樹形菜單的形式顯示

1.修改getCategorys請求的url為環境變量 + 資源路徑

2.訪問測試

2.思路分析

3.后端 sunliving-commodity模塊

1.CategoryBrandRelationService.java 根據分類id獲取關聯的品牌

    /*** 根據分類id獲取關聯的品牌** @param categoryId* @return*/List<BrandEntity> getBrandsByCategoryId(Long categoryId);

2.CategoryBrandRelationServiceImpl.java 實現方法

    @Overridepublic List<BrandEntity> getBrandsByCategoryId(Long categoryId) {// 1.查詢關聯關系表，獲取到品牌idList<CategoryBrandRelationEntity> categoryBrandRelationEntities = categoryBrandRelationDao.selectList(new QueryWrapper<CategoryBrandRelationEntity>().eq("category_id", categoryId));// 2.得到所有的品牌idif (categoryBrandRelationEntities.size() > 0) {List<Long> brandIds = categoryBrandRelationEntities.stream().map(CategoryBrandRelationEntity::getBrandId).collect(Collectors.toList());// 3.查詢品牌表，獲取到品牌信息List<BrandEntity> brandEntities = brandDao.selectBatchIds(brandIds);return brandEntities;}return Collections.emptyList();}

3.CategoryBrandRelationController.java 編寫接口

    /*** 根據categoryId返回關聯的品牌* @param categoryId* @return*/@RequestMapping("/brands/list")public R relationBrandsList(@RequestParam(value = "catId", required = true) Long categoryId) {return R.ok().put("data", categoryBrandRelationService.getBrandsByCategoryId(categoryId));}

4.測試

4.前端 commoditylaunch.vue

1.查看getCatBrands方法，修改請求為環境變量 + 資源路徑的形式

2.測試

4.完成獲取某個分類關聯的所有屬性分組和這些分組關聯的基本屬性，并顯示供發布選擇

1.設計VO類 包含一個屬性組和該屬性組關聯的基本屬性列表

@Data
public class AttrGroupWithAttrsVo {/*** id*/private Long id;/*** 組名*/private String name;/*** 排序*/private Integer sort;/*** 說明*/private String description;/*** 組圖標*/private String icon;/*** 所屬分類 id*/private Long categoryId;/*** 基本屬性列表*/private List<AttrEntity> attrs;
}

2.后端 sunliving-commodity模塊

1.AttrgroupService.java 根據分類id獲取屬性分組以及分組下的屬性

    /*** 根據分類id獲取屬性分組以及分組下的屬性* @param categoryId* @return*/List<AttrGroupWithAttrsVo> getAttrGroupWithAttrsByCategoryId(Long categoryId);

2.AttrgroupServiceImpl.java 實現方法

    @Overridepublic List<AttrGroupWithAttrsVo> getAttrGroupWithAttrsByCategoryId(Long categoryId) {// 1.根據分類id獲取屬性分組的集合List<AttrgroupEntity> AttrgroupList = attrgroupDao.selectList(new QueryWrapper<AttrgroupEntity>().eq("category_id", categoryId));// 2.使用stream api 遍歷屬性分組的集合，調用attrService的getRelationAttr方法，根據屬性分組id獲取屬性的集合if (AttrgroupList.size() > 0) {return AttrgroupList.stream().map(attrgroup -> {// 創建AttrGroupWithAttrsVo對象AttrGroupWithAttrsVo attrGroupWithAttrsVo = new AttrGroupWithAttrsVo();// 設置屬性attrGroupWithAttrsVo.setId(attrgroup.getId());attrGroupWithAttrsVo.setName(attrgroup.getName());attrGroupWithAttrsVo.setSort(attrgroup.getSort());attrGroupWithAttrsVo.setDescription(attrgroup.getDescription());attrGroupWithAttrsVo.setIcon(attrgroup.getIcon());attrGroupWithAttrsVo.setCategoryId(attrgroup.getCategoryId());attrGroupWithAttrsVo.setAttrs(attrService.getRelationAttr(attrgroup.getId()));// 對每一個屬性分組，設置完一個vo對象之后返回，最后組成一個vo對象的集合并返回return attrGroupWithAttrsVo;}).collect(Collectors.toList());}return Collections.emptyList();}

3.前端 commoditylaunch.vue

1.將showBaseAttrs方法的請求改成 環境變量 + 資源路徑的形式

2.后端編寫接口

    /*** 根據分類id獲取屬性分組以及分組下的屬性* @param catalogId* @return*/@RequestMapping("/{catalogId}/withattr")public R getAttrGroupWithAttrsByCatalogId(@PathVariable("catalogId") Long catalogId) {List<AttrGroupWithAttrsVo> attrGroupWithAttrsByCategoryId = attrgroupService.getAttrGroupWithAttrsByCategoryId(catalogId);return R.ok().put("data", attrGroupWithAttrsByCategoryId);}

3.postman測試

4.前端測試，發現item.attrs是空的

5.問題分析

• item表示的是每一個VO，而item.attrs表示的是attrs
• attrs出現空，就說明有的屬性組并沒有關聯的屬性

6.解決方式：讓每一個屬性組都至少有一個關聯的屬性即可

7.再次訪問測試

4.可以看到目前的功能雖然可以正常實現，但是測試數據不是很好，所以重新設置一下數據

1.分類管理

1.以京東的這個頁面為主

2.設計

2.品牌管理

1.主要是小米和華為

2.小米關聯三個分類

3.華為關聯一個

3.屬性分組

1.參考規格與包裝

2.性價比手機分類下有6個屬性分組

4.基本屬性和銷售屬性

1.參考小米手機購買頁面

2.基本屬性

3.銷售屬性

5.對于這些數據的解釋

1.分類管理

有三級分類

2.品牌管理

一個分類可以有多個品牌，一個品牌也可以有多個分類，所以采用關聯表的方式與分類管理進行關聯

3.屬性分組

一個分類可以有多個屬性分組，所以使用外鍵的方式與分類管理進行關聯

4.基本屬性

一個分類可以有多個基本屬性，所以使用外鍵的方式與分類管理進行關聯

一個屬性分組可以有多個基本屬性，為了好擴展還是使用了關聯表的方式與屬性分組進行關聯

這個基本屬性需要放到一個分組里，然后再歸屬于一個分類中

5.銷售屬性

一個分類可以有多個銷售屬性，所以使用外鍵的方式與分類管理進行關聯

這個銷售屬性就相當于在某個分類中不需分組來區分的，通用的屬性

6.表關聯的示意圖

5.完成銷售屬性的顯示

1.前端分析 commoditylaunch.vue

1.修改 commoditylaunch.vue的getShowSaleAttr方法的url為環境變量 + 資源路徑的形式

2.分析url發現前端請求攜帶分類管理的id，要求返回分頁的銷售屬性

2.后端 sunliving-commodity模塊

1.思路分析

2.AttrService.java 銷售屬性分頁查詢，根據分類id

    /*** 銷售屬性分頁查詢，根據分類id* @param params* @param categoryId* @return*/PageUtils queryPageOnSale(Map<String, Object> params, Long categoryId);

3.AttrServiceImpl.java 實現方法

    @Overridepublic PageUtils queryPageOnSale(Map<String, Object> params, Long categoryId) {// 1.獲取關鍵字和分頁參數String key = (String) params.get("key");int currentPage = Integer.parseInt(params.getOrDefault("page", "1").toString());int pageSize = Integer.parseInt(params.getOrDefault("limit", "10").toString());// 2.構建基本查詢條件，根據key進行查詢QueryWrapper<AttrEntity> queryWrapper = new QueryWrapper<>();if (StringUtils.isNotBlank(key)) {queryWrapper.and(wrapper ->wrapper.eq("attr_id", key).or().like("attr_name", key));}// 3.如果有categoryId，附加查詢條件，根據categoryId查詢出對應的銷售屬性if (categoryId != null) {queryWrapper.eq("category_id", categoryId);queryWrapper.eq("attr_type", 0);  // 只包括類型為0的屬性}// 4.執行分頁查詢Page<AttrEntity> page = new Page<>(currentPage, pageSize);IPage<AttrEntity> attrPage = attrDao.selectPage(page, queryWrapper);// 5.使用PageUtils封裝返回結果return new PageUtils(attrPage);}

4.AttrController.java 編寫接口

    @RequestMapping("/sale/list/{categoryId}")public R list(@RequestParam Map<String, Object> params, @PathVariable("categoryId") Long categoryId){PageUtils page = attrService.queryPageOnSale(params, categoryId);return R.ok().put("page", page);}

5.測試

3.前后端聯調

1.前端訪問

2.發現這里應該使用逗號分隔才對，而不是幾個可選項放在一起

1.將這個復選框的分隔方式改成逗號即可

2.基本屬性那里也是要改動一下

3.點擊+自定義還是分號

4.解決方式

1.找到+自定義的輸入框

2.進入這個handleInputConfirm方法，修改分隔符為逗號

6.生成SKU信息（前端完成）

這個SKU信息就是基本屬性+銷售屬性的組合