創建FeignClient

我們在learn-goods-web服務中，創建FeignClient：

BrandClient：

@FeignClient("item-service") public interface BrandClient extends BrandApi { }

CategoryClient

@FeignClient("item-service") public interface CategoryClient extends CategoryApi { }

GoodsClient:

@FeignClient("item-service") public interface GoodsClient extends GoodsApi { }

SpecificationClient：

@FeignClient(value = "item-service") public interface SpecificationClient extends SpecificationApi{ }

封裝數據模型

我們創建一個GoodsService，在里面來封裝數據模型。

這里要查詢的數據：

• SPU

• SpuDetail

• SKU集合

• 商品分類

  • 這里值需要分類的id和name就夠了，因此我們查詢到以后自己需要封裝數據

• 品牌對象

• 規格組

  • 查詢規格組的時候，把規格組下所有的參數也一并查出，上面提供的接口中已經實現該功能，我們直接調

• sku的特有規格參數

  有了規格組，為什么這里還要查詢？

  因為在SpuDetail中的SpecialSpec中，是以id作為規格參數id作為key，如圖：

但是，在頁面渲染時，需要知道參數的名稱，如圖：

• 我們就需要把id和name一一對應起來，因此需要額外查詢sku的特有規格參數，然后變成一個id:name的鍵值對格式。也就是一個Map，方便將來根據id查找！

?

Service代碼

@Service public class GoodsService {@Autowiredprivate BrandClient brandClient;@Autowiredprivate CategoryClient categoryClient;@Autowiredprivate GoodsClient goodsClient;@Autowiredprivate SpecificationClient specificationClient;public Map<String, Object> loadData(Long spuId){Map<String, Object> map = new HashMap<>();// 根據id查詢spu對象Spu spu = this.goodsClient.querySpuById(spuId);// 查詢spudetailSpuDetail spuDetail = this.goodsClient.querySpuDetailBySpuId(spuId);// 查詢sku集合List<Sku> skus = this.goodsClient.querySkusBySpuId(spuId);// 查詢分類List<Long> cids = Arrays.asList(spu.getCid1(), spu.getCid2(), spu.getCid3());List<String> names = this.categoryClient.queryNamesByIds(cids);List<Map<String, Object>> categories = new ArrayList<>();for (int i = 0; i < cids.size(); i++) {Map<String, Object> categoryMap = new HashMap<>();categoryMap.put("id", cids.get(i));categoryMap.put("name", names.get(i));categories.add(categoryMap);}// 查詢品牌Brand brand = this.brandClient.queryBrandById(spu.getBrandId());// 查詢規格參數組List<SpecGroup> groups = this.specificationClient.querySpecGroupByCid(spu.getCid3());// 查詢特殊的規格參數List<SpecParam> params = this.specificationClient.queryParams(null, spu.getCid3(), null, false);Map<Long, String> paramMap = new HashMap<>();params.forEach(param -> {paramMap.put(param.getId(), param.getName());});// 封裝spumap.put("spu", spu);// 封裝spuDetailmap.put("spuDetail", spuDetail);// 封裝sku集合map.put("skus", skus);// 分類map.put("categories", categories);// 品牌map.put("brand", brand);// 規格參數組map.put("groups", groups);// 查詢特殊規格參數map.put("paramMap", paramMap);return map;} }

然后在controller中把數據放入model：

@Controller @RequestMapping("item") public class GoodsController {@Autowiredprivate GoodsService goodsService;/*** 跳轉到商品詳情頁* @param model* @param id* @return*/@GetMapping("{id}.html")public String toItemPage(Model model, @PathVariable("id")Long id){// 加載所需的數據Map<String, Object> modelMap = this.goodsService.loadModel(id);// 放入模型model.addAllAttributes(modelMap);return "item";} }

頁面測試數據

我們在頁面中先寫一段JS，把模型中的數據取出觀察，看是否成功：

<script th:inline="javascript">const a = /*[[${groups}]]*/ [];const b = /*[[${params}]]*/ [];const c = /*[[${categories}]]*/ [];const d = /*[[${spu}]]*/ {};const e = /*[[${spuDetail}]]*/ {};const f = /*[[${skus}]]*/ [];const g = /*[[${brand}]]*/ {}; </script>

然后查看頁面源碼：

數據都成功查到了！

總結

以上是生活随笔為你收集整理的组织商品详情页的数据模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。