目录：
（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 {
@Autowired
private 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 "";
}
