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

news2025/1/11 4:54:23

文章目录

  • 一,什么是面包屑导航
    • 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);
        }
  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(),以便进一步使用或显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2040525.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Verilog HDL 入门教程】 —— 学长带你学Verilog(基础篇)

文章目录 一、Verilog HDL 概述1、Verilog HDL 是什么2、Verilog HDL产生的背景3、Verilog HDL 和 VHDL的区别 二、Verilog HDL 基础知识1、Verilog HDL 语言要素1.1、命名规则1.2、注释符1.3、关键字1.4、数值1.4.1、整数及其表示1.4.2、实数及其表示1.4.3、字符串及其表示 2、…

Spire.PDF for .NET【文档操作】演示:检测 PDF 文件是否为 PDF/A

Spire.PDF 为开发人员提供了两种方法来检测 PDF 文件是否为 PDF/A。一种是使用 PdfDocument.Conformance 属性&#xff0c;另一种是使用 PdfDocument.XmpMetaData 属性。以下示例演示了如何使用这两种方法检测 PDF 文件是否为 PDF/A。 Spire.PDF for .NET 是一款独立 PDF 控件…

详细分析JWT的基本知识(附Demo)

目录 前言1. 基本知识2. JWT验证过程3. Demo 前言 对于Java的基本知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项目】实战CRUD的功能整理&#xff08;持续更新&#xff09; 1. 基本知识 紧凑的、U…

机器学习回归分析系列2-二项回归模型

04 二项回归模型 4.1 简介 二项回归模型用于处理二元响应变量&#xff0c;即因变量是0或1的分类变量。最常见的二项回归模型是逻辑回归&#xff0c;它可以用来预测事件发生的概率。 逻辑回归模型假设&#xff1a; 其中&#xff0c;p 是事件发生的概率&#xff0c;x1,x2,…,x…

allegro PCB设计心得笔记(四) -- 显示坐标原点和更改默认产品选项

一、修改坐标原点 Allegro PCB设计过程中&#xff0c;有时需要修改坐标原点&#xff0c;但是PCB文件不显示坐标原点&#xff0c;无法确认已修改的坐标原点是否已经修改好。 显示PCB原点的设置方法如下&#xff1a; Setup -> Design Parameter Editor&#xff0c;如下图所示&…

Kafka系统及其角色

Apache Kafka系统介绍 Apache Kafka 是由 LinkedIn 公司最初开发的一个高性能、分布式的消息传递系统。它被设计为一个可扩展、持久、分布式的流式处理平台&#xff0c;以满足 LinkedIn 在实时数据处理方面的需求 。Kafka 的诞生源于 LinkedIn 需要处理海量数据时现有消息队列系…

深度解析:NPM、PNPM、Yarn 包管理工具的介绍与对比

在前端开发中&#xff0c;包管理工具是不可或缺的一部分&#xff0c;它们帮助我们轻松管理项目依赖、发布和共享代码。NPM、PNPM、Yarn 是目前最流行的包管理工具&#xff0c;但它们各有特点和使用场景。本文将深入解析这三大包管理工具&#xff0c;帮助你选择最适合自己项目的…

嘎嘎嘎拿到去年想要的包

一年多了 继续&#xff0c;把项目收尾吧 好好学前端&#xff0c;外企&#xff01;react&#xff01;从0开始&#xff0c;紧迫&#xff01;加油&#xff01;

react中使用nextjs框架,前端调后端接口跨域解决方式

前端在项目目录中next.config.js文件中添加以下代码 async rewrites() {return [{source: "/api/:path*",destination: ${process.env.NEXT_PUBLIC_API_DOMAIN}/api/:path*,basePath: false}]} 截图&#xff1a; source: "/api/:path*": 定义了一个 URL …

【源码+文档+调试讲解】基于python和协同过滤算法的电影推荐系统

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本基于python和协同过滤算法的电影推荐系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内…

【C++】位运算

目录 位运算概述 位运算常见操作 判断字符是否唯一 算法思路 代码实现 丢失的数字 算法思想 代码实现 两整数之和 算法思路 代码实现 只出现一次的数字 算法思路 代码实现 消失的两个数字 算法思想 代码实现 位运算概述 在计算机中我们知道数据在内存中都是以二…

科创微应用平台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;场地信息管理&#xff0c;场地类型管理&#xff0c;预约参观管理&#xff0c;场地预约管理&#xff0c;活动信息订单&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首…

为具有公网IPV6地址的服务器安装nextcloudAIO并使用NginxProxyManager配置反向代理

软件和硬件环境 ubuntu server 24.04&#xff0c;并已配置好ipv6公网地址&#xff0c;已安装好docker和docker-compose。一块单独的硬盘&#xff0c;用于单独存储nextcloud数据。&#xff08;非必需&#xff09;有一个能够正常解析的域名&#xff0c;并已配置好AAAA记录解析。…

windows下wsl ubuntu 搭建深度学习环境

wsl安装ubuntu 删除之前安装的ubuntu; 查看都安装了哪些版本: wsl -l -v 删除想要删除的版本: wsl --unregister ${名字} 删除之后 ubuntu.exe的安装包还在c盘中, 找到它, 并将 ubuntu.exe的所在文件夹的所有文件都复制到你想要安装的新的路径下, 比如我在E盘新创建一个文…

ARM高性能计算(HPC)处理器Neoverse介绍

思考: Neoverse系列中的N、V、E有什么区别? 这三个字母的缩写又是什么? ARM Neoverse架构是ARM专为服务器、数据中心、高性能计算(HPC)和网络基础设施设计的一系列处理器架构。Neoverse架构分为N系列、V系列和E系列,这些系列面向不同的应用场景,各自有不同的设计目标和…

Hackademic.RTB1靶场实战【超详细】

靶机下载链接&#xff1a;https://download.vulnhub.com/hackademic/Hackademic.RTB1.zip 一、主机探测和端口扫描 nmap 192.168.121.0/24 ip:192.168.121.196 端口:22、80 二、访问80端口 发现target可点击 点击后跳转&#xff0c;页面提示目标是读取到 key.txt 文件 fin…

5.mysql多表查询

MYSQL多表查询 MYSQL多表查询1.多表关系笛卡尔积 2. 多表查询概述2.1 内连接2.2 外连接2.3自连接联合查询union &#xff0c;union all 2.4子查询2.4.1标量子查询2.4.2列子查询2.4.3行子查询2.4.4表子查询 MYSQL多表查询 create table student(id int auto_increment primary …

CMU15445 (Fall 2023) Project2 - EXTENDIBLE HASH INDEX 思路分享

文章目录 Task 1 - Read/Write Page GuardsPageGuard函数实现移动构造函数移动赋值函数UpgradeRead/UpgradeWriteDrop析构函数BufferPoolManager函数实现FetchPageBasicFetchPageRead/FetchPageWriteNewPageGuarded BUG调试 Task2 - Hash Table PageHeader PageDirectory PageB…

uniapp粘贴板地址识别

1&#xff1a; 插件安装 主要是依靠 address-parse 这个插件&#xff1a; 官网 收货地址自动识别 支持pc、h5、微信小程序 - DCloud 插件市场 // 首先需要引入插件 npm install address-parse --save 2&#xff1a;html部分 <view class""><view class&quo…

OSPF进阶

一、LSA详解 Type&#xff1a;LSA的类型&#xff08;1、2、3、4、5、7类&#xff09; link-state-ID&#xff1a;链路状态表示符 ADV router&#xff1a;产生该LSA的路由器 age&#xff1a;老化时间 Metric&#xff1a;开销值&#xff0c;一般都为ADV router到达该路由的开…