尚品汇-前端调用搜索实现（三十二）

目录：

（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();
}

1. 平台属性处理

<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>

说明：

1. 这样平台属性就拼接到url中，并且能保持参数了
2. 点击平台属性，改平台属性就不在列表中显示了，控制如下：

th:unless="${#strings.contains(urlParam, 'props='+baseAttrInfo.attrId)}"

1. 品牌显示

<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>页&nbsp;</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 "";
}