尚品汇-前端调用搜索实现(三十二)

目录:

(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. 平台属性处理
复制代码
<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>

说明:

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

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

  1. 品牌显示
复制代码
<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>页\&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 "";
}
相关推荐
AustinCyy5 分钟前
【环境配置】Neo4j Community Windows 安装教程
windows·neo4j
小哥山水之间34 分钟前
基于dropbear实现嵌入式系统ssh服务端与客户端完整交互
linux
奇怪的杰哥37 分钟前
Win11 加快软件开机自启动
windows
power 雀儿1 小时前
集群聊天服务器---MySQL数据库的建立
服务器·数据库·mysql
ldj20201 小时前
2025 Centos 安装PostgreSQL
linux·postgresql·centos
cpsvps1 小时前
Windows内核并发优化
windows
翻滚吧键盘1 小时前
opensuse tumbleweed上安装显卡驱动
linux
cui_win2 小时前
【内存】Linux 内核优化实战 - net.ipv4.tcp_tw_reuse
linux·网络·tcp/ip
BD_Marathon3 小时前
Ubuntu:Mysql服务器
服务器·mysql·ubuntu
CodeWithMe5 小时前
【Note】《深入理解Linux内核》 Chapter 15 :深入理解 Linux 页缓存
linux·spring·缓存