文章目录
- 一,什么是面包屑导航
- 1,京东商城的面包屑
- 2,面包屑是怎么产生的
- 二,面包屑导航的后台实现
这三节的主要内容是开发面包屑的前后端功能。
- 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);}
-
条件检查:
- 首先检查
param.getAttrs()
是否非空且至少有一个元素。如果满足条件,则继续执行后续逻辑;否则,直接退出。
- 首先检查
-
属性处理:
- 使用 Java 8 Stream API 对
param.getAttrs()
中的每个属性进行处理。每个属性被拆分为两部分,假设为"id_value"
形式,其中"id"
是数据库中某个属性的 ID,而"value"
是用户选择的具体值。
- 使用 Java 8 Stream API 对
-
获取属性信息:
- 对于每个属性 ID,通过远程调用
productFeignService.attrInfo
获取详细的属性信息。如果调用成功(返回码为 0),则从响应中提取属性名称;否则,使用原始 ID 作为属性名称。
- 对于每个属性 ID,通过远程调用
-
构建导航对象:
- 创建
SearchResult.NavVo
实例,并设置两个主要字段:navName
: 根据上一步获取的属性名称。navValue
: 用户选择的具体值。
- 创建
-
构建链接:
- 生成一个 URL,该 URL 代表在移除当前筛选条件后的搜索结果页面。通过替换
param.get_queryString()
中与当前属性相关的部分来实现这一点。
- 生成一个 URL,该 URL 代表在移除当前筛选条件后的搜索结果页面。通过替换
-
收集结果:
- 将所有处理过的
SearchResult.NavVo
对象收集到列表collect
中,并将该列表赋值给result.setNavs()
,以便进一步使用或显示。
- 将所有处理过的