目录:
(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>页 </span><span></div>
</div>
</div>
(2)单点登录业务介绍
早期单一服务器,用户认证。
缺点:单点性能压力,无法扩展
分布式,SSO(single sign on)模式
解决 :
用户身份信息独立管理,更好的分布式管理。
可以自己扩展安全策略
跨域不是问题
缺点:
认证服务器访问压力较大。
业务流程图{用户访问业务时,必须登录的流程}{单点登录的过程}