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

文章目录

  • 一,什么是面包屑导航
    • 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.rhkb.cn/news/401239.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿一网络安全实战演练之利用 REST URL 中的服务器端参数污染

所需知识 要解决这个实验室问题&#xff0c;您需要了解以下内容&#xff1a; 如何确定用户输入是否包含在服务器端的 URL 路径或查询字符串中。如何使用路径遍历序列尝试更改服务器端请求。如何查找 API 文档。 这些内容在我们的 API 测试学院主题中有涵盖。 进入实验室 研…

【Docker安装】Ubuntu系统下离线部署Docker环境教程

【Docker安装】Ubuntu系统下离线部署Docker环境教程 前言一、本次实践介绍1.1 本次实践规划1.2 本次实践简介二、检查本地环境2.1 检查操作系统版本2.2 检查内核版本2.3 更新软件源三、卸载Docker四、下载安装包4.1 创建目录4.2 官网下载五、部署Docker环境5.1 解压安装包5.2 复…

Web Image scr图片从后端API获取基本实现

因系统开发中需求&#xff0c;会有页面显示图片直接从后端获取后显示&#xff0c;代码如下&#xff1a; 后端&#xff1a; /*** 获取图片流* param response* param fileName*/RequestMapping(value"getImgStream",method RequestMethod.GET)public void getImgStr…

Yearning开源SQL审核平台本地Linux系统部署与远程登录语句审核

文章目录 前言1. Linux 部署Yearning2. 本地访问Yearning3. Linux 安装cpolar4. 配置Yearning公网访问地址5. 公网远程访问Yearning管理界面6. 固定Yearning公网地址 前言 本文主要介绍在 Linux 系统简单部署 Yearning 并结合 cpolar 内网穿透工具实现远程访问&#xff0c;破除…

Java基础入门15:算法、正则表达式、异常

算法&#xff08;选择排序、冒泡排序、二分查找&#xff09; 选择排序 每轮选择当前位置&#xff0c;开始找出后面的较小值与该位置交换。 选择排序的关键&#xff1a; 确定总共需要选择几轮&#xff1a;数组的长度-1。 控制每轮从以前位置为基准&#xff0c;与后面元素选择…

Typescript在AI产品中应用越来越广泛

AI产品中的应用 TypeScript 在 AI 产品中的应用逐渐增多&#xff0c;主要得益于其提供的类型安全、面向对象编程和模块化等特性&#xff0c;这些特性使得开发者能够构建可维护、可扩展和高性能的应用程序。 首先&#xff0c;TypeScript 作为 JavaScript 的超集&#xff0c;通…

15.基于session实现登录 前端项目部署

