组织商品详情页的数据模型
創(chuàng)建FeignClient
我們在learn-goods-web服務中,創(chuàng)建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{ }封裝數(shù)據(jù)模型
我們創(chuàng)建一個GoodsService,在里面來封裝數(shù)據(jù)模型。
這里要查詢的數(shù)據(jù):
-
SPU
-
SpuDetail
-
SKU集合
-
商品分類
-
這里值需要分類的id和name就夠了,因此我們查詢到以后自己需要封裝數(shù)據(jù)
-
-
品牌對象
-
規(guī)格組
-
查詢規(guī)格組的時候,把規(guī)格組下所有的參數(shù)也一并查出,上面提供的接口中已經(jīng)實現(xiàn)該功能,我們直接調(diào)
-
-
sku的特有規(guī)格參數(shù)
有了規(guī)格組,為什么這里還要查詢?
因為在SpuDetail中的SpecialSpec中,是以id作為規(guī)格參數(shù)id作為key,如圖:
但是,在頁面渲染時,需要知道參數(shù)的名稱,如圖:
-
我們就需要把id和name一一對應起來,因此需要額外查詢sku的特有規(guī)格參數(shù),然后變成一個id:name的鍵值對格式。也就是一個Map,方便將來根據(jù)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<>();// 根據(jù)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());// 查詢規(guī)格參數(shù)組List<SpecGroup> groups = this.specificationClient.querySpecGroupByCid(spu.getCid3());// 查詢特殊的規(guī)格參數(shù)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);// 規(guī)格參數(shù)組map.put("groups", groups);// 查詢特殊規(guī)格參數(shù)map.put("paramMap", paramMap);return map;} }然后在controller中把數(shù)據(jù)放入model:
@Controller @RequestMapping("item") public class GoodsController {@Autowiredprivate GoodsService goodsService;/*** 跳轉(zhuǎn)到商品詳情頁* @param model* @param id* @return*/@GetMapping("{id}.html")public String toItemPage(Model model, @PathVariable("id")Long id){// 加載所需的數(shù)據(jù)Map<String, Object> modelMap = this.goodsService.loadModel(id);// 放入模型model.addAllAttributes(modelMap);return "item";} }頁面測試數(shù)據(jù)
我們在頁面中先寫一段JS,把模型中的數(shù)據(jù)取出觀察,看是否成功:
<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>然后查看頁面源碼:
數(shù)據(jù)都成功查到了!
總結
以上是生活随笔為你收集整理的组织商品详情页的数据模型的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 商品微服务添加api接口
- 下一篇: 渲染sku选择