尚品汇-前端面包屑平台属性、排序处理（三十三）

（1）面包屑处理平台属性

（2）排序处理

（2）单点登录业务介绍

（1）面包屑处理平台属性

前端显示：面包屑显示效果

搜list搜索方法继续添加返回的平台属性代码：

前台页面数据展示：/*** 处理平台属性条件回显* @param props* @return*/
// 处理平台属性
private List<Map<String, String>> makeProps(String[] props) {List<Map<String, String>> list = new ArrayList<>();// 2:v:nif (props!=null && props.length!=0){for (String prop : props) {//prop  props=23:4G：运行内存  属性id：属性值名称；属性名称   prop.split（“：”）也可以用StringUtils查分String[] split = StringUtils.split(prop, ":");if (split!=null && split.length==3){// 声明一个mapHashMap<String, String> map = new HashMap<String,String>();map.put("attrId",split[0]);map.put("attrValue",split[1]);map.put("attrName",split[2]);list.add(map);}}}return list;
}

@GetMapping("list.html")
public String search(SearchParam searchParam, Model model) {Result<Map> result = listFeignClient.list(searchParam);model.addAllAttributes(result.getData());//拼接urlString urlParam = makeUrlParam(searchParam);//处理品牌条件回显String trademarkParam = this.makeTrademark(searchParam.getTrademark());//处理平台属性条件回显List<Map<String, String>> propsParamList = this.makeProps(searchParam.getProps());model.addAttribute("searchParam",searchParam);model.addAttribute("urlParam",urlParam);model.addAttribute("trademarkParam",trademarkParam);model.addAttribute("propsParamList",propsParamList);return "list/index";
}

页面处理

关键字
<ul class="fl sui-breadcrumb"><li><a href="#">全部结果</a></li><li  class="active"><span th:text="${searchParam.keyword}"></span></li></ul>
品牌处理
<ul class="fl sui-tag"><li th:if="${searchParam.trademark != null}" class="with-x"><span th:text="${trademarkParam}"></span><a th:href="@{${#strings.replace(urlParam,'trademark='+searchParam.trademark,'')}}">×</a></li></ul>
说明：urlParam里面已经包含品牌参数，该链接必须去除该参数，所以我们可以使用thymeleaf 字符串替换函数，把品牌参数替换了就可以了，${#strings.replace(urlParam,'trademark='+searchParam.trademark,'')}平台属性处理
<ul class="fl sui-tag"><li th:if="${searchParam.props != null}" th:each="prop : ${propsParamList}" class="with-x"><span th:text="${prop.attrName}+'：'+${prop.attrValue}"></span><a th:href="@{${#strings.replace(urlParam+'&order='+searchParam.order,'props='+prop.attrId+':'+prop.attrValue+':'+prop.attrName,'')}}">×</a></li></ul>
说明：与品牌一样，替换掉对应的平台属性值即可
${#strings.replace(urlParam,'props='+prop.attrId+':'+prop.attrValue+':'+prop.attrName,'')}

（2）排序处理

ListController

ListController
/*** 处理排序* @param order* @return*/
private Map<String, Object> dealOrder(String order) {Map<String,Object> orderMap = new HashMap<>();if(!StringUtils.isEmpty(order)) {//order=1:descString[] split = StringUtils.split(order, ":");if (split != null && split.length == 2) {// 传递的哪个字段orderMap.put("type", split[0]);// 升序降序orderMap.put("sort", split[1]);}}else {orderMap.put("type", "1");orderMap.put("sort", "asc");}return orderMap;
}

@GetMapping("list.html")
public String search(SearchParam searchParam, Model model) {Result<Map> result = listFeignClient.list(searchParam);model.addAllAttributes(result.getData());//拼接urlString urlParam = makeUrlParam(searchParam);//处理品牌条件回显String trademarkParam = this.makeTrademark(searchParam.getTrademark());//处理平台属性条件回显List<Map<String, String>> propsParamList = this.makeProps(searchParam.getProps());//处理排序Map<String,Object> orderMap = this.dealOrder(searchParam.getOrder());model.addAttribute("searchParam",searchParam);model.addAttribute("urlParam",urlParam);model.addAttribute("trademarkParam",trademarkParam);model.addAttribute("propsParamList",propsParamList);model.addAttribute("orderMap",orderMap);return "list/index";
}

页面
<ul class="sui-nav"><li th:class="${orderMap.type == '1' ? 'active': ''}"><a th:href="${urlParam}+'&order=1:'+${orderMap.sort == 'asc' ? 'desc' : 'asc'}">综合<span th:if="${orderMap.type == '1'}" th:text="${orderMap.sort == 'asc' ? '↑' : '↓'}"></span></a></li><li th:class="${orderMap.type == '2' ? 'active': ''}"><a th:href="${urlParam}+'&order=2:'+${orderMap.sort == 'asc' ? 'desc' : 'asc'}">价格<span th:if="${orderMap.type == '2'}" th:text="${orderMap.sort == 'asc' ? '↑' : '↓'}"></span></a></li><li><a href="#">新品</a></li><li><a href="#">评价</a></li>
</ul>

说明：

1，排序没有拼接到urlParam中，原因：如果拼接会重复出现

2，为了保持排序条件，所以其他所有链接都需加上排序参数

改造其他连接

分页<a th:href="${urlParam}+'&pageNo='+${i}+'&order='+${searchParam.order}"><span th:text="${i}"></span></a>1，平台属性
<a th:href="${urlParam}+'&props='+${baseAttrInfo.attrId}+':'+${attrValue}+':'+${baseAttrInfo.attrName}+'&order='+${searchParam.order}" th:text="${attrValue}" >属性值111</a>
</li>2，品牌
<a th:href="${urlParam}+'&trademark='+${trademark.tmId}+':'+${trademark.tmName}+'&order='+${searchParam.order}" th:text="${trademark.tmName}">属性值111</a>
</li>
3，面包屑
<ul class="fl sui-tag"><li th:if="${searchParam.trademark != null}" class="with-x"><span th:text="${trademarkParam}"></span><a th:href="@{${#strings.replace(urlParam+'&order='+searchParam.order,'trademark='+searchParam.trademark,'')}}">×</a></li><li th:if="${searchParam.props != null}" th:each="prop : ${propsParamList}" class="with-x"><span th:text="${prop.attrName}+'：'+${prop.attrValue}"></span><a th:href="@{${#strings.replace(urlParam+'&order='+searchParam.order,'props='+prop.attrId+':'+prop.attrValue+':'+prop.attrName,'')}}">×</a></li>
</ul>

分页：

 <div class="fr page"><div class="sui-pagination pagination-large"><ul><li class="prev" th:if="${pageNo != 1}"><a th:href="${urlParam}+'&pageNo='+${pageNo - 1}+'&order='+${searchParam.order}">上一页</a></li><li class="prev disabled" th:if="${pageNo == 1}"><a href="javascript:">上一页</a></li><li th:each="i : ${#numbers.sequence(1,totalPages)}" th:class="${i == pageNo } ? 'active' : ''"><a th:href="${urlParam}+'&pageNo='+${i}+'&order='+${searchParam.order}"><span th:text="${i}"></span></a></li><li class="next" th:if="${pageNo < totalPages}"><a th:href="${urlParam}+'&pageNo='+${pageNo + 1}+'&order='+${searchParam.order}">下一页</a></li><li class="next disabled" th:if="${pageNo == totalPages}"><a href="javascript:">下一页</a></li></ul><div><span>共<span th:text="${totalPages }"></span>页&nbsp;</span><span></div></div></div>