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

目录：

（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:n
    if (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){
                // 声明一个map
                HashMap<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());
 
    //拼接url
    String 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:desc
        String[] 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());
 
    //拼接url
    String 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>

 

（2）单点登录业务介绍

早期单一服务器，用户认证。

缺点：单点性能压力，无法扩展

分布式，SSO(single sign on)模式

解决 ： 

用户身份信息独立管理，更好的分布式管理。

      可以自己扩展安全策略

      跨域不是问题

缺点：

     认证服务器访问压力较大。

业务流程图{用户访问业务时，必须登录的流程}{单点登录的过程}