目录：
（1）修改web-all模块
（2）配置网关
（3）页面渲染
（4）面包屑处理
（1）修改web-all模块
修改pom.xml文件
<dependencies><dependency><groupId>com.atguigu.gmall</groupId><artifactId>service-item-client</artifactId><version>1.0</version></dependency><dependency><groupId>com.atguigu.gmall</groupId><artifactId>service-product-client</artifactId><version>1.0</version></dependency><dependency><groupId>com.atguigu.gmall</groupId><artifactId>service-list-client</artifactId><version>1.0</version></dependency></dependencies>
创建ListController控制器调用接口
package com.atguigu.gmall.all.controller;
/*** <p>* 产品列表接口* </p>**/
@Controller
public class ListController {@Autowiredprivate ListFeignClient listFeignClient;/*** 列表搜索* @param searchParam* @return*/@GetMapping("list.html")public String search(SearchParam searchParam, Model model) {Result<Map> result = listFeignClient.list(searchParam);model.addAllAttributes(result.getData());return "list/index";}
}
（2）配置网关
（3）页面渲染
页面渲染：1 列表显示
添加url参数
<li class="yui3-u-1-5" th:each="goods: ${goodsList}"><div class="list-wrap"><div class="p-img"><a th:href="@{http://item.gmall.com/{id}.html(id=${goods.id})}" target="_blank"><img th:src="${goods.defaultImg}"/></a></div><div class="price"><strong><em>¥</em><i th:text="${goods.price}">6088.00</i></strong></div><div class="attr"><a th:href="@{http://item.gmall.com/{id}.html(id=${goods.id})}" target="_blank" th:utext="${goods.title}">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a></div><div class="commit"><i class="command">已有<span>2000</span>人评价</i></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered btn-danger">自营</a><a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a></div></div>
</li>
搜索条件处理
根据搜索对象SearchParam拼接url
ListController
@Autowired
private ListFeignClient listFeignClient;
@GetMapping("list.html")
public String search(SearchParam searchParam, Model model){Result<Map> list = listFeignClient.list(searchParam);model.addAllAttributes(list.getData());// 记录拼接url；String urlParam = makeUrlParam(searchParam);model.addAttribute("searchParam",searchParam);model.addAttribute("urlParam",urlParam);return "list/index";
}// 制作返回的url
private String makeUrlParam(SearchParam searchParam) {StringBuilder urlParam = new StringBuilder();// 判断关键字if (searchParam.getKeyword()!=null){urlParam.append("keyword=").append(searchParam.getKeyword());}// 判断一级分类if (searchParam.getCategory1Id()!=null){urlParam.append("category1Id=").append(searchParam.getCategory1Id());}// 判断二级分类if (searchParam.getCategory2Id()!=null){urlParam.append("category2Id=").append(searchParam.getCategory2Id());}// 判断三级分类if (searchParam.getCategory3Id()!=null){urlParam.append("category3Id=").append(searchParam.getCategory3Id());}// 处理品牌if(searchParam.getTrademark()!=null){if (urlParam.length()>0){urlParam.append("&trademark=").append(searchParam.getTrademark());}}// 判断平台属性值if (null != searchParam.getProps()){for (String prop : searchParam.getProps()) {if (urlParam.length() > 0){urlParam.append("&props=").append(prop);}}}return "list.html?" + urlParam.toString();
}
- 平台属性处理
<div class="type-wrap" th:each="baseAttrInfo:${attrsList}" th:unless="${#strings.contains(urlParam, 'props='+baseAttrInfo.attrId)}"><div class="fl key" th:text="${baseAttrInfo.attrName}">网络制式</div><div class="fl value"><ul class="type-list"><li th:each="attrValue:${baseAttrInfo.attrValueList}"><a href="" th:text="${attrValue}" >属性值111</a></li></ul></div><div class="fl ext"></div></div>说明：
- 这样平台属性就拼接到url中，并且能保持参数了
- 点击平台属性，改平台属性就不在列表中显示了，控制如下：
th:unless="${#strings.contains(urlParam, 'props='+baseAttrInfo.attrId)}"
- 品牌显示
<div class="type-wrap logo" th:if="${searchParam.trademark == null}"><div class="fl key brand">品牌</div><div class="value logos"><ul class="logo-list"><li th:each="trademark:${trademarkList}"><a href="" th:text="${trademark.tmName}">属性值</a></li></ul></div> </div>说明：th:if="${searchParam.trademark == null}" 控制品牌是否显示
说明：目前页面已经渲染，但是搜索条件我们怎么处理，搜索条件值如何保持等问题还没解决，如图：
说明：所有的搜索条件都拼接到了一个url上面，除分页参数与排序
3、分页处理
<div class="sui-pagination pagination-large"><ul><li class="prev" th:if="${pageNo != 1}"><a th:href="${urlParam}+'&pageNo='+${pageNo - 1}">上一页</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}"><span th:text="${i}"></span></a></li><li class="next" th:if="${pageNo < totalPages}"><a th:href="${urlParam}+'&pageNo='+${pageNo + 1}">下一页</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>
（4）面包屑处理
ListController
list接口：添加
/*** 处理品牌条件回显* @param trademark* @return*/
private String makeTrademark(String trademark) {if (!StringUtils.isEmpty(trademark)) {String[] split = StringUtils.split(trademark, ":");if (split != null && split.length == 2) {return "品牌：" + split[1];}}return "";
}
