目录：
（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();
}
- 平台属性处理
<divclass="type-wrap"th:each="baseAttrInfo:${attrsList}"th:unless="${#strings.contains(urlParam, 'props='+baseAttrInfo.attrId)}"> <divclass="fl key"th:text="${baseAttrInfo.attrName}">网络制式</div> <divclass="fl value"> <ulclass="type-list"> <lith:each="attrValue:${baseAttrInfo.attrValueList}"> <ahref=""th:text="${attrValue}">属性值111</a> </li> </ul> </div> <divclass="fl ext"></div> </div>说明：
- 这样平台属性就拼接到url中，并且能保持参数了
- 点击平台属性，改平台属性就不在列表中显示了，控制如下：
th :unless ="${#strings.contains(urlParam, 'props='+baseAttrInfo.attrId)}"
- 品牌显示
<divclass="type-wrap logo"th:if="${searchParam.trademark == null}"> <divclass="fl key brand">品牌</div> <divclass="value logos"> <ulclass="logo-list"> <lith:each="trademark:${trademarkList}"> <ahref=""th:text="${trademark.tmName}">属性值</a> </li> </ul> </div> </div>说明：th :if ="${searchParam.trademark == null}" 控制品牌是否显示
说明：目前页面已经渲染，但是搜索条件我们怎么处理，搜索条件值如何保持等问题还没解决，如图：
说明：所有的搜索条件都拼接到了一个url上面，除分页参数与排序
3、分页处理
<divclass="sui-pagination pagination-large"> <ul> <liclass="prev"th:if="${pageNo != 1}"> <ath:href="${urlParam}+'\&pageNo='+${pageNo - 1}">上一页</a> </li> <liclass="prev disabled"th:if="${pageNo == 1}"> <ahref="javascript:">上一页</a> </li> <lith:each="i : ${#numbers.sequence(1,totalPages)}"th:class="${i == pageNo} ? 'active' : ''"> <ath:href="${urlParam}+'\&pageNo='+${i}"><spanth:text="${i}"></span></a> </li> <liclass="next"th:if="${pageNo \< totalPages}"> <ath:href="${urlParam}+'\&pageNo='+${pageNo + 1}">下一页</a> </li> <liclass="next disabled"th:if="${pageNo == totalPages}"> <ahref="javascript:">下一页</a> </li> </ul> <div><span>共<spanth:text="${totalPages }"></span>页\ </span><span></div> </div>
（4）面包屑处理
ListControllerlist接口：添加
/**
* 处理品牌条件回显
* @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 "";
}