前端项目nginx部署 nginx配置文件 worker_processes 1;events {worker_connections 1024; }http {include mime.types;default_type application/json;sendfile on;keepalive_timeout 65;server {listen 8080;server_name localhost;# 指定前端项目所…

线性DP(动态规划)

文章目录 数字三角形思路代码 最长上升子序列1思路代码 最长公共子序列思路代码 其实和背包一样&#xff0c;都不固定&#xff0c;这种类型的题每一道题都需要自己从之前的经验中去摸索。 数字三角形 题目链接 思路 只能从左上或者右上走过来&#xff0c;用一个二维数组&am…

python-A+B again

[题目描述] 小理有一个非常简单的问题给你&#xff0c;给你两个整数 A 和 B&#xff0c;你的任务是计算 AB。输入格式&#xff1a; 输入共 2∗T1 行。 输入的第一行包含一个整数 T 表示测试实例的个数&#xff0c;然后 2∗T 行&#xff0c;分别表示 A 和 B 两个正整数。注意整数…

计算机网络面试题汇总

文章目录 计算机网络基础计算机网络体系结构(网络分层模型)OSI 七层模型是什么?每一层的作用是什么?TCP/IP 四层模型是什么?每一层的作用是什么?五层体系结构以及对应的协议为什么网络要分层,分层的好处?常见网络协议有哪些,每一层常见协议有哪些?应用层有哪些常见的协…

mysql5.7安装

1.创建一个software文件 2.先下载mysql的repo源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 3安装源包 rpm -ivh mysql-community-release-el7-5.noarch.rpm 可能会报错 改成命令 rpm -ivh mysql-community-release-el7-5.noarch.rpm --nodeps…

目标检测 | yolov6 原理和介绍

前言&#xff1a;目标检测 | yolov5 原理和介绍 后续&#xff1a; 1.简介 YOLOv6是由美团视觉智能部研发的一款目标检测框架&#xff0c;专注于工业应用&#xff0c;致力于提供极致的检测精度和推理效率。相较于YOLOv4和YOLOv5&#xff0c;YOLOv6在网络结构方面进行了深入优化…

在LabVIEW中高效读取大型CSV文件的方法

当尝试使用“读取分隔的电子表格VI”从大型CSV文件&#xff08;数百MB&#xff09;中读取数据时&#xff0c;可能会遇到内存已满错误。这是因为该VI会一次性读取整个文件并将其转换为数值数组&#xff0c;导致占用大量内存。 解决方案 可以使用“从文本文件VI读取”来部分读取…

技术探索之android项目结构

在新建项目时会自动生成很多文件&#xff0c;需要知道项目结构&#xff0c;我们需要编辑的文件的位置&#xff1a; app: 项目的代码资源都在其中&#xff0c;是我们工作的核心目录 build &#xff1a; 编译生成文件。生成的apk就在build/outputs/apk/debug里。apk在虚拟机里就…

MySQL——内置函数

时间函数 select * from msg where date_add(sendtime, interval 2 minute) > now(); 理解&#xff1a; ------------------------------|-----------|-------------|------------------ 初始时间 now() 初始时间2min 字符串 length函数返回字符串长度&#xff0c;以字节为…

【docker】docker数据卷与网络部署服务

Docker 网络模式 选择网络模式 Host Mode (主机模式) 特点: 容器与宿主机共享网络命名空间操作: docker run --nethost ... Container Mode (容器模式) 特点: 容器与指定容器共享网络命名空间操作: docker run --netcontainer:<container-id-or-name> ... None Mode (无…

营业额统计

文章目录 概要整体架构流程技术细节小结 概要 营业额统计是商业活动中一个非常重要的环节&#xff0c;它可以帮助企业了解自身的经营状况&#xff0c;并为决策提供依据。 需求分析以及接口设计 营业额统计是基于折现图来展现&#xff0c;并且按照天来展示的。实际上&#xf…

机器学习(1)--数据可视化

文章目录 数据可视化作用可视化方法实现可视化 总结 数据可视化 数据可视化是将数据以图形、图像、动画等视觉形式表示出来&#xff0c;以便人们能够更直观地理解、分析和交流数据中的信息。 作用 一个整理的好好的数据&#xff0c;我们为什么要将其可视化呢&#xff1f;将它…

苹果macOS 15 Sequoia投屏功能 实现Mac上iPhone桌面管理

8月14日消息&#xff0c;苹果最新的 iOS 18 和 macOS 15 Sequoia 测试版为 iPhone 投屏功能带来了重大更新。用户可以直接在 Mac 上管理 iPhone 桌面。 iPhone 镜像功能 macOS Sequoia最大的更新是带来了iPhone 镜像功能&#xff0c;这个功能能让给 Mac 用户将 iPhone 的屏幕镜…

异质性空间自回归模型 (HSAR)及 Stata 具体操作步骤

目录 一、引言 二、文献综述 三、理论原理 四、实证模型 五、稳健性检验 六、程序代码及解释 七、代码运行结果 一、引言 在空间计量经济学中&#xff0c;异质性空间自回归模型&#xff08;Heterogeneous Spatial Autoregressive Model&#xff0c;HSAR&#xff09;是一种…