谷粒商城实战笔记-190-192商城业务-检索服务-面包屑导航

这三节的主要内容是开发面包屑的前后端功能。

• 190-商城业务-检索服务-面包屑导航
• 191-商城业务-检索服务-条件删除与URL编码问题
• 192-商城业务-检索服务-条件筛选联动

一，什么是面包屑导航

1，京东商城的面包屑

顶部长条形中一个个条件块就是面包屑，没选择一个下方的属性值，就会在上面生成一个面包屑小块。

2，面包屑是怎么产生的

商城的搜索，可以分为两类：

• 关键词模糊搜索，用户输入关键词，后台在ES中对skuTitle做全文匹配模糊搜索
  

• 根据确定的属性进行检索
  

对于第二类检索，我们可以记住用户选择的每一个属性，并罗列在属性列表的顶部，称之为面包屑，并记住选择当前属性时的完整搜索条件，用户点击面包屑时，发出对应的请求。

关键字搜索的结果如下：

点击了CPU品牌属性后，如下图，出现面包屑。

面包屑导航有两个主要的逻辑：

• 记忆功能，记住当前筛选条件及其之前的筛选条件
• 删除功能，用户点击面包屑，删除当前筛选条件，仅仅删除产生面包屑的那一个条件，然后重新刷新界面

二，面包屑导航的后台实现

如果是前后端分离的项目，面包屑导航由前端实现即可，因为商城是采用模板渲染的方式开发前端，所以面包屑导航的部分逻辑在后端实现。

if (param.getAttrs() != null && param.getAttrs().size() > 0) {
            List<SearchResult.NavVo> collect = param.getAttrs().stream().map(attr -> {
                //1、分析每一个attrs传过来的参数值
                SearchResult.NavVo navVo = new SearchResult.NavVo();
                String[] s = attr.split("_");
                navVo.setNavValue(s[1]);
                R r = productFeignService.attrInfo(Long.parseLong(s[0]));
                if (r.getCode() == 0) {
                    AttrResponseVo data = r.getData("attr", new TypeReference<AttrResponseVo>() {});
                    navVo.setNavName(data.getAttrName());
                } else {
                    navVo.setNavName(s[0]);
                }

                //2、取消了这个面包屑以后，我们要跳转到哪个地方，将请求的地址url里面的当前置空
                //拿到所有的查询条件，去掉当前
                String encode = null;
                try {
                    encode = URLEncoder.encode(attr,"UTF-8");
                    encode.replace("+","%20");  //浏览器对空格的编码和Java不一样，差异化处理
                } catch (UnsupportedEncodingException e) {
                    e.printStackTrace();
                }
                String replace = param.get_queryString().replace("&attrs=" + attr, "");
                navVo.setLink("http://search.gulimall.com/list.html?" + replace);

                return navVo;
            }).collect(Collectors.toList());

            result.setNavs(collect);
        }

1. 条件检查:

   • 首先检查 param.getAttrs() 是否非空且至少有一个元素。如果满足条件，则继续执行后续逻辑；否则，直接退出。

2. 属性处理:

   • 使用 Java 8 Stream API 对 param.getAttrs() 中的每个属性进行处理。每个属性被拆分为两部分，假设为 "id_value" 形式，其中 "id" 是数据库中某个属性的 ID，而 "value" 是用户选择的具体值。

3. 获取属性信息:

   • 对于每个属性 ID，通过远程调用 productFeignService.attrInfo 获取详细的属性信息。如果调用成功（返回码为 0），则从响应中提取属性名称；否则，使用原始 ID 作为属性名称。

4. 构建导航对象:

   • 创建 SearchResult.NavVo 实例，并设置两个主要字段：
     • navName: 根据上一步获取的属性名称。
     • navValue: 用户选择的具体值。

5. 构建链接:

   • 生成一个 URL，该 URL 代表在移除当前筛选条件后的搜索结果页面。通过替换 param.get_queryString() 中与当前属性相关的部分来实现这一点。

6. 收集结果:

   • 将所有处理过的 SearchResult.NavVo 对象收集到列表 collect 中，并将该列表赋值给 result.setNavs()，以便进一步使用或显示。