|
【郑州校区】品优购电商系统开发第 10 章 四
5.显示品牌和规格数据
5.1 需求分析
在搜索面板区域显示第一个分类的品牌和规格列表
5.2 后端代码
修改 ItemSearchServiceImpl.java ,增加方法
[mw_shl_code=applescript,true]@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;
}[/mw_shl_code]
Search 方法调用此方法
[mw_shl_code=applescript,true]@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;
}[/mw_shl_code]
5.3 前端代码
5.3.1 获取品牌列表
修改页面 search.html,实现品牌列表
[mw_shl_code=applescript,true]<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>[/mw_shl_code]
5.3.2 获取规格列表
修改页面 search.html,实现规格列表
[mw_shl_code=applescript,true]<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>[/mw_shl_code]
|
|