【郑州校区】品优购电商系统开发第 10 章四

【郑州校区】品优购电商系统开发第 10 章四

5.显示品牌和规格数据
5.1 需求分析
在搜索面板区域显示第一个分类的品牌和规格列表

5.2 后端代码
修改 ItemSearchServiceImpl.java ，增加方法

[AppleScript] 纯文本查看 复制代码

@Autowired
private RedisTemplate redisTemplate;
/**
* 查询品牌和规格列表
* @param category 分类名称
* @return
*/
private Map searchBrandAndSpecList(String category){
Map map=new HashMap();
Long typeId = (Long) redisTemplate.boundHashOps("itemCat").get(category);//
获取模板 ID
if(typeId!=null){
//根据模板 ID 查询品牌列表
List brandList = (List)
redisTemplate.boundHashOps("brandList").get(typeId);
map.put("brandList", brandList);//返回值添加品牌列表
//根据模板 ID 查询规格列表
List specList = (List)
redisTemplate.boundHashOps("specList").get(typeId);
map.put("specList", specList);
}
return map;
}

Search 方法调用此方法

[AppleScript] 纯文本查看 复制代码

@Override
public Map<String, Object> search(Map searchMap) {
Map<String,Object> map=new HashMap<>();
//1.按关键字查询（高亮显示）
//2.根据关键字查询商品分类
//3.查询品牌和规格列表
if(categoryList.size()>0){
map.putAll(searchBrandAndSpecList(categoryList.get(0)));
}
return map;
}

5.3 前端代码
5.3.1 获取品牌列表
修改页面 search.html，实现品牌列表

[AppleScript] 纯文本查看 复制代码

<div class="type-wrap logo" ng-if="resultMap.brandList!=null">
<div class="fl key brand">品牌</div>
<div class="value logos">
<ul class="logo-list">
<li ng-repeat="brand in resultMap.brandList">
{{brand.text}}
</li>
</ul>
</div>
<div class="ext">
<a href="javascript:void(0);" class="sui-btn">多选</a>
<a href="javascript:void(0);">更多</a>
</div>
</div>

5.3.2 获取规格列表
修改页面 search.html，实现规格列表

[AppleScript] 纯文本查看 复制代码

<div class="type-wrap" ng-repeat="spec in resultMap.specList">
<div class="fl key">{{spec.text}}</div>
<div class="fl value">
<ul class="type-list">
<li ng-repeat="pojo in spec.options">
<a>{{pojo.optionName}}</a>
</li>
</ul>
</div>
<div class="fl ext"></div>
</div>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】品优购电商系统开发第 10 章 四

1 个回复

【郑州校区】品优购电商系统开发第 10 章四