1.引入前端界面

1.將前端界面放到commodity下

2.創建菜單

3.進入前端項目，使用npm添加依賴

1.根目錄下輸入

npm install --save pubsub-js

2.報錯 chromedriver@2.27.2的問題

3.點擊鏈接下載壓縮包，然后使用下面的命令安裝

npm install chromedriver --chromedriver_filepath=壓縮包路徑\chromedriver_win32.zip

4.再次安裝 pubsub-js 成功

5.在main.js中引入這個組件

4.修改兩個vue文件的路徑為環境變量 + 資源路徑的形式

1.spu.vue

2.spuinfo.vue

5.啟動vue項目

1.報錯，依賴有問題

2.執行 npm i 即可，如果還有問題，有針對的解決

3.此時可以訪問SPU管理頁面

6.遇到依賴問題，進行徹底清理的做法（根目錄下執行命令）

1.清除 npm 緩存

npm cache clean --force

2.刪除 node_modules 文件夾

rm -rf node_modules

3.刪除 package-lock.json 文件

rm package-lock.json

4.運行 npm install

npm install

2.SPU信息分頁查詢

1.前端 spuinfo.vue

1.修改一下分頁信息，然后查看頁面，發現基本分頁已經完成

2.點擊分類發現品牌沒有顯示出來

3.查看請求，發現是404，中間少了一個/，加上就好了

2.分析前端請求

1.點擊查詢，調用searchSpuInfo方法

2.這個方法會向后端發送dataForm的數據

3.全局搜索一下dataForm，可以看到有四個信息

4.打印一下會傳遞什么信息

5.分析得出傳入后端的搜索條件

• 品牌id
• 分類id
• 檢索的key：要求檢索時根據id精準查詢或者根據名稱模糊查詢
• 上架狀態：0：新建，1：上架，2：下架

2.后端 sunliving-commodity模塊

1.SpuInfoService.java 新增方法根據條件查詢分頁列表

    /*** 根據條件查詢分頁列表* @param params* @return*/PageUtils queryPageByCondition(Map<String, Object> params);

2.SpuInfoServiceImpl.java 實現方法

    @Overridepublic PageUtils queryPageByCondition(Map<String, Object> params) {QueryWrapper<SpuInfoEntity> wrapper = new QueryWrapper<>();// 按檢索條件-spu 名字String key = (String) params.get("key");if (!StringUtils.isEmpty(key)) {wrapper.and((w) -> { // 注意這里的 and 會把后面兩個條件括起來w.eq("id", key).or().like("spu_name", key);});}// 加入狀態String status = (String) params.get("status");if (!StringUtils.isEmpty(status)) {wrapper.eq("publish_status", status);}// 加入品牌 idString brandId = (String) params.get("brandId");if (!StringUtils.isEmpty(brandId) && !"0".equalsIgnoreCase(brandId)) {wrapper.eq("brand_id", brandId);}// 加入分類 idString catelogId = (String) params.get("catelogId");if (!StringUtils.isEmpty(catelogId) && !"0".equalsIgnoreCase(catelogId)) {wrapper.eq("catalog_id", catelogId);}// 分頁查詢IPage<SpuInfoEntity> page = this.page(new Query<SpuInfoEntity>().getPage(params), wrapper);return new PageUtils(page);}

3.SpuInfoController.java 調用方法

    /*** 列表*/@RequestMapping("/list")// @RequiresPermissions("commodity:spuinfo:list")public R list(@RequestParam Map<String, Object> params) {PageUtils page = spuInfoService.queryPageByCondition(params);return R.ok().put("page", page);}

3.前后端聯調

1.查詢性價比手機的分類

2.查詢二手手機分類

3.性價比手機的小米品牌

4.新建狀態

5.id為2或者名稱為2的模糊查詢

3.SPU上架和下架

1.前端 spuinfo.vue

1.使用插槽機制獲取當前行的publishStatus，根據這個值來決定上架還是下架

2.上架函數 productUp

3.下架函數 productDown

2.后端 sunliving-commodity模塊

1. SpuInfoService.java 新增上架和下架的方法

    /*** 商品上架* @param spuId*/void productUp(Long spuId);/*** 商品下架* @param spuId*/void productDown(Long spuId);

2.SpuInfoServiceImpl.java 實現方法

    @Overridepublic void productUp(Long spuId) {// 根據id修改publish_status為1SpuInfoEntity spuInfoEntity = new SpuInfoEntity();spuInfoEntity.setId(spuId);spuInfoEntity.setPublishStatus(1);// ，更新update_timespuInfoEntity.setUpdateTime(new Date());this.updateById(spuInfoEntity);}@Overridepublic void productDown(Long spuId) {// 根據id修改publish_status為2SpuInfoEntity spuInfoEntity = new SpuInfoEntity();spuInfoEntity.setId(spuId);spuInfoEntity.setPublishStatus(2);spuInfoEntity.setUpdateTime(new Date());this.updateById(spuInfoEntity);}

3.SpuInfoController.java 編寫接口

    /*** 商品上架* @param spuId* @return*/@RequestMapping("{id}/up")public R productUp(@PathVariable("id") Long spuId) {spuInfoService.productUp(spuId);return R.ok();}/*** 商品下架* @param spuId* @return*/@RequestMapping("{id}/down")public R productDown(@PathVariable("id") Long spuId) {spuInfoService.productDown(spuId);return R.ok();}

3.前后端聯調

1.上架

2.下架